Figma: die magische Kraft des automatischen Layouts

1. EINFÜHRUNG: Okay, Also 20 und weise, es gibt drei wichtige Checkpoints, die ich in meiner Karriere als User Interface Designer bisher begegnet . Die erste war die Einführung der Skizze, eine voll dedizierte richtige Benutzeroberflächen. Ich sagte, die zweite kommt von Figma, einem anderen User Interface Design Tool. Und es gibt eine ganz andere Geschichte darüber, wie ich mich von skizzierten Figma und y bewegte. Aber Nummer drei, der dritte Checkpoint war die Einführung des automatischen Layouts in Figma. Ich liebe Auto Layout nicht nur, weil es bequem ist, sondern weil es eine Menge zusätzliches Gepäck aus dem Kern des Entwurfs einer Benutzeroberfläche entfernt . Und es macht so viel Spielraum für Experimente. Wenn Sie das automatische Layout verwenden, müssen Sie sich keine Gedanken über das Ausrichten und Ändern der Größe machen. Sie müssen sich keine Sorgen machen, um Platz zu schaffen. Wenn Sie etwas in die Mitte Ihres Designs einfügen müssen, müssen Sie sich nicht darum kümmern, Elemente jedes Mal zu dehnen und zu zerquetschen, wenn Sie etwas passen müssen, müssen Sie sich keine Gedanken über konsistente Abstände machen, wenn Sie duplizieren Dinge wie in einer Liste oder etwas, und vieles mehr, die Sie entdecken werden, wenn Sie Auto-Layout in Ihren Workflow übernehmen oder einen Checkout meinen Workflow später im Kurs. Dieser Kurs ist für jeden, der entweder gerade besucht hat gefälschte my.com und erstellt ein neues kostenloses Konto oder ist nicht erfahrener Profi und hat auf dem Zaun über Auto-Layout gewesen oder versucht hat es einmal und gründete ein wenig verwirrend, Weißt du, nur ein wenig schwer, deinen Kopf um ihn zu wickeln. Eine gute Benutzeroberflächen, die Komplexität hinter Einfachheit und dem Auto-Layout-Panel in Figma abstrahiert , ist ein großartiges Beispiel dafür. Es ist ein dünner Streifen etwa 100 Pixel hoch, und es speichert absolute Magie. In der ersten Hälfte des Kurses werden Sie sehen, wie ich die Notwendigkeit für Auto-Layout erklären und Ihnen zeigen, dass es eine sehr grundlegende Verwendung ist. Dann werden wir fortfahren, um inkrementell, inkrementell komplexes Layout zu erstellen. Dabei lernen Sie auch Komponenten, Instanzen und ein wenig über Varianz kennen. Nachdem wir Ihnen alles erzählt haben, was es über das automatische Layout gibt, werden wir direkt in Gewohnheiten springen, reale Projekte, und dann werden wir zusammen relativ komplexe Benutzeroberflächenkomponenten mit Auto Land bauen , gibt es eine Chance, dass Sie vielleicht die ersten beiden Lektionen in dem Kurs finden, über Schaltflächen ist, ein wenig zu einfach. Und diese Lektionen, über die ich in Gruppen und Frames spreche, und der Unterschied zwischen ihnen und wie die Verwendung des automatischen Layouts eine große Verbesserung gegenüber ihnen ist. Wenn Gruppen, Frames und ein wenig über die Grundlagen des automatischen Layouts ist etwas, das Sie bereits vertraut sind. Sie können einfach über die ersten beiden Lektionen mit all dem aus dem Weg gehen, das einzige, was noch zu besprechen ist das Projekt und das Setup, was ich schnell im nächsten Video machen werde. So sehen wir uns dann. 2. Automatische Layout: Okay, das ist also eine Auto-Layout-Komponente , die Sie später in der Klasse erstellen werden. Und ich wähle das aus. Und sobald ich dies auswähle, können Sie rechts sehen, dass es gerade nichts gab, denn sobald ich dies auswähle, können Sie sehen, dass einige Optionen für das automatische Layout herauskommen. Jetzt habe ich ein paar Screenshots aus der Klasse gemacht, die Videos, die wir später mit der alten Antoni Out UI ansehen werden. Und wir werden diesen Screenshot verwenden, diese kleine neue Benutzeroberfläche mit automatischem Layout , die auftaucht, um zwischen dem Update und der Benutzeroberfläche, die zuvor vorhanden war, zu vergleichen und zu kontrastieren . Okay, also lasst uns anfangen. Das Wichtigste, was hier zu beachten ist , ist , dass diese kleinen Ausrichtungen quadratisch sind. Jetzt lernen Sie, wie ich schon sagte, später in der Klasse, was es bedeutet. Was nun in der neuen Benutzeroberfläche passiert, ist, sobald Sie auf etwas klicken, das auf Land angewendet wurde, diese Ausrichtung direkt im Quadrat sehen. Nun, früher in der Benutzeroberfläche , die früher vorhanden war, mussten Sie darauf klicken und dann würden diese Optionen angezeigt. Das ist also der Unterschied, Nummer eins. Das zweite, was zu bemerken ist, ist die Polsterung. In der früheren Benutzeroberfläche gab es früher nur ein kleines Eingabefeld, gab es früher nur ein kleines Eingabefeld um Padding hinzuzufügen, und Sie werden wissen, was Padding ist, wie ich später in der Klasse und jetzt in der neuen Version sagte, anstatt nur eine kleine Art von Eingabefeld, was Sie haben, ist ein wenig vereinfachter Weg. Sie haben Ihr Eingabefeld für das horizontale Auffüllen und Ihr Eingabefeld für vertikale Polster. Und Sie können es auch in unabhängige Polsterungen aufteilen. Polsterung für links, Polsterung für die obere Watte für Rechts und Knopf, was die Dinge tatsächlich ein bisschen sauberer gemacht hat. Die andere wichtige Sache, darauf zu achten , hat sich bewegt. Wenn ich das jetzt auswähle, kannst du sehen, dass du in diesem Bereich direkt hier drüben feste und umarmte Inhalte sehen kannst. All diese Optionen, die als Größenanpassungsbeschränkungen bezeichnet werden, die später in der Klasse wieder erfahren werden. Es wurde hierher verlegt. Während in der vorherigen Benutzeroberfläche alle diese Optionen hier unter einer kleinen Benutzeroberfläche erschienen sind, und jetzt ist sie hier übergegangen. Okay, das ist alles, was wie alle UI-Updates ist. Und jetzt kannst du mit der Klasse fortfahren. Und während ich das spreche, habe ich eine Kleinigkeit vergessen. Früher haben Sie den Abstand zwischen und dem Packen unter dieser Option, wie ich bereits sagte, in der neuen Option finden Sie ihn immer noch unter einer Popup-Option, finden Sie ihn immer noch indem Sie hier klicken. Und Sie können zwischen dem Raum wechseln, zwischen einem Aufprall. Und jetzt weiß ich, dass all diese neuen Optionen, wenn Sie sich noch nie mit dem automatischen Layout beschäftigt haben, all diese für Sie fremd klingen, aber Sie werden diese später in der Klasse verstehen. Und ich habe gerade dieses kleine Video erstellt nur um Ihnen die Updates zu zeigen da es keine grundlegenden Änderungen im automatischen Layout gegeben hat , sondern nur Änderungen an der Benutzeroberfläche. Also hoffe ich, dass du bereit für den Unterricht bist. Und ich schätze, wir sehen uns im nächsten Video. 3. Projekt und Einrichtung: In Ordnung. Es ist an der Zeit, Sie durch die Dateien zu führen, die wir in dieser Klasse verwenden werden und Ihnen auch zeigen, was Sie am Ende dieser Klasse bei Skillshare einreichen werden. Also lasst es uns tun. In den Ressourcen, die Sie herunterladen, finden Sie zwei Figma-Dateien, fertig und Starter. Ich möchte, dass Sie diese beiden Dateien in Ihre Figma laden. Wenn Sie die Figma-Desktop-App genau hier installiert haben, wie ich, und Sie können die Figma-Desktop-App direkt von hier herunterladen. Sie können in der Google Figma Mac App oder Figma Windows App suchen. Wissen Sie, es ist alles das gleiche, dass Sie die App für macOS oder Windows von hier herunterladen können . Wenn Sie die Figma-Desktop-App verwenden, können Sie einfach direkt klicken, auf eine dieser Dateien doppelklicken, um sie in der Figma-App zu öffnen, oder Sie können mit der rechten Maustaste klicken und zu Öffnen mit Einträgen Figma gehen und beide Dateien öffnen. Aber wenn Sie Figma im Browser verwenden, können Sie sich in Ihrem Konto anmelden und ein Figma-Konto zu erstellen, wenn Sie nicht wissen, ist sehr einfach. Alles, was du tun musst, ist auf figma.com zu gehen und auf Anmelden zu klicken. Und der beste Weg ist, sich bei Google anzumelden. Und nach nur zwei oder drei Klicks erhalten Sie so etwas und die gesamte Figma-Benutzeroberfläche. Wenn Sie also in der Browser-Oberfläche sind, wenn Sie sich in der Browser-Oberfläche befinden, können Sie einfach diese beiden Dateien in den Browser ziehen und es wird beide importieren, wissen Sie, in Ihre Figma. Wir werden also warten, bis sie den Import abgeschlossen haben, sortieren beide Dateien, die den Import abgeschlossen haben, und in Ihrer Figma sehen Sie die fertige Datei und die Starterdatei. Sie werden während dieses Kurses in der Starterdatei arbeiten. Und die fertige Datei ist nur für Ihre Referenz oder für den Fall, sagen wir, wir machen etwas zusammen in einem Video und später in einem anderen Video, aber wir brauchen, was wir früher erstellt haben. Aber aus irgendeinem Grund, aus irgendeinem Grund, hast du es nicht zusammen mit mir erschaffen. So können Sie es aus der fertigen Datei abholen, es an einer geeigneten Stelle in den Starter einfügen und mit der Klasse fortfahren. Okay, nun schauen wir uns in die Starterdatei, um sie zu öffnen, und doppelklicken Sie einfach darauf. Das erste, worüber ich in dieser Datei sprechen möchte, ist, dass diese Seite Kacheln und Farben aufruft. Und aus irgendeinem Grund, wenn Sie dies nicht sehen und stellen Sie sicher, dass Sie die Seiten Ansicht erweitern , indem Sie rechts hier klicken, so dass Sie alle Seiten sehen können. Also die Seite, über die ich sprechen möchte, die erste Sache, über die ich sprechen möchte, sprechen über wie Fliesen und Farben. Jetzt, damit wir uns ausschließlich auf das automatische Layout und die UI-Komponenten konzentrieren können, die wir damit machen und sich keine Sorgen über die Farben und welche Schriftgrößen zu verwenden sind. Ich habe bereits alle von ihnen für Sie auf dieser Seite definiert, die Stile und Farben Seite. Und Sie können auch auf der rechten Seite in Figma schauen, wenn nichts ausgewählt ist, alle Stile, die ich für Sie definiert habe. Und wenn es ziemlich einfach ist, globale Stile und Farben zu finden und Figma zu finden, glaube ich, dass Sie bereits wissen, wie das geht, aber für diejenigen von Ihnen, die es nicht tun , hier ist eine kurze Minute unten, wie das zu tun. Nun lassen Sie uns sagen, genau wie diese Farben, wenn ich darauf klicke und irgendwie einen Hex-Code sehe, sehe ich einen benutzerdefinierten Namen, den ich dieser Farbe gegeben habe, sagen wir, wie diese Farben, Ich möchte einen neuen globalen Farbtunnel erstellen, der an beliebiger Stelle in dieser Datei verwendet werden. Um dies zu tun, kann ich einfach R auf meiner Tastatur drücken oder auf das Rechteck-Werkzeug klicken und ein Rechteck beliebiger Größe zeichnen. Und dann gebe ich diesem Rechteck eine zufällige Farbe, richtig? Also lasst uns einfach mit dieser Farbe gehen, okay? Wenn ich nun dieses Rechteck auswähle, können Sie sehen, dass es einen Hex-Code dieser Farbe zeigt , der 362, 565 ist. Nun, wenn ich diese Farbe in einen globalen Stil konvertieren möchte, alles, was ich tun kann, ist auf dieses Symbol hier klicken, das Kachel sagt, und klicken Sie dann auf dieses Plus-Symbol, das Stil erstellen sagt. Und sobald sie darauf klicken, wird es mich bitten, ihm einen Namen zu geben und ich nenne es einfach temporäre Farben, da ich es benutze, um Ihnen zu zeigen, um Ihnen den Prozess zu demonstrieren. Und dann klicke ich auf Stil erstellen. Und sobald ich das getan habe, können Sie sehen, dass Tim Farbe sichtbar wird und globale Stile Panel auf der rechten Seite, wenn nichts ausgewählt ist. Und wenn ich diesen Stil wieder verwenden möchte, ist diese Farbe wieder, alles, was ich tun kann, ist hier klicken und dann wählen Sie Temp Farbe rangiert von hier und es kann verwendet und wiederverwendet werden. Und wenn ich später diese Seite, um den Wert der temporären Farbe zu ändern, indem Sie dies tun, indem Sie darauf klicken, dann auf Einstellungen klicken und dann die Farbe wieder anpassen. Es wird überall in der Datei betroffen sein, wo diese Farbe verwendet wird. Nun ist das der Prozess, um eine globale Kurskachel zu erstellen. Und da dies vorübergehend war und es nicht mehr benötigt, werde ich es aus den Stilen auswählen, wissen Sie, stellen Sie sicher, dass nichts ausgewählt ist und es sichtbar ist. Sie können darauf klicken, mit der rechten Maustaste darauf klicken und dann auf Stil löschen klicken, um es loszuwerden. Und ähnlich, und in ähnlicher Weise, wie wir den Farbstil erstellt haben. Wenn Sie ein Textil wie dieses erstellen möchten, das ich erstellt habe, drücken Sie einfach T auf Ihrer Tastatur, oder Sie können das Textwerkzeug auswählen und etwas zufällig eingeben. Oder du weißt, du kannst etwas eingeben, das nicht zufällig ist, ist mir egal. Und dann können Sie voran gehen und ihm zufällige Schriftart geben. Und im Moment können Sie sehen, wie Tau ist if line, aber das will ich nicht. Ich werde voran gehen und ihm einen zufälligen Font-Stil geben, was immer ich will. Und dann, um es in einen Stil zu einem Textil zu konvertieren, klicke ich erneut auf dieses Symbol, klicke auf Plus, und dann kann ich ihm einen beliebigen Namen geben, den ich will. Ich werde es temporäre Texte geben, Es ist Kachelname und dann kann ich voran gehen und ein Textil erstellen und dann wird es sichtbar sein und dies kann wieder überall in der gesamten Datei verwendet werden. In Ordnung, also lasst uns es loswerden. Und das war dein kurzer Überblick darüber, wie du eine Farbe, einen Stil und ein Textil kreierst . Jetzt, sobald Sie gefolgt sind und die Klasse beenden, werden Sie jetzt am Anfang Ihrer Starterdatei wird leer sein. Jede Seite, die Sie im Wesentlichen leer sein werden. Am Ende dieser Klasse, in Ihrer Starterdatei, haben Sie alle Komponenten der Benutzeroberfläche, die Gefängnis in der fertigen Datei ist. Und als abschließendes Projekt, was Sie tun können, ist das. Sie können eine neue Seite erstellen, indem Sie rechts hier klicken und das endgültige Projekt der Seite benennen, alles in Ordnung, und dann alles, was Sie gemacht haben, können Sie beginnen, sie in Ihre endgültige Projektseite zu sammeln. Und das tun Sie, indem Sie einfach kopieren, indem Sie Befehlstaste oder Steuerelement C drücken und es in das endgültige Projekt einfügen. Also dieses Dropdown-Menü ist etwas, das im dritten Kapitel nach Schaltflächen machen wird, wissen Sie, Sie haben es gerade hier gesammelt, indem Sie Befehl C und Befehl V drücken Nun in ähnlicher Weise kann ich die anderen Dinge bringen, die ich gemacht habe. Und dann, wenn Sie alles zusammengebracht haben, wird Ihre endgültige Projektseite ungefähr so aussehen. Nicht genau so, weil ich es bereits nach meinen Wünschen benutzt habe und Sie es so arrangieren können, wie Sie möchten, aber es wird etwas Ähnliches aussehen. Und das letzte Projekt ist nur eine Mission eines Screenshots, diese Seite. So können Sie einen Screenshot davon machen und es als Klassenprojekt für diese Klasse einreichen. Und auch in den Kommentaren, achten Sie darauf, diesen Link zu kopieren, indem Sie auf Teilen klicken. Und dann können Sie voran gehen und wählen, jeder mit einem Link kann den Link anzeigen und kopieren und ihn als Kommentar an die Einreichung senden, die Sie an diese Klasse machen. Und ja, das war's für dieses Video. Das ist alles, was wir machen werden. Und ich habe Ihnen das Setup gezeigt und ich habe Ihnen auch das Projekt gezeigt , das Sie für diese Klasse einreichen müssen. Und ich sehe dich in der allerersten eigentlichen Lektion dieser Klasse im nächsten Video. Wir sehen uns dann. 4. Eine Kurseinheit in Knöpfen – Teil 1: Ich habe etwas für gut gestaltete Knöpfe. Du bist nicht sehr leicht, richtig zu werden? Aber wenn Sie sie richtig bekommen, indem Sie die Schatten und die Umrisse anpassen und was nicht. Es ist einfach wunderschön. Knöpfe sind auch eine sehr starke Säule der Identität einer Marke. Schauen Sie sich die Schaltflächen von Amazon oder Facebook oder Twitter an und wie sofort erkennbar sie sind. Selbst aus dem Kontext, es kann auf eine Schaltfläche schauen und wie, Ja, das ist Amazon und Facebook. Die einfachste Schaltfläche, die wir machen können, ist nur Klartext. Drücken Sie also entweder T auf der Tastatur oder klicken Sie auf das Textwerkzeug um das Textwerkzeug aufzurufen und klicken Sie auf eine beliebige Stelle auf der Leinwand und Sie können dann mit der Eingabe beginnen. Also lassen Sie genau richtig, ABER AUF einem Knopf. nun daran, im vorherigen Video habe ich die verschiedenen Textilien beschrieben , die ich bereits definiert habe. Also werden wir keine Zeit mit der Auswahl von Schriftarten und Farben verbringen, nicht in diesem Kurs. Ich habe bereits die ganze harte Arbeit für Sie getan, wenn Sie daran interessiert sind , Farben und Schriftarten zu wählen. Nun, um ehrlich zu sein, es ist nur Übung. Aber wenn du willst, dass ich es lehre, weil dir meine Stimme fehlt, dann lass es mich wissen. In Ordnung, mit diesem Punkt können Sie voran gehen und auf ein Textil klicken, das sind die vier kleinen Quadrate, die Sie hier sehen. Wir können darauf klicken und aus allen Stilen wählen, die ich bereits für Sie definiert habe. Also lasst uns vorerst mit Label-Medium gehen. Alles klar, das ist also der Schaltflächenstil. Lassen Sie uns eine Farbe für die Schaltfläche wählen. Auch hier können Sie entweder etwas von hier auswählen oder die Farben verwenden, die ich bereits definiert habe. Für dich. Ich hatte irgendwie einen Schlupf der Zeit dort, aber Sie können die Farbstile wählen und wählen Sie hier blau. In Ordnung, also ist es da. Das ist der einfachste Knopf, den wir haben können. Ziehen wir eine Kopie dieses Textes heraus. Sie können entweder die Option drücken und ziehen, sehen, was passiert, wenn ich die Option drücke, dass es jetzt zwei Fehler gibt, was im Grunde bedeutet, dass, wenn Sie es herausziehen, es wird eine Kopie erstellen, wird eine Kopie von jedem Schritt des Prozesses machen, nur um sehen, wie wir uns weiterentwickeln oder Knopf. Nun, dieser Text hier, um wie ein Knopf auszusehen, braucht eine Basis. Also lasst uns eine Basis zeichnen. Klicken Sie entweder auf das Rechteck-Werkzeug von hier, oder drücken Sie R auf der Tastatur, um das Rechteck-Werkzeug aufzurufen und lassen Sie mich ein Rechteck einfach so herausziehen. Jetzt ist dieses Rechteck visuell über die Schaltflächen-Texte. Deshalb sein Kopf und seine Einsicht. Nun, was ich tun kann, ist entweder einfach ziehen Sie es wie diese Seite des Schlägers nach unten oder verwenden Sie den Tastaturbefehl und eckige Klammern, um seine Reihenfolge zu ändern. Also lasst es uns ganz unten stellen. Da gehst du. Und das nächste, was wir tun werden, ist die Größe ein wenig zu ändern, so dass es mehr wie eine Schaltfläche aussieht. Also ja, da gehen wir. Das sieht ein bisschen wie ein Knopf aus, oder? Alles klar, wir kommen irgendwo hin. Das ist ein guter Ausgangspunkt. Jetzt müssen wir die Farben Bit optimieren, das Brötchen ist ein bisschen hässlich. Wenn Sie damit einverstanden sind. Ich meine, objektiv habe ich einen blauen Text auf einem grauen Hintergrund verknüpft, der wie wirklich hässlich ist. Also lasst uns einfach versuchen, es etwas hübscher aussehen zu lassen. Also das erste, was ich tun werde, ist, den Button Text weiß zu machen. Und die Art und Weise, wie ich das tun werde, ist derzeit es auf blau 0 gesetzt und ich kann auf die Dropdown-Liste drücken, wählen Sie den Weinstil. Da gehst du. Und für die Basis werde ich die Basis blau machen. Wie wär's damit? Das sieht etwas besser aus, nicht wahr? Und das nächste, eine wichtige Sache, die wir tun werden, ist, dass wir ihm eine abgerundete Ecke von sechs geben. Ordnung? Ok. Und als letzten Spritzer Farbe, können Sie voran gehen und tun Dank. Klicken Sie auf die vier Quadrate hier, um einen Stil zu wählen und klicken Sie auf die Schaltfläche Schatten. Dies ist die, das sind die Schatten, die ich für Sie bereits definiert habe , so dass Sie einfach darauf klicken können und es ist flach auf der Schaltfläche einfach so. Und dann bekomme ich es. Das sieht eher wie ein Knopf aus, etwas, das Sie wahrscheinlich in der Produktion verwenden können, aber nicht leise. Hier gibt es einige Bedenken, die wir ansprechen müssen. Also lasst uns weitermachen und das tun. Und bevor wir die Bedenken ansprechen, Lassen Sie uns zunächst sicherstellen, dass die Layer-Namen oder beschreibende, Ordnung, wir generieren ist ehrlich. Vergessen Sie das zu tun und wir wollen nicht Designer wie das für E chaotisch sein. Ordnung, also wähle ich diesen Text hier aus und ich nenne dieses Etikett, also ist es einfacher zu verstehen, okay, als Etikett, und ich wähle die Basis, die rechteckige Basis, und ich werde umbenennen, wenn Sie es erraten. Danke. Alles klar, großartig. Kommen wir nun zu den Bedenken zurück, von denen ich gesprochen habe. Schaltfläche und eine Benutzeroberfläche. In der gesamten Benutzeroberfläche wird eine Schaltfläche an mehreren Orten, Formularen und Karten verwendet, und irgendeine Art von Anmeldeformularen und Preisetiketten, Preisseiten und vieles mehr. Dass der Punkt ist, dass es einfach nicht einen einzigen Ort verwendet, sondern an mehreren Orten verwendet wird. Und das Mindeste, was wir von einem Knopf erwarten können, ist eine einzige Einheit, die nur eine Sache und nicht zwei verschiedene Dinge ist, ein Etikett und eine Basis. Das wollen wir nicht. Wir wollen, dass es eine Einheit ist. Und wie machen wir das zu einer Einheit? Und du hast es richtig erraten? Meine Gruppierung und wie wir sie in Figma zusammenfassen, ist sehr einfach. Wir ziehen nach oben Auswahlen wie motored sie und drücken entweder, entweder war ich im Begriff, direkt unter der Tastenkombination. Sie können entweder voran gehen und mit der rechten Maustaste auf Gruppenauswahl klicken oder einfach Befehl G drücken. Und jetzt ist dies eine einzige Einheit. Wie cool ist das? Richtig? Das ist eine Einheit. Und wenn Sie in das Ebenenbedienfeld schauen, gibt es diese Gruppe eins und diese beiden rezitieren darunter. Also, was wir jetzt tun können, ist diese Gruppe umbenennen und hassen. Wir haben unsere zweite Schaltfläche erstellt. Der erste war dieser Text und dies als Steuer und gehorcht Auswanderung. Cool ist das, aber es gibt immer noch eine etwas bessere Möglichkeit, diesen Knopf Figma zu machen , der kein separates Basisrechteck benötigt, und das ist durch die Verwendung von Frames. In Ordnung, also lassen Sie uns Ihre Kopie der Schaltflächengruppe zeichnen, die sie neu erstellt. Also gehe ich einfach voran und drücke Option. Ich kann Shift halten, damit es nirgendwohin geht. Es bleibt nur in der Linie und ich ziehe eine Kopie heraus. Jetzt wähle ich die neue Kopie aus, die wir gerade gezogen haben und lassen Sie hier rüber gehen, wo es heißt Gruppe. Nun, was ich tun kann, ist auf das Dropdown-Menü klicken und Frame auswählen, einfach so. Okay, der Inhalt ist in einem Rahmen. Nun, sieh dir den Unterschied an. Sehen Sie sich den Unterschied in den Symbolen im Ebenenbedienfeld an. Schauen Sie, wie eine Gruppe aussieht und Bein, wie die Schaltfläche, die in einem Rahmen, der Blogs ist. Und jetzt ist das nicht der einzige Unterschied. Ich werde dir mehr darüber erzählen, aber ja, der Knopf, der Inhalt ist jetzt in einem Rahmen. Und nur gruppieren Sie Dinge zusammen und wählen Sie dann, wenn Sie Rahmen aus der Dropdown-Liste auswählen, ist nicht die einzige Möglichkeit, die Rahmenauswahl zu wählen. Was Sie eher tun, ist, wenn Sie zwei Dinge zusammen haben, können Sie die Tastenkombination drücken, Befehl, Option G, neu Rahmen zusammen oder klicken Sie mit der rechten Maustaste und klicken Sie auf die Rahmenauswahl. Jetzt weiß ich, an dieser Stelle droop and frame den Tag Sound und die verhalten sich sehr ähnlich zueinander, wenn Sie nicht bewusst sind, die Unterschiede zwischen ihnen, aber halten Sie einfach an, folgen Sie mit und Sie werden den Unterschied kennen. Nun, um damit zu beginnen, haben wir den Inhalt dieser Schaltfläche innerhalb eines Rahmens im Gegensatz zu einer Gruppe. Nun, für die Vorteile der Verwendung eines Rahmens anstelle einer Gruppe numero uno, brauchen wir kein Basisrechteck. Okay, also lasst uns das löschen. Met was, was, was ist passiert? Das brauchen wir nicht, weil wir alle möglichen Eigenschaften wie abgerundete Ecken und Farben und Schatten für den Rahmen selbst anwenden können . Also lasst uns weitermachen und das tun. Denken Sie also daran, die gleichen genauen Effekte in den gleichen genauen Stilen, die auf diese rechteckige Basis angewendet wird, wir gehen voran und machen das gleiche mit dem Frame. Also, um das zu tun, lasst uns zuerst voran gehen und ihm eine Fülle von blauem geben. Cool. Lassen Sie uns voran und wieder gehen, geben Sie die abgerundeten Ecken von sechs. Gehen wir zu Effekten und fügen Schaltflächenschatten hinzu. Wie cool ist das? Wir brauchen nicht einmal eine separate Basis, weil wir dem Rahmen selbst Farben und Effekte hinzufügen konnten, was man einer Gruppe nicht antun kann. Okay, jetzt, als letzte Maßnahme werde ich vorgehen und sicherstellen, dass dieses Etikett innerhalb des Rahmens zentriert ist. Also, wenn ich das Etikett auswähle und ich klicke auf diese ausgerichtet, sehen Sie alle diese Ausrichtungssymbole, die ich vertikal anklicken kann, zentrieren oder horizontalen Ausdehnung um, sorry. Und dann klicke ich, dann klicke ich auf vertikal zentrieren , genau so. Und das Etikett wird sich im Rahmen richtig ausrichten. Jetzt sehen diese beiden Tasten gleich aus und die eine auf der rechten Seite, die mit Rahmen erstellt wird, ist etwas besser als die, die auf der linken Seite ist, die mit Gruppen erstellt wird. Sie kennen auch den Grund, warum dieser etwas besser ist. Alles klar, jetzt gehen wir weiter und versuchen, die Größe zu ändern und zu sehen, was passiert. Beginnen wir mit der Größenänderung der Gruppen-Schaltfläche. Siehst du, wenn ich das mache, okay. Es hat irgendwie seine richtig zurückgetreten, aber nicht so sehr. Und das kann sehr leicht repariert werden. Also werde ich voran gehen und das Etikett auswählen, okay, und dann werde ich es bis zu dieser Ecke strecken und Stressoren in diese Ecke. Und ich werde den Textausrichtungsableiter ändern, okay, und jetzt, wenn ich die Größe ändere, schau es an, passt es richtig an, wie eine Schaltfläche sollte die Größe ändern. Großartig, gut. Jetzt gehen wir auf die Frame-Schaltfläche und lassen Sie mich versuchen, sie zu ändern und Sie sagen, dass überhaupt nichts passiert. Ok? Jetzt, Frames und Figma kommt es mit der Option, Größenbeschränkungen zu setzen. Sie können alle Elemente innerhalb eines Rahmens auswählen und festlegen, wie sie sich verhalten, wenn die Größe des Rahmens geändert wird. Wenn ich die Beschriftung wie folgt auswähle, beachten Sie, dass das Abhängigkeitenfeld auf, sorry, das auf der rechten Seite angezeigt wird. Und es tut nicht, wenn ich etwas auswähle, das innerhalb der Gruppe ist, sagen Sie, dass es nicht da ist. Aber wenn ich etwas innerhalb des Rahmens auswähle, wird ein Abhängigkeitsfeld angezeigt. Jetzt wird dieses Constraints Panel wirklich wichtig sein. Also lassen Sie uns voran und verbringen einige Zeit mit diesem Abschnitt der Segmente UI. Standardmäßig heißt es, dass, wenn die Größe des Rahmens geändert wird, die Beschriftung links und oben beibehalten wird. Diese zwei gepunkteten Linien hier von links und von oben. Dies bedeutet, dass, wenn die Größe des Rahmens figma geändert wird, wir halten diese Abstände von links und von oben. Nun, das Verhalten, das wir wollen, ist, dass, wenn der Rahmen geändert wird, dass Etiketten in der Mitte bleiben sollten, okay, Jetzt gibt es zwei Richtungen, in denen Sie alles horizontal und vertikal ändern dass Etiketten in der Mitte bleiben sollten, okay, können. Und jetzt bedeutet das, was diese Symbole hier bedeuten. Sieh dir die an, sieh dir die hier an. Nun ist das, was bedeutet, dass, wenn der Rahmen horizontal geändert wird, Very sollte das Etikett bleiben? Und wenn der Rahmen vertikal geändert wird, zeigte sehr die Etiketten bleiben. Jetzt in unserem Fall, da dies ein Etikett innerhalb der Schaltfläche ist, sollte es in der Mitte der Schaltfläche bleiben. Also werde ich voran gehen und die Größe dieses Rahmens wieder auf diese normale Tastenbreite ändern. Und ich werde die Schaltflächenbeschriftung erneut auswählen. Und für die horizontale Dehnung, für die horizontale Größenänderung, werde ich Figma sagen, die Tastenbeschriftung in der Mitte zu halten. Sehen Sie nun, wie sich die gepunkteten Linien geändert haben. Sie sind so klein, sie sind sehr, sehr, sehr dunkel. Vielleicht sind Sie nicht in der Lage, das zu sehen, aber es gibt diese beiden Linien mit einem kleinen Kreuz, was anzeigt, dass die Tastenbeschriftung immer in der Mitte bleibt. Also lasst uns voran gehen und überprüfen, ob es funktioniert hat. Ich klicke auf die Schaltfläche, die mit dem Rahmen erstellt wird, und ändere die Größe. Jedes Ja, es gehorcht den Größenänderungsbeschränkungen, die wir festgelegt haben. Alles klar, großartig. Jetzt gibt es niemanden in seinem rechten Kopf, der die Größe einer Schaltfläche vertikal ändern würde. Aber nur um es willen, lasst uns auf das Etikett klicken. Und selbst wenn es im Moment vertikal skaliert wird, ist es oben, schauen Sie nach oben, was bedeutet, dass es das als ein Sinn beibehalten wird , aber das ist nicht das, was wir wollen. Wir wollen, dass es auch zentriert ist. Also wähle ich das Zentrum für die horizontale und vertikale Größenänderung aus und schau dir an, was passiert ist, dass es in der Mitte bleibt. Ist das nicht wunderschön? Wenn Sie völlig neu sind, herauszufinden, sind dies die Dinge , von denen Sie wahrscheinlich bereits wussten. Aber wie auch immer, nichts falsch mit einer kurzen Auffrischung wie dort. Lassen Sie uns den Text und die Wissenschaftler Taste ändern. Lasst uns das Etikett ändern. Natürlich, kein Knopf, das echte Leben hat nur einen Knopf darüber geschrieben. Es könnte so etwas sein wie, sagen wir, klicken Sie, um dieses zu kaufen oder herunterzuladen und es zu spielen. Sie sehen, dass der Rahmen der Schaltfläche keinen Respekt für den Inhalt hat, der sich darin befindet. Ok? Und was wir tun können ist, wissen Sie, wenn wir die Länge ändern, änderte sich unser Genesungslabel und die Länge ändert sich. Wir können voran gehen und wieder Sie jetzt nur, um vielleicht ziehen Sie die Knöpfe ein wenig gestreckt und dann können wir das tun. Dann wieder. Es tut mir leid. Tu oh, na ja, da ja. Führen Sie diese Linie in die Mitte und dann wieder zurücktritt. Sind und wenn wir gehen und machen es zu klein, es verschwindet. Weißt du, die Sache ist, dass wir den Text, der innerhalb der Schaltfläche sein wird, nicht antizipieren können, die Länge des Etiketts, das ist. Also jedes Mal, wenn es aktualisiert wird und wir haben, um die Tasten zu ziehen und zu drücken, um sie fit zu machen. Das tun sie nicht. Und hören Sie mir genau zu. Die Größe der Schaltflächen wird nicht automatisch geändert. Schwerpunkt auf ADL. Genau hier kommt das automatische Layout ins Spiel. Ordnung, im nächsten Video machen wir den letzten Knopf. Jetzt haben wir einen normalen Text-Button gemacht, wir haben eine Gruppen-Schaltfläche gemacht, wir haben einen Frame Button gemacht. Und wir wissen, dass jeder von ihnen besser ist als der andere. Und jetzt stoßen wir auf das Problem, wo wir nicht können, können wir nicht erwarten, dass die Größe des Rahmens basierend auf dem Inhalt geändert wird. Wir können nicht erwarten, dass die Größe automatisch basierend auf dem Inhalt geändert wird. Und jetzt hast du schon die Idee, wohin ich damit hingehe. Also werde ich Sie im nächsten Video sehen, wo wir eine automatische Größenänderung Taste mit Sigmas Auto-Layout-Funktion machen . In Ordnung, dann sehen wir uns. 5. Eine Kurseinheit in Knöpfen – Teil 2: Willkommen zurück zum zweiten Teil der Gestaltung von Schaltflächen. Alles ist, wie Sie es verlassen haben, wir haben die gleiche Menge an Tasten auf dem Bildschirm und fügen ihre gleichen Besitztümer. Es ist nur, dass der vorherige Führer ein wenig lang wurde und etwas länger als zehn Minuten ist nicht etwas, das ich wirklich so sehr mag. Also entschied ich mich, diese Lektion in zwei Teile zu teilen. Im ersten Teil haben wir eine Reihe von Schaltflächen erstellt. Wir haben all die verschiedenen Wege gesehen, die es gibt. Wir sahen die Kompromisse und sahen die Oberseiten eines Rahmens über, über, über, über Gruppe. Okay, jetzt gehen wir weiter und beginnen mit dieser Lektion. Ich kann jetzt nicht warten, wie wir es bisher getan haben, lasst uns eine Kopie dieser Frame-Schaltfläche schnappen, jetzt werde ich voran gehen und dieses Label umbenennen zurück zu Button nur für nur zu, nur um alles zu behalten bekommt uns. Und weil wir Knopf, Knopf, Knopf Gliedmaßen hier drüben geschrieben haben, und später im Kurs werden wir so etwas haben, wie wo Sie auch immer Text setzen können, auch immer Texaner, wie das Etikett, das Sie wollen. Aber jetzt lassen wir es auf dem Knopf. In Ordnung, also werde ich es einfach wachsen und daneben ziehen , damit sie schön und arrangiert aussehen. Und das nächste, was ich tun werde, ist, gehen Sie weiter und drücken Option und ziehen Sie eine Kopie heraus, wie wir es tun. Jetzt. Wenn ich hier auf diesen Button klicke, den ich gerade herausgezogen habe, beachte diesen kleinen Abschnitt, der hier auf Land gerufen wurde. Siehst du das? Ja. Ja. Richtig. Das war's. Oh, es tut mir leid. Ich bekomme ein wenig, dass ich ein wenig weggenommen werde. Diese winzige kleine Sache, die nur ein paar Pixel hoch ist, ist pure Magie. Okay, jetzt, bist du bereit? Ich werde das ziehen, nur das signierte die Autoplay Ich bin Abschnitt. Bist du bereit? Ich gehe weiter und klicke einfach auf das Plus und boom, das war's. Das war's. Dieser Schaltflächenrahmen befindet sich jetzt im automatischen Layout. Woher weiß ich das? Das ist anders? Wir schauen das Symbol in den Ebenen an. Alles klar, das ist für Gruppenart Frame, und das ist für das automatische Layout. Und nicht nur das, nicht nur dieser Blick auf das, und wenn ich T drücke und ich drinnen bin. Und lassen Sie uns den Inhalt des Labels ändern. Nennen wir es jetzt herunterladen. Und wow, was ist gerade passiert? Halten Sie fest, halten Sie fest. Halten Sie fest und klicken Sie, oh mein Gott. Sie sagen, die Schaltfläche, der Rahmen der Schaltfläche, die Schaltfläche insgesamt, dies ändert sich automatisch basierend auf dem Inhalt, der sich innerhalb des Labels befindet. Und jetzt, ist das nicht cool? Nun, die ganze Aufregung beiseite, ich weiß, ob es das erste Mal ist, dass du das passiert gesehen hast, du willst nicht auf mich hören, einfach nur mit ihm herumspielen und sehen, wie das funktioniert. Aber halten Sie sich an, halten Sie eine Sekunde. Was ich sagen wollte, ist, dass du nicht alle Schritte durchlaufen musst , die ich durchmachen musste. Sie erstellen am Ende eine Schaltfläche und machen eine In-Gruppe, machen einen gerahmten jetzt und dann werde ich ein Layout herausbringen. Sie müssen nicht alle diese Registerkarten durchlaufen, um einen automatischen Layout-Rahmen zu erstellen. Ich werde Ihnen im nächsten Video zeigen und wir werden über Drop-Downs sprechen. Ich zeige Ihnen, wie Sie direkt zum automatischen Layout gehen und ich werde Ihnen die Verknüpfungen zeigen, dass nicht viele Verknüpfungen gibt. Es ist nur eine Pflicht, zu unserem Auto-Layout zu gelangen, und das werde ich Ihnen im nächsten Video zeigen. Aber vorher sollten wir alle verschiedenen Optionen verstehen, die hier angezeigt werden, wenn ein automatisches Layout zu einem Frame hinzugefügt wird. Jetzt stehen diese beiden Pfeile hier für Richtungen. brauchen wir in diesem Video nicht. Also, in Ordnung, wir gehen zum nächsten. Ok. Jetzt reden wir über Dinge, über die wir in diesem Video nicht reden oder brauchen. Aber der nächste ist der Abstand zwischen den Elementen. Nun, das ist Polsterung um Elemente. Wir werden in ein bisschen darüber reden. Und dieser letzte ist Ausrichtung und Polsterung. Wir werden über einige Teile davon in diesem Video sprechen. Alles klar, fangen wir mit Polsterung an. Jetzt. Was genau ist das Schwenken? Stellen Sie sich vor, Sie schicken etwas, ein Paket oder wissen Sie was? Verständiger, stellen Sie sich vor, ein Paket von Amazon oder eine andere Online-E-Commerce-Website zu erhalten . Dies ist kein gesponsertes Video. Ok. Stellen Sie sich also vor, ein Paket zu erhalten, etwas Zerbrechliches, wie ein Glas oder eine Vase oder mein Herz, wenn Sie den Kurs nicht mögen, Es ist einfach nicht direkt, dass die Sache, die Sie erhalten, es ist einfach nicht direkt in eine Pappschachtel, oder? Es gibt einige Polsterungen um den tatsächlichen Artikel, Luftpolsterpackungen oder die Luftkissen oder Zeitung, wissen Sie, was ich meine? Richtig? In UI ist Padding also Leerzeichen um ein Element herum. Dieses Element kann Text oder ein beliebiges Benutzeroberflächenelement überhaupt sein, wie wir später im Beispiel der Schaltfläche sehen werden. Ich schaue mir das genauer an. Nun besteht dieser Button hier im Grunde aus den Texten, also dem Etikett, dem blauen Hintergrund und dem leeren Raum, der um dieses Etikett herum vorhanden ist. Und wie viel Platz auf jeder Seite dieses Etiketts ist, entscheidet die Polsterung. Wenn ich auf das Etikett und halten Option auf meiner Tastatur, Ich kann die Menge an Platz auf jedem der vier Wissenschaft zu sehen. Also oben, rechts, unten, links und die Reihenfolge oben, dann rechts, dann unten links ist unwichtig, damit Sie sie verwenden können. Ich bin dran. Unruhe Zimmer oder Lauder. Ich sage Ihnen in einer Sekunde, warum dieser Befehl zählt. Lassen Sie uns nun mit den Füllwerten herumspielen und sehen, wie es sich auf die Schaltfläche auswirkt. Okay, also. Wenn Sie genau hier gehen, wo es Auto-Lampe steht, können Sie dorthin gehen, wo es sagt gemischt. Und lassen Sie uns einfach 12 eingeben, um nur eine Zahl, die unter 12 ist. Und das, und jetzt, was passiert, ist, wenn ich 12 setze, die Polsterung, der Raum um das Etikett, der Raum, in dem wir uns befinden, das Etikett auf jeder Seite, oben rechts, unten links ist auf 12 gesetzt. Na gut, jetzt versuchen wir etwas anderes. Anstatt 12 zu schreiben, werde ich kommagetrennte Werte schreiben. In Ordnung, also lass mich 12, 13, 14, 15 schreiben. Und hier kommt die Reihenfolge, oben rechts, unten links, ins Spiel. Jetzt übertrieben, 12, 13, 14, 15. Ich werde die Eingabetaste drücken und jetzt sehen Sie sich das an. Die Spitze ist 12, Ryan ist 30, Langeweile, dieser Boden ist 14. Okay, mal sehen. Und auf der linken Seite sind es 15. Das ist also alles, was oben rechts, unten links ist. Und Sie können einen durch Komma getrennten Wert schreiben, um den Abstand oder das Leerzeichen auf jeder Seite anzupassen . Okay, jetzt, das ist keine realistische Füllwerte haben, Lassen Sie uns voran und geben Sie einige gute, realistische Schaltflächenwerte, die Sie wissen,, die die Schulden ausgleichen, schafft eine Art visuelle Balance und die Schaltfläche, Also, was ich tun werde, ist, dass ich die Schaltfläche im Rahmen wieder auswählen und hier reingehe, wo es bleibt und gemischt und gemischt bedeutet im Grunde , dass es nicht den gleichen Wert auf den vier Seiten hat. Also lassen Sie uns voran und setzen 15, vier Top 32 für Rang 15 für Boston Komma 0. Vergessen Sie nicht, die Kommas hinzuzufügen. Und 32 für gelacht. Ich gehe weiter und drücke die Eingabetaste und sieh dir das jetzt an. Alles klar, ich kann auch voran gehen und den Text ändern, der sich in dieser Schaltfläche befindet , sagen wir, Download. Download scheint eine vernünftige Schaltfläche Etikett zu sein. Also dann wieder, schauen Sie sich die Werte, 1532, 1532, oben rangiert, unten links. Alles klar, großartig. Und das war's. Was auch immer Sie schreiben, ist HIV innerhalb der Schaltfläche als Beschriftung, es wird die Füllwerte respektieren und die Schaltfläche, den Rahmen, die Größe entsprechend ändern. Ist das nicht großartig? Jetzt weiß ich, dass das Schreiben einer kommagetrennten Liste von Füllwerten nicht etwas ist, was jeder tun möchte. Ich meine, ich mag es, meine Hände auf der Tastatur zu haben und ich kann den Typ berühren. Aber wenn Sie eher eine visuelle Person sind, können Sie hier auf dieses kleine, letzte Quadrat klicken. Sie können hier klicken, hineingehen und die Füllwerte auf jeder Seite manuell aktualisieren. So wie das. So sieht es aus. Hier ist die Sache. So bist du eigentlich Figma, wenn du so machst wie normale Leute. Aber die Sache, die ich früher erklärt habe, würden die kommagetrennten Werte nur eine Superuser-Sache hoch. Also ja, ja, du tust, was du willst. Sie können hineingehen und die Füllwerte von hier aus anpassen. Alles klar, okay, cool. Jetzt mit, dass wir mit dem fleischigsten Teil der Lektion hier fertig sind, werde ich ein wenig Hauswirtschaft jetzt machen und verschiedene Größe Taste machen, wenn Sie herumhängen wollen. Hey, du bist willkommen. Dieser Knopf, den wir haben, ist ein mittelgroßer Knopf, okay? Und denken Sie daran, dass wir Etiketten Schrägstrich Medium ausgewählt, was bedeutet, dass mittlere Schriftart für das Etikett. Insgesamt handelt es sich bei dieser Schaltfläche um eine mittelgroße Schaltfläche, aber in einer Benutzeroberfläche haben Sie keine Tasten von nur einer Größe. Im Allgemeinen wird es eine große, eine mittlere und eine kleine Taste geben. Also lasst uns weitermachen und sie machen. Und Sie werden auch sehen, wie einfach es ist, das mit automatischem Layout zu tun. Okay, jetzt ziehen wir eine Kopie davon heraus, indem wir die Option einfach so halten. Das nächste, was wir tun werden, ist, dass wir das Etikett auswählen, Ordnung, diesen Text hier und ändern den Stil auf Label-Start. Jetzt machen wir hier einen großen Knopf. Okay, das ist Mittel, um einen großen Knopf zu machen. Wie wäre es, wenn wir einfach schreiben, schreiben Medium für diesen hier auf. Okay, und ich ziehe es hier her, genau hier. Also wieder, wenn ich auf diese Schaltfläche zurückkomme, werde ich hier auswählen und die Schriftgröße ändern, was im Grunde bedeutet, dass die Schriftgröße für Medium 20 ist, für die größten 24, die ich bereits für Sie definiert habe. Also werde ich voran gehen und Labelbogen auswählen und du siehst, dass der Knopf gerade an Größe gewachsen ist. Lass uns das noch einmal machen, okay, ohne etwas anzupassen, werde ich Li auswählen, bauen, starten und benennen. Der Knopf wuchs ein wenig an Größe. nun nur die Schriftgröße oder das Etikett ändern, wird eine Schaltfläche nicht groß. Sie müssen auch die Polsterung ein wenig anpassen, so dass es visuell aussieht, es sieht größer aus als das Medium oder die kleine Taste. Also werden wir voran gehen und die Polsterwerte anpassen. Jetzt gehe ich voran und gehe hier rein. Zwei Kanten, die Auffüllwerte und nicht versuchen, Komma Separated Values, weil ich das bereits getan habe. Und wissen Sie, nur um Ihnen zu zeigen, wie es funktioniert. Also werde ich voran gehen und ihm eine 20 oben und unten geben , und Sie können sehen, wie es sich ändert. Es ändert sich. Und dann gehen wir weiter und geben ihm eine 48 links und rechts, so. In Ordnung, also werde ich es hier setzen und den Knopf groß nennen. Wie sieht das aus? Ist es ein wenig größer? Natürlich sieht es größer aus. Okay, jetzt, als Nächstes, müssen wir diesen kleinen Knopf machen. In Ordnung, also nochmal, ich ziehe eine Kopie nach oben. Okay, cool. Und ich werde das Etikett auswählen. Wählen Sie eine kleine Beschriftung aus. Alles klar, jetzt nochmal, sehen Sie einfach, die Etiketten klein zu machen, lässt die Schaltfläche nicht optisch klein aussehen. Sie müssen auch die Polsterung anpassen. Also werde ich voran gehen und diesen Rahmen noch einmal auswählen, hier schreiben, wo es Ausrichtung und Polsterung sagt, das weißt du. Und ich werde voran gehen und 10 für oben und unten setzen. Und ich werde voran gehen und 16 für links und rechts setzen. Und dieser Knopf ist jetzt klein. Ordnung, Okay, jetzt lasst uns sie einfach wieder in Schaltflächen ändern, damit es leichter zu sehen ist. Und ich werde sie nebeneinander setzen, damit du die Form kontrastierst. Alles klar, da gehen wir. Wir haben drei sehr hübsch aussehende Knöpfe und alle in verschiedenen Größen. Wie wär's damit? Kann ich einen High-Five oder 80 bekommen? Ok. Jetzt, wenn wir das letzte Ziel haben, nach dem wir gesucht haben, können wir diese Dinge loswerden , weil wir sie natürlich nicht benutzen werden. Sie sind nicht wichtig. Sie sind nicht so anspruchsvoll wie die Auto-Layout-Berge. Okay, jetzt der letzte Schritt, wir gehen voran und verwandeln diese Tasten in Komponenten. Komponenten sind ein sehr nützlicher Teil von Figma. Komponenten sind wiederverwendbar. Sie können sie an mehreren verschiedenen Orten verwenden und Sie können mehr über sie lesen und mehr über sie erfahren. Und wenn Sie noch nie von IT, Komponenten gehört haben, was ich jetzt tun werde, geben wir Ihnen eine ziemlich solide Idee. Und auch während dieses Kurses erhalten Sie eine ziemlich solide Vorstellung davon, welche Komponenten sind. Also okay, lassen Sie uns weitermachen und sie in Komponenten verwandeln. Gibt ein Element in einer Komponente oder einer Ebene in die Komponente zurück. Was tun Sie ist, wählen Sie es aus und klicken Sie auf dieses Symbol rechts oben, das Komponente erstellen steht. Ich gehe weiter und klicke darauf und sehe zu, wie das blau wird. Es wird dieses Symbol auf der linken und rechten Seite auch hier hinzugefügt. Also seien Sie einfach auf der Suche nach dem. Ich werde auf Ich werde spielen. Siehst du, siehst du den Unterschied? Alles klar, da gehst du. Nun bedeutet das im Grunde, dass dieses Ding jetzt eine Komponente ist. Ordnung? Also werde ich weitermachen und das tun. Machen Sie dasselbe mit dem Rest dieser beiden Tasten. Also gehe ich rein und klicke hier. Wie sie hier klicken, klicken Sie dort. Okay, das sind Komponenten, aber das war's nicht. Was ich jetzt tun werde, ist auswählen und ziehen und klicken Sie darauf, dieses, dieses, dieses, dieses, dieses kleine Ding, das hier steht, ist, dass dies auch ein magischer Streifen ist, wenn Sie mich fragen, aber alles klar, gehen wir voran und klicken Sie auf kombiniert als Varianz und Sie werden einen blauen Rand sehen, der wirklich um ihn herum geschaffen wurde. Also gehe ich voran und klicke auf kombinierte Varianz 1, 2, 3. Da gehst du. In Ordnung, großartig, wunderschön. Das bedeutet, dass diese ganze Sache. Weißt du was? Lassen Sie mich es Ihnen zeigen. Lassen Sie mich noch ein paar Schritte durchlaufen und dann werden Sie Varianz und Komponenten besser verstehen. Ok? Ich werde nicht vor mir selbst springen und versucht, etwas Abstraktes zu erklären, das abstrakt ist, bis du es gesehen hast. Also gehe ich weiter und du siehst, dass es dieses Drop-down-Menü gibt, damit ich jeden von ihnen auswählen kann. Jetzt ist die, jede Ebene, es sagt Standard, okay? Und, und Sie können auf diesen Layer doppelklicken und den Namen ändern. Also, was wir tun werden, ist, wenn dies ausgewählt ist, sehen Sie die Schaltfläche Starten und wählen Sie es, so dass wir können, können wir unsere eigenen Werte hier erstellen sind nur Schlüsselwert Paar hier. So kann ich diesen Knopf mal x groß schreiben. Ich kann ihm eine Größe von groß geben, und das ist völlig willkürlich. Das ist etwas, das ich den Namen der Immobilie wähle, die Größe ist und ich nenne es groß. Und ich werde das gleiche für diesen hier tun, das sind die mittleren Tasten. So kann ich voran gehen und doppelklicken und rechte Seiten. Mittlere Okay, cool. Jetzt kann ich voran gehen und für den kleinen, das gleiche tun. Ich kann, richtig? Größe entspricht klein. Alles klar, wenn du fertig bist, bleibt nur noch zu sehen, wie, warum wir das gemacht haben und wie sich Komponenten und Varianz verhalten. Ok? Nun, wenn Sie auf die Spitze schauen, dieser kleine dünne Streifen hier, es steht Schichten dahinter, dass es dieses Ding namens Assets gibt. Also werde ich darauf klicken und Sie werden lokale Komponente sehen und diese Schaltfläche wird hinzugefügt. Bevor ich die Komponente erstellt habe, haben Sie sie möglicherweise nicht gesehen. Ich meine, weil es keine Komponenten gibt, haben wir keine lokale Komponente gesehen. Nun bedeutet dies, dass eine Komponente ein Jahr herausgezogen werden kann und einen beliebigen Vektor auf die Benutzeroberfläche so viele Instanzen wie wir wollen. Okay, und sie sind alle damit verbunden. Ok? Jetzt sieh dir das an. Sehen Sie sich nun an, schauen Sie sich an, was die Schaffung Größe mittelgroß und kalt und Größe gleich klein ist, was rituell im Grunde die Variante Feature genannt wird und Figma tut. Ich kann eine beliebige Instanz auswählen, okay? Sie sehen genau hier, wo es Größe groß steht, ich kann voran gehen und wählen, sagen wir mittel. In Ordnung, also ist der Knopf jetzt mittel, und ich kann voran gehen und klein auswählen, und der Knopf ist jetzt klein. Nun bedeutet das, dass ich irgendwo in meiner Benutzeroberfläche, wenn ich eine Karte erstellen würde und ich die Schaltfläche wollte, könnte ich sie einfach herausziehen und den Tag retten. Es war ein Zeichen der Form, die ich erschaffen habe. Die Karte war über Wissenschaft, also kann ich einfach schreiben, anmelden und dann, weißt du, dann entschied ich mich, okay, nein, nein, ich will einen mittelgroßen Knopf dort. Also alles, was ich tun kann, ist, einfach darauf zu klicken und wählen Sie Medium, und das ist es und alles funktioniert. So großartig und Harmonie ist nicht so schön. Und mehr als das, da all diese Tasten, all diese Pull-Down-Tasten, unsere Instanzen von diesem hier, dieses ganze Zentrum der Wahrheit. Wenn ich hier eine Änderung vornehme, wird dies in allen Fällen widergespiegelt. Nehmen wir zum Beispiel an, ich wollte nicht, dass der Knopf nur ein paar Tage auf der Linie ist und entscheiden, okay, blaue Knöpfe. Ich möchte, dass die Tasten grau aussehen, damit ich Grau 0 und bam auswählen kann, es wird überall reflektiert. Wie cool ist das? Nun, nur um dieses Kurses willen, natürlich mag ich Blau, also werde ich voran gehen und wieder zu Blau wechseln. Also wähle ich all diese aus. Geh in dieses Raster. Es steht Grau 0 und leicht blau und einfach so und alles. Beta und ich werden das alles loswerden, weil ich das nicht mag. Okay, das war's also. In dieser Lektion haben wir so viel gelernt wie Teil zwei, und wir sind schon über 10 Minuten, aber es gibt so viel, es so viel gelernt hat. Wir begannen mit dem Erstellen von Textschaltflächen, und wir machten weiter, um Auto-Layout-Schaltflächen zu erstellen. Und dann gingen wir weiter, um verschiedene Größen von ihnen zu erstellen und sie dann in der Varianz neu zu kombinieren , so dass sie an verschiedenen Stellen in der Benutzeroberfläche verwendet werden können. Wir haben so viel getan, du hast so viel getan, und wir sind auch stolz und du kannst jetzt eine Pause machen. Und ich sehe dich wieder im nächsten Video, wo wir unser Auto-Layout-Spiel verstärken und eine etwas komplexere Komponente erstellen werden . Okay, dann sehen wir uns. 6. Die Erstellung einer Dropdown-Liste: Okay, also waren Knöpfe ziemlich unkompliziert. Wir verwenden nur ein oder zwei Funktionen des automatischen Layouts, wie zum Beispiel das Erstellen eines automatischen Layout-Rahmens oder das Hinzufügen eines automatischen Layouts zu einem Frame. Und wie setzt Padding innerhalb des Rahmens wird ein paar weitere Auto-Layout-Funktionen in diesem Video entpacken. Und schauen wir uns schnell an, was wir gemeinsam in diesem Video machen werden. Also, was Sie tun müssen, ist in Mastering Figma sie Magie von Ottaway auf fertig gehen und klicken Sie auf Dropdowns, Dropdowns Seiten direkt unter Schaltflächen. Und oft, wissen Sie, wenn Sie nicht vertraut sind, sehr vertraut die Figma-Benutzeroberfläche, manchmal sind die Seiten, ist zusammengebrochen, also müssen Sie auf diese Schaltfläche klicken genau hier, und dann wird es angezeigt. Und dann können Sie auf Drop-Downs klicken und sich das ansehen. Sehen Sie, wie die Komponente das Benutzeroberflächenelement ansieht , das zusammen in diesem Video entwirft, ist, wie dies eine Selektorkomponente ist, von der Sie wissen, dass dies der Name ist, den ich ihm gegeben habe. Sie können es eine Liste nennen oder Sie können es eine Karte nennen oder was auch immer Sie wollen. Und es funktioniert wunderschön. Schau, ich kann mehr davon hinzufügen und dann kann ich es richtig skalieren. Sehen Sie, wie die Schaltfläche immer unten bleibt. Und wenn ich seine horizontale Loci zurücktrat, ändert sich alles schön. Das wird also ein kleiner Schritt von allem sein, was wir im letzten Video entworfen haben, das nur sehr normale Tasten war. Also, in Ordnung, gehen wir zurück und gehen an die Arbeit. Stellen Sie also sicher, dass Sie sich in der Starterdatei und stellen Sie dann sicher, dass Sie sich innerhalb der Dropdown-Seite befinden. Klicken Sie also auf die Dropdown-Seite und es wird völlig leer sein weil wir es mit einer Reihe von coolen Auto-Layout-UI-Zeug füllen werden. Okay, im letzten Video hast du gesehen, wie ich eine Reihe von Manövern gemacht habe, um endlich ein Auto-Layout-Element zu erstellen. Der Knopf, der ist, und wie ich versprochen habe, du musst diese Manöver nicht machen, also gibt es eine Abkürzung dafür. Okay. Und ich werde zeigen, dass ich es dir jetzt zeigen werde. Okay, das erste, was wir tun, ist ein paar Texte auf die Leinwand zu schreiben. Und wie mache ich das? Wenn ich entweder auf das Textwerkzeug klicke oder einfach D drücke und dann irgendwo auf eine Leinwand klicke und mit der Eingabe beginne. Jetzt werde ich eintippen, sagen wir Option, okay, Jetzt stellen Sie sicher, dass die Option eines der Textilien hat, die ich definiert habe, um es anzuwenden. Moment werde ich für sie groß beschriftet wählen, so dass es so aussieht. Das sieht toll aus. Okay, Nun, um das zu verschachteln und das ist dieser Text innerhalb und letztlich auf Rahmen, alles, was wir tun müssen, ist sicherzustellen, dass der Text ausgewählt ist und drücken Sie die Verknüpfung Shift plus a, OK, Shift plus a. Und da geht's. Es ist innen und Auto-Layout-Rahmen. Woher weiß ich das? Schau, sieh dir hier kostenlos an. Schauen Sie sich das Symbol-Layer-Panel an und schauen Sie auf der rechten Seite, wo das automatische Layout dünne Streifen, die Übereinstimmung wird dünn Streifen jetzt aktiviert ist. Wie cool ist das? Geben wir nun den Rahmen, den wir gerade erstellt haben, eine Hintergrundfarbe, okay, Wir wählen eine Farbe aus den Farbstilen. Wie wäre es mit grau 0, okay, großartig, und wir ändern die Farbe des Textes in weiß. Und wie machen wir das? Wir klicken einfach auf die Farbstile und wählen Weiß. Genau so. Das nächste, was wir tun wollen, ist, dass sie wollten und nur die Polsterung. Nun, wenn Sie folgen, was Sie tun müssen, ist es 16 Pixel Polsterung oben und unten und 32 auf der Horizontalen. Also gehen Sie weiter und sehen, ob Sie das tun können, während ich das gleiche tue. In Ordnung, also geben wir ihm eine Polsterung von 16 oben und unten, genau so. Und links und rechts geben wir ihm eine Polsterung von 32. Als nächstes werde ich diesem Rahmen einen Eckenradius von acht geben. Und drücken Sie eine Acht und klicken Sie auf die Eingabetaste und schauen Sie sich das an. Und das Beste daran ist, so viel zu tun. Wir geben Räume geben Farben und abgerundete Ecken und all dies als nur eine Einheit. Wie schön ist das? Sehen Sie sich das Ebenenbedienfeld an. Gar kein Unordnung. Es ist nur eine Einheit. Und jetzt gehen wir weiter und überprüfen, ob es richtig skaliert. Okay, also werde ich voran gehen und es horizontal strecken. Und ja, das ist es. Und denken Sie daran, im Gegensatz zu einer Schaltfläche, in der wir möchten, dass die Beschriftung in der Mitte ausgerichtet wird, möchten wir, dass dieses UI-Element Text immer auf der linken Seite hat. Der Rahmen wird jedoch jetzt in der Größe gedehnt, um sicherzustellen, dass er passiert. Und übrigens, figma hat es bereits standardmäßig auf links gesetzt, alles, was Sie tun müssen, ist darauf zu klicken, auf das gleiche Quadrat zu klicken, wo Sie die Polsterung anpassen. Und denken Sie daran, dass es nicht nur Polsterung, sondern Ausrichtung, Ausrichtung und Padding sagt , was bedeutet, dass Sie auch die Ausrichtung anpassen können. Also für jetzt, die Ausrichtung ist Mitte und links. Es gibt andere Optionen, drei oben, drei in der Mitte und drei auf der Unterseite. So zum Beispiel, das ist oben und links und ich werde links und Mitte wählen. Das war's also. Und jetzt, wenn ich die Größe horizontal ändere, sehen Sie, dass es auf der linken Seite bleibt, wie es im Ausrichtungsabschnitt hier ausgewählt wurde. Und wenn ich die Größe vertikal ändere, sehen Sie, dass es immer noch in der Mitte bleibt, wie es ausgewählt wurde. Und es wurde gerade gesagt, es wurde angewiesen, so in der Mitte zu bleiben und sich frei zu fühlen , mit der Ausrichtung ein wenig herumzuspielen und einen besseren Hang davon zu bekommen. Wenn ich beispielsweise diesen Rahmen auswähle und die Ausrichtung in Mitte ändere, verhält es sich wie die Schaltfläche, die er in der Mitte verbleibt. Größe von Minuten wird geändert. Also nochmal, ich werde hier auswählen und es nach links legen, wie wir wollen. Du kannst, weißt du, wie ich schon sagte, herumspielen, wenn ich es oben und links halte und die Größe ändere, es bleibt oben und links. Ja, das ist echt cool. Okay, also werde ich weitermachen und alles so durchsetzen, wie es war, wo die Ausrichtung in der Mitte und auf der linken Seite war. Und ich lasse es dort. Und lassen Sie uns unser UI-Element weiter entwickeln. Bisher haben wir nur diesen Teil der gesamten Komponente, diesen Optionsteil, gemacht. Wir müssen auch den Wrapper bauen und bemerken, dass es mehrere dieser Optionen führen wird, was Wiederverwendbarkeit bedeutet, was bedeutet, dass wir dies hier in eine Komponente konvertieren werden , dieses Lesen dieser beiden Option. Und das wird die Textebene drehen und wir werden den Namen der Textebene ändern, ich meine, und rufen Sie a und LA das l Label. Und dann werde ich den Rahmen auswählen und in eine Komponente konvertieren. Du weißt, was zu tun ist. Klicken Sie hier auf dieses Symbol und bam, es ist diese Komponente jetzt, was bedeutet, dass ich in Assets gehen und so viele von Ed wie i1, 1, 2, 3 ziehen kann. Und wenn ich die Änderung vornehme, nehmen Sie einige Änderungen an meiner Hauptkomponente vor, wie ändern Sie die Hintergrundfarbe. Es wird sich in allen Kopien bis jetzt widerspiegeln, so gut. Jetzt zeige ich Ihnen einen Workflow, den Sie immer wieder in Ihrer UI-Design-Routine verwenden werden. Ich habe bereits, wie gesagt, Sie können eine Instanz aus dem Asset-Panel dieser Komponente so ziehen. Und es gibt eine andere Möglichkeit, eine Instanz herauszuziehen. Es macht meine Option gedrückt und zieht eine Kopie von der Hauptkomponente. Und früher, wie ich Ihnen gezeigt habe, wenn es ein normales Rechteck oder etwas war, das keine Komponente ist, können Sie Option und ziehen, um eine Kopie davon zu erstellen. Wenn Sie jedoch dieselbe Aktionsoption ausführen, ziehen Sie auf eine Komponente, ziehen Sie heraus und zeigen Sie das Ebenenbedienfeld an, lassen Sie die Instanzen mit einem um 45 Grad gedrehten Quadrat erscheinen. Es wird auch die Form genannt, ich glaube, wird auch als Raute bezeichnet. Und schauen Sie, wie die Hauptkomponente erscheint, aber vier Quadrate sind so gestapelt. Okay, großartig. Also mit diesen beiden Komponenten, diesen beiden Instanzen der MainComponent heraus, kann ich sie hier setzen. Und das nächste, was ich tun möchte, ist, sie in ein Autoplay auf Frame zu setzen. Und das ist die Routine, über die ich oft gesprochen habe, was passiert, ist, dass wir Instanzen einer Komponente haben und wir sie zusammen arrangieren wollen, wie zum Beispiel, in diesem Fall wollten wir sie in eine Liste setzen. In Ordnung, also wähle ich diese beiden aus und drücke Shift a und schau dir an wie automatisch es in ein automatisches Layout von Komponenten eingefügt wird. Wählen Sie also beide aus, drücken Sie Umschalttaste a und schauen Sie sich das an. Es ist innerhalb eines Rahmens und Blick in die Ebenen Panel ist innerhalb eines Rahmens. Also werde ich voran gehen und vor allem diesen Rahmen lesen, um so etwas wie heruntergefallen zu werden. Okay, ziemlich cool. Und sieh dir das an. Da diese Optionen vorhanden sind, befinden sich diese Instanzen dieser Optionskomponente in einem Auto-Layout-Frame. Was ich tun kann, ist Befehl D zu drücken und sie werden automatisch hinzugefügt und der Abstand zwischen ihnen wäre ziemlich hübsch, ziemlich konsistent gehalten, weil sie sich in einem automatischen Layout-Rahmen befinden. Eine andere Sache, die ich tun kann, was mich zum Abstand zwischen einem Teil des Auto-Layout-Streifens bringt , ist, dass Sie herauskommen. Sie können es einfach durch Ziehen anpassen und dies ändert sich. Ich denke, der Name ist sehr so X selbsterklärend. Es würde nur Platz zwischen Elementen, Daten und signierte die Komponente. Und für diesen, wollen wir es bei 10 behalten. Also werde ich 10 eingeben und drücken Sie die Eingabetaste und schauen Sie sich dies an, der Abstand zwischen jedem von ihnen, jede der Optionen ist 10. Wie, wie, wie wird das, wie cool ist das? Und das nächste, was ich tun werde, ist, dass ich den Rahmen auswählen und ihm eine graue Hintergrundfarbe geben werde . Also, da gehst du. Jetzt hat es eine Hintergrundfarbe. Und das nächste, was wir tun wollen, ist eine Polsterung von 12 auf allen vier Seiten. Anstatt hier reinzugehen und 12 viermal zu tippen, ist, was ich tun kann, dass ich hier zu alt bin, drücken Sie die Eingabetaste und die Polsterung von 12, es wird auf allen Tags hinzugefügt. Sieh dir das an. Das ist großartig, nicht wahr? Das ist ziemlich cool. Und während wir dabei sind, was ich als nächstes tun werde, ist es eine abgerundete Ecke von 12 Pixeln zu geben. Also 12 Geben Sie ein. Und jetzt sieh dir das an. Wir gehen zu, wie cool es aussieht wie eine richtige Liste Dropdown. Und das Beste daran ist, dass ich Komponenten hinzufügen kann, hinzufügen, sorry, Instanzen der Option in der Liste hinzufügen kann. Ich kann sie entfernen und die Höhe und alles ist automatisch eingestellt. Alles klar, ziemlich gut. Nun, nur um daran zu erinnern, dass dies ein Auto-Layout-Frame ist und die Optionen auch mit Auto-Layout erstellt werden, was bedeutet, dass Sie Auto-Layout-Frames in Auto-Layout-Frames verschachteln können, und Sie haben keine Ahnung, wie mächtig das ist. Wir werden uns einige wirklich coole solche Beispiele später im Kurs ansehen. Aber für jetzt, beachten Sie, dass, wenn ich die Größe dieses Rahmens ändere, dieser Dropdown-Rahmen horizontal, die Optionen nicht in der Größe ändern. Warum ist das? Wenn ich nun eine Option auswähle, wenn ich eine der Optionen im Rahmen des automatischen Layouts auswähle, werden Sie feststellen, dass diese Spannung in der Größenänderung direkt unterhalb des automatischen Layout-Streifens angezeigt wird. Wenn ich in die horizontalen Größenbeschränkungen schaue, was bedeutet, wenn sie horizontal geändert wird, sagt es eine feste Breite, die wir nicht wollen. Wir wollen, dass es den Container füllt, den es Einblick hat. Also klicke ich hier und wähle Container einfach so füllen. Und jetzt sehen Sie, dass der Rahmen automatisch den Behälter dehnt und füllt. Es gibt eine andere Option namens Umarmung Inhalt hier, was bedeutet, dass die Option nur Platz genug benötigt , um den Inhalt zu halten, der darin ist, was wir in diesem Szenario nicht wollen. Wir wollen, dass es die Behälter füllt. Also lassen Sie uns voran und wählen Voller Container, und wir werden das gleiche für den Rest dieser Optionen hier tun. Wählen Sie also alle aus und gehen Sie voran und ändern ihre Größenbeschränkung oder die horizontalen Größenänderungsbeschränkungen, um einen Container zu füllen. Und sieh dir das an und wenn ich es jetzt ändere, okay, passt jetzt schön die Größe an. Jetzt können Sie sagen, warum kann ich nicht einfach sagen, Größenbeschränkungen für die Hauptkomponente hier, von der dies im Grunde nur Instanzen von sind und getan werden. Nun, Sie sehen einige Dinge in Fällen über fahrbar, wie die Hintergrundfarbe oder für eine Instanz, zum Beispiel kann ich voran gehen und die Hintergrundfarbe dieser Instanz ändern und es wird sich nur auf diese bestimmte Instanz auswirken. Oder ich kann die Erkenntnisse ändern, die drin sind, zum Beispiel, nennen wir es einfach einen Laptop oder was auch immer, du weißt schon, zufällige Wörter. Diese Dinge sind also überschrieben beschreibbar. Und genau wie diese zur Größenänderung ist auch überschreibbar, da wir den Kontext, in dem eine bestimmte Instanz in Figma verwendet werden könnte, nicht antizipieren können, gibt uns die Wahl, die Größenänderung zu wählen, für jede Instanz einschränken individuell. Nun, wieder, wenn ich vorgehe und die Größe des Rahmens ändere, schau, wie schön er zurücktritt, so wie er sollte. Aber was ist mit der vertikalen Größenänderung? Wie Sie wissen, dass die Höhe dieses Auto-Layout-Rahmen, wie durch die Elemente, die es hält, und der Abstand zwischen den einzelnen Elementen, die wir genau hier in Abstand zwischen den Elementen festgelegt haben berechnet die Elemente, die es hält, und der Abstand zwischen den einzelnen Elementen, . Und es gehorcht, weil schauen Sie hier, wenn Sie auf das letzte Quadrat klicken und auf den unteren Teil schauen, den größten Teil, es sagt Pakt, was bedeutet, dass es berechnet und packt den Inhalt fest. Und daher, wenn ich diesen Rahmen vertikal skaliere, sehen Sie, dass die Elemente immer noch verpackt bleiben, aber ich kann die Verpackung hier von verpackt in Raum zwischen ändern und schauen, was passiert. Der Abstand zwischen den Elementen ist auf auto festgelegt. Und wenn ich die Größe vertikal nach unten ändere, breitet sich alles nur aus, wenn der Rahmen in der Größe geändert wird, schauen Sie sich eine tatsächliche Nutzung des Platzes zwischen dem Packen ein bisschen an. Aber jetzt rollen wir alles zurück, während wir arbeiten. Okay, toll, wir sind hier fast fertig. Das nächste, was wir tun möchten, ist, ziehen Sie heraus und Schaltfläche Komponente aus dem Assets-Panel. Denken Sie daran, dass dies die Schaltflächenkomponente ist, die in den vorherigen beiden Lektionen erstellt wurden. Also werde ich es einfach rausziehen und es direkt daneben legen. Nun, das ist eine große Taste. Wir würden neben ihm besser aussehen, wahrscheinlich eine mittelgroße. Also ja, sie sehen zusammen besser aus. Und das nächste, was wir tun wollen, ist, den Knopf in diesen Rahmen zu setzen. Also, um das zu tun, muss ich es einfach so hineinziehen. Und da gehst du. Und das kann ich innerhalb des Rahmens sagen, denn wenn ich diesen Rahmen ziehe, schau dir das an, zieht er auch um. Nun ist dies ein sehr häufiges Szenario bei der Verwendung von Auto-Layout. Oft passiert es, wenn Sie etwas hineinlegen oder, wissen Sie, eine Änderung vornehmen und plötzlich bemerken, dass der Rahmen nicht skaliert wird. Dies liegt daran, dass wir oft einige Änderungen vornehmen, die dazu führen, die Größenänderungsbeschränkungen zu einer festen Breite und einer festen Höhe geändert werden. Und wann immer wir Szenarien wie zum Beispiel begegnen, passt sich die Höhe nicht richtig an. Alles, was wir tun müssen, ist, hier zu gehen, wählen Sie das aus und klicken Sie auf HUD-Inhalte und schauen Sie sich das an. Es ist einfach schon drin und wieder der Knopf. Das nächste, was ich tun möchte, ist, dass die Knöpfe diese ganze Breite dehnen. Und noch einmal, wie stellen wir sicher, dass es so ist? Wir gehen wieder in Größenbeschränkungen ein. Und im Moment sagt es Umarmung Inhalt, was bedeutet, dass es nur breit genug ist, um den Inhalt zu passen, der darin ist , und macht es den Behälter füllen, in dem er sich befindet. Was müssen wir tun, ist gehen, gehen Sie hier und die horizontalen Größenbeschränkungen und klicken Sie auf Fill Container und schauen Sie sich das an. Es füllt die ganze Sache. Und wir haben ein Problem hier, dass der Knopf, dass der Text innerhalb der Schaltfläche nicht in der Mitte ist. Und ich schätze, das habe ich verpasst. Ich habe die Ausrichtung möglicherweise nicht richtig gewählt. Also lassen Sie mich gehen und sehen, dass in diesem, in diesen Komponenten, die ich erstellt habe und natürlich lesen, die Ausrichtung nicht in der Mitte ist, also werde ich warten, ich werde alle drei auswählen und sicherstellen, dass sie alle zentral ausgerichtet. Und wenn ich zurück zu Drop-Downs gehe, sehen Sie, dass der Text jetzt in der Mitte für die Schaltfläche ist. Du siehst diese Fummeleien davon. Automatisches Layout geschieht oft. Manchmal vergessen Sie, dass es Einschränkungen gibt, manchmal vergessen Sie die Ausrichtung, aber sie sind sehr einfach zu beheben. Wie du mich gerade gesehen hast. Okay. Nun, das einzige, was noch zu tun ist, wenn Sie mir zur fertigen Akte folgen, ist, alles so zu arrangieren, dass sie sich so verhalten. Sie sagen, sogar ein vertikales Element skalieren. Die Schaltfläche bleibt auf der Schaltfläche, während die Liste oben bleibt. Und selbst wenn ich alles horizontal skaliere, ändert sich alles einfach als, als Chip. So können Sie voran gehen und versuchen, dies zu tun, dieses Verhalten zu replizieren, wenn Sie mitfallen oder Sie können einfach tun, was ich tue, okay, Also das erste, was wir tun müssen, ist, dass wir die Listen und die Schaltflächen jetzt trennen müssen diese Optionen, ich meine, die Optionen auf dieser Schaltfläche, gerade jetzt sind diese Optionen und die Schaltfläche im gleichen Rahmen. Das erste, was wir tun werden, ist, dass wir alle Optionen auswählen und sie in einen Rahmen legen. Und wie machen wir damit? Wir haben nur alles gelöscht, stellen Sie sicher, dass jede Option ausgewählt ist und die Schaltfläche nicht ausgewählt ist. Sobald alles ausgewählt ist, sind alle Optionen irgendwie so. Drücken Sie Umschalttaste a. Und was dies tun wird, ist es hineinzulegen, die Optionen innerhalb ihres eigenen Rahmens zu setzen. Und ich werde diesen Rahmen auswählen, doppelklicken Sie darauf und nennen es OPT I ON-Optionen. Okay, geben Sie ein, großartig. Und nun das nächste, was ich tun möchte, ist, dass wir die Optionen auswählen wollen, diesen Rahmen hier, geben Sie ihm etwas Polsterung. Okay, also gehen wir gleich hier weiter. Sie wissen, wie Sie einem automatischen Layout-Frame Auffüllung geben. Wieder werde ich voran gehen und ihm eine Polsterung von 12 geben. Klicken Sie also dort, um 12 hinzuzufügen, und das war's. Sehen Sie, im Moment sieht es ein wenig verwirrt aus, aber wir werden das dann ein bisschen anpassen. Das nächste, was ich tun werde, ist, dass ich den äußersten Dropdown-Rahmen auswählen und seine Hintergrundfarbe in ändern, sagen wir grau zu, okay. Und diese Optionen rahmen hier, ich werde voran gehen und seine Hintergrundfarbe auf, sagen wir, graue. Ok, großartig. Und während ich dabei bin, werde ich ihm eine abgerundete Ecke von 12 geben. Okay, großartig. Das einzige, was jetzt zu beheben ist, ist die Größenänderung des äußersten Rahmens. Und wie wir gerade gesehen haben, passiert es oft, Papa, die Einschränkung soll behoben werden. Und alles, was wir tun müssen, um das zu beheben, ist klicken Sie darauf und klicken Sie auf HUD condense. Und gerade jetzt sagt es sehr deutlich sichtbar, dass wir einen äußersten Rahmen haben. Wir haben einen Rahmen angeregt, der Optionen enthält, und wir haben einen Knopf hier drüben. Jetzt gehen wir weiter und jedes Mal, wenn Sie dies tun, jedes Mal, wenn Sie einen Rahmen erstellen, Ihren verschachtelten Rahmen, Es ist gut, die Größe zu ändern und zu überprüfen, ob alles richtig funktioniert. Nun ist diese Schaltfläche, um die Größe richtig zu ändern, aber dieser Rahmen ist nicht. Wieder, wie kann ich das beheben? Wie dieser Rahmen gehen hier rüber und so fühle ich mich Container, okay, großartig, Jetzt diese Füllung Set, aber die Optionen sind nicht. Also werde ich fortfahren und alle wieder auswählen und das ändern, um Container zu füllen. Und jetzt, wenn ich die Größe ändern, sehen Sie alles, wie schön Rennen Wissenschaftler nicht daran erinnern, dass es sehr einfach ist, frustriert zu bekommen. Dann funktionieren die Auto-Layout-Frames, die verschachtelte Frames nicht so, wie Sie sie erwartet haben. Aber denken Sie daran, dass Sie sicherstellen müssen , dass die Größenbeschränkungen korrekt festgelegt sind. Alles klar, jetzt für die vertikale Größenänderung, werde ich Dropdown auswählen. Und wenn ich hier schaue, steht da gepackt. Und wie ich bereits sagte, und wie ich bereits erklärt habe, was Pack bedeutet, dass Sie in der Lage sein sollten, zu antizipieren, was passieren wird, wenn ich es vertikal skaliere. Natürlich bleibt alles nur gepackt. Wenn ich jetzt vorgehe und das in Raum dazwischen ändere, schau dir an, was jetzt passiert. Großartig, Dies bleibt hier und ein Leerzeichen zwischen stellt sicher, dass sich alles nur ausbreitet, und dann wird das gesamte Element vertikal skaliert. Der Abstand zwischen wird einfach automatisch angepasst, wie es hier steht. Automatisch. Okay, das ist großartig. Das ist großartig. Wir haben eine Menge in diesem Video gelernt, obwohl für die kleine Menge an Optionen, die Auto-Layout hat, Es gibt eine Menge Komplexität darin, und es gibt viele schöne, leistungsstarke Komponenten, die Sie aus erstellen können es, wie wir es gerade gesehen haben. Und jetzt, wenn Sie dies als Komponente verwenden oder wissen, möchten Sie es überall in Ihrem Benutzeroberflächendesign wiederverwenden. Was ich vorschlage, dass Sie voran gehen und es in eine Komponente verwandeln, so dass Sie mehrere davon herausziehen können, über, mehrere davon hinaus und überall verwenden können, wo Sie wollen. Und damit sind wir fertig mit diesem Video. Und im nächsten werden wir etwas wirklich Cooles machen. Ich hoffe, Sie bleiben hier und hoffen, dass Sie etwas lernen, und wir sehen uns bald. 7. Zwei Layouts: Im letzten Video haben wir dieses kleine Selektor oder Drop-Down-UI-Element gemacht, alle mit Auto-Layout und es ändert sich schön sowohl horizontal als auch vertikal. Wir werden dies im nächsten Beispiel wiederverwenden, zum Beispiel, dass wir in diesem Video übergehen werden. Und es wird einfach sein, denn wir haben bereits eine Komponente daraus erstellt und es war Präsident in unserem Asset-Panel. Wir können es aus Assets-Panel ziehen, wo immer wir wollen und wo wir es herausziehen wollten, ist in den beiden Panels Seite, stellen Sie sicher, dass vor allem, wenn Sie folgen entlang, was ich wirklich hoffe, Sie sind sind in der Magie der Auto-Layout-Starterdatei und in den beiden Panels Seite, gehen Sie in Assets und zog mein Dropdown-Menü einfach so. Ziemlich cool. Das nächste, was wir tun möchten, ist eine Reihe von Text zu dieser Leinwand hinzuzufügen. Und dazu klicke ich einfach auf das Textwerkzeug, ziehe ein Rechteck wie dieses heraus, und wir können jetzt beginnen, in dieses Feld einzutippen. Zunächst einmal, lasst uns einige Füllstoff Text Ich habe figma hat Wikipedia Seite öffnet. Also werde ich voran gehen und den ersten Absatz, Befehl C, kommen in mein Textfeld, drücken Sie Befehl V. Alles klar, toll, Lassen Sie uns diese kleine eckige Klammer loswerden , die wir nicht brauchen werden, sind nur, es ist nicht wichtig, ob es da ist oder nicht. Also, nur zu meinem Vergnügen, habe ich es entfernt. Ok. Sobald wir also den Text haben, wählen wir als nächstes aus einem der Textilien, die ich definiert habe. Und für diesen werden wir Körper normal wählen. Also ja, großartig. Sieht aus, sieht ziemlich gut aus, oder? Und lassen Sie uns die Farbe dieses in grau 0 ändern. Ok, großartig. Und das letzte, was wir mit einem Text tun werden ist, auf diese drei Punkte hier klicken, Größe und stellen Sie sicher, dass die automatische Höhe wie ausgewählt. Wenn die automatische Höhe ausgewählt ist, wenn ich den Text editiere, sehen Sie die Höhe dieses Feldes und nur automatisch, und wenn ich diese Größe ändern oder horizontal dehnt , sogar dann wird die Höhe der Box automatisch passt es, was ziemlich großartig ist, und stellt auch sicher, dass der Text nach links ausgerichtet ist. So weit, so gut. Was wollen Sie jetzt tun, ist, diesen Text, den wir hier geschrieben haben, und diese Dropdown-Komponenten zusammen in eine große Komponente wie diese zu setzen , wie ich in der fertigen, fertig die Magie der automatischen Layout-fertigen Datei unter zwei Panels Seite, wissen Sie, jemand wie dieser und um sie zusammen zu haben, um sie schön so zu ändern. Und wenn Sie sie in der Größe ändern, wird sie vertikal wieder in der Größe geändert. Und wenn ich etwas von hier entferne, wieder, alles nur, Hoppla. Ich meinte durch eine Option, alles passt sich einfach richtig an. Okay, jetzt kommen wir zurück in die Starterdatei, wieder, wir müssen sie in einen Rahmen setzen. Wie machen wir das? Wieder wählen wir beide aus und drücken die Tastenkombination Shift plus a. Dort geht's. Und beide befinden sich jetzt in einem einzigen Frame und sehen sich das Symbol im Ebenenfenster an. Schauen Sie sich die Rechte an diesem Auto-Layout-Streifen an. Es ist vorhanden, was bedeutet, dass Auto-Layout angewendet wurde, dass beide Dinge in einem Auto-Layout-Rahmen verschachtelt sind. Nun, bevor wir weitermachen und mehr Dinge damit machen und ein paar Änderungen vornehmen und dieses Skelett einer Sache wie das fertige Ding aussehen lassen. Es gibt etwas, worüber wir reden müssen. Die eine Sache, die wir noch nicht ganz ausführlich diskutiert haben, und das ist die Richtung des automatischen Layouts. Lassen Sie uns nun ein wenig nach oben gehen, indem wir Platz halten und so auf die Leinwand ziehen, kommen Sie zu einem klaren Bereich und lassen Sie mich zwei Quadrate auf einer Leinwand zeichnen, 12, Alles klar, toll. Und stellen Sie sicher, dass sie die gleichen Dimensionen haben. Ok, großartig. Jetzt stellen wir sie in einem bewaffneten Rahmen zusammen. Wie machst du das? Sie wählen beide aus und drücken Umschalttaste a, und jetzt befinden sie sich in einem schrecklichen auf Frame. Eine Reihe von Optionen erscheinen hier. Und selbst innerhalb des Ebenenbedienfelds sehen Sie, dass sich das Symbol in beiden Rechtecken innerhalb dieses Rahmens ändert. Jetzt nehme ich an, dass Sie vielleicht schon damit herumgespielt haben, aber es ist keine Raketenwissenschaft, es ist ziemlich einfach, wenn Sie Symbole im Ebenenfenster für diesen automatischen Layout-Rahmen suchen, schauen Sie sich an, wie die Rechtecke in der Symbol vertikal gestapelt sind, oder? Dies zeigt die Richtung, in der das automatische Layout die Elemente im Rahmen anordnet. Und das gleiche wird mit diesem Pfeil hier iteriert. Schau, vertikal ist ausgewählt, wenn ich die Stapelrichtung oder Anordnung dieser beiden Rechtecke innerhalb dieses Rahmens horizontal durch Klicken auf den Pfeil hier, schauen Sie sich alles an, was passiert. Ich gehe voran und klicke auf horizontale Richtung. Wieder. Sie sind jetzt horizontal angeordnet, und selbst im Ebenenbedienfeld das Symbol in zwei horizontal gestapelte Rechtecke geändert. Nun, das ist alles, was es gibt, um die Grundlagen von allem zu wissen, was es über Richtungen zu wissen. Und das war das Letzte, was für mich erforderlich war , um in Bezug auf alle Aspekte von weit weg zu gehen. Wo auch immer Sie sind, kehren wir jetzt zu unserer Komponente zurück. Bereits das tun Dinge, die wir brauchen, um die Komponente sind innerhalb und Auto-Layout-Rahmen. Von hier an geht es darum, die Einstellungen anzupassen und ein wenig mit den Knöpfen herumzuspielen. Okay, lassen Sie uns damit beginnen, diesen Frame ein bis zwei Panels umzubenennen . Also, Erwachsene nicht mit nur zwei Panels zu bewegen. Und lassen Sie uns etwas Polsterung auf allen Seiten dieses Rahmens geben und ihm auch eine Hintergrundfarbe für die Polsterung geben. Gehen wir mit 24. Also wieder, wenn ich auf die Schuld, alle vier Seiten auf einmal, Ich werde hier klicken und schreiben 24. Und eine Polsterung von 24 Einheiten oder 24 Pixel für die Anwendung auf allen Seiten dieser kleinen Komponente. So weit, so gut. Als nächstes geben wir ihm eine Füllung von grauen drei so, und geben wir ihm einen abgerundeten Eckenradius von 12. Denken Sie nun daran, dass die beiden Elemente horizontal nebeneinander gestapelt sind , wie es hier in diesem Symbol dargestellt wird, und wie es in diesem Pfeilsymbol rechts hier angezeigt wird, wenn ich es vertikal mache, wird es aussehen Ganz anders wie diese. Okay, aber gehen wir zurück, um es horizontal zu machen. Nun lassen Sie uns den Abstand zwischen diesen beiden Dingen anpassen , die gerade jetzt sind der Abstand zwischen ihnen 103, was ziemlich groß ist. Und, weißt du, ich kann auf sie aufstellen und der Abstand wird zunehmen oder abnehmen, aber lassen Sie uns das auf eine Zahl setzen, so etwas wie 32. Ok? Alles klar, großartig. Jetzt sieht es schön aus hier, bis wir versuchen, es sollte die Größe ändern. Beginnen wir mit der horizontalen Dehnung zuerst, okay, und nein, das ist nicht das, was wir wollen. Es gibt jetzt zwei Dinge, die wir hier tun können. Nummer eins, können wir entscheiden, dass die Breite der Dropdown-Liste oder diese wählen Sie ihre Komponente oder welchen Namen Sie es nennen möchten, bleiben Sie gleich, während die Textbreite erweitert sich auf Größe ändern. Dafür werden wir den Text auswählen, okay, Sie haben Endplatte. Achten Sie hier genau darauf. Wir wählen den Text aus und ändern seine Größe von fester Breite, um den Container zu füllen. Während diese Komponente, diese, die Auswahl der Dropdown-Liste bleibt feste Breite. Ok? Und nun schauen wir uns an, wie es sich verhält, wenn Sie es horizontal ändern. Also, okay, großartig. Sehen Sie, sehen Sie, wie schön drei Wissenschaftler. Also alles, was wir zu Figma gesagt haben, war sicherzustellen, dass unabhängig davon, welche Größe es in diesem Rahmen verbleibt, den Text füllen, der Behälter gefüllt ist. Und was auch immer passiert, egal welche Größe davon, wie wir Figma befohlen haben , diese Komponente fest zu halten. Und das ist es, was es Figma ist. Und jetzt, wo wir die Größe ändern, fließt der Text, während dieser fest bleibt und seine Abmessungen. Nun, umgekehrt, könnten wir wollen, dass diese Komponente Größe ändert und bei der Neugröße erweitert, während der Text feste Breite dafür bleibt, aber wir werden die Größenänderungsbeschränkungen ändern, den Text feste Breite machen, und dies die Dropdown-Komponente, um den Container zu füllen und zu sehen, was passiert, wenn ich jetzt die Größe ändere. Okay, wie cool ist das, richtig? Darüber hinaus können wir wollen, dass beide mit dem Container oder dem äußeren Rahmen skaliert In diesem Fall werden wir beide auswählen und beide ihre Größenbeschränkungen ändern, die horizontalen Größenänderungsbeschränkungen , um Container zu füllen. Und jetzt, wenn Sie die Größe ändern, passen Sie beide die Breite an. Ok. In Ordnung. Sitz CSAC Ich denke, ich werde bei diesem Selektor bleiben, dieser Komponente, dem Dropdown-Menü, ich nenne es sie immer wieder auswählen, weil ich es so genannt habe, aber wissen Sie, der Name spielt hier keine Rolle. Ich will nur, dass du das weißt, okay? Also frage ich mich, dass diese Komponente eine feste Breite hat und ich möchte, dass dies skalierbar ist, was Phil Container ist. Und wir sind wieder bei Option eins. Perfekt. Jetzt für die vertikale Größenänderung, die derzeit nur nichts für die vertikale Neuskalierung ist, möchten wir, dass diese Dropdown-Komponente, dieses Element hier, den Container dehnt und füllt, wenn die Größe vertikal geändert wird. Wir gehen also voran und wählen dies aus, gehen zur vertikalen Umskalierungsbeschränkung und ändern sie von fester Höhe, um einen Container zu füllen. Jetzt, wenn es die Größe vertikal so ändert, sagen Sie, dass es die Größe richtig ändert. Tat sehr großartig. Wir haben alles vorbereitet. So ziemlich nur eine Sache. Ok? Was wäre, wenn wir den Inhalt im Text erhöhen würden, so dass der Überlauf dieser Container ist. Anstatt also eine Reihe von Texten einzugeben, werde ich ein paar Optionen von hier entfernen. Also kann ich das tun. Löschen, löschen, lassen Sie mich ein paar Optionen entfernen. Oder was ich tun kann, ist einfach in das Ebenenbedienfeld zu gehen und einige Optionen auszublenden und die Größe so zu ändern. Nun, wenn ich vorgehe und es nach unten strecke, und ich gehe weiter und mache das auch vertikal. Okay, jetzt sehen Sie, dass der Text überfüllt ist. Nun ist dies ein sehr häufiges Szenario. Dies geschieht die ganze Zeit mit Auto-Layout, mit dem, was es ist, es wurde angewiesen. Also habe ich das jedes Mal bemerkt. Ich werde das äußerste Panel auswählen, die Hauptkomponente hier, die einzige Sache, die wir gemacht haben, und die Größe ändern. Was passiert, ist beim Ändern der Größenänderung der Abhängigkeiten, die Sie auf diese speziellen äußeren Rahmenänderungen angewendet haben , um sowohl für die Breite als auch für die Höhe zu fixieren. Und jedes Mal, wenn das passiert , können die Dinge überlaufen und herauskommen. Und um das zu beheben, ist das einfachste, was zu tun ist, herauszufinden, okay, wenn das vertikal überläuft, das einzige, was ich tun werde, ist, zur vertikalen Größenbeschränkung zu gehen und sie zu umarmen Inhalt zu ändern. Und jedes Mal, wenn Sie das tun, wird es automatisch die Größe ändern. Und B, einfach hoch oder breit genug, um den Inhalt zu passen, der darin ist. Jetzt, solange Umarmung Inhalt ausgewählt ist. Jetzt sieh dir das an. Ich werde auf den vorherigen Punkt zurückkommen, den ich gemacht habe, auf der Neudimensionierung, was Figma tut, ist, die Einschränkung zu ändern, um zu beheben. Also jetzt schauen Sie sich die vertikale man sagt, wie Inhalt, aber sobald ich vorangehe und die Größe ändere, geht es zurück zu einer festen Höhe, was sehr verständlich ist. Okay, jetzt, solange das sagt, dass solange ich die Größenbeschränkung für den gesamten Frame ändere, ein HUD-Inhalt ist. Selbst wenn ich das mache, siehst du, dass sich die Größe des Rahmens richtig ändert, okay? Und wenn ich fortfahre und eine Reihe von Texten von hier entferne, so sagen Sie, dass alles perfekt passt. Jetzt sind wir mit dem UI-Element fertig, das wir machen. Und schauen Sie, wie sauber es ist und wie gut es skaliert und alles, was es aus. Bisher haben wir in diesem gesamten Kurs fast alles in Bezug auf das automatische Layout behandelt, aber die Verwendung des automatischen Layouts erfordert etwas Übung. In der nächsten Reihe von Videos werde ich euch die Komponenten vorstellen, neue Komponenten, die ich tatsächlich in meinen echten Lord Projekten verwende. Und ich werde dich herausfordern, sie zu machen. Ich werde dir alles geben, was du brauchst, und dann kannst du deinen Schuss schießen, oder wenn du mir bitte zusiehst, wie ich es mache. Ok. Wir sehen uns im nächsten. Ich habe eine ziemlich tolle Challenge Bewertung. 8. Herausforderung 1: Lass dich von Lobo: Alles klar, wir werden von hier an alle Freestyle gehen. Du kennst die ganze Theorie und die kleinen Details über alles. Und es gibt nichts Neues mehr zu sagen. Aber ich weiß, dass es eine Sache ist, etwas zu wissen und eine andere, es in einem praktischen Fall zu verwenden. Also von hier an im Kurs werde ich Ihnen zeigen, Ihnen einige Komponenten zeigen, die ich in realen Projekten verwende. Und ich fordere Sie auf, diese auf eigene Faust mit Figma Auto-Layout überhaupt wieder aufzubauen. Ich werde sie auch zusammen mit dir bauen. Du hättest also eine Referenz und guckst mit, das kannst du tun. Und hier ist, was wir wirklich in diesem Video waren. In diesem Video bauen wir, was ich gerade den Namen Lob Panel gegeben habe. Okay, also in meinem neuen Projekt, das eine Website war, habe ich gute Dinge, die Leute über mein Wort gesagt haben, Listenkopf so. Es gibt etwas, das jemand gesagt hat. Ordnung, da ist das Lob, wer es gesagt hat, und der Name des Artikels oder der Arbeit, auf die sie ihn eingestellt haben. Jetzt werden wir eine Version dieser Komponente in diesem Video erstellen. So stellen Sie sicher, dass Sie in der Magie der körperlichen Outs totter Datei und in der Lob Panel malen Herausforderung, wenn Lob Panel, jetzt in dieser Seite finden Sie drei Abschnitte zu finden. K, Die erste ist die Anatomie der gesamten Komponente. A, so schön aussehen. Ich meine, es hat Textilien aufgelistet, die Polsterwerte aufgelistet, und die Farbe ist aufgelistet, et cetera. Also, wenn Sie diese Komponente selbst erstellen, können Sie sich nur auf die Funktionalität konzentrieren und sich keine Gedanken darüber machen, okay, welchen Füllwert sollte ich hier geben, und welche Farbe sollte ich hier wählen und welche Schriftart sollte ich benutzen? Nichts davon. Alles ist hier oben aufgeführt, und am Ende gibt es ein Dreieck, das ich gesetzt habe , das ist der einzige zusätzliche Teil, den Sie brauchen werden. Der Rest davon wird nur Rahmen und Text sein. Also ja, da ist es. Dort hast du alles und in der Mitte hast du die fertige Komponente, mit der du rumspielen kannst. Zum Beispiel kann ich Text vergrößern, mehr Text schreiben und hier mehr Text schreiben und sehen, wie sich die Größe ändert. Und dann kann ich es ausstrecken und herausfinden, oh ja, toll. So können Sie das tun, herumspielen, ein wenig recherchieren, Sehen Sie, wie es funktioniert, und dann gehen Sie weiter und irgendwo wieder auf der gleichen Seite, irgendwo hier, beginnen Sie mit der Arbeit an der Komponente. Also werde ich jetzt pausieren und du kannst anfangen zu arbeiten. Und wenn Sie nicht in der Stimmung sind, wenn Sie nicht in der Stimmung sind, können Sie sich einfach zurücklehnen, entspannen und zusehen, wie ich es mache. Nun, lassen Sie uns auf die Art und Weise gehen, wie ich diese Komponente sehe , ist, dass sie im Großen und Ganzen zwei Teile hat. Der obere Teil ist, wenn ich es einfach ziehen und ausblenden werde, der untere Teil so. Dies ist also der obere Teil und dann hat es den unteren Teil, das Dreieck. Und dieses kleine geschrieben für im Namen des Artikels Teil. So ist der untere Teil insgesamt etwas komplexer als der obere Teil. Beginnen wir also mit dem oberen Teil, was einfach ist. Dieser häufige Fehler oder nicht wirklich ein Fehler, aber eine häufige Sache vor Frames und Reframes war 0. Sie sehen ein Rechteck. Alles klar, gehen wir weiter und drücken Sie die Taste R und holen Sie das Rechteck-Werkzeug und beginnen Sie mit dem Zeichnen eines Containers bekannt. Und das wirst du nicht tun. Wie ein, Ich habe zuvor in den Anfangsvideos erklärt , dass wir nur den Inhalt brauchen und dann können wir einen Rahmen um ihn herum hinzufügen. Und ein Rahmen kann Eigenschaften wie Bagram Farbe und Schatten und abgerundete Ecken und vieles mehr haben. Beginnen wir mit dem Inhalt hier. Sagen wir, dieser Kohlenstoff hier ist richtig, Ihr Gutachter. Also lassen Sie uns T auf der Tastatur drücken und den textuellen Klick auf eine Leinwand bekommen und anfangen zu schreiben. Also schreiben Sie Ihre Noten hier und schauen wir, haben diese Kachel dazu. Dies ist weiß und Farbe in dieser Kachel des Textes ist Körper Bolzen. Also lasst uns das machen. Also werde ich den Text auswählen, wählen Sie das Textil für mich Körper fett und ändern Sie die Farbe nach rechts. Okay, einer erledigt. Nummer 2 ist der Autor, also gehe ich einfach voran und drücke Option. Ziehen Sie eine Kopie dieses Textes hierher, doppelklicken Sie darauf und geben Sie AUT ein. Got a UTI ist Ihr Autor und es hat ein Textil von Körpernormalen. Also werde ich das auswählen und diese Kachel in Körper normal ändern. Okay, es gibt auch einen Bindestrich vor dem Autor, also gehen wir weiter und machen das. Ups, nicht das, nur das. Ok, großartig. Jetzt, wo wir das haben, können wir sie in einem Rahmen zusammenstellen. Also, wie steckst du etwas in einen Rahmen? Wiederum wählen Sie sie aus, drücken Sie die Umschalttaste a und D befinden sich jetzt in einem Frame , der Frame fünf ist. Figma hat automatisch das Haupt gegeben. Doppelklicken Sie darauf und benennen Sie es in TOP, oben und drücken Sie die Eingabetaste. Okay, so weit, so gut. Schauen wir uns nun die Polsterung an, die es hat, es hat eine Polsterung von 32 Einheiten auf all diesen Höhen. Also werde ich den Rahmen auswählen, gehen Sie hier in Geschenk-Giving mit 32 und allen Seiten. Das nächste, was ich tun werde, ist, ihm eine Hintergrundfarbe zu geben, die blau 0 ist, um hier erwähnt zu mögen. Also lassen Sie es eine Hintergrundfarbe von blau, 0, groß. Und was ist noch übrig? Okay, aber der Abstand zwischen deinem Lob hier Text und allen drei Texten ist acht. Also, wie stellen wir sicher, dass es acht kleine wählen Sie diesen Rahmen, gehen Sie zu Abstand zwischen den Elementen und ändern Sie es auf acht von vier. Also, jetzt, wenn ich voran und klicken Sie auf eine dieser drücken Sie Option und schweben als andere. Sie können sehen, dass der Abstand zwischen ihnen acht ist. Ok, großartig, gut. Und nun schauen wir uns die abgerundeten Ecken an. Das sind also alle abgerundeten Ecken acht Pixel oder acht Einheiten. Aber beachten Sie, dass im oberen Teil nur die oberen linken und die oberen rechten Ecken abgerundeten Radius haben, während die untere rechte und die untere linke Seite diesen nicht hatten. Also gehen wir voran und stellen sicher, dass das auch bei dem der Fall ist , was ich erschaffe oder wenn wir gemeinsam erschaffen, wenn Sie folgen. Also, wenn Sie anders geben wollen, wenn Sie einfach voran und drücken Sie Acht hier und den abgerundeten Eckenradius, es wird es auf alle vier Ecken anwenden. Aber wenn Sie es teilen wollten, als ob er verschiedene Ecken, unterschiedlichen Radius geben wollte , können Sie voran gehen und klicken Sie auf dieses Symbol rechts hier heißt es unabhängige Ecken. Und ändern wir unten rechts und unten links, in Ordnung, auf 0. Woher weiß ich also, dass dies unten links und unten rechts ist? Diese beiden Kisten? Nun, wenn Sie den Mauszeiger über sie bewegen, können Sie das sehen und selbst in diesem Symbol hier drüben steht es für die Ecke, mit der wir es zu tun haben. Also wieder, so weit, so gut. Wir haben unser Top heiß fast fertig. Sie werden nur das, was wir brauchen, um sicherzustellen, dass es richtig skaliert. Also werde ich gehen, ich werde es dehnen und die Breite oder die Dimension der Texte sehen, die darin enthalten sind. Also wieder, es gibt immer noch kleine, sie reagierten nicht auf die Größenänderung. Lassen Sie uns also beide auswählen und ihre Größenbeschränkungen von HUD-Inhalt ändern , um Container zu füllen. Und jetzt, da wir voran gehen und die Größe ändern, sehen Sie, dass sich die Breite des Textes auch ändert. Genau hier sind wir mit dem oberen Teil fertig. Jetzt gehen wir zum unteren Teil. Also wieder, wir haben dieses Dreieck hier drüben, das ich gerade für Sie gespart habe. Also werde ich voran gehen und die Option drücken und eine Kopie herausziehen. Wir werden es im Bett brauchen. Also werde ich es hier lassen. Es wird übrigens flach genannt, und das Ebenenfenster. Also nochmal, ich werde es hier drüben lassen. Und wenn Sie in der fertigen Komponente sehen, haben wir das Dreieck, wir haben die Klappe. Aber es gibt auch, es gibt auch ein wenig Abstand zwischen diesen. Sie sehen dieses Leerzeichen hier drüben. Es heißt, es wird nicht genannt, wie hat Höhe von 16 hier und es erstreckt sich hier und geht für ein 16 Jahr. Also werden wir weitermachen und das tun. Aber zuerst machen wir diesen kleinen Teil, diesen echten Teil, der Arbeit für und den Namen des Artikels oder des Kurses enthält. Also, ich werde weiter gehen und T drücken und schreiben, 104 lesen und sehen die Textilien dafür. Okay, das ist Körper halb fett und es hat eine Farbe von Weiß. Also werde ich weitermachen und das tun. Also werde ich wählen Sie diese kaufte eine halb fett und eine Farbe von weiß. Okay, Also ich denke, ich habe ein n hier drüben vergessen, also gehen Sie einfach voran und schreiben n. Alles klar, dann werde ich voran und ziehen Sie eine Kopie davon heraus und tippen Sie in den Namen des Artikels ist Schrägstrich Kurs. Also lasst uns weitermachen und das tun. Name des Artikels. Slash Gerichte und das Textil dafür ist Körper normal. Wählen Sie es aus und geben Sie ihm das Textil des Normalen. Alles klar, gut. Und der Abstand zwischen ihnen ist 0. Also nochmal, um sicherzustellen, dass das der Fall ist werde ich beide auswählen. Frische Verschiebung ein, setzen sie in einem Auto I Rahmen. Gehen Sie voran und lesen Sie den Rahmen, sagen wir unten Details darüber, weil dies nicht der gesamte untere Teil ist, das ist nur die Details Teil. Okay, also werde ich es wieder auswählen, den unteren Detailrahmen, schauen wir uns an, es hat eine Polsterung von 24 links und rechts und 16 oben und unten. Wie machen wir das? Wir gehen weiter und klicken hier. Wir wählen eines der vier Felder hier aus und beginnen mit dem Schreiben der Auffüllwerte. Also 16 oben und unten im Jahr 2004 rechts, links. Wie wär's damit? Okay, und es hat eine Hintergrundfarbe von grau 0. Lassen Sie uns also eine Hintergrundfarbe von grau 0 geben. Und jetzt müssen wir sicherstellen, dass es acht Einheiten, acht Punkte, acht Pixel, abgerundete Ecken für die untere linke und die untere rechte und 0 für die obere linke und obere rechte. Also werde ich das auswählen, gehen Sie voran und teilen. Ich meine, nicht wirklich gespalten, aber Glyphe hier, ich stelle es mir vor, dass es sich um Radien verschiedener Ecken handelt. Also, wann immer Sie es nennen möchten, so oben rechts ist 0 gut, oben links ist 0 gut. Und unten rechts sollte acht sein, und unten links sollte wieder acht sein. Also werde ich darauf klicken. Und das sieht sehr gut aus, wie es sein soll. Und dann wieder, Lassen Sie uns voran und stellen Sie sicher, dass es der Text ist , der innerhalb des Rahmens ist, hat die Größenbeschränkungen, so gefüllt Container, so dass es alles füllt, wenn alles geändert wird. Also ja, ziemlich gut. Sie passen die Größe richtig an. Jetzt sind wir fertig mit den Teilen, die wir für den unteren Teil brauchen werden, in Ordnung, also das nächste, was wir sicherstellen wollen, ist, dass es diesen Abstand um diesen kleinen unteren Teil herum gibt . Wie machen wir das? Wir tun das, indem wir diesen Rahmen nehmen und ihn in einen anderen Rahmen setzen. Nun, wenn Sie den ganzen Kurs bisher gesehen haben, wissen Sie, dass wir immer Frames innerhalb von Frames verschachteln können. Das ist es, was wir hier tun werden. Wir werden diesen Rahmen auswählen und erneut die Umschalttaste a drücken , um diesen innerhalb eines anderen Auto-Layout-Rahmens zu verschachteln. Also werde ich Shift a drücken und jetzt ist dies eine weitere Einsicht und andere Auto-Ionen-Rahmen, und ich werde diesen Frame-Grabber nennen und w sind ein PPR. Und wieder im Ebenen-Panel, um sicherzustellen, dass es Rapper gibt und es unten Details. Nun, um sicherzustellen, dass es nur 16 Pixel Polsterung auf der linken und oberen Seite, wo Sie gehen und wählen Sie den Wrapper-Frame. Wir gehen weiter und klicken hier. Geschenk oben, eine Polsterung ist 16, links beim Biegen ein 16 unten und rechts zu einem Schwenken 0. Wenn Sie jetzt voran gehen und sich das genau ansehen, sehen Sie, dass es eine 16. Pixel sind 16 Punkte Polsterung auf der linken Seite. Oben. Und das nächste, was wir tun werden, ist, dass wir dieses Dreieck oder eine Wohnung nehmen. Ich werde es neben dem Wrapper-Rahmen platzieren, beide auswählen und sie in einen anderen Auto-Layout-Rahmen einfügen. Wie machen wir das? Wählen Sie beide wieder, drücken Sie Shift a, meine jetzt, Sie denken, die Verknüpfung Shift Tag ist nur tief in den Kopf gebohrt, was gut ist, was schön ist. Also wieder, wir haben ich denke, sie haben sie richtig gesetzt. Ich glaube, ich habe hier oben ein bisschen vermasselt, also werde ich Command Z ein paar Mal drücken und dann wieder gehen und wir gehen weiter und setzen sie wieder in einen Rahmen. Wählen Sie also die Klappen wie der Wrapper-Redshift-Tag aus. Und jetzt sind sie Einsicht in verschiedene Rahmen. Und ich werde voran gehen und diesen Rahmen B O T, T O M, unten nennen . In Ordnung. Und was dieser Rahmen als Null-Polsterung, Grade und 0 Abstand zwischen den Artikeln benötigt , weil wir nur wollen, dass dieser und der Rapper-Rahmen zusammenkleben. Und wegen des Wrapper-Rahmens ist nur leerer Raum. Zwischen ihnen gibt es 16 Pixel Polsterung oder 16 Pixel Abstand. Also werde ich unten auswählen und ändern. Du siehst, was passiert, wenn ich das mache, wenn ich es herumziehe. Also werde ich es auf 0 ändern. Da bist du also. Das ist der untere Teil. Nun, das letzte, was zu tun ist, wählen Sie oben und unten und fügen Sie sie in einem anderen Auto-Layout-Rahmen zusammen. Wählen Sie also beide aus, drücken Sie Umschalttaste a, und jetzt befinden sie sich in einem Frame. Die einzige Sache, die wir sicherstellen müssen, ist, dass der Abstand zwischen ihnen 0 ist. Ordnung, so werden wir sicherstellen, dass der obere Teil eine horizontale Größenbeschränkung des Phil Containers hat , so dass er alles füllt. Und jetzt, wenn ich die Größe ändere, sehen Sie, dass der untere Teil nicht die Größe ändert. Also lassen Sie uns wieder voran und stellen Sie sicher, dass es horizontale Größenbeschränkungen des Phil Containers hat. Also lasst uns das machen. Okay, es ist gefüllter Behälter. Und dieses Ding hier drüben sollte eine feste Breite und Höhe sein, und das sollte ein Füllbehälter sein. Und dann werde ich wieder ein paar Mal wieder klicken, was passiert, ist, dass die verschachtelten Rahmen für die verschachtelten Elemente eine feste Breite, horizontale Einschränkungen haben. Selbst wenn Sie als so etwas wie Folk-Container auf dem Wrapper festgelegt haben , reagiert es nicht. Sie müssen also doppelklicken, hineingehen und sicherstellen, dass alles, was Sie ausgewählt haben, was auch immer Sie ausgewählt haben, Größenbeschränkungen hat, um Container zu füllen. Und jetzt, wenn ich gehe und die Größe ändere und du siehst, funktioniert alles gut. Und wenn ich vorgehe und hier so einen Haufen Text schreibe, und alles bewegt sich so, wie es soll. Alles klar, das ist großartig, das ist großartig. Wir haben gerade das Bauteil zusammen erstellt. Und ich denke, alles, was wir bisher im Kurs gelernt haben , konvoiert eigentlich nur zusammen. Wir haben gesehen, wie wir eine beliebige Anzahl von Frames erstellen können, die wir unterwegs wollen. Und das ist großartig am Ende, ich hoffe, du bist, du bist dem gefolgt, oder du hast nur versucht das auf eigene Faust zu schaffen, ohne mich dabei zuzusehen. Und am Ende dieses Videos, ich hoffe, Sie haben eine funktionierende schöne Auto-Layout-Komponente. Im nächsten üben wir ein wenig mehr. Es wird etwas komplexer sein als das, was wir hier getan haben. Etwas komplexer und, du weißt schon, eine Pause machen. Gehen wir nun zur Herausforderung Nummer 2, Spielkarte. 9. Herausforderung 2: Spielkarte: Sarah Jones 1, Sie wenden sich an eine Reihe von Dingen, die Sie gelernt haben und am Ende eine richtige Benutzerschnittstellenkomponente erstellt haben. Wir machen einige sehr traditionelle sagen, aber das ist, was es besonders macht, nicht wahr? Und jetzt ist es Zeit für eine Herausforderung. Und hier ist, was wir bauen und Herausforderung Nummer zwei. Also gehen Sie vor und stellen Sie sicher, dass Sie im Inneren Mastering Figma, die Magie der Flasche Ale Starterdatei und innerhalb der Herausforderung, Kartenseite zu gewinnen. Jetzt auf dieser Seite finden Sie drei verschiedene Frames. Worauf werden wir uns konzentrieren? Zuerst ist die mittlere, die die endgültige Komponente ist. Jetzt wird diese Komponente aus einem realen Projekt herausgezogen. Wenn man das bedenkt, dass es Teil eines anderen, eines ganz anderen Projekts ist. Diese Komponente verwendet nicht die Stile und Farben, die wir bisher im Kurs verwendet haben. Aber das wäre kein Problem beim Bau und Wiederaufbau dieser Komponente, denn jeder einzelne Teil davon, alle Textilien, Knöpfe und alle anderen Teile davon sind hier weniger tot. Also lasst uns schnell über die fertige Komponente gehen und sehen, wie sie funktioniert, okay? Und es passiert hier nichts Außergewöhnliches. Es ist nur so, dass es die Größe der Größe ändert. Und auch, und auch was? Beachten Sie diesen Strich hier drüben, rechts, diese Linie hier drüben. Und beachten Sie, wie es sich dehnt und zusammenzieht, basierend auf der aktuellen Größe. Das gefällt mir ganz. Jetzt gibt es eine Reihe von Auto-Layout-Frames, die diese Karte ausmachen und sie so verhalten, wie sie ist. Und, weißt du, bevor du anfängst, möchte ich, dass du diese Herausforderung darin siehst, ein Auto zusammen mit nur Teilen zu montieren. Alles klar, hier sind die Teile und wir stellen alles in ein fertiges Bauteil zusammen. Bevor wir anfangen, ist die letzte Sache, auf die ich Sie aufmerksam machen wollte, diese Option Copy Properties, die in Figma verfügbar ist. Also beachte diesen Rahmen hier drüben. Es hat Farbe, wissen Sie, eine Art von Bagram-Farbstrich an den Seiten und einige, einige auch einige Schlagschatten. Das zu replizieren ist jetzt eine Art Grind-Arbeit, weil wir es mit Auto-Layout-Frames zu tun haben. Es gibt also eine Option, wissen Sie, es gibt eine Option, um die Eigenschaften direkt zu kopieren und in einen Rahmen einzufügen. Zum Beispiel ist dies ein kleines Quadrat mit allen Eigenschaften, Hintergrundfarben, Strich, Schatten und allem von diesem großen Rahmen. Wenn Sie also den endgültigen Frame bereit haben , können Sie uns nur einen temporären Rahmen erstellen. Also drücke ich F und ziehe es heraus. Und dann gehe ich weiter und klicke darauf und gehe weiter und klicke mit der rechten Maustaste, Kopieren und Einfügen und dann Eigenschaften kopieren. Dann kann ich in diesen Rahmen gehen und voran gehen und auf Eigenschaften einfügen klicken. Und einfach so muss man sich keine Gedanken darüber machen, welche abgerundeten Ecken ich bekommen sollte oder welche Herausforderung und ich bekomme. Es kann einfach kopiert und so eingefügt werden. In Ordnung, also bin ich mir ziemlich sicher, dass ich alles abgedeckt habe, was nötig ist. Jetzt können Sie von hier aus auf eigene Faust arbeiten, wenn Sie wollen, oder Sie können mich einfach beobachten und folgen, wie ich dies wieder aufbaue und damit ich nicht vergessen, auf der rechten Seite der endgültigen Komponente ist auch die Anatomie der Komponente, der Abstand zwischen ihnen, die Farbe, dann sollten Sie in allen Werten verwenden, die benötigt werden. Dann fügt mir die Parks hinzu, der letzte in der Mitte. Lass uns weitermachen und das neu erstellen. Und du beginnst mit dem ersten, was ich tun werde, ist, die Leinwandfarbe ein wenig heller zu machen. Also, was ich damit meine, sind die Farben, die arbeiten werden, mit für diese Komponente dieser wie Blautöne arbeiten, haben keinen großen Kontrast zur Farbe der Leinwand. Also hier ist, was ich meine. Also werde ich weitermachen und dein kleines Rechteck erschaffen, nur um dir zu zeigen, was ich meine. Und die Farbe ist D2, E, F, F. Also lassen Sie mich gehen und geben Sie ihm die Farbe von D2, E, F, F. Und Sie sagen, es ist nicht sehr sichtbar auf dieser Leinwand. Also, was ich tun werde, ist mit Figma, wenn nichts auf der rechten Seite ausgewählt ist, haben Sie die Hintergrundfarbe Option und es wird die gesamte Farbe der dann hoch erhabenen Leinwand anpassen . Also ja, ich werde voran gehen und stellen Sie sicher dass Sie HSL ausgewählt ist und das Farbformat, und ich werde die Helligkeit erhöhen. Also vielleicht einige wie diese, nicht ganz weiß, aber näher an Weiß. Okay, die Farbe ist F7, F7, F7. Und Sie können es immer auf E5, E5.5 zurücksetzen, was die Standardfarbe für Figma Canvas ist. Also, wie ich angefangen habe, das erste, was wir tun werden, ist, dass wir diese besondere Sache machen werden, diese Reihe hier, weil sie zweimal wiederholt wird. Und der einzige Unterschied ist der Text und das Symbol. Also, ja, fangen wir damit an und dann bauen wir den Rest der Elemente um ihn herum. Also, um das zu bauen, ist das erste, was wir tun müssen , dieses Symbol Rang fest hier rauszuziehen. Also werde ich weitermachen und es aus der Leinwand ziehen. Also auch, da du, weißt du, du arbeitest damit, und du denkst, dass, oh was, wenn ich Dinge verwirre und die Elemente und ihren Standardzustand und die Teile verliere, na ja, kein Problem. Ich würde vorschlagen, dies zu tun, klicken Sie auf Teile halten Option und ziehen Sie eine Kopie davon heraus, so dass es dort als Backup bleibt. Okay, jetzt wieder, wieder auf Kurs, das erste, was wir tun müssen, ist, dieses Symbol herauszuziehen. Was brauchen wir noch? Wir brauchen zwei Textfelder, und ich bin nicht wirklich Textfelder mit zwei Tanks. Diese Trefferrate und versuchen, seine richtig beantwortet den Subtext in einem hier zu werben. Also insgesamt drei Dinge. Okay, also los geht's. Hier ist der erste Text hier, der Text, der darunter geht und der Text, der auf Nebenwirkungen geht. Also arrangiere ich diese einfach im Raum wie diesem, okay? Ok, großartig. Und um damit zu beginnen, gehen wir voran und klicken Sie auf das Perzentil und wo Sie diese beiden Texte wie sie zusammen stehen und drücken Sie Shift a, um sie in einen automatischen Layout-Rahmen zu setzen. Und jetzt gibt es in einem Rahmen. Und was wir tun werden, ist diesen Rahmen zu nennen, sagen wir, Inhalt. Wie wär's damit? Nennen wir es Inhalt oder wissen Sie, es wurde nur eine Info genannt. Okay. Da gehst du. Dies ist der Inforahmen und das nächste, was wir tun werden, ist, alle diese drei Dinge zusammen auszuwählen. Das Top 20 Prozent, Perzentil-Rahmen und dieses Symbol und setzen sie zusammen in einem Auto-Layout-Rahmen. Also gehen Sie vor und wählen Sie sie, Shift a und Figma automatisch schließen, dass, da sie horizontal angeordnet sind, es wendet ein horizontales Richtungslayout auf sie, auf den Rahmen, der sich im Inneren befinden. Also werde ich voran gehen und diesen Rahmen nennen, sagen wir Inhalt. Okay, großartig. Der Inhalt hat also die Nummer, das ist dieser Text hier drüben. Lassen Sie mich es einfach in Stat ändern. Wieder. Ich nenne es einfach Stack. Dies ist der Inforahmen und dies ist der Icon-Rahmen. Okay, cool. Und das nächste, was wir tun werden, ist, diesem Rahmen wieder eine Hintergrundfarbe zu geben, die gleiche Hintergrundfarbe, die hier oben aufgeführt ist, das ist D2 E, F, F. Und um diesem Rahmen der Hintergrundfarbe zu geben, alle Sie tun, ist es einfach so auszuwählen. Und schauen Sie hier, wo es sagt Fill, klicken Sie auf dieses Plus-Symbol und geben Sie ihm ein Symbol und geben Sie ihm die Farbe v2, e, 0, f, f. Es hat eine, es hat jetzt eine Hintergrundfarbe. Und das nächste, was wir herausfinden müssen, ist, okay, was ist die Polsterung auf allen Seiten? So ist die Polsterung auf allen Seiten dieser bestimmten Reihe 24. Lassen Sie uns also eine Polsterung von 24 auf allen vier Seiten geben. Um das wieder zu tun, wie auf dem Rahmen, geh hier rüber und schreibe 24, okay? Und auch, dass es einen abgerundeten Eckenradius von acht hat. Also werde ich voran gehen und acht hier schreiben und auf Enter klicken. Ich habe es nicht, ich habe es nicht vom Nazi erwähnt, vielleicht weil ich es geschaffen habe. Ich erinnere mich an einige der Werte. Ordnung, also jetzt in diesem, werde ich weiter gehen und den Inforahmen wieder auswählen und sicherstellen, dass der Unterschied zwischen ihnen, der Abstand zwischen diesen beiden Elementen 0 ist, damit sie besser zusammengepackt werden. Okay, Nett. Und auch die Top 20 Prozent, dieser Text schwebt oben. Sie sind nicht zentral ausgerichtet. Um sicherzustellen, dass sie zentral ausgerichtet sind, klicken Sie darauf und wählen Sie dies und jetzt sind sie in der Mitte ausgerichtet. Okay? Und nun über die Größenänderung, lassen Sie uns überprüfen, wie sie funktionieren, wenn diese Zeile horizontal gestreckt wird. Wirklich nichts passiert, weil wir diese Einstellung der Verpackung als verpackt haben. Lassen Sie uns voran gehen und wählen Raum zwischen. Und jetzt, wenn ich die Größe ändere, sagen Sie alles, skaliert und dehnt sich richtig. Aber wieder, das Problem ist, dass wir wollen Schreibtisch Person, Thai-Liste, Info, Rahmen und Symbol zusammenhalten und nur dieser Text fließen, wenn gestreckt. Also, um das zu tun, um sicherzustellen, dass diese fixiert bleiben, werde ich voran gehen und beide auswählen. Drücken Sie erneut die Umschalttaste a, um sie in einen automatischen Layout-Rahmen zu setzen. Und ich werde diesen Rahmen nennen, sagen wir, stat plus Symbol darüber. Ich werde es so nennen. Und wir gehen weiter und stellen sicher, dass der Unterschied zwischen ihnen, der Abstand zwischen den Gegenständen etwas kleiner ist, was hier erwähnt wird. Das ist 16, 16, 16, dieser Abstand, also gehe ich zurück, also denke ich, dieser Rahmen, ändere den Abstand zwischen den Gegenständen, mach 16, es regnet, damit du vielleicht etwas auf die Toilette rennst. Immer erfrischend. Großartig. Okay. Nun, ja, kommen zurück zu diesem, und versuchen, zu sehen, wie es funktioniert, okay, es dehnt sich richtig aus. Sie sagen, das bleibt dort, wo es ist und das StatPlus-Symbol bleibt auf der linken Seite. Und der Stat, der diese Zahl ist, bleibt auf der rechten Seite und dehnt sich richtig aus. Wir haben es getan und wir wollten zwei davon brauchen. Also weißt du was, ich werde es einfach hierher ziehen, damit es einfacher ist, immer wieder zu schwenken. Also werden wir zwei davon brauchen. Der erste ist der Haupthandel und der zweite ist Perzentil. Also werde ich voran gehen und die Option halten und eine Kopie daraus ziehen. Wenn Sie an einem realen Projekt arbeiten, würden Sie tatsächlich eine Komponente daraus erstellen. Aber im Moment lernen wir nur etwas über das automatische Layout. Also werde ich die Vergangenheit lassen. Also wieder, was wir wollen, ist, dass dieser Text hier ist Trefferrate, so fangen IT RAT. Und die Texte hier sind Perzentil, was großartig ist, und der Subtext für Trefferrate wird versucht, gegen richtig beantwortet. Also wieder, drücken Sie T, klicken Sie hier und gehen Sie weiter und schreiben Sie es. Versucht. Vers sagt richtig. Beantwortet, okay, Nice. Wir haben diese zwei netten Kleinigkeiten hier. Und nochmal, weißt du was? Da dies sind, sind dies horizontale Reihen und um eine Art von Statistik für den Benutzer, der das Spiel spielt, darzustellen . Also werde ich das in Stempelreihe umbenennen, okay? Und ich werde das Gleiche für diesen hier drüben tun, Stempelreihe. Alles klar, und jetzt müssen wir dieses Symbol hier drüben ersetzen. Und um das zu tun, werde ich einfach voran gehen und dieses Symbol auswählen und Kommando C drücken . Wählen Sie diesen Frame Phrase Befehl V und Sie wissen, das ist einfach arrangiert es hier drüben. Also werde ich es ziehen und dort legen, wählen Sie dieses Symbol, drücken Sie, Löschen und bam, es ist weg. Also, da gehst du. Wir haben die stat Ref bereits. Und jetzt können wir voran gehen und beide auswählen und beide zusammenstellen. Und dann Auto-Layout-Frame, drücken Sie Umschalttaste a und rufen Sie diesen Frame gestempelt Zeilen. Okay? Und das nächste, was ich überprüfen möchte, ist, dass es sich bei horizontaler Größenänderung richtig dehnt. Also, um zu testen, dass ich diesen Rahmen dehnen werde, aber nichts passiert. zu beheben, wählen Sie den Inhalt im Inneren aus und ändern ihre Größenbeschränkung, horizontale Größenänderungsabhängigkeiten, um einen Container zu füllen. Und jetzt, wenn ich die Größe dieses ganzen Rahmens ändere, ändert sich alles in ihm richtig. Großartig, wir sind mit einem Teil davon fertig. Und das letzte, was damit zu tun ist, ist zu wissen, was der Unterschied zwischen den y-Werten ist oder ein Abstand zwischen ihnen war, was H. Also werde ich voran gehen und wählen Sie den Statuen Rahmen und ändern Sie dies, den Abstand zwischen den Elementen zu acht . Alles klar, cool. Als nächstes werde ich etwas ganz Einfaches tun, ist diese Schaltfläche zu erstellen, diese beiden Tasten, aber sie zusammen in einem einzigen Frame. Ich werde nur voran gehen und den Unterschied zwischen ihnen sehen. Ich sage immer den Unterschied, aber es bedeutet die Trennung, die Lücke zwischen ihnen, die acht ist. Also, was ich tun werde, ist, diese beiden Tasten zu nehmen, Shift klicken, um beide auszuwählen und hilft. Okay, ich werde sie einfach so hierher ziehen, oder? Und wir werden sie in einem Rahmen zusammenstellen. Wählen Sie sie aus, drücken Sie Umschalttaste a, so dass sie sich in einem Frame befinden. Gehen Sie voran und nennen Sie diese Frame-CTAs oder rufen Sie die Aktionstasten auf. Und dann werde ich sie hier drüben positionieren. Das nächste, was ich tun werde, ist, das so zu dehnen. Aber dann wieder sehen Sie, dass der Inhalt in diesem Rahmen nicht auf diese Strecke reagiert. Wählen Sie also beide aus und gehen Sie voran und ändern Sie ihre Größenbeschränkung. Ich habe das immer und immer wieder getan, um Behälter zu füllen. Jetzt zeigten sie die Größe richtig geändert. Okay. Das ist also erledigt. Also sind wir damit fertig und wir sind damit fertig. Jetzt gehen wir weiter und machen das. Dies war ein ruhiger und interessanter Teil , wo sich diese bestimmte Linie oder dieser Strich dynamisch dehnt. Also für diesen Teil brauchen wir 12344 verschiedene Dinge aus dem Teilerahmen. Also lasst uns weitermachen und sie schnappen. Also werde ich weitermachen und dieses Augensymbol brauchen. Und dann werde ich weitermachen und diesen Text brauchen. Also werde ich das dort hinstellen. Und dann werde ich dieses Ding brauchen, was ich als Verdienstzähler bezeichnet habe. Also werden wir die zusammen nehmen und, du weißt schon, meine Rechnung, diesen kleinen Teil. Und eine Sache, die ich vergessen habe, aus den Rahmen zu ziehen, ziehen Sie aus der Teileplatte, wenn dieser kleine Strich, wo es hier drüben. Also werde ich es auswählen und es rausziehen und es hier drüben platzieren. Okay, also los gehst du. Also, was jetzt, wenn wir die Teile haben, was jetzt, was ist der nächste Schritt wieder, um sie zusammenzustellen. Also werde ich weitermachen und verheiratete hier drüben zählen lassen. Ich werde diese Linie hier drüben verlassen, wie sie ist. Ich werde diese beiden in einem Auto-Layout-Rahmen zusammenstellen . Also gehe ich zu ihnen und drücke Shift a, genau so. Und ich werde weitermachen und wieder, nennen wir es „Verdienst Info“. Ich benenne nur die Schichten. Es spielt keine Rolle, da die Benennung vom Kontext des Projekts abhängt , an dem Sie arbeiten. Konzentriere dich also nicht auf die Benennung, was sie bedeuten. Es ist nur so, dass Schichten nicht Frame 93 oder Form 72 genannt werden , weil ich nur meine Zahnräder schleift. Also wieder, sobald sie in einem Rahmen sind, Lassen Sie uns die Trennung zwischen ihnen sehen, die acht ist. Es ist also gemacht, voran zu gehen und sicherzustellen, dass das der Fall ist. Also wieder, Trennung zwischen Elementen, Lassen Sie uns von fünf zu acht ändern und ja, lassen Sie uns voran und ändern Sie die Ausrichtung in Mitte oder Metall, weil das ist, wie es sein sollte. Der ganze Weg spielt keine Rolle, weil wir das nicht vertikal strecken werden. Okay, cool. Und jetzt, wenn wir diese drei Teile haben, ziehen wir sie aus und drücken die Umschalttaste acht, damit sie sich innerhalb eines Rahmens befinden. Und nochmal, ich werde den Rahmen umbenennen. Tun Sie so etwas wie die Ehe. In Ordnung, cool. Und das nächste, was ich tun werde, ist, seine Ausrichtung zu ändern, um auf beiden Achsen zu zentrieren, x und y sind sogar das funktioniert nicht wirklich wichtig, weil wir gehen voran und ändern dies von verpackt in Raum dazwischen. Also lasst uns weitermachen und das tun. Ändern Sie das in Abstand zwischen und jetzt, wenn ich das ziehe und dehne, können Sie sehen, dass es funktioniert, wie es soll, aber diese Linie ändert sich nicht, ihre Breite, bleibt so, wie es ist und einfach in der Mitte schwebt. Um dies zu ändern, wählen Sie die Linie aus oder wählen Sie ein beliebiges Element aus , das Sie in jedem Projekt, an dem Sie gerade arbeiten , wie diese Linie verhalten möchten , und ändern die horizontale Größenbeschränkung in Füllcontainer. Und sobald das gefüllt Behälter, der Rest von ihnen eine feste Breite und eine feste Höhe oder heißen Inhalt oder diese Daten haben und strecken mit dem Rahmen, mit dem Containerrahmen. Und wenn es gestreckt ist und wieder, wenn ich jetzt die Größe ändere, sieht man, dass sich die Linie so erstreckt, wie sie soll, aber es gibt diese Lücke hier und diese Lücke hier, die wir nicht wollen. Und das liegt an dem Abstand zwischen den Elementen Wert, der derzeit auf 31 festgelegt ist. Was wir tun können, ist gehen Sie voran und schreiben Sie 0 und drücken Sie die Eingabetaste. Und jetzt sieh dir das an. Das ist ziemlich cool, richtig? In Ordnung, also, ja. Und wieder, wir wollten nicht wirklich, dass das 0 ist, wenn ich mich richtig erinnere, wollen wir, dass es 16 ist. Also lasst uns weitermachen und das 69 machen. Ich habe das total vergessen. Also, und so zu 0 Typ und 16. Und da gehen wir. Und wir werden wieder zwei davon brauchen. Also werde ich Option halten und es herausziehen. Und ich werde, bevor ich sie in einen einzigen Rahmen setze, werde ich die erforderlichen Änderungen vornehmen, die hier drin sind und hier wetten. Also WETTE. Und das nächste, was wir brauchen, ist, dass wir das brauchen oder lesen, lesen Element und jetzt die blauen Elemente. Wählen Sie also diesen Rahmen Befehl V aus und legen Sie ihn dort drüben. Und dann werde ich das Blaue löschen. Also haben wir diese beiden zusammen. Wieder, gehen Sie voran und legen Sie sie in einem einzigen Frame, indem Sie beide auswählen und drücken Sie Umschalttaste a, und ich benennen Sie die Frame 2 Vorzüge um. Okay, und lass uns weiter gehen und sehen, was der Unterschied ist? Was ist die Trennung zwischen ihnen? Das sind vier. Gehen wir also voran und stellen Sie sicher , dass der Abstand zwischen den Elementen für diesen Rahmen vier beträgt. Und ja, da ist er. Wir haben einen anderen Teil der gesamten Karte bereit und stellen wir sicher, dass sie auf Strecken reagiert. Ich werde die Schritte nicht noch einmal lesen. Sie wissen schon, was zu tun ist, um sicherzustellen, dass der Inhalt auf die Größenänderung reagiert. Also, da gehst du, wir haben es geschafft. Und das nächste, was hier bleibt, ist, dieses Symbol zu setzen, diese Höhe auf der linken Seite der Vorzüge dieses Rahmens. Also nochmal, ich gehe weiter und ziehe dieses große Symbol von hier, lege es neben diesen Rahmen, und dann gehe ich voran und wähle beide aus und setze sie wieder in einen einzigen Auto-Layout-Rahmen, indem du Shift a drückst. Und ich werde voran gehen und völlig irrelevant, was ich das vorerst nannte, aber lassen Sie uns es einfach bis ins Detail nennen. Okay, gehen wir weiter und sehen, wie sich die Größe ändert. Ich gehe weiter und schiebe es hierher. Aber dann wieder sieht man, dass sich dieser nach außen aus dem Rahmen bewegt, wohingegen dieser innen bleibt. Aber das ist nicht etwas, was wir wollen. Wir wollen, dass dieses Ding den Behälter ausfällt und keine feste Breite hat. Dies ist also eine feste Breite und dies ist ein voller Container. Wenn also der Containerrahmen, diese ganze, ganze Sache geändert wird, sehen Sie, dass nur dieser Teil die Größe ändert, wo das Symbol bleibt, wie es ist, und das ist, was wir wollen. So sind wir mit 123 verschiedenen Teilen des Autos fertig. Der letzte Teil ist genau hier, das ist der Anfänger, Sie kennen den Titel der Karte und diese kleinen Punkte. Also werde ich voran gehen und beide von hier aus dem Teilerahmen auswählen und sie herausziehen. Und das nächste, was Sie tun möchten, ist, fügen Sie sie in einem automatischen Layout-Rahmen zusammen. Wie stellen wir sie zusammen? Wählen Sie beide und drücken Sie Umschalttaste a. Das erste, was ich tun werde, ist sicherzustellen, dass es in der Mitte ausgerichtet ist und der Abstand nicht gepackt ist, aber Raum zwischen NY ist, dass wieder, Ich werde iterieren. Wenn ich, wenn es gepackt ist und ich den Rahmen betone, bleibt er gepackt. Aber wenn es Raum zwischen einem dehnt und füllt den Rahmen als Kind, Ich werde voran gehen und diesen Rahmen von 81 auf Low-Level umbenennen. Kalt. Und genau so haben wir alle Teile der Karte bereit. Und bevor wir fortfahren und all das in eine Einheit legen, lassen Sie mich gehen und zurück zur endgültigen Komponente und schauen Sie sich das Verhalten der Karte an, wenn sie vertikal gestreckt ist. Okay, wir sehen uns wieder. Dieser ganze Teil, der obere Teil bleibt gepackt, wie es immer ist, wie der CDA ist, diese beiden Tasten tatsächlich folgen der Unterseite der Karte und strecken und schweben am Ende. Dies sollte also eine klare Vorstellung geben, dass die Verpackung, die wir auf dieser ganzen Karte verwenden, ein Raum zwischen anstatt verpackt ist. Aber bevor wir fortfahren und alle diese Teile zusammen konsolidieren, die oberen Teile zusammen zu einem Frame, und nicht nur einem Frame, weil es unterschiedliche Abstandswerte zwischen diesen gibt. Zum Beispiel ist der Abstand zwischen dieser obersten Ebene und diesem Teil 24, dies indiziert 40. Also nochmal, wir werden das und das in einen Rahmen setzen und diesen Rahmen und diese Statuen in einen einzigen Rahmen setzen. Okay, hier ist, was ich meine. Gehen wir also voran und fangen damit an. Also werde ich die Ebene des Rahmens und die Detailgenauigkeit für impress Shift Tag schieben sie in einen einzigen Frame und ändern Sie den Abstand zwischen den Elementen auf 24. Das ist ein Rahmen. Wir werden voran gehen und es nennen, sagen wir Level-Details für diese hilfreich. Wie wär's damit? Okay? Und dann werde ich diese Detaillierungsstufe voll und Mitarbeiter Autoren auswählen und diese beiden zusammen in einen Rahmen stellen. Markieren Sie erneut beide, drücken Sie die Umschalttaste a und ändern Sie den Abstand zwischen ihnen in 40, wie es in der Anatomie der Komponente erwähnt wird und nicht. Und dieser Teil, ich werde weitermachen und es einfach oben nennen. Okay? Und jetzt kann ich voran gehen und Top und CTAs auswählen und diese beiden im endgültigen Rahmen zusammenstellen. Also Shift a, und das ist im Rahmen, und ich werde dies von Frame eine T1, T2, wieder Karte umbenennen , richtig? Dies ist der letzte letzte Wrapper. Und der letzte Wrapper hat es eine Polsterung von 32 auf allen Seiten. Also werde ich das auswählen und zum Padding gehen und sicherstellen, dass es 32 ist. Okay, und lasst uns weitermachen und ihm eine Hintergrundfarbe und Grenzen geben und all das Zeug. Denken Sie also daran, dass ich von Anfang an über Kopierstile oder Kopiereigenschaften gesprochen habe . Das ist Präsident in Fragmenten. Ich gehe mit der rechten Maustaste, gehe zu Kopieren Einfügen. Also würde ich Eigenschaften kopieren. Ich gehe weiter und gehe zurück zu diesem Frame und gehe weiter und klicke erneut mit der rechten Maustaste und wähle Eigenschaften einfügen. Und genau so habe ich den gesamten Stil angewendet. Okay, letzte Sache, um sicherzustellen, da ich immer und immer wieder im Kurs iteriert habe , um zu sehen, wie es sich verhält, wenn es in der Größe geändert wird. Wenn Sie also horizontal gestreckt , können Sie wieder sehen, dass diese nicht reagieren. Also werde ich fortfahren und sicherstellen, dass die Rahmen und alle verschachtelten Frames horizontale Größenbeschränkungen oder Füllcontainer haben. Lass uns voran und lass es den Behälter füllen. Und dann geh ich rein und mache diesen gefüllten Behälter. So, machen Sie diesen gefüllten Behälter so. Okay, das bin ich. Gehen Sie weiter. Sie können weiter doppelklicken, bis Sie zu einem Rahmen kommen, der daran befestigt ist, und gehen Sie voran und setzen, dass Container zu füllen, wählen Sie diese und ändern, um den Container zu füllen. Und jetzt, wenn ich die Größe ändere, sagen Sie, es passt sich perfekt horizontal an. Aber was ist dann mit der vertikalen Größenänderung? Wenn ich dieses Wort wirklich skaliere, bleibt es gepackt. Das wollen wir nicht. Wir geben IV. Wir gehen voran und ändern diesen Abstand oder Verpackung in Raum dazwischen. Da gehst du. Und lassen Sie uns voran und versuchen, die Größe und vertikal zu ändern. Und es verhält sich so, wie es sollte. Okay, und ich weiß, dass dieses Video über 20 Minuten gestresst wurde, aber ich wollte alle Schritte durchlaufen und alle Schritte erklären, die beim Erstellen einer UI-Komponente aus automatischen Layout-Frames beteiligt sind. Und der Punkt, den ich illustrieren wollte, ist, dass es einfach nicht so ist, dass Sie sich darauf beschränken müssen, alles in einem Rahmen zu machen. Sie können sehen, dass die Anzahl der hier verwendeten Frames ist, ich denke, es ist weit über 10 hinaus und das ist in Ordnung. Das ist okay. Das ist die ganze Sache Funktionen. Also, Sie wissen, versuchen Sie, alle Iframes so viel wie möglich zu verwenden. Denn wenn diese Karte wird in eine tatsächliche gelegt werden, sagen wir, eine Seite und die Breite der Seite ist nicht so etwas wie 587, aber ich sage 340, also, wissen Sie, es ändert sich und wenn es richtig ist, anstatt die Größe jedes einen Teil davon und passen in diesen bestimmten Raum der Seite. Oder wenn die Seite groß ist, dann können Sie sie dehnen und es passt weitgehend Ende des vorherigen Diagramms. Sie können voran gehen und so etwas passen. Das ist also großartig. Verwenden Sie mehr Frames und verwenden Sie beliebig viele Frames. Und ich hoffe, dass Sie im Kurs bisher viel gelernt haben. Und an dieser Stelle sind wir mit denen die meisten Beispiele und mit den meisten Herausforderungen getan. Der letzte, der Knochen ein Schieberegler ist , der im nächsten Video diskutiert wird, ist keine Voraussetzung, aber es ist eine verrückte Verwendung von Auto-Layout. Und es ist ziemlich geschickt, wenn du mich was fragst, weißt du was, ich erzähle dir im nächsten Video mehr darüber. 10. Bonus-Challenge: :: Okay, du bist immer noch da, also werde ich es dir wert machen. Sie wissen, was magisch an diesen Werkzeugen wie Fatma oder einem anderen Werkzeug ist, dass Sie nicht vorhersehen können, wie Menschen die Funktionen nutzen werden, in welchen Permutationen sie die Funktionen anwenden und welche neuen Dinge, die sie wird sich einfallen lassen. Manchmal werden diese neuartigen Dinge, diese Permutationen von Möglichkeiten der Verwendung von Features als Hacks bezeichnet. Und oft werden diese Hacks Teil der Kernfunktion, richten Sie ein Werkzeug auf der Linie, sobald die Aufgabe ist, was Rajit, ein Designer Befürworter bei Figma, mit Auto-Layout und Schiebereglern gemacht hat, inspirierte ich beschlossen, es zu geben und machen Sie diesen zusammengesetzten Rückmeldung Schieberegler. Jetzt ist dies ein Teil eines realen Projekts, an dem ich arbeite. Und schau dir an, was ich tun kann, ist, dass ich den Betrag, den der Schieberegler gefüllt ist, mit logischem Layout anpassen und den Prototyp dazu bringenkann logischem Layout anpassen und den Prototyp dazu bringen , mehr als nur ein Low-Fidelity-Mock-up zu sein. Wir werden genau die gleichen Techniken verwenden , die ich hier mit all dem benutze, um dieses kleine Ding zu erstellen, den Schieberegler, in dem die Menge, die der Knopf geschlitten wurde, mit der Option Abstand zwischen den Elementen im Auto-Layout-Streifen angepasst werden kann auf der rechten Seite, genau so. Ich habe diesen Schieberegler zu einer Komponente gemacht. Sie können feststellen, dass, wenn Sie sich das Ebenenbedienfeld und dieses Symbol direkt hier drüben ansehen, es bedeutet, dass es eine Komponente ist. Und all dies auf der rechten Seite sind Instanzen dieser Komponente und Instanzen, die Sie ein paar Dinge außer Kraft setzen können, wie wir gesehen haben, aber Besitz und Dimension gehören nicht dazu. Also, wenn das nicht für den Hack war, und ich benutze Hack in Luftkuraten. Wenn dies nicht den HAC verwendet, um den Regler zu positionieren, muss die Instanz so gelöst werden. Sie können voran gehen und Instanz lösen, was bedeutet, dass diese bestimmte Sache nicht mehr mit der Hauptkomponente verbunden ist, muss die Instanz lösen und dann Dinge bewegen, was chaotisch und hässlich ist. Tu das nicht. Stattdessen verwenden Sie Auto-Layout und sehen, wie auch in der Instanz, jeder Schieberegler kann eine einzigartige Position des Reglers haben und damit und einzigartige Phil, Ich kann diesen Schieberegler auf volle einstellen. Ich kann diesen Schieberegler nehmen und ihn einfach so nach links bewegen. Und auch eine tolle Sache an dieser bestimmten Komponente ist, dass, wenn Sie die Architektur verstehen, ohne irgendwann verwirrt zu werden, es ein Indikator dafür sein wird, dass Sie Auto-Layout wirklich, wirklich gut verstanden haben. Alles klar, okay, gehen wir zum Geschäft und fangen wir an zu bauen. Gehen wir zur Starterdatei. Mastering Figma, die Magie des Auto-Layout-Stottern. Und in der Bonusfolie oder Seite finden Sie hier die fertige Version des Schiebereglers. Sie können in das Ebenenbedienfeld blicken, damit herumspielen und alles tun, was Sie wollen. Aber was mich betrifft, bin ich eher bereit, hier drüben eine Kopie zu bauen. Das erste, was wir brauchen, ist eine Basis, die einfach ein dünnes Rechteck ist. Das sehen Sie hier das graue Rechteck, das ist die Basis. Lassen Sie uns also zeichnen, drücken Sie R, um das Rechteck-Werkzeug ziehen Sie ein Rechteck, jede Form, jede Größe, was auch immer wir es in einer Weile anpassen werden. Das erste, was wir tun werden, ist es dünn zu machen. Und ich meine, drei Pixel hoch. Also richtig, drei neben dem Versteck. Und da gehst du. Und das nächste, was ich tun will, ist, ihm abgerundete Kappen zu geben, richtig? Völlig um ihn herum. Also werde ich das Rechteck auswählen, Gold oder den Mauszeiger über das abgerundete Rechteck Teil, sorry, abgerundete Ecken Teil und ziehen Sie es einfach den ganzen Weg. Und jetzt können Sie sehen, dass es eine abgerundete Kappen an beiden Enden hat. Das ist, wo es das tut. Das ist die Basis. Also wähle ich es aus, gehe zum Ebenenbedienfeld und nenne es BAC Basis. Und auch werde ich die Farbe davon in Grau, T2 und NMOS ändern. Es ist subtil und kaum sichtbar, aber ich hoffe, Sie können sehen, dass es da drüben ist. Das nächste, was wir brauchen werden, ist das Füller-Rechteck. Das ist eine hier, die, die versagt. Alles klar, dafür werde ich einfach die Option halten und eine Kopie der Basis rausziehen. Und die Sache, die ich tun werde, ist, seine Hintergrundfarbe zu blau 0 zu ändern. Und auch für den Füllstoff wollen wir keine Rundheit auf der rechten Seite. Also werde ich dies auswählen, gehen Sie zu den abgerundeten Ecken Teil. Es ist einfach einzeln und oben rechts ändern. Oben rechts. Ja. Und unten rechts auf 0, diese Linie nach unten, so dass diese n ist wie, Hey, ich habe diese n hat einen präzisen Schnitt und das linke Ende hat abgerundete Ecken. Ok, großartig. Das ist der Füllstoff. Also werde ich in das Ebenen-Panel gehen und II LLC für den Füllstoff eingeben. Und das war's. Das war's dafür. Dann sage ich, wir werden brauchen, ist dieser Knopf hier drüben, der nur ein Kreis von 16 mal 16 Pixeln ist. Drücken Sie also O und holen Sie sich das ovale Werkzeug oder das Kreiswerkzeug, halten Sie Shift und ziehen Sie einen Kreis 16 mal 16, und die Hintergrundfarbe blau für okay, cool. Wechseln Sie in das Ebenenbedienfeld und nennen Sie ihn KNIME-Regler. Und das nächste, was wir tun wollen, ist, den Füller und den Knopf in einen Auto-Rahmen zu stecken. Und wie machen Sie das wieder, Sie wählen beide aus, drücken Shift a Und jetzt ist das nicht wirklich das, was wir wollen. Wir wollen, dass seine Ausrichtung so in der Mitte liegt. Und jetzt fühlen Sie sich vielleicht, als würde ich mit einem guten Tempo fahren und nicht alles im Detail erklären. Es liegt daran, dass wir über das Auto-Layout diskutiert haben und ich weiß das, weißt du, und lass mich einfach Kreuzfahrt machen. Ok. Ja. Beide sind also in einem alkalischen Rahmen mit 0 Abstand zwischen den Elementen. Und das nächste, was ich sicherstellen wollte, ist, dass ein Regler Größenbeschränkungen fester Breite und einer festen Höhe hat . Und das Füller-Rechteck hat eine horizontale Größenbeschränkung des Phil Containers, so dass, wenn dieser Rahmen angepasst wird, sehen Sie das? Ja, du sagst, es sieht aus, als würde der Knopf gleiten und das Rechteck füllt sich in den Raum. Also macht sie, gehen Sie zum Ebenen-Panel? Und ich stelle immer sicher, dass ich darauf hinweise. Lesen von Rahmen sollte man sein, nennen wir es einfach Teile, weil halten Sie nur den Rahmen hält und wichtige Teile des Schiebereglers. Okay, jetzt für die Trach, jetzt möchte ich, dass du von hier an genau aufpasst. Das nächste, was wir brauchen, ist, dass wir einen Rahmen brauchen. Ordnung, also werde ich das Teil auswählen , damit ich sehen kann, dass es eine Dimension ist. Ich werde F auf meiner Tastatur drücken, um das Rahmenwerkzeug so zu erhalten , dass beim Ziehen ein Rahmen erstellt wird. Ok? Und ich werde voran gehen und sicherstellen, dass der Rahmen die gleiche Höhe hat wie der Teilerahmen genau hier. Dieser Rahmen, den wir gerade erstellt haben, lassen wir es nur eine weiße Hintergrundfarbe für jetzt haben. Wir lassen es später verschwinden, aber jetzt, weißt du, genau hier drüben, stellen wir sicher, dass sie die gleiche Höhe haben. Wieder da oder nicht. Ich muss es etwas skalieren. Jetzt ist es 16 Pixel hoch, Pixel hoch, und sogar der Teilerahmen ist 16 Pixel hoch. Ich werde diesen Rahmen auswählen, den wir gerade erstellt haben, und ich werde es nennen, nicht löschen, weil dies ein wichtiger Teil der gesamten Ausrüstung sein wird. In Ordnung. Ich sage nur, dass wir diesen Punkt haben, weil ich so aufgeregt bin , dass dies etwas hat, um es selbst herauszufinden. Nun, 60 Prozent allein, also freue ich mich darüber. Nun, wir werden den Teilerahmen und den Rahmen auswählen, den wir gerade erstellt haben. Und wir werden sie in einen Auto-Layout-Rahmen setzen. Wählen Sie also beide aus, drücken Sie Umschalttaste a, und stellen Sie sicher, dass der Abstand zwischen den Elementen 0 ist. Jetzt für die Größenänderungsbeschränkungen, für die Größenänderungsbeschränkungen, möchte ich, dass der Teile-Rahmen, der Parse-Auto-Layout-Rahmen gefüllte Container-Integritätsregel haben. Und ich möchte, dass dieser Rahmen hier drüben eine feste Breite hat. Ok? Sehen Sie sich das an, wenn ich den Rahmen, den Rahmen, den wir gerade erstellt und den Abstand zwischen ihnen anpassen, sehen Sie, dass der Abstand erhöht und verringert wird. Aber da der Teile-Rahmen hat, sind die Größenänderungsabhängigkeiten gefüllt Container, es füllt den Raum, der übrig ist, so dass dies behoben ist, so dass dieser betroffen ist. Dieser Raum hier ist flexibel, wird angepasst und was auch immer, was auch immer. Ok. Dieser Raum hier wird angepasst. Also habe ich den falschen Rahmen ausgewählt und nur so , dass hier Platz zwischen diesen beiden Dingen als angepasst wird und welcher Raum übrig bleibt, als vom Teilerahmen gefüllt wird , weil er die Größenbeschränkungen hat. Also füllen Sie einen Behälter, okay, alles muss angefangen haben, zusammenzufallen und ich hoffe, Sie kommen zu diesem Aha-Moment. Nun, das nächste, was ich tun wollte, ist, diese Frame-Route hier drüben auszuwählen. Wir brauchen es nicht wirklich. Wir werden es so dünn wie möglich machen. Also geh zur Breite, Breitenanpassung hier drüben, und ich werde voran gehen und ihm eine Breite von 0,05 geben. Dann gefragt, wie wir können. Und das nächste, was wir damit tun werden, um es vollständig verschwinden zu lassen , ist jede Füllung, die es hat, loszuwerden. Also, jetzt hat dieser Rahmen hier drüben genau diesen, diesen speziellen Teilerahmen. Und wenn ich den Abstand zwischen den Elementen dieses RAM anpassen, sehen Sie, dass dieser Schieberegler passt, was cool ist. Und ich werde diesen Rahmen auswählen, der diesen Rahmen gerade hier endet. Okay, also werden wir in einer Wildnis wissen, warum ich diesen Rahmen anpasse. Hier, genau hier drüben, haben wir nur den Schieberegler, wir haben nicht die Basis. Ok? Das nächste, was wir tun wollen, ist, diesen Rahmen genau hier und diese Basis anzupassen und sie in einen Rahmen zu setzen, nicht einen optimal eigenen Rahmen, sondern nur einen Rahmen. Also, was ich tun werde, ist zuerst, ziehen Sie einfach die Basis und stellen Sie sicher, dass es fast die gleiche Breite wie diese Gerechtigkeit. Und dann werde ich weitermachen und den Schieberegler eine kleine Tasche bewegen , indem ich den Raum zwischen den Gegenständen vergrößere. Denken Sie daran, dass es hier drüben einen gerahmten gibt und wir passen diesen Raum hier drüben an. Also werde ich voran gehen und das anpassen und ein wenig zurückschieben. Und dann gehe ich voran und wähle das aus und nur diesen Frame und Shift und Pfeil nach oben, um es tatsächlich anzupassen, nur seine Position. Also gehe ich und drücke weiter, bis ich es fast mit dem, mit dem Basisrechteck ausrichte . Das nächste, was wir tun werden, ist, dass wir beide auswählen und die Verknüpfung Option Befehl G drücken oder mit der rechten Maustaste klicken und die Rahmenauswahl auswählen. Und jetzt ist das der gesamte Rahmen. Ich werde das von Frame eins auf Schieberegler umbenennen. Also werde ich voran gehen und sicherstellen, dass alles vertikal zentriert ist. Wenn Sie also etwas in einem Rahmen auswählen, innerhalb eines normalen Rahmens und klicken Sie auf dieses Symbol, um es vertikal zu zentrieren. Es wird es relativ zu diesem bestimmten Frame anpassen. Also werde ich voran gehen und sicherstellen, dass alles richtig zentriert und vertikal ist. Also schätze ich, das sind sie. Und jetzt, das heißt, wir haben den Schieberegler, wir haben den Schieberegler hier, genau hier, C. Und innerhalb des Schiebereglers, wenn Sie herumgespielt haben und sich in der endgültigen Datei umgesehen haben, wissen Sie, was das innerhalb des Schiebereglers wir hatte genau das, was wir verwenden, um anzupassen, dem wir einstellen, wie viel der Schieberegler geschlitzt hat. Und ähnlich in diesem Rahmen hier drüben, der gerade erstellt würde, haben wir eine Anpassung dieses Rahmens, mit dem wir die Position des Drehknopfs einstellen können. Und das ist großartig. Das ist großartig. Schieberegler wird als letzte Überprüfung durchgeführt. Wir möchten sicherstellen, dass die Größe korrekt angepasst wird. Also jetzt, wenn ich den Rahmen dehne, passiert nichts. Und warum ist das? Nun, ich hoffe, Sie können es einschließen. Es tut das, weil die untergeordneten Elemente des Rahmens, die Dinge darin, nicht die richtigen Größenbeschränkungen haben. Zum Beispiel ist die Basis gerade verlassen. Wir wollten skalieren, da es horizontal skaliert wird. Und ähnlich für die Anpassung dieses Rahmens, wir wollen, dass es skaliert, der gesamte Rahmen wird angepasst oder horizontal skaliert. So im Moment sehen Sie, wie es funktioniert gut, sehr reaktionsschnell auf Größenänderungen. Und auch ich kann weitermachen und damit herumspielen. Nur das genau so, dass du sagst. Und ich weiß, wie es ist. Ich weiß, es ist für mich, wenn ich auf der anderen Seite zusehen würde, dann wird es sein, als würde ich den Trick des Zauberers kennen. Und ich weiß, es ist nicht so aufregend, aber mehr als alles andere, werden Sie lernen, wie Sie Auto-Layout-Funktionen nutzen , um etwas völlig verrücktes und benutzerdefiniertes zu erstellen. Und wie toll ist das? Das nächste, was Sie tun können, ist wahrscheinlich in eine Komponente zu verwandeln und sie überall in Ihrem Projekt zu verwenden . Großartig. 11. SCHLUSSBEMERKUNG: Nun, das ist alles für diesen Kurs. Wir gingen von nichts über Auto-Layout im ersten Video zu wissen, dass es nach unseren eigenen Launen und Treffen funktioniert und Dinge zu tun, die wirklich im letzten Video zu tun haben. Also haben wir viel durchgemacht und eine Menge Sachen dazwischen neu gemacht. Ich hoffe, Sie sehen, wie mächtig die einfache Funktion sein kann, und ich hoffe, wenn Sie es nicht bereits verwenden, werden Sie es tun. Nun, wenn Ihnen diese Klasse gefallen hat, können Sie voran gehen und eine Rezension hier auf Skillshare abgeben. Das würde eine Menge auf Twitter bei Nashville bedeuten, Sie können mich finden, schießen mir eine DM oder eine Klasse Anfragen. Dafür bin ich ganz offen. Und damit hoffe ich, dass ich Sie bald in einer anderen Klasse sehen werde. Tschüss.