Responsives Design in Figma Deep Dive: Figma Auto Layout, Einschränkungen, Haltepunkte und Modi

1. Intoduction: Automatisches Layout, das dich verrückt macht. Ich habe Angst davor, was mit dem Design im Browser passieren wird. Und dann ist dieser Kurs genau das Richtige für dich. Wir erfahren alles darüber, wie man Responsive Designs und Figma einrichtet Dies wird ein tiefer Einblick in die Einschränkungen des automatischen Layouts sein und, was am wichtigsten ist, aber es wird wirklich erörtert, wie man mit Breakpoints umgeht, angefangen bei einem traditionellen Setup bis hin zur Nutzung von Variablen T. Wenn Sie diese Tools verstehen und kombinieren , können Sie Komponenten, Entwurfsmuster und ganze Seiten so einrichten , dass sie den Codeeinstellungen entsprechen Wir beginnen mit dem mächtigen automatischen Layout und konzentrieren uns dann auf die Einrichtung wirklich responsiver Komponenten. Wir werden bei Null anfangen und uns bis zur Größenänderung und der Macht endloser Verschachtelungen hocharbeiten , komplexere Elemente und sogar ganze Seiten mit automatischem Layout zu erstellen sogar ganze Seiten mit automatischem Layout Wie immer zeige ich dir versteckte Schätze und gebe dir unterwegs ein paar Tipps und Tricks C. Anschließend schauen wir uns Einschränkungen an und wie sie Leben retten können, wenn es darum geht, automatisches Layout in Grids zu kombinieren Sobald wir uns vergewissert haben, dass wir diese Grundlagen des responsiven Designs in Figma verstanden haben , wollen wir uns mit den Breakpoints befassen, wie sie in CSS wirklich funktionieren und wie wir unsere Figma-Designs entsprechend einrichten können Dies reicht von traditionelleren Setups bis hin zu erweiterten Funktionen wie der Verwendung Modus zur Automatisierung von Designänderungen und der Skalierung der Typografie Mit der Datei mit den Kursmaterialien können Sie mit mir zusammenarbeiten oder in Ihrem eigenen Tempo zu den Übungen mit detaillierten Anweisungen zurückkehren in Ihrem eigenen Tempo zu den Übungen mit detaillierten Anweisungen Dieser Kurs ist genau das Richtige für Sie, wenn Sie über Grundkenntnisse in Figma verfügen oder wenn Sie ein fortgeschrittener Bigma-Benutzer und Ihre Fähigkeiten auffrischen möchten Dies ist ein Kurs von Moon Learning Dot IO. 2. UI-Version und Kursmaterial: Heads up Figma hat seine Benutzeroberfläche aktualisiert und Sie sehen möglicherweise ein neues Design anstelle des alten Die Änderungen sind hauptsächlich visuell. Alle Funktionen und Tools sind immer noch da, nur an etwas anderen Stellen oder mit einem neuen Look. Im Notfall können Sie jederzeit zur vorherigen Benutzeroberfläche zurückkehren, auf ein kleines Fragezeichen unten rechts klicken und hier können Sie sehen, wie Sie zur vorherigen Benutzeroberfläche zurückkehren können. Derzeit erhält nicht jeder automatisch Zugriff auf die neue Benutzeroberfläche. Figma führt das leider ziemlich zufällig ein. Daher finden Sie zwei Versionen dieses Kurses. Die alte Version mit der alten Benutzeroberfläche im Archiv oder dieser Kurs genau hier, in dem Sie sich gerade befinden . Er hat eine etwas andere Struktur, aktualisierte Videos und verwendet die neueste Benutzeroberfläche. Sobald Sie Zugriff auf die neueste Benutzeroberfläche erhalten, stellen Sie bitte sicher, dass Sie die aktualisierte Version verwenden. Bitte stellen Sie sicher, dass Sie auch die richtigen Kursdateien erhalten. Sie können sehen, dass sie deutlich markiert sind, eine für den alten Kurs und eine für den neuen Kurs. Sie haben eine unterschiedliche Struktur, daher ist es sehr wichtig, dass Sie die richtige Datei erhalten, damit Sie alle Videos verfolgen können. Sie finden alle Links zu den Informationen in der folgenden Beschreibung. Beachten Sie auch, dass FIPMA sehr dynamisch ist. Diese Benutzeroberfläche, so wie wir sie heute sehen, wird sich im Laufe des nächsten Jahres definitiv ändern Dies werden wahrscheinlich kleine Änderungen sein wie ein Drop-down-Menü, also eine Checkbox. Die kleinen schwebenden Seitenleisten könnten an der Seite hängen bleiben. Die allgemeine Struktur wird gleich bleiben, aber Sie werden sicherlich einen kleinen Unterschied feststellen , wenn Sie sich die Videos ansehen. Kein Grund zur Sorge, alles sollte immer noch an seinem Platz sein und für Sie klar zugänglich und nutzbar sein. 3. AUTO LAYOUT: 01 Was ist Auto-Layout?: Lassen Sie uns eine Vorstellung davon bekommen, was automatisches Layout ist und wofür wir es verwenden? Mit dem automatischen Layout können wir unsere Designs in Figma so einrichten , dass sie der sich ändernden Größe entsprechen Das funktioniert zum Beispiel bei einzelnen Komponenten, aber auch bei Gruppen dieser Komponenten Das bedeutet, dass wir das automatische Layout wirklich verwenden können, um alles einzurichten , von einer Schaltfläche bis hin zu einer ganzen Seite. Sie werden feststellen, dass das automatische Layout manchmal sehr gut funktioniert und sehr einfach ist. In anderen Fällen verhält es sich jedoch einfach die seltsamste Weise und Sie müssen verstehen, warum Das liegt daran, dass das automatische Layout nicht nur eine Schaltfläche ist , auf die Sie Es besteht aus drei Säulen, und Sie müssen jede von ihnen genau verstehen. Die erste betrifft das Layout und die Positionierung, die zweite das Verhalten bei der Größenänderung und die dritte die Verschachtelung Wir werden jede dieser Säulen genauer verstehen und sie dann als Ganzes zusammenfügen, sodass Sie sich absolut sicher sein können, sodass Sie sich absolut sicher alles mit automatischem Layout einzurichten 4. Update: Aktualisierung des automatischen Layoutrasters: Ein kleines Update, da Figma gerade eine neue Funktion zum Auto-Layout-Menü hinzugefügt Das Auto-Layout-Menü sieht jetzt also so aus, ziemlich ähnlich Der erste Teil, das bedeutet, dass wir kein automatisches Layout angewendet haben. Dann haben Sie hier diese beiden mittleren Elemente, und das ist das automatische Layout, so wie wir es zuvor mit vertikalen und horizontalen Elementen hatten , und das werden wir in den nächsten Sitzungen durchgehen . Am Ende haben Sie hier eine neue kleine Funktion, Sie ein Layoutraster erstellen können. Ich empfehle Ihnen daher, die nächsten Lektionen durchzugehen , um diesen ersten Teil hier zu verstehen, und ich möchte Ihnen eine kurze Einführung in den zweiten Teil geben eine kurze Einführung in den zweiten Teil Ich werde das Netz aktualisieren und weitere Informationen hinzufügen Also im Grunde, was das Raster macht, wenn Sie einen beliebigen Rahmen auswählen und dann die neue Rasteroption und Sie können sehen, wie Sie diese Zellen erhalten. Sie erhalten auch ein Rastermenü. Und wenn du hier klickst, kannst du das ändern. Wir können auch die Lücken oder horizontale oder vertikale Lücken ändern , und wir können auch etwas Polsterung hinzufügen sodass sich diese um unser Raster herum befinden Lassen Sie uns nun einige Elemente hinzufügen. Sie können sie also einfach auf die Leinwand ziehen und sehen, dass Sie die Zellen auswählen können , in denen Sie sie platzieren möchten. Sie können sich über mehrere Zellen erstrecken, und Sie können das natürlich nach Ihren Wünschen ändern Fügen wir hier auch diese hinzu, und Sie können sie frei verschieben Wenn wir einen von ihnen auswählen, gehen wir standardmäßig etwas näher ran. Sie können sehen, dass dies auf Füllen eingestellt ist, aber Sie können das natürlich hier ändern. Wenn Sie nicht wissen, wie Sie die Größe ändern können, ja, dann machen Sie sich keine Sorgen, Sie werden in den nächsten Sitzungen alles darüber erfahren den nächsten Sitzungen Und wenn wir die Größe unseres Rahmens ändern, können Sie sehen, dass das alles gut mit unserem Das Interessante daran ist, dass Sie Ihre Komponenten wahrscheinlich mit diesem Teil hier einrichten werden , also dem standardmäßigen automatischen Layout, wie wir es bei den eindimensionalen Einstellungen wussten Und dann fügst du das zu deinem Grid hinzu. Sie können das also einfach hierher ziehen und Sie können ein dimensionales automatisches Layout in ein zweidimensionales verschachteln . Sie können auch zweidimensionales zu zweidimensionalem hinzufügen, und dann wird es leistungsstark. Der wichtige Teil ist , dass du das ganze Menü verstehst. Dieser Teil hier ist eigentlich der knifflige Teil, der alte Teil. Stellen Sie also sicher, dass Sie die nächsten Sitzungen durchlaufen, und dann ist das Raster das in dem Sie Ihr Gesamtlayout vereinfachen können. 5. AUTO LAYOUT: 02 Einrichten von Auto-Layout-Frames: Lassen Sie uns lernen, wie Sie einen automatischen Layoutrahmen einrichten. Mit dem automatischen Layout können unsere Designelemente auf ihren Inhalt reagieren. Hier habe ich einen Button. Ohne automatisches Layout können Sie sehen, dass sich nichts anpassen würde, wenn ich den Inhalt ändere . Wenn ich nun ein automatisches Layout hinzufüge, was ich einfach tun kann, indem ich diese Schaltfläche und dann auf der rechten Seite im Eigenschaftenfenster auswähle und dann auf der rechten Seite im Eigenschaftenfenster im Layout auf die Schaltfläche für das automatische Layout klicke. Wenn ich jetzt den Text ändere, können Sie sehen, dass er sich automatisch an den Inhalt anpasst, den ich erhalte. Machen wir dasselbe für meine Karte. Ich habe ausgewählt. Ich füge ein automatisches Layout hinzu und habe es jetzt in einen automatischen Layoutrahmen umgewandelt. Sie können jetzt sehen, ob ich etwas am Inhalt ändere, dann passt sich alles an, aber es behält trotzdem seine gesamte Polsterung Nun, diese Polsterung und Abstände, wenn Sie den automatischen Layoutrahmen erneut auswählen, können Sie das im Eigenschaftenfenster auf der rechten Seite sehen Im Menü hier können Sie sehen, dass Sie zuerst eine sogenannte Lücke zwischen den Elementen erhalten Das sind also alle untergeordneten Gegenstände. Meine untergeordneten Artikel hier wären also mein Bild, meine Überschrift und mein Text. Lassen Sie uns diesen einfach wieder in seinen ursprünglichen Zustand versetzen. Wenn ich das also ändern würde, dann können Sie sehen, dass es die Lücke zwischen diesen Elementen verändert. Wenn du die Shift-Taste gedrückt hältst, springt es um deinen n-Wert hoch und runter. Sie können auch alles direkt auf der Leinwand anpassen oder Sie können doppelklicken und dann den gewünschten Wert eingeben. Das funktioniert genauso für Ihre Polsterung. Hier hast du deine horizontale und deine vertikale Polsterung. Das könntest du gleich hier ändern. In Ihrem Eigenschaftenfenster können Sie auch einfach eine beliebige Zahl eingeben, und Sie können sie auch auf der Leinwand anpassen, indem Sie die Griffe verwenden oder einfach doppelklicken und einen beliebigen Wert hinzufügen. Mit dem Ausrichtungsmenü können Sie Ihre Elemente jetzt innerhalb Ihres automatischen Layoutrahmens ausrichten . Lassen Sie uns dieses Bild einfach kleiner machen , damit Sie es besser sehen können. Sie könnten alles nach rechts, alles nach der Mitte oder alles nach links ausrichten alles nach der Mitte . Dadurch wird das gesamte Textfeld ausgerichtet, nicht der Text selbst. Wenn Sie den Text ausrichten möchten, müssen Sie trotzdem die Einstellungen für die Texteigenschaften verwenden Das Layout ist wirklich gut darin die Richtung zu erraten, in der Sie entwerfen Aber wenn Sie es jemals ändern möchten, könnten Sie diese Fehler hier oben verwenden, sodass Sie von vertikal zu horizontal wechseln könnten RAP ist etwas , das wir verwenden würden wenn wir mehr automatische Layoutelemente hätten, also verschachtelte Elemente nebeneinander Es ist am Anfang nichts, was du gerade brauchst. Sie können Elemente im Layout oder in ein Layout verschieben , indem Sie sie einfach ziehen , oder Sie können die Fehlertasten auf Ihrer Tastatur verwenden , um nach oben und unten zu wechseln Sie werden sehen, dass sie im Ebenenbedienfeld ihre Position ändern, sie im Ebenenbedienfeld ihre Position ändern, je nachdem, wo Sie sie platzieren. Sie können die automatische Layoutfunktion auch jederzeit entfernen Wählen Sie einfach den Rahmen und klicken Sie dann erneut auf die Schaltfläche für das automatische Layout. Es bleibt nur noch ein einfacher Rahmen übrig . Neben dem Eigenschaftenfenster können Sie auch die Tastenkombinationen Shift und A verwenden , um einen automatischen Layoutrahmen zu erstellen und ihn mit Shift und A zu entfernen, oder Sie können einfach mit der rechten Maustaste klicken. Die Tastenkombination ist sehr praktisch, wenn Sie zum Beispiel nur Text haben, dann wird die Option für das automatische Layout nicht im Eigenschaftenfenster angezeigt , aber Sie können Shift und A drücken Dadurch wird ein automatischer Layoutrahmen daraus. Wenn wir also etwas Füllung hinzufügen, können Sie sehen, dass dadurch ein Rahmen um Ihren Text hinzugefügt wurde. Wenn Sie das automatische Layout deaktivieren, können Sie sehen, dass Sie mit einem Rahmen und Ihrem Text darin geblieben sind. diesem Grund wird es auch als automatisches Layoutrahmen bezeichnet , da es nur mit einem Rahmen funktioniert. Wenn Sie es nur auf einen Text oder eine Gruppe anwenden , wird es für Sie immer in einen Rahmen umgewandelt. 6. AUTO LAYOUT: 03 Das Auto-Layout-Menü: Schauen wir uns das Autolayout-Menü genauer an , um es vollständig zu verstehen. So sieht es derzeit aus. Es ist wichtig zu verstehen , dass Figma sehr dynamisch ist und ständig iteriert und verbessert Was Sie jetzt auf dem Bildschirm sehen könnte also in ein paar Monaten etwas anders aussehen Funktionen und Schaltflächen können in Untermenüs und im Eigenschaftenfenster hin - und herbewegt werden. Daran müssen Sie sich also gewöhnen. Es ist wichtig, die Funktionen selbst zu verstehen, da Sie so wissen, wonach Sie suchen müssen. Ich werde Ihnen alle aktualisierten Videos für wichtige Änderungen zur Verfügung stellen. Achten Sie also auf diese. Mit Figma können Sie manchmal auch zu früheren Benutzeroberflächen zurückkehren Klicken Sie unten rechts auf das Fragezeichen, um zwischen den Versionen der Benutzeroberfläche zu wechseln Standardmäßig siehst du die vereinfachte Version des Menüs. Wenn Sie gerade erst anfangen, möchten Sie vielleicht einige Labels sehen. Sie können sie hinzufügen, indem Sie oben neben dem Prozentsatz der angezeigten Werte auf den Fehler Prozentsatz der angezeigten Werte auf klicken und Eigenschaftsbezeichnungen auswählen. Bevor wir das Menü durchgehen, sollten wir uns daran erinnern, dass das automatische Layout aus drei Säulen besteht: allgemeines Layout und Positionierung, Größenänderungsverhalten und Verschachtelung Im Laufe des Kurses werden wir jede dieser Säulen im Detail kennenlernen jede dieser Säulen im Detail Ihnen so ein umfassendes und strukturiertes Verständnis dieser Funktion vermitteln . Ich verspreche, dass es Ihnen das Leben mit dem Layout erheblich erleichtern wird dass es Ihnen das Leben mit dem Layout erheblich mir persönlich nicht gefällt, ist, das Menü mit der Größenänderung beginnt, was unsere zweite Säule ist Wir werden uns das später genauer ansehen , da es der schwierigste Teil ist, also ignoriere diesen Teil also ignoriere diesen Es zeigt Ihnen im Grunde die Größe eines Elements in Punkt oder sein festgelegtes Im mittleren Abschnitt geht es um das allgemeine automatische Layout und die Positionierung, was wir normalerweise als das Autolayout-Menü bezeichnen. Konzentrieren wir uns vorerst auf diesen. Zunächst haben wir die Richtungsoptionen, also horizontal oder vertikal, und eine dritte Option namens Wrap , mit also horizontal oder vertikal, und eine dritte Option namens Wrap , der wir Elemente in einer neuen Zeile zur Größenänderung umbrechen können . Dies ist auch eine erweiterte Funktion, die wir auf die wir später noch genauer eingehen werden. Mit Alignment können wir Elemente innerhalb eines Frames ausrichten. Beachten Sie, dass dies für alle Kinder gleichermaßen gilt. Mit Gap können wir die Lücke zwischen den direkten Kindern definieren. Kleiner Tipp in einem dieser Felder Wenn Sie die Felder auswählen, die Umschalttaste gedrückt halten und dann die Auf- und Ab-Tasten verwenden, wird der eingestellte Ng-Betrag erhöht. In meinem Fall ist das auf acht gesetzt. Standardmäßig ist es normalerweise auf zehn eingestellt. Sie können es ändern, klicken Sie einfach im Figma-Menü auf Aktionen und suchen Sie dann nach Ng Und dann könntest du deinen großen Notch 28 einstellen. Sie können ein Notch-Menü auch über die KI-Suche finden. Hier unten haben wir die Polsterung. Wir können die Polsterung entweder oben und unten zusammen einstellen oder das erweiterte Menü für individuelle Einstellungen öffnen das erweiterte Menü für individuelle Ein kleiner Tipp: Wenn du die Befehlstaste gedrückt hältst und in ein beliebiges Feld klickst, kannst du die CSS-Notation für oben, rechts, unten und links verwenden rechts, unten und links Alle Abstands- oder Abstandswerte , die Sie im Menü festlegen können, können auch direkt auf der Leinwand festgelegt Sie werden die kleinen Griffe bemerken. Sie können sie entweder ziehen oder doppelklicken und eine beliebige Zahl eingeben. Kleiner Tipp für die Polsterung. Wenn du beide Seiten auswählen möchtest, dann halte die alte Taste gedrückt Wenn Sie alle vier auswählen möchten, halten Sie Alt gedrückt und halten Sie die Umschalttaste gedrückt. Das letzte Element ist das Show - oder Clip-Inhaltsfeld. Dies ist eher eine allgemeine Layouteinstellung als eine spezifische Einstellung für das automatische Layout. Sie bestimmt, ob Sie Elemente anzeigen möchten , die über den Rahmen hinauswachsen. Dies wird für das Prototyping sehr relevant sein. 7. AUTO LAYOUT: 04 Die Auto-Einstellung: Es gibt eine Funktion, die etwas versteckt ist, aber ich benutze sie ständig. Ich möchte Sie darauf aufmerksam machen, und es heißt Auto. Diese Funktion wurde zuvor in Figma Space Between genannt und wird in Flexbox immer noch so genannt Möglicherweise hören Sie auch, dass auf diesen Namen Bezug genommen wird. Also im Grunde haben wir hier unseren Rahmen mit drei untergeordneten Elementen. Und wenn ich die Größe ändere, können Sie sehen, dass ich das jetzt ausrichten kann , es ist in der Mitte, ich kann es nach links ausrichten, aber es wird immer der Abstand beibehalten Jetzt kann ich im Drop-down-Menü den Abstand auf Automatisch umstellen Mit Auto wird der Raum gleichmäßig zwischen den Kindern verteilt Neben dem Drop-down-Menü können Sie auch einfach auf die Griffe klicken. Wenn Sie nun einen Wert eingeben, springt er zur ursprünglichen Einstellung zurück. Oder wenn Sie erneut doppelklicken und Auto eingeben, springt es zum Leerzeichen dazwischen, oder wie wir es jetzt Auto nennen. Mein bevorzugtes Tastenkürzel: Klicke einfach auf das Alignment-Menü, um zwischen Packed und Space zwischen zu wechseln , oder du kannst im Alignment-Menü auch das Tastenkürzel X verwenden im Alignment-Menü auch das Tastenkürzel X Auto ist wirklich sehr praktisch, wenn wir Dinge wie eine Navigation erstellen wollen, bei der wir einige Elemente links platzieren und andere rechts platzieren Das Tolle ist, wenn wir mehr Elemente hinzufügen, hängt es davon ab, wo wir sie hinzufügen. Das wäre jetzt also ein direktes Kind. Jetzt haben wir also drei untergeordnete Elemente. Wenn wir also die Größe ändern, verteilt sich der verfügbare Speicherplatz auf drei Aber wenn ich das hier innerhalb meines verschachtelten Rahmens platziere, kehre ich zu meiner ursprünglichen Einstellung zurück In den meisten Fällen wird Aalto genau die Lösung sein, nach der Sie gesucht haben . Behalte es also im Hinterkopf 8. AUTO LAYOUT: 05 Fortgeschrittenes Auto-Layout-Menü: D Menü mit erweiterten Einstellungen. Es gibt ein kleines Symbol, das wir bisher ignoriert haben, nämlich die erweiterten D-Einstellungen Wählen Sie einen beliebigen Rahmen für das automatische Layout aus. Wenn wir dann darauf klicken, können Sie sehen, dass wir derzeit Einstellungen für Striche, Leinwandbeläge und eine Linientext-Grundlinie haben derzeit Einstellungen für Striche, Leinwandbeläge und eine Linientext-Grundlinie Lassen Sie uns schnell die Dosis durchgehen. Ich fange mit dem ersten an, die Striche, und Sie können sehen, dass dieser standardmäßig ausgeschlossen ist. Wenn wir den Mauszeiger über unsere Polsterung bewegen, können Sie sehen, dass ich derzeit 32 Polsterungen habe, und Sie können sehen, dass meine Kontur auf 16 gesetzt ist, sodass sie die Hälfte meiner Polsterung einnimmt Ich kann hier einfach Änderungen vornehmen und sie in das Layout übernehmen. Jetzt können Sie sehen, dass mein Abstand vollständig genutzt ist und mein Strich außerhalb dieser automatischen Layoutrahmeneinstellung liegt außerhalb dieser automatischen Layoutrahmeneinstellung Unser nächstes Ziel ist unser Stapeln. Schauen wir uns das an. Wenn wir Elemente auswählen, ist es wichtig zu verstehen, dass der Abstand auch negativ sein kann. Mit der erweiterten Einstellung können wir jetzt die Stapelreihenfolge ändern, sodass wir entweder das Letzte oben oder das Erste oben haben können Und unsere letzte, die wir uns ansehen sollten, ist unsere Grundeinstellung. Also hier werde ich dieses Untermenü auswählen. Also meine Artikel, du kannst sehen, wie sie eingerichtet sind, also habe ich meine NAF-Artikel und meinen Button Sie können sehen, dass sie derzeit ausgerichtet sind. Ich kann sie auch an der Mitte ausrichten, aber manchmal stimmen sie möglicherweise nicht mit der Grundlinie überein , nach der Sie suchen. Sie können also die Option „An der Grundlinie ausrichten“ auswählen, und in einem kleinen Vorschaufenster können Sie es bereits sehen, und es wird leicht an der Grundlinie ausgerichtet. Dies ist auch etwas, das Sie vielleicht verwenden möchten , wenn Sie beispielsweise eine Schaltfläche mit einem Con haben und diese am Text ausrichten möchten. Das sind also Einstellungen, die Sie nicht allzu oft verwenden werden , weshalb sie in diesem kleinen Untermenü versteckt 9. AUTO LAYOUT: 06 Größenänderungseinstellungen: Größenänderung mit automatischem Layout. Wir haben also gelernt, dass wir jedes Element einfach in einen automatischen Layoutrahmen umwandeln können . Wir können den Abstand, die Größe und den Abstand anpassen, und wenn wir den Inhalt ändern, können wir sehen, dass unser Rahmen dem entspricht Nun, das funktioniert wirklich gut, denn wenn wir noch einmal hinschauen, ist das ein vertikaler automatischer Layoutrahmen Wir möchten aber auch , dass dieser Rahmen auch so reagiert, wenn wir seine Größe ändern auch so reagiert, wenn wir seine Damit das funktioniert, müssen wir eine zusätzliche Ebene für das automatische Layout hinzufügen , die als Größenänderungseinstellungen bezeichnet wird Sie finden die Einstellung zur Größenänderung oben im Layoutfeld Wenn Sie das automatische Layout angewendet haben, kann es sich um den übergeordneten Frame oder den verschachtelten Frame Sie finden es dann hier Aber auch jedes Element innerhalb eines automatischen Layoutrahmens. Wenn Sie darauf klicken, erhalten Sie das Layout-Feld mit den Größenänderungseinstellungen für dieses Element Das ist der Teil, der uns interessiert. Es ist also wirklich wichtig zu verstehen, dass, während wir das automatische Layout auf den übergeordneten Frame anwenden, das Auto-Layout-Menü das Verhalten aller untergeordneten Elemente innerhalb dieses Frames bestimmt . Also die Ausrichtung für all diese Elemente, der Abstand für all diese Elemente. Wenn wir nun festlegen möchten, wie sich diese Elemente einzeln verhalten sollen, müssen wir sie auswählen und ihr Größenänderungsverhalten festlegen, nicht das Größenänderungsverhalten des gesamten Rahmens. Aktuell haben wir die Wahl zwischen einer festen Größe, dem Füllen des Containers oder dem Umschließen des Inhalts Auto Layout wurde wirklich gut darin, zu erraten, welches Verhalten Sie sich wünschen könnten Sie könnten also tatsächlich damit durchkommen. Zum Beispiel ist dieses Bild hier bereits so eingestellt, dass es den Container füllt. Und das liegt daran, dass das automatische Layout links und rechts einen ähnlichen Rand erkannt hat. Ich würde jedoch dringend empfehlen, dass Sie sich nicht auf diese Voreinstellungen verlassen und wirklich versuchen, einmal zu verstehen, wie Sie die richtige Größenänderung einrichten Die Einstellungen zur Größenänderung sind normalerweise der Teil bei dem die Leute am meisten verwirrt sind, was das automatische Layout angeht, aber das ist nicht so schwierig Es geht wirklich nur darum, es einmal zu verstehen und ein bisschen zu üben Der entscheidende Teil ist, Schritt für Schritt vorzugehen . Du kannst das nicht überstürzen. Also geh Stück für Stück. Das erste, was wir auswählen werden, ist unser Bild. Gehen wir nun zu unserem Drop-down-Menü und stellen wir ein, dass der Container gefüllt wird. Das heißt, wenn wir die Größe des Containers ändern, wird er, nun ja, das, was er sagt, gefüllt, wobei immer der Abstand eingehalten wird, den wir links und rechts angegeben haben Hier haben wir es mit einem horizontalen Aufbau zu tun, also mache ich mir nicht zu viele Gedanken über den vertikalen Trotzdem werde ich diesen hier in einer festen Höhe haben. Das bedeutet, dass mein Bild immer auf dieser bestimmten Höhe fixiert ist . Jetzt gehe ich zum nächsten Element über, das ist mein Text, und ich möchte dasselbe tun. Ich möchte nicht, dass das an der Größe festgemacht wird. Ich möchte, dass es horizontal ist , um den Behälter zu füllen. Und ich werde dasselbe für meinen Text tun. Ich möchte auch, dass das den Behälter füllt. Jetzt mit Text, ich möchte die Höhe nicht korrigieren, weil ich nicht weiß wie hoch sie sein wird, wenn ich mehr Text hinzufüge oder wenn ich die Größe ändere Deshalb möchte ich, dass es sich umarmt. Umarmung ist ein wirklich süßes kleines Feature. Stellen Sie sich das im Grunde so vor, als würden Sie den vertikalen Inhalt umarmen Wenn es um das Kopieren von Text im automatischen Layout geht, und damit meine ich alles, was keine Schaltfläche oder ein Link ist, dann stelle sicher, dass es immer auf automatische Höhe eingestellt Normalerweise erledigt das automatische Layout das von selbst. Und das ist schon so ziemlich alles. Lassen Sie uns jetzt die Größe unserer Box und Sie können sehen, dass alles gut folgt Auch wenn ich meinen Text ändere. Lassen Sie uns hier noch etwas Text hinzufügen. Sie können sehen, dass die Box automatisch erweitert wird und das automatische Layout reagiert, da diese Option auf automatische Höhe und Hug eingestellt ist Box automatisch erweitert wird und das automatische Layout reagiert, da diese Option auf automatische Höhe und Ich kann immer noch Dinge wie meinen Abstand und meine Größe mit dem Auto-Layout-Menü ändern meinen Abstand und meine Größe mit dem Auto-Layout-Menü Aber wenn ich die Größe ändere, wird sich alles so verhalten , wie es beabsichtigt war Die automatische Layoutfunktion in Figma ist ziemlich intelligent. Wenn ich hier zum Beispiel eine Schaltfläche habe, die ich hinzufügen möchte, und ich daraus ein automatisches Layout mache, dann können Sie sehen, dass es nicht nur automatisch den gesamten Abstand aufnimmt, sondern mir auch bereits eine vorgeschlagene Größenänderungseinstellung gibt Nun, in einer Schaltfläche machen Horizontal umarmen und Vertikal umarmen Sinn, denn wenn ich das ändere, also sagen wir, ändere es, um mehr zu lesen, dann können Sie sehen, dass ich möchte dies auch horizontal umarmt werden soll. Übrigens kann ich auch einen Auto-Layout-Rahmen in einen anderen ziehen einen Auto-Layout-Rahmen in einen anderen Schaltfläche wäre verschachtelt und behält ihre Größenänderungseinstellungen Wenn wir es verschieben wollten, könnten wir die Ausrichtung verwenden Wir könnten auch die Einstellungen zur Größenänderung ändern . Wenn wir zum Beispiel eine Schaltfläche in voller Größe haben möchten, könnten wir diese so ändern, dass sie den Behälter füllt und er dann in der Mitte steht Beachten Sie, dass wenn Ihr Text links klebt, dies wahrscheinlich daran liegt, dass die Ausrichtung der Schaltfläche immer noch links ist und Sie sie in die Mitte ändern können. 10. AUTO LAYOUT: 07 Tipps zur vertikalen Größenänderung: Einige Tipps zur vertikalen Größenänderung, die Ihnen gefallen könnten. Bei Designs wie diesen möchten Sie vielleicht, alle Fahrzeuge dieselbe Höhe haben. Sie könnten versucht sein, dieses Problem manuell zu lösen. Dies wird jedoch keine wirklich gute Lösung sein , denn sobald Sie die Größe ändern, wird dies nicht mehr funktionieren. Es gibt einen viel einfacheren Weg, dies zu tun. Was Sie tun müssen, ist alle untergeordneten Elemente auszuwählen, und übrigens, es gibt eine nette kleine Abkürzung, wählen Sie den übergeordneten Container aus, drücken Sie die Eingabetaste und dann haben Sie alle direkten untergeordneten Elemente auf einmal ausgewählt . Und jetzt gehen wir zur Einstellung für die vertikale Größenänderung und stellen diese so ein, dass der Container gefüllt wird. Und los geht's Nun, das wird den Behälter immer füllen. Das ist wirklich nett, weil wir immer die Karte mit dem meisten Inhalt haben , die Höhe dafür vorgibt Das liegt daran, dass der übergeordnete Behälter auf Umarmung eingestellt ist und alle Kinder darauf eingestellt sind, sich zu Eine weitere Sache, die Sie vielleicht tun möchten , dass Sie manchmal etwas wie eine Schaltfläche oder eine bestimmte Leiste am unteren Rand Ihrer Karte haben möchten eine Schaltfläche oder eine bestimmte Leiste , unabhängig von der Größe Jetzt können wir das auch mit unserer horizontalen Einstellung tun. Alles, was wir tun müssen, ist von einem festen Betrag auf automatisch umzustellen. Denken Sie daran, dass wir unsere Tastenkombination im Ausrichtungsmenü haben . Doppelklicken Sie einfach darauf. Sie können die individuelle Polsterung jederzeit anpassen . Schauen wir uns hier unten an, du könntest einfach ein bisschen nach oben gehen, oder natürlich auch oben Es liegt wirklich an Ihnen, wie Sie das einrichten möchten. Sie werden jetzt sehen, während wir die Größe ändern, bleibt alles an seinem Platz. Die meiste Zeit verwenden wir unsere horizontale Größenänderung, aber wir vergessen auch ein wenig , wie leistungsfähig die vertikale Größenänderung ist. Denken Sie also unbedingt darüber nach. 11. AUTO LAYOUT: 08 Auto-Layout ignorieren: Automatisches Layout wird ignoriert. Was bedeutet das? Also hier habe ich einen automatischen Layoutrahmen. Ich möchte diesen neuen Aufkleber hierher ziehen, und ich möchte, dass er über meinem Bild sitzt. Wenn ich ihn nun einfach in den Rahmen für das automatische Layout ziehe, werden Sie feststellen, dass ich ihn nicht über das Bild ziehen kann da er Teil des automatischen Layouts wird , sobald er in den Rahmen kommt. Was ich jetzt tun kann, ist, es innerhalb des Rahmens zu platzieren , es auszuwählen und dann im Eigenschaftenfenster unter Position dieses kleine Symbol namens Automatisches Layout ignorieren zu finden. In früheren Versionen wurde dies als absolute Position bezeichnet. Sie können Ihr Element jetzt frei im Rahmen des automatischen Layouts bewegen. Kleiner Tipp: Es gibt auch eine Tastenkombination. Halten Sie die Strg-Taste und ziehen Sie sie einfach in einen Rahmen für das automatische Layout Dann müssen Sie das automatisch angewendete automatische Layout ignorieren . Wenn Sie es entfernen möchten, klicken Sie einfach erneut auf das Symbol. Da ich die Größe der Karte geändert habe, werden Sie jedoch feststellen, dass sie nicht mehr auf die Breite reagiert Das liegt daran, dass es nicht mehr Teil des automatischen Layouts ist. Daher gilt die Größenänderung nicht. dieses Problem zu lösen, kann ich das Element neben dem Einschränkungsmenü auswählen das Element neben dem Einschränkungsmenü und es dann rechts platzieren Dies funktioniert nur für Elemente , bei denen es sich nicht um ein automatisches Layout handelt. Dies eignet sich auch hervorragend zum Erstellen von Dingen wie Warnblasen. Ziehen Sie es einfach in Ihren automatischen Layoutrahmen, ignorieren Sie das automatische Layout und positionieren Sie es dann an der gewünschten Stelle. Jetzt wird es wahrscheinlich standardmäßig abgeschnitten. Stellen Sie sicher, dass Sie das übergeordnete Bild auswählen, und wechseln Sie im Menü für das automatische Layout von Clip-Inhalt zu Inhalt anzeigen. Das bedeutet, dass alles angezeigt wird, was über den Rahmen hinausgeht 12. AUTO LAYOUT: 09 Auto-Layout-Komponenten und Variablen: Wenn Sie Variablen verwenden und eine Sammlung mit Ihren Abstandswerten einrichten , können Sie diese im automatischen Layout verwenden. Dies ist eine hervorragende Möglichkeit, die Konsistenz aller verschiedenen Elemente und Komponenten in Ihrem Design sicherzustellen aller verschiedenen Elemente . Um sie auf einen automatischen Layoutrahmen anzuwenden, wählen Sie einfach den Rahmen und dann in Ihrem Auto-Layout-Menü, wo Sie Ihre Werte für Abstand und Abstand finden Wenn Sie mit der Maus über sie fahren, wird ein kleines Variablenzeichen angezeigt Klicken Sie darauf und Sie erhalten ein Drop-down-Menü mit allen Werten. Sie können jetzt den Wert im Folgenden auswählen. Sie können ihn auch für Ihren Abstand verwenden. Sie müssen nur über das Drop-down-Menü Variable anwenden und können jetzt jede Variable auswählen, die Sie anwenden möchten. Und Sie können dieselbe Variable natürlich mehrmals auf verschiedene Elemente anwenden dieselbe Variable natürlich mehrmals . Sie können die Variable jederzeit ändern indem Sie einfach darauf klicken und einen anderen Wert aus der Liste auswählen einen anderen Wert aus der Liste oder sie entfernen, indem Sie auf den kleinen Clip klicken Wenn Sie diesen Clip in einigen Feldern nicht sehen, drücken Sie zweimal die Zurück-Taste Und denken Sie daran, dass wir in figment mit einem komponentenbasierten Ansatz arbeiten. Es wäre also eine gute Praxis, Es wäre also eine gute Praxis jeden Auto-Layout-Frame, der mehrfach verwendet wird, in eine Komponente umzuwandeln Wenn wir jetzt eine Instanz herausziehen, können Sie sehen, dass die Instanz alle Abstandswerte erbt , die Sie mit Variablen angewendet haben Während ich den Text in der Instanz ändere, bleiben diese Variablen an Ort und Stelle Natürlich würde dies, wie bei jeder anderen Komponente, auch mit jeder anderen Variablen funktionieren Wenn Sie beispielsweise eine Farbvariable für Ihre Komponente festlegen würden , erben alle Instanzen 13. AUTO LAYOUT: 10 Min- und Max-Werte festlegen: Minimal- und Maximalwerte einstellen. Wenn wir die Größe unseres Designs ändern, möchten wir manchmal einen bestimmten Punkt nicht unter- oder überschreiten, wie auf dieser Karte. Ich möchte nicht, dass sie kleiner ist. Was wir tun können und damit das funktioniert, müssen Sie Ihr Element als automatischen Layoutrahmen einrichten , ist, dass wir in den Einstellungen zur Größenänderung jetzt dieses kleine Drop-down-Menü finden, und hier können wir eine Mindestbreite hinzufügen Ich kann es jetzt entweder definieren, indem ich einfach eine Zahl eintippe oder ein kleines Drop-down-Menü hier unten verwende Ich könnte eine Variable anwenden, wenn ich vorher eine eingerichtet hätte. Oder ich verwende einfach set auf die aktuelle Breite. Jetzt füge ich auch eine maximale Breite hinzu, und Sie können beide oder nur eine davon verwenden , wie auch immer Sie es benötigen. Auch hier klicke ich auf das kleine Drop-down-Menü, füge eine maximale Breite hinzu und in diesem Fall gebe ich einfach die Zahl 500 ein. Sie können jetzt sehen, dass ich die Größe nicht unter oder über diesen Punkt hinaus ändern kann, wenn ich die Größe ändere unter oder über diesen Punkt hinaus In diesem Beispiel würde das nicht viel Sinn machen, aber falls Sie ein anderes Design benötigen , können Sie natürlich auch eine Mindest- und Maximalhöhe festlegen Sie können sie maximal auf den übergeordneten Rahmen anwenden, aber Sie können sie auch auf jedes Element innerhalb Ihres automatischen Layoutrahmens anwenden. Ich möchte zum Beispiel nicht, dass dieser Text größer wird. Ich werde ihn auswählen und einen Maximalwert hinzufügen, und ich werde ihn auf die aktuelle Breite setzen und nun beachten, dass dieser Text immer noch so eingestellt ist , dass er den Container füllt. Wenn ich die Größe ändere, wird es schön wachsen. Es wird jedoch einen bestimmten Schwellenwert erreichen und es wird aufhören zu wachsen und gut lesbar bleiben 14. AUTO LAYOUT: 11 Auto-Layout-Wrap: Elemente zwischen Zeilen einwickeln. Hier habe ich einen automatischen Layoutrahmen, der Instanzen der Karte und ein Newsletter-Element enthält . Sie sind derzeit alle auf eine feste Größe eingestellt. Jetzt haben wir etwas über die horizontale und vertikale Positionierung gelernt . Aber es gibt noch einen dritten namens Ap. Wenn ich Ap auf einem automatischen Layoutrahmen auswähle, kann ich jetzt die Größe ändern und die Elemente fließen in die nächste Zeile, sobald nicht genügend Platz zur Verfügung steht Mit Hilfe des Ausrichtungsmenüs können wir wählen, wie sie das tun Also können wir sie entweder zentrieren, links oder rechts platzieren, oder auf einen meiner Favoriten, doppelklicken, und jetzt haben wir diese Einstellung auf Auto gesetzt, und daher werden sie den gesamten verfügbaren Speicherplatz verbrauchen. Nun, das funktioniert entweder mit festen Elementen, und wir könnten zum Beispiel diese Karte hier platzieren, um den Container zu füllen. Mal sehen, was jetzt passiert, wenn wir die Größe ändern. Lassen Sie uns das Auto ausschalten und wir können jetzt sehen, während wir die Größe ändern und es zu einer neuen Zeile springt, dass diese die gesamte Breite einnimmt Was wir hier jedoch sehen können, ist, dass das nicht richtig funktioniert , weil es das einfach zu stark verkleinern wird Wir können das also sehr gut mit den Min- und Max-Einstellungen kombinieren gut mit den Min- und Max-Einstellungen Was wir tun werden, ist, dies in der Hauptkomponente festzulegen , sodass alle Instanzen erben Ich werde das hier auswählen, und ich werde jetzt das Drop-down-Menü verwenden und eine Mindestbreite hinzufügen und ich werde sie auf die aktuelle Breite setzen, und ich werde vorerst keine maximale Breite festlegen Wenn ich jetzt die Größe ändere, können Sie sehen, dass es jetzt, wenn es in die oberste Reihe springt , die perfekte Größe beibehält , aber wenn es in die nächste Zeile geht, wird es den gesamten Speicherplatz belegen. Und wir können das so kombinieren, wie wir es brauchen. Wir könnten dasselbe mit dieser Karte hier machen, mit einem Minimalwert, wir verwenden die aktuelle Größe und dann einen Maximalwert, sagen wir, etwa diese Größe. Was wir jetzt tun müssen, ist, dass dies immer noch auf einen festen Wert eingestellt ist. Lassen Sie uns all diese Karten auswählen und sie so einstellen , dass sie den Behälter füllen. Jetzt, wo wir die Größe ändern, können Sie sehen, dass sie sich mit ihren eigenen Mindest- und Max-Einstellungen gut mit ihren eigenen Mindest- und Max-Einstellungen 15. 12 Bilder mit festem Seitenverhältnis: Richten Sie jetzt Bilder mit dem Seitenverhältnis mit Figma ein. Hier habe ich eine Autolayout-Karte mit einem Bild. Wählen Sie nun einfach das Element aus, auf das Sie das Seitenverhältnis anwenden möchten. Das funktioniert übrigens auch für Frames. Und dann siehst du direkt neben deinen Größen dieses kleine Schloss. Klicke darauf. Und wenn Sie jetzt die Größe ändern, können Sie sehen, dass das Bild das Seitenverhältnis gut beibehält Ein kleiner Wermutstropfen, wenn Sie zu diesem Zeitpunkt in den Taubmodus wechseln, aber denken Sie daran, dass dies die Übersetzung ist, die wir gerade veröffentlicht dies die Übersetzung ist, die Idealerweise hätten wir ein Seitenverhältnis, wie wir es in CSS sehen, aber das ist noch 16. AUTO LAYOUT: 13 Lerne über Verschachtelung und Eltern-Kind-Beziehung: Lassen Sie uns das Verschachteln und eine Eltern-Kind-Beziehung verstehen. vertraut zu machen Übrigens ist es wichtig, die Eltern-Kind-Beziehung zu verstehen, um sich mit der Verschachtelung sowohl im automatischen Layout als auch im Code vertraut zu Eltern-Kind-Beziehung Hier siehst du ein Kartendesign, das ich eingerichtet habe. Jetzt wurde bisher kein automatisches Layout angewendet. Sie können sehen, dass diese Karte Cluster hat. Dieser Intra-Teil hier gehört zusammen, und dann haben wir einen Text und einen Link, die zusammen gehören Wenn ich nun diese Karte auswählen und einfach das automatische Layout anwenden würde , dann würde das passieren Was passiert ist, ist, dass das automatische Layout den gleichen Abstand zwischen allen Elementen hinzugefügt hat. Der Grund dafür ist, dass das automatische Layout es so betrachtet. Unser Frame ist das übergeordnete Element, und alles, was es direkt darunter auf der ersten Hierarchieebene findet , sind die untergeordneten Elemente. Alle Regeln für das automatische Layout werden auf all diese Kinder angewendet. In diesem Fall unser Abstand. Wenn wir jetzt weitermachen und das verschachteln, habe ich hier einen verschachtelten Rahmen mit automatischem Layout, und ich habe diesen Teil auch verschachtelt Dann wird das automatische Layout das Design so betrachten Wir haben den verschachtelten Beispielrahmen , der immer noch das übergeordnete Element ist, aber jetzt haben wir nur noch drei untergeordnete Elemente Wenn wir jetzt zum Beispiel unseren Abstand ändern , wirkt sich das nur auf die untergeordneten Wir haben immer noch alle unsere Kinder, aber sie sind jetzt Enkelkinder Sie werden der Regel ihrer eigenen Eltern folgen. Je nachdem, wie Ihr Design ändern und wie es sich verhalten soll, müssen Sie diese Verschachtelung anpassen Nehmen wir zum Beispiel an, Sie möchten ein Bild in voller Breite. Was wir tun müssen, ist, unsere Polsterung auf beiden Seiten zu entfernen Was wir aber auch wollen, ist, dass wir hier noch einen gewissen Spielraum haben wollen Was wir jetzt tun können, ist, diese beiden auszuwählen, ein weiteres verschachteltes automatisches Layout zu erstellen und die Ränder jetzt wieder links und rechts anzuwenden Wenn wir den oberen Teil loswerden wollen, können wir das auch tun, indem wir ihn auf Null setzen Jetzt können Sie sehen, dass Sie ein völlig anderes Layout haben, das auch seine eigenen Verschachtelungsrollen benötigt diesem Grund ist es so wichtig , dass Sie sich mit dem Verschachteln auskennen, und es geht wirklich nur um und es geht wirklich nur Beim automatischen Layout geht es also wirklich nicht nur darum, diese kleine Schaltfläche hier anzuwenden Es geht darum, über die allgemeine Struktur Ihres Entwurfs nachzudenken , über die allgemeine Struktur Ihres Entwurfs dann automatische Layoutrahmen dort anzuwenden , wo Sie sie benötigen, und was sehr wichtig ist, dass Sie all diese Auto-Layout-Rahmen, die Sie verschachtelt haben, sowie alle Ebenen darin, sorgfältig darüber nachdenken müssen welches Größenänderungsverhalten Sie haben möchten Es geht wirklich darum, die drei Säulen des automatischen Layouts zu verstehen und zu kombinieren 17. AUTO LAYOUT: 14 Auto-Layout vorschlagen: Fügen wir etwas Magie hinzu, die auf ein automatisches Layout hindeutet. Hier habe ich einige Designs, die eine Verschachtelung benötigen würden , wenn ich sie in ein automatisches Layout umwandeln möchte sie in ein automatisches Layout umwandeln möchte Der erste Teil ist ziemlich einfach, dieser Teil wäre ein verschachteltes Auto-Layout, dann dieser Teil und dann ist das alles ein vertikales Auto-Layout Die zweite Karte ist etwas komplexer. Bei diesem rechten Teil müsste es sich um eine vertikale automatische Layoutverschachtelung handeln und dann die Karte selbst um eine horizontale automatische Layoutverschachtelung Dann haben wir eine Navigation, also müsste dieser rechte Teil verschachtelt werden Und zwischen dem Logo und diesem rechten Teil müssten wir die Option Auto auch Know Nest Space dazwischen setzen Jetzt können wir das alles von Hand machen oder wir können einen kleinen Trick anwenden Fangen wir mit dem ersten an. Wenn ich einfach einen Rahmen auswählen und automatisches Layout anwenden würde , dann würde das passieren, nicht nett. Und wenn wir uns den zweiten ansehen, brauchen wir hier definitiv etwas Verschachtelung. Aber was wir tun können, ist mit der rechten Maustaste zu klicken, und dann sehen Sie unter Automatisches Layout für Werbung eine weitere Option namens Automatisches Layout vorschlagen Oder wir können auch die Tastenkombinationen Shift Strg und A verwenden. Im Ebenenbedienfeld können Sie sehen, dass uns auch das Layout eine Verschachtelung vorgeschlagen Ich habe diesen Frame einfach aufgerufen, damit wir einen zusätzlichen kleinen Tipp hinzufügen können . Klickt auf das AI-Menü und benennt eure Ebenen einfach um Und dann bekommst du auch ein paar nette Ebenennamen für diese verschachtelten Elemente Schauen wir uns jetzt an , ob das funktioniert. Das sieht ziemlich gut aus , wenn ich hier die Größe ändere. Wenn wir hier hineinklicken, können wir sehen, dass dadurch auch unsere Größenänderung hinzugefügt wurde. Dies ist auf Füllen eingestellt, und auch mein Elternteil hier ist auf Füllen eingestellt. Wenn ich das jemals ändern möchte, kann ich diese Elemente einfach löschen oder in mein Ebenenfenster ziehen und meine Verschachtelung ändern Versuchen wir es mit dem nächsten und wählen wir diese Karte, Umschalttaste und A aus. Ich werde die Tastenkombination verwenden Außerdem werde ich die Ebenen umbenennen. Lass uns einen Blick darauf werfen. Das sieht auch ziemlich gut aus. Ich kann immer noch Anpassungen vornehmen. wir an, ich möchte, dass Nehmen wir an, ich möchte, dass dieses Bild die Hälfte des Containers einnimmt, dann kann ich es einfach auswählen und meine Größe ändern, um den Container zu füllen. Auf diese Weise habe ich es so angepasst, wie es sich verhalten soll. Unser letzter, schauen wir uns die Navigation an. Shift-Steuerung und A, unser Tastenkürzel, gewöhnen wir uns auch daran , die Ebenen umzubenennen Dadurch wird alles umbenannt , was ich noch nicht benannt Diese, die ich zuvor benannt habe, werden sie nicht überschreiben. Schauen wir uns an, ob das von selbst automatisch angewendet wurde. Ja. Perfekt, wir können hier im Alignment-Menü sehen , dass das Auto angewendet wurde. Das war wirklich etwas , das sehr schwierig war , bevor wir diese kleine Funktion hatten. Nutze es. Ich möchte Sie dennoch dringend dazu ermutigen, sich daran zu gewöhnen, auch manuelles Verschachteln zu verstehen Denn irgendwann möchtest du Dinge ändern und du musst verstehen, warum die Dinge auf eine bestimmte Art und Weise eingerichtet sind Kleine Randnotiz, zum Zeitpunkt der Aufnahme dieser Funktion ist sie ziemlich neu und wenn man bedenkt, wie mächtig und wichtig sie ist, würde ich erwarten, dass sie aus diesem kleinen Untermenü bald aus diesem kleinen Untermenü mit Rechtsklick in unser Hauptmenü für das automatische Layout herauskommt, also achte darauf. 18. AUTO LAYOUT: 15 Magie mit Tabellen: Etwas Magie mit Tischen. Das automatische Layout ist auch sehr praktisch, wenn Sie Dinge wie eine responsive Tabelle erstellen möchten. Sie können hier also sehen, dass ich eine Zeile eingerichtet habe. Das ist einfach ein automatischer Layoutrahmen, und dieser ist momentan auf eine feste Breite eingestellt und dann vertikal so, dass er sich umarmt Und dann habe ich darin all meine verschiedenen Spalten, und sie sind so eingerichtet, dass sie den Behälter füllen und sich umarmen, und nur die erste, die eine Zahl ist, setze ich auf eine feste Größe Weil ich das so einstellen würde, dass es gefüllt wäre, dann würde es einfach zu viel Platz beanspruchen Was ich jetzt tun möchte, ist, dass ich einen zweiten in die Länge ziehe . Ich behalte den ersten und wähle den übergeordneten Frame aus , indem ich die Eingabetaste drücke. Denken Sie daran, dass dadurch alle untergeordneten Elemente ausgewählt und ich diese einfach fett formatieren werde . Dann möchte ich hier den gesamten Inhalt ausfüllen. Sie können das entweder von Hand ausfüllen oder ich verwende einfach die Figma-KI, und übrigens, ich nehme das auf, gerade herauskam, also wird es wahrscheinlich etwas anders aussehen, wenn also wird es wahrscheinlich etwas anders aussehen Sie sich das ansehen und einfach den Rahmen auswählen, in dem der Inhalt ausgefüllt werden soll, und ich werde es einfach sagen, etwas Inhalt erfinden Jetzt ziehe ich einfach eine Kopie heraus. Was Sie auch tun können, ist, sobald Sie einen Kopierbefehl N D haben, und das wird mehr in derselben Entfernung kopieren. Jetzt wähle ich alle meine Zeilen aus und drücke erneut Shift A , um sie in einem automatischen Layoutrahmen zu verschachteln. Denn was ich jetzt tun kann, ist , mir diesen magischen kleinen Griff zu geben. Ich kann entweder den Rahmen auswählen und dann hier auf Inhalt ersetzen klicken, um ihn auszufüllen. Oder ich ziehe einfach die Griffe auf, ich kann so viele Zeilen erstellen, wie ich benötige, und schon wird der Inhalt für mich ausgefüllt , was wirklich toll ist. Jetzt verbinde ich es einfach mit meiner Benennung hier oben und wähle beide aus. Es wird wieder A verschoben. Schauen wir uns an, ob mein automatisches Layout funktioniert. Ja, das funktioniert perfekt. Falls es nicht funktioniert, Sie einfach sicher, dass Sie den übergeordneten Frame auswählen stellen Sie einfach sicher, dass Sie den übergeordneten Frame auswählen, die Eingabetaste drücken und überprüfen Sie , ob alles gefüllt ist. Dies muss auf Füllen eingestellt sein, und dies muss auch auf Füllen eingestellt sein. So können Sie mit dem automatischen Layout von Figma und etwas KI ziemlich schnell eine Tabelle erstellen mit dem automatischen Layout von Figma und etwas KI ziemlich schnell 19. AUTO LAYOUT: 16 fortgeschrittenere Setup-Beispiele: Lassen Sie uns die fortgeschrittenere Verschachtelung und Größenänderung üben. Hier habe ich eine Reihe von fortgeschritteneren Layouts, und ich möchte sie wirklich genauer durchgehen Ich möchte Ihnen zum einen zeigen, wie ich sie von Hand verschachteln würde, weil ich denke, dass es sehr wichtig ist, dass Sie das allgemeine Konzept verstehen , wie man über automatisches Layout und Verschachtelung denkt Und dann werden wir auch die automatische Art der Verschachtelung von Figma ausführen , und wir können auch die Ergebnisse vergleichen Ich werde das ziemlich schnell durchgehen. Die Idee ist, dass du dir ansiehst, was ich mache, es pausierst und dann zu deiner Übungsdatei springst. Es geht wirklich darum, das selbst zu machen und den Dreh raus zu bekommen, denn beim automatischen Layout, besonders wenn es um Größenänderung, Verhalten und Verschachtelung geht , dreht sich alles um Übung Okay, fangen wir hier mit unserer ersten Karte an. Also werde ich eine Kopie herausholen. Und zuallererst ist das ziemlich einfach. Also das hier wäre eine Einheit, also wähle ich das aus und drücke Shift A. Und ich denke, das ist so ziemlich alles. Und ich wähle einen übergeordneten Frame und kann Shift A drücken oder das Menü verwenden , um das automatische Layout anzuwenden. Schauen wir uns also das Verhalten an. Das sieht schon ziemlich gut aus. Das automatische Layout wurde wirklich fantastisch darin, Verhalten vorzuschlagen. Ich kann es mir ansehen. Das hier ist für mich eher wie ein Button, also werde ich das wahrscheinlich auf Huck to Content setzen, aber ansonsten funktioniert alles einwandfrei Wenn nicht, dann stellen Sie sicher , dass Sie einen verschachtelten Rahmen auswählen, Sie, ob er auf Füllen gesetzt ist, verwenden Sie die Eingabetaste, um alle untergeordneten Elemente abzurufen, und schauen Sie dann, ob sie auch auf Füllung eingestellt sind Lassen Sie uns nun dasselbe ausprobieren und verwenden wir einfach unser Original Ich suche nach einer anderen Kopie. Ich werde jetzt mit der rechten Maustaste klicken und weitere Optionen aufrufen, Vorschläge machen oder ein Layout erstellen oder einfach die Tastenkombination verwenden. Und schauen wir uns das an, und das hat uns tatsächlich genau das gleiche Ergebnis gebracht. Also ja, wir könnten hier absolut eine Abkürzung gebrauchen. Gehen wir zu unserer nächsten Karte. Das ist etwas komplexer. Wir haben also verschiedene Richtungen. Zuallererst haben wir hier diesen Abschnitt, der ein vertikales automatisches Layout darstellt und dann ist die Karte selbst horizontal. Also zuerst wähle ich hier wieder diese Überschriften aus, Shift und A, und dann all diese Shift und A. Jetzt kann ich der gesamten Karte ein automatisches Layout hinzufügen. Auch hier entweder die Tastenkombination oder das Menü. Schauen wir uns dieses Verhalten an. Funktioniert und das nimmt gerade wirklich nicht zu. Was wir tun müssen, wir müssen dem ganzen ersten Frame sagen , dass er den Container füllen soll. Übrigens gibt es eine letzte Abkürzung. Wenn du es einfach an das Ende ziehst, kannst du sehen, wie diese kleinen Zeichen hier erscheinen und es ist jetzt automatisch so eingestellt, dass es gefüllt wird. Dann machen wir das auch mit diesen Diagrammelementen, die bereits auf Füllen eingestellt Eingabetaste und stellen Sie sicher, dass alles gefüllt ist. Das ist so eingestellt, dass es gefüllt wird, und das hier, ich bevorzuge es, dieses Set zum Umarmen zu haben Das hat nicht funktioniert. Ich werde das einfach nochmal machen und jetzt funktioniert es. Denken Sie daran, Sie könnten dieses Bild hier mit dem Ausrichtungsmenü neu positionieren , und wenn Sie auch diese beiden Füllungen einstellen würden Dann werden wir so etwas bekommen. Das ist nicht wirklich das, wonach ich suche. Also was ich will, ist eigentlich die ursprüngliche Position. Okay, das sieht toll aus. Versuchen wir es jetzt noch einmal mit unserem automatischen Vorschlag. Ich ziehe das hier runter und verwende diesmal eine Abkürzung, oder um einen Vorschlag zu machen , und schauen wir uns an, was wir haben. Das sieht eigentlich ganz gut aus. In diesem Fall ist es eigentlich die bessere Lösung, die es bereits bei allen Einstellungen gefunden hat. Auch hier räume ich nur kleine Kleinigkeiten auf , als würde ich dieses Set lieber umarmen Nichts Dramatisches, wenn du es nicht tust. Der nächste. Dieser hat einen oberen Teil und dann einen unteren Teil. Auch hier wähle ich zuerst die Überschriftenschicht A und kombiniere sie dann mit der Schicht A. Jetzt kann ich das automatische Layout auf die gesamte Karte anwenden. Schau dir an, was mit diesem kleinen Marker hier oben passiert. Also das funktioniert nicht. Es weiß nicht wirklich, was es damit anfangen soll. Ich ziehe es einfach raus und lass uns die Polsterung wieder reparieren Aus irgendeinem Grund hat sich das Ganze von selbst erledigt. Wir wollen das nicht, wir wollen, dass es auch ein horizontales Layout ist. Ich werde hier etwas mehr Spielraum hinzufügen. Den hier auch fest anziehen. Schauen wir uns das jetzt an. Auch hier funktioniert es nicht wie erwartet, also werde ich es Stück für Stück durchgehen. Ich möchte, dass dieser hier den Behälter füllt, den Behälter füllt und diesen Teil auch hier. Es geht wirklich darum, alles Stück für Stück auszuwählen . Wir können den Abstand hier korrigieren. Wir können diesen auch einstellen. Ja, wie gesagt, wenn du es bis zum Ende herausziehst, sollte es normalerweise automatisch den Dateicontainer aufnehmen. Manchmal funktioniert es nicht, dann musst du nur ein Dropdown verwenden. Auch hier möchte ich, dass er sich umarmt, also schauen wir mal, also das funktioniert Was wir jetzt wollen, ist, dass wir das wieder hier reinziehen Denken Sie daran, wir können unser magisches kleines automatisches Ignorieren-Layout verwenden, oder wir können das auch automatisch tun , indem wir die Strg-Taste gedrückt halten, und es wird automatisch so eingerichtet und wir können es jetzt hier platzieren. Vergiss deine Einschränkungen nicht. Und wir sollten jetzt in der Lage sein, die Größe zu ändern. Perfekt. Versuchen wir es jetzt mit unseren automatischen Vorschlägen. Auch hier ziehe ich das ursprüngliche automatische Layout mit Rechtsklick vor. Und das sieht ziemlich gut aus. Ignorieren wir vorerst einfach unseren kleinen Marker. Das sieht gut aus. Nicht perfekt, aber ziemlich gut. Lassen Sie uns die Markierung herausnehmen und wenn wir sie wieder hineinziehen, können wir unser Layout „Reihenfolge ignorieren“ verwenden und sie positionieren, genauso wie zuvor. Vergiss deine Einschränkungen nicht. Übrigens, wenn Sie möchten, dass dieser Frame darüber hinausgeht, stellen Sie sicher, dass Sie den Clip-Inhalt eingestellt haben. Schauen wir uns jetzt einfach an, wie das eingerichtet ist: Behälter füllen, Behälter füllen, hier einen zusätzlichen kleinen Behälter erstellen, wie wir es zuvor getan haben, und füllen. Ja, das gibt uns tatsächlich eine ziemlich gute Lösung. Das einzige, was ich nicht mag, ist, dass es nicht nach unten drückt. Schauen wir uns das mal an, wir haben die Fehlerquelle. Das muss so eingestellt werden, dass es sich an den Inhalt anpasst. Es wird reagieren, was auch immer hier passiert. passiert immer noch nicht. Gehen wir auch hier rein. Umarme den Inhalt. Und jetzt können Sie sehen, dass es funktioniert Und das ist der Grund, warum Auto Sugest fantastisch ist, aber versuchen Sie auch, das Verschachteln und das Verhalten bei der Größenänderung ein wenig selbst zu üben Verschachteln und das Verhalten bei der Größenänderung ein wenig selbst weil diese kleinen Fehler passieren werden , weil diese kleinen Fehler passieren werden und Sie verstehen müssen, warum Das wirst du nur verstehen, wenn du es verschachtelt und die Größe verändert Okay, lass uns mit unserem letzten weitermachen. Dieser hier. Und lass uns einen Blick darauf werfen. Dieser ist ein bisschen mehr zum Nisten. Lassen Sie uns zunächst Stück für Stück vorgehen. Wir haben diesen Teil und wir verschachteln ihn zusammen mit dem Bild Sie sich immer an, wie gut die Richtung schon von der Wasserführung aufgenommen wird. Dann werden wir uns um diesen Teil hier unten kümmern. Ich werde zuerst die kleinen A-Kacheln auswählen. Wir werden das in einer Minute klären . Und diese beiden muss ich auch klären. Dieses werde ich tatsächlich verlassen, weil es so aussieht, als ob es hier und hier die gleiche Entfernung hat, also kann es ein eigenes untergeordnetes Element sein. Lassen Sie uns diese sortieren und Sie können sehen, dass sie in der falschen Reihenfolge gestapelt sind, also können wir mit der erweiterten Einstellung fortfahren und einfach die Stapelung ändern Jetzt werden wir diese beiden auch in einen automatischen Layoutrahmen umwandeln Geben wir es in der Mitte ein und schauen wir uns an, wie schön Autolayout schon bemerkt hat, dass wir hier diesen großen Abstand haben, und es hilft uns wirklich, obwohl wir bei der Einrichtung von Hand verschachteln Fügen wir also einfach auch dem übergeordneten Frame das automatische Layout auch dem übergeordneten Frame das Schauen wir uns nun an, wie unsere Größenänderung funktioniert. Es sieht ziemlich gut aus, außer hier oben, schauen wir uns an, was hier passiert, wir wollen den Behälter füllen. Dann dieser hier, hier ist der Fehler passiert. Wir wollen auch, dass dies den Container füllt, und wir müssen nur das übergeordnete Objekt erneut abrufen, und das ist derzeit auf Auto eingestellt, also müssen wir das wegnehmen, und wir werden hier eine nette kleine Lücke hinzufügen. Schauen wir uns das jetzt an, und das sieht toll aus. Schauen wir uns an, was Auto Suggest uns geben würde. Nehmen wir dieselbe Karte, Shift, Control und A. Sie können sehen, dass sie verschachtelt ist Lassen Sie uns einfach die Größe ändern und schauen, was passiert ist. Das gibt mir tatsächlich ein ziemlich gutes Ergebnis. Hier unten können Sie sehen, dass das nicht aufgenommen wurde. Schauen wir mal rein, wir müssen es zentrieren, um es schöner zu machen, und es dann so einstellen, dass es den Behälter füllt Falls du mir gerade dabei zugesehen hast und völlig überwältigt bist Das ist normal. Sie müssen in diese Übungen hineinspringen und wirklich damit herumspielen und sich mit der Strukturierung von Verschachtelungen und Größenänderungen vertraut machen Strukturierung von Verschachtelungen und Größenänderungen vertraut Gehen Sie. 20. AUTO LAYOUT: 17 Auto-Layout-Seiten: Ganze Seiten mit automatischem Layout erstellen. Aufgrund der Vorteile der Verschachtelung und der Beziehung zwischen Eltern und Kindern können wir das automatische Layout vom kleinsten Element wie einer Schaltfläche bis hin zur Erstellung unserer Komponenten verwenden das automatische Layout vom kleinsten Element wie einer Schaltfläche bis hin zur Erstellung unserer Komponenten sie in Gruppen bis hin zu ganzen Seiten organisieren Bisher haben wir uns mit kleineren Elementen wie einer Karte und einer Navigation befasst Das hat einen Grund. Ich würde Ihnen generell raten , selbst wenn Sie anfangen, frei zu entwerfen, was ich absolut befürworte, dass Sie irgendwann, wenn Sie anfangen Ihre Datei aufzuräumen, darüber nachdenken und alles in Komponenten organisieren Und stellen Sie dann sicher , dass Sie zuerst Ihr automatisches Layout innerhalb dieser Komponenten einrichten Ihr automatisches Layout innerhalb dieser Komponenten einrichten Ich habe das hier für dich gemacht. Lassen Sie mich Ihnen nur zeigen, wenn ich eine Instanz herausziehe, sehen Sie, dass sie alle Einstellungen erbt, und Sie können sehen, dass das mit dem automatischen Layout bereits sehr gut funktioniert , das Gleiche hier Sie können jederzeit zu Ihrer Übungsdatei springen , um sich das Setup genauer anzusehen Lassen Sie uns nun unseren übergeordneten Frame erstellen. Ich drücke F und wähle einfach ein beliebiges voreingestelltes Bild aus. Das kannst du übrigens auch zeichnen. Die Größe spielt keine Rolle, weil wir die Größe sowieso ändern werden Jetzt kann ich einfach Instanzen meiner Assets ziehen. In einem größeren Projekt würden Sie diese Assets natürlich hier in Ihrem Asset-Panel finden . Jetzt könnten Sie bereits das automatische Layout auf den übergeordneten Frame anwenden und dann im Laufe der Zeit alles sortieren . Ich persönlich bevorzuge es, es so zu belassen , weil es mir die Freiheit gibt , meine Instanzen wirklich frei in diesem Frame zu bewegen , und ich habe das Gefühl, dass ich einfach viel mehr Freiheit habe , wenn es darum geht, wie dieses zu gestalten. Aber sobald Sie eine fertige Seite haben, können wir sie jetzt in einen Auto-Layout-Frame umwandeln , oder Sie können sie übrigens auch einfach als statische Seite belassen , was in den meisten Fällen auch in Ordnung ist, da Ihr gesamtes responsives Verhalten bereits in Ihren Komponenten eingebettet ist . Dies sollten Sie mit Ihrem Entwicklungsteam besprechen , wenn es sich tatsächlich lohnt, die gesamte Seite erneut im automatischen Layout einzurichten . Aber nur zum Üben werden wir das machen. Nun könnten wir entweder hier auf Automatisches Layout klicken und es dann manuell sortieren, oder was ich auch tun werde, ich mache einen Rechtsklick und verwende meinen Vorschlag für automatisches Layout. Denken Sie auch hier an die Tastenkombinationen Strg, Shift und A. Schauen wir uns das genauer an. Was ist passiert. Nun, wenn wir die Größe ändern, können wir sehen , dass einige Elemente einwandfrei funktionieren Zum Beispiel meine Navigation und hier mein Interratext und meine Fußzeile, weil das ziemlich einfache Elemente sind Wenn wir uns nun meine Karten ansehen, ich Glück und das wurde tatsächlich ziemlich gut aufgenommen Mir ist aufgefallen, dass ich das wahrscheinlich einpacken möchte. Wenn ich es hier oben positioniere. Und das ist eigentlich sehr nett. Ich muss nur ein bisschen aufräumen. In diesem Fall muss ich auch sagen, Rand links und rechts, also werde ich das hier einrichten und einen kleinen Trick, was Sie tun können, ist, dass Sie diese Lücke nutzen können. Hier ist meine Polsterung. Sie könnten Variablen verwenden, um dies zu tun Ich verwende diese Variablen bereits in meinen Komponenten. Sie können sehen, dass mein Padding mit Variablen eingerichtet ist. Also meine Navigation, all das hat die gleichen Variablen, die verwendet werden, wenn es um Padding geht Wenn ich also das Padding ändern möchte, könnte ich dafür auch einfach eine separate Padding-Variable einrichten , und dann muss ich sie einmal ändern, und ich muss mir keine Gedanken darüber machen, das alles manuell zu machen das alles Muss nicht, nur ein kleiner Tipp nebenbei. Und ansonsten gefällt mir das Aussehen sehr gut. Ich könnte mit diesen Karten herumspielen. Ich könnte sie zum Beispiel in die Mitte stellen, oder ich könnte doppelklicken, und dann würden sie gleichmäßig verteilt werden. Wenn wir also die Größe ändern, würde es so aussehen Nun, mit diesem Beispiel hatten wir ziemlich viel Glück bei dieser Arbeit Aber Sie werden feststellen, dass Sie mit dem vorgeschlagenen automatischen Layout manchmal nicht so viel Glück haben und ein seltsames Verhalten zeigen , sobald Sie so viel Glück haben und ein seltsames Verhalten Elemente haben, die nicht so einfach sind , wie nur ein einfaches automatisches Layout, das gefüllt werden muss. Wenn wir also sagen, wir haben hier ein kleines Durcheinander und wollen es noch einmal machen, dann können Sie diesen Teil des Auto-Layouts immer einfach herausziehen und ihn dann einfach außerhalb Ihres Auto-Layout-Rahmens aussortieren . Also, was ich tun könnte, ich könnte diese Karten haben und ich könnte das alles schnell wieder aufbauen. Werde das einfach los. Wähle sie aus. Und jetzt könnte ich sie einfach zurück in den Auto-Layout-Rahmen ziehen. Noch ein kleiner Tipp: Wenn Sie etwas haben, das größer ist als Ihr automatischer Layoutrahmen, werden Sie den magischen kleinen Positionierer, den wir gerade hatten, nicht sehen kleinen Positionierer, den wir gerade hatten, Drücken Sie die Befehlstaste und dann erzwingen Sie die Positionierung Es wird so eingestellt, dass es den Behälter füllt. Auch hier werden Sie feststellen, dass wir es wahrscheinlich ein wenig aufräumen und zurückstellen müssen, um den Behälter zu füllen , aber wir haben es hier drin. Andererseits werde ich meine Variable für das Padding hinzufügen. Ich hätte das gleiche Setup, aber Sie haben mehr Kontrolle darüber Es ist ziemlich schwierig , Dinge innerhalb einer Seite zu sortieren , wenn all diese Ebenen verschachtelt können jederzeit ein Element herausziehen, besonders wenn Sie eine Komposition haben Sie es zur Seite und ziehen Sie es zur besseren Kontrolle wieder hinein Jetzt werde ich das nur ein bisschen aufräumen . Lass uns die roten Schichten laufen lassen. Wir könnten Bilder generieren, aber ich habe tatsächlich welche aus einer anderen Datei , die ich verwenden möchte. Ich werde eine meiner Lieblingstastenkürzel verwenden, nämlich Shift Command N C, und das kopiert eine PNG-Datei, und ich werde sie hier schnell ausfüllen. Lassen Sie uns jetzt einfach die allerletzte Berührung machen. Ich möchte auch den Inhalt ein wenig ändern. Ich werde ihr sagen, sie soll sich einige Workshop-Namen und nur einen kurzen Intratext Das ist das Verhalten, das man bekommen würde, und das ist absolut Und wir haben jetzt unsere Karten in einer festen Größe. Denken Sie daran, dass Sie auch immer Min- und Max-Werte verwenden können. Wir würden das auf die Hauptkomponente anwenden. Alle Instanzen würden erben. Ich werde eine Minute hinzufügen. Ich werde hier einfach ein paar Zufallszahlen auswählen. Ändere das immer später. Ich nehme 300 Minuten und sagen wir mal maximal 450. Sie können sehen, dass hier nichts passiert ist. Das liegt daran, dass diese Karten immer noch mit einer festen Breite eingerichtet sind . Wählen Sie den Rahmen aus, der alle Karten enthält, drücken Sie die Eingabetaste, dann erhalten Sie alle einzelnen Karten und setzen Sie nun alle diese Karten so ein , dass sie den Behälter füllen. Sie werden gefüllt, aber nicht über ihren Maximalwert hinaus, und aus diesem Grund würde RAP in diesem Fall immer noch funktionieren. Wenn Sie das wieder loswerden möchten, wählen Sie diesen Container aus, drücken Sie erneut die Eingabetaste, wechseln Sie zurück zur festen Breite und entfernen Sie in Ihrer Komponente Min und Max. Nun, was Sie tun müssen, weil Sie im Grunde die Breiteneinstellung überschrieben haben, wählen Sie alle Karten erneut aus, indem Sie die Eingabetaste drücken , und über das Eigenschaftenfenster können Sie jetzt mit drei kleinen Punkten und „Größe zurücksetzen“ wählen Jetzt haben Sie wieder die Originalgröße der Komponente. 21. AUTO LAYOUT: 18 Auto-Layout und CSS-Flexbox: Automatisches Layout in CSS Flexbox. Nun gibt es wahrscheinlich ein paar Dinge , die Ihnen an dem Verhalten nicht gefallen , wenn Sie mehr Designs mit automatischem Layout einrichten mehr Designs mit automatischem Layout einrichten Eines der Dinge könnte sein , dass du, wenn wir die Größe ändern, die gleiche Anzahl an Karten haben möchtest. Wir können mit Mindest- und Maximalwerten spielen und sie so einstellen, dass sie den Container füllen, aber Sie werden nicht dieses gitterartige Gefühl bekommen. Der Grund dafür ist , dass, wenn wir uns unser Design ansehen und in den Def-Modus springen, Sie sehen können, dass das alles mit etwas namens Flex eingerichtet ist alles mit etwas namens Flex eingerichtet Das liegt daran, dass das automatische Layout im Grunde eine Flexbox darstellt Wenn Sie ein Entwickler sind, ist das sehr sinnvoll. Wenn Sie ein Designer sind, haben Sie vielleicht noch nie von Flexbox gehört Sie müssen nichts über Flexbox wissen, aber es ist sehr praktisch, es ein wenig zu verstehen da dies der Grund dafür ist, dass sich das automatische Layout so verhält, wie es sich verhält In CSS verwenden wir Flexbox , um Elemente zu positionieren. Flexbox ist ein sogenannter eindimensionaler Layoutansatz. Das bedeutet, dass Ihre Elemente nacheinander angeordnet werden Ihre Elemente nacheinander angeordnet Stellen Sie sich das wie Schläge an einer Saite vor. Wenn du irgendwelche Elemente änderst, also wenn sie kleiner oder größer werden, dann wird das entsprechend angepasst, was für viele Dinge großartig ist. Was Sie mit Flexbox jedoch nicht tun können, ist , Ihre Elemente in ein Raster einzufügen In CSS würden wir ein sogenanntes CSS-Grid verwenden, dem es sich um einen zweidimensionalen Layoutansatz handelt Neun Figma, das haben wir derzeit nicht. Wir haben in FIMMA einen starreren Grid-Ansatz, und darüber werde ich gleich sprechen Aber im echten Leben oder im echten Browser werden die Entwickler heutzutage wahrscheinlich CSS Rid verwenden und sie haben viel mehr Möglichkeiten für die gesamte Seiteneinrichtung als Sie in Figma Das ist also wirklich nur ein sehr allgemeiner kurzer Überblick. Diese Themen CSS-Layout, Flexbox und Grid sind offensichtlich viel komplexer, und es gibt eine Menge Untertools und Dinge, die es zu verstehen gilt. Als Designer müssen Sie das jetzt nicht mehr einrichten. Sie müssen kein Experte darin sein, aber ich würde Ihnen dringend empfehlen , sich dem allgemeinen Verständnis des modernen CSS-Layouts zu befassen. müssen Sie nicht, aber es wird Ihnen einen großen Vorteil verschaffen. Arbeiten Sie also auf jeden Fall weiter mit dem automatischen Layout in Figma, aber stellen Sie auch sicher, dass Sie immer in engem Kontakt mit Ihren Entwicklern stehen, sie darauf aufmerksam machen, und dann lassen sich einige Dinge vielleicht einfach viel besser im Browser testen, wenn es um das Gesamtlayout Ihrer Seite geht Während dieses Kurses werden wir uns wieder mit Figma befassen. In Ihrem Arbeitsmaterial habe ich jedoch einige Links hinzugefügt, falls Sie sich weiter zu diesem Thema informieren möchten Ich habe auch einen separaten Einblick in Mole Dot IO in das moderne CSS-Layout Sie finden alle Links in Ihrer Arbeitsdatei. 22. AUTO LAYOUT: 19 Slot-Komponenten mit Auto-Layout: Erstellen von Steckplatzkomponenten mit automatischem Layout. Was eine Slot-Komponente im Grunde ist, ist eine Komponente , bei der Sie einen Platzhalter haben und dann verschiedene Inhalte einfügen können Dies wird häufig im Code verwendet. Wir haben keine Slot-Funktion als solche, aber wir können sie so ziemlich mit Komponenten und automatischem Layout erstellen . Hier habe ich eine Karte mit automatischem Layout und Sie können sehen, dass ich hier einen Steckplatz habe. Wenn ich das einfach lösche, dann erstelle ich nur eine Instanz aus dieser Slot-Komponente, ziehe sie hier hinein und stelle sicher, dass sie so eingestellt ist, dass sie den Container füllt und den Inhalt umarmt Wie hoch der Inhalt auch sein mag, er wird umarmt. Jetzt können Sie sehen, dass ich neben dem Steckplatz noch weitere Komponenten habe, das Layout eins und das Layout zwei, die hier hineingesteckt werden könnten Jetzt muss ich nur eine Instanz der Slot-Komponente erstellen, und ich kann jetzt doppelklicken, einen Steckplatz auswählen und dann durch sofortiges Austauschen einfach jedes meiner anderen Kleiner Tipp, etwas fortgeschrittener, wähle einen Steckplatz aus. Jetzt werden wir eine Eigenschaft festlegen. Klicke auf die drei kleinen Punkte. Gehen Sie zur Option Instanz-Swap-Eigenschaft anwenden. Eigenschaft erstellen, und Sie können jetzt sehen, dass Sie hier dieses Menü erhalten, also nenne ich diesen Slot einfach. Und hier unten können Sie jetzt bevorzugte Werte wählen. meinem Menü können Sie sehen, dass ich viele Komponenten habe. Ich werde die beiden Optionen auswählen , die ich für diese Karte eingerichtet habe. Wenn ich jetzt die Instanz auswähle, siehst du, dass ich ein kleines Drop-down-Menü mit Steckplatz habe und nur die richtigen Optionen zum Austauschen angezeigt werden Das ist wirklich praktisch und wird von jedem benutzt, um das Setup zu korrigieren 23. CONSTRAINTS: 01 Was sind Constraints in Figma?: Einschränkungen in Figma. In Figma haben wir noch eine weitere Funktion, mit der wir das Verhalten bei der Größenänderung steuern können . Diese Funktion wird als Einschränkungen bezeichnet Wählen Sie ein beliebiges Element innerhalb eines Rahmens Dabei muss es sich nur um einen einfachen Rahmen handeln, nicht um einen Rahmen mit automatischem Layout Jetzt sehen Sie blaue gepunktete Linien , die auf den nächsten übergeordneten Rahmen zeigen Dies sind die Einschränkungen. Sie können sie auch im Menü auf der rechten Seite unter Einschränkungen sehen . jedoch nur für Standardrahmen und Sie sind jedoch nur für Standardrahmen und nicht für Rahmen mit automatischem Layout verfügbar . Standardmäßig sind diese Einschränkungen auf oben und links eingestellt. Und beachten Sie, dass selbst verschachtelte Rahmen immer bis zum nächsten übergeordneten Element verschoben werden Ich ändere also die Größe, es scheint, als ob nichts passiert, weil sie auf links und oben gesetzt sind Wenn wir diese Einschränkungen jedoch ändern, setzen wir sie zum Beispiel auf links, rechts, auf dieses Feld und dann auf diesen roten Punkt hier, werde ich sie auf unten und rechts setzen Beachten Sie, wie sie sich ändern, und sie zeigen Ihnen, an welcher Seite sie angeheftet sind Stellen wir diesen hier in die Mitte. Sie können die Drop-down-Menüs verwenden oder einfach das Symbol verwenden und auf die verschiedenen Richtungen klicken. wir sie in ihren neuen Richtungen anheften und jetzt ihre Größe ändern, können Sie sehen, dass sich dadurch ihr Verhalten ändert , und wir können sie horizontal oder auch vertikal einstellen scheint sehr naheliegend, sie an eine Seite oder Es scheint sehr naheliegend, sie an eine Seite oder an den Boden Aber manchmal sind wir etwas verwirrt , wenn wir über die Mitte, die sogenannte Links-Rechts-Methode und die Skalierung sprechen die sogenannte Links-Rechts-Methode und die Skalierung Der Unterschied zwischen beiden ist, dass Fixed einfach einen festen linken und rechten Rand hat. Wo auch immer Sie es platziert haben, wird dieser Abstand beibehalten Skalierung hat einen prozentualen Rand für die Position, an der Sie sie platziert haben, und die Mitte bleibt einfach in der relativen Mitte. Und das Gleiche funktioniert offensichtlich horizontal und vertikal. Kleiner Tipp, manchmal möchten Sie nur die Größe des übergeordneten Frames ändern und die Einschränkungen ignorieren Halten Sie in diesem Fall die Befehlstaste gedrückt, und die Beschränkungen werden einfach ignoriert , solange Sie sie gedrückt halten 24. CONSTRAINTS: 02 Constraints und Raster: Beschränkungen und Raster. Anstatt alles mit automatischem Layout einzurichten, könnten wir unsere Komponente einfach als Auto-Layout-Komponenten einrichten als Auto-Layout-Komponenten Dann könnten wir sie mit links und rechts an die linke und rechte Seite anheften, und das Gleiche machen wir hier. Wir können hier sogar Elemente wie diese kleine Blase hinzufügen und sie nach unten und rechts platzieren. Wenn wir nun die Größe ändern, erhalten wir so ziemlich das gleiche Ergebnis, aber es ist viel einfacher als das Einrichten eines automatischen Layoutrahmens. Sie werden jedoch feststellen, dass dies zwar für einfache mobile Setups mit diesem einen Element sehr gut funktioniert einfache mobile Setups mit , sobald Sie weitere Elemente hinzufügen, es aber einfach nicht funktioniert Denn das Problem hier ist , dass, wenn wir links nach rechts verwenden , es die volle Entfernung in Anspruch nimmt Es weiß nichts über diese anderen Elemente in der Umgebung. Wir könnten sie alle auswählen und maßstabsgetreu einstellen. Aber damit würde es funktionieren, aber wir würden keinen festgelegten Abstand einhalten. So konnten wir unsere Polsterung beispielsweise nicht wirklich an unsere Navigation anpassen Eine gute Möglichkeit, damit umzugehen, besteht darin, ein Raster hinzuzufügen. Denn schauen Sie mal, wenn ich meine linken und rechten Beschränkungen in einem Raster hinzufüge , dann wird es sich jetzt die nächstgelegene Spalte ansehen , weil es die Spalten als Eltern verwendet. Wenn wir also all diese Karten auswählen und sie alle auf links und rechts setzen würden diese Karten auswählen und sie alle auf links und rechts setzen , würden sie bei der Größenänderung in den dafür vorgesehenen Spalten verbleiben. Jetzt können wir das Gleiche für unsere Navigation hier oben tun. Stellen wir es auf links und rechts ein. Sie können sehen, dass wir mit nur wenigen Klicks und sehr wenigen Komplikationen und sehr wenigen Komplikationen ein responsives Setup erhalten und unser Design testen können. Das ist wirklich praktisch für einen schnellen Test, und es funktioniert auch sehr gut, wenn Sie zum Beispiel mit ungeraden Zahlen arbeiten. Nehmen wir an, Sie möchten nicht alles gleichmäßig verteilen. Das würde mit einem Layout nicht funktionieren, aber mit einem Raster funktioniert es sehr gut. Dies hat jedoch auch Nachteile, da das Raster keinen der vertikalen Abstände berücksichtigt, sodass es den Abstand zwischen hier und hier nicht kennt Wenn Sie weitere Elemente wie Text hinzufügen, beginnen die Dinge ineinander zu fließen Aber das ist nur ein Figma-Problem. Dies wird später kein Problem im Code sein. Deshalb verwende ich immer noch gerne Raster für schnelle Tests. Dies ist jedoch kein Ersatz für das automatische Layout. Ihre Komponenten sollten immer mit automatischem Layout eingerichtet werden, aber manchmal ist es einfach viel schneller, sie schnell mit einem Raster und Einschränkungen zu testen. Ein kleiner Tipp: Sie können das Raster jederzeit ein - und ausschalten. Verwenden Sie entweder das Eigenschaftenfenster auf der rechten Seite und klicken Sie einfach auf das Symbol, oder Sie können auch die Tastenkombinationen Strg und G verwenden . Wenn Sie das Raster ausgeschaltet haben, bleiben alle Einschränkungen weiterhin bestehen 25. EINSCHRÄNKUNGEN: 03 Schnelles Intro zu Rastern in Figma: Eine kurze Einführung in Figma-Raster. Lassen Sie mich Ihnen zeigen, wie Sie in Figma Raster einrichten, die Sie später auch wiederverwenden können Hier ist ein Rahmen, klicken Sie einfach auf einen beliebigen Rahmen und dann sehen Sie die Layoutraster-Einstellung hier im Eigenschaftenfenster auf der rechten Seite Klicken Sie auf Plus, um ein Raster hinzuzufügen. Das erste, was Sie erhalten werden, ist dieses Acht-Pixel-Raster. Jetzt wollen wir das nicht. Wir wollen auf die kleine Flechte klicken und daraus ein Säulenraster machen. Wir können jetzt unsere Spalten hier anpassen. Bei der Anzahl der gewünschten Spalten können wir auf beiden Seiten einen Rand festlegen, und wir können auch den Abstand zwischen den Spalten anpassen. Dieses Raster verhält sich in diesem Fall so, dass also die Anzahl der Spalten abzüglich des Randes Spalten aufgrund der Streckung immer anpassen, sodass sie den verfügbaren Platz ausmachen, also die Anzahl der und der Dachrinne Sie haben auch andere Optionen. Sie können das Raster links und rechts platzieren, um ehrlich zu sein, etwas, das ich nie wirklich verwende, oder Sie können es auf c setzen. Wenn Sie es in diesem Fall auf die Mitte setzen, müssten Sie die Breite Ihrer Spalten definieren, und wenn Sie die Größe ändern, nimmt der Rand den Rest des verfügbaren Platzes ein. Nun, die Art und Weise, wie Sie Ihre Note einrichten müssen hängt davon ab, welches System Sie verwenden. Wenn Sie etwas wie Bootstrap verwenden, finden Sie das in der Dokumentation Möglicherweise haben Sie auch ein benutzerdefiniertes Raster, also hier können Sie sehen, dass es sich um ein benutzerdefiniertes Dekadenz-Raster handelt, und Sie können sehen, dass sie Ihnen die Definition geben Wenn Sie einen Sternführer haben und eine bestimmte traditionelle feste Rastereinstellung verwenden, werfen Sie eine bestimmte traditionelle feste Rastereinstellung verwenden, einen Blick in Ihren Reiseführer und Sie können das Raster in Figma reproduzieren Wenn wir mit diesem Raster zufrieden sind, möchten wir es vielleicht für andere Frames wiederverwenden Was wir tun können, ist einfach den Rahmen auszuwählen und dann unter Layoutraster auf das Symbol Little Apply Styles zu klicken, und dann können Sie auf Plus klicken. Ich nenne das vorerst nur einen Test und wir können jetzt einen Stil erstellen. Wenn ich jetzt einen anderen Rahmen habe, werde ich hier auf meiner Leinwand einfach einen weiteren Rahmen zeichnen Sie können jetzt sehen, dass ich, wenn ich diesen Rahmen auswähle und den Mauszeiger über das Layoutraster bewege, auf die Stile klicken und das Raster, das ich gerade erstellt habe, erneut verwenden kann Raster, das ich gerade erstellt habe, erneut verwenden Wenn ich etwas an diesem Raster ändern möchte, klicke ich einfach auf den grauen Canvas-Bereich Ich erhalte einen Überblick über alle meine Rasterstile und kann ihn jetzt hier bearbeiten. Ein kleiner Tipp, damit jeder in Ihrem Team weiß , welchen Rasterstil er verwenden soll. Sie können hier sehen, dass Sie ihm einen beliebigen Namen geben können, also verwende ich T-Shirt-Größen. Aber dann füge ich in Klammern dahinter hinzu, für welche Größe dieses Raster gilt. Nehmen wir an, ich habe hier zwei Frames. Ich kann sehen, dass dieser Rahmen 390 ist, und ich kann jetzt einfach meinen Rasterstil wählen, und ich weiß, dass er kleiner ist als diese Größe hier. Und auch hier hängt es völlig davon ab, wie Ihr Raster definiert ist , unabhängig von der Größe Unterbrechungspunkte, die Sie hier eingerichtet haben. Wenn ich diesen größeren hier genauso auswähle, kann ich einfach zu meinen Rasterstilen gehen, und ich weiß, dass dieser größer ist. Sie sehen hier, es sind 1.500, es ist größer als 993, also wäre das das richtige Raster Dies ist nun der Fall, wenn Sie ein Gesamtraster für Ihre Designs verwenden, was die gängigste Art ist, sie zu verwenden Sie können aber auch ein Unterraster für Abschnitte verwenden. Da Sie sie auf Frames anwenden, ist das in Figma wirklich großartig Sie können einfach ein beliebiges Raster einrichten und es später natürlich als Stil für einen Rahmen speichern , den Sie auf Ihrem übergeordneten Rahmen positionieren Daher können Sie einfach die Verteilung einrichten , die Sie für jeden dieser kleinen Unterabschnitte benötigen jeden dieser kleinen Unterabschnitte 26. BREAKPOINTS: 01 Einführung in CSS-Haltepunkte: Ihre Designs mit automatischem Layout einrichten, werden Sie feststellen, dass dies für einen bestimmten Bereich hervorragend funktioniert, aber es wird nicht für alle Bildschirmgrößen funktionieren , von Mobilgeräten bis hin zu größeren Desktops Hier kommen Breakpoints ins Spiel. Es handelt sich um bestimmte Punkte oder besser gesagt um Schwellenwerte oder es treten Änderungen auf Auf diese Weise können Websites ihr Layout und ihren Stil an unterschiedliche Bildschirmgrößen anpassen und ihren Stil an unterschiedliche Bildschirmgrößen Um Breakpoints in CSS zu erstellen, verwenden wir eine sogenannte Medienabfrage. Die Regel für Medienabfragen ist eine Möglichkeit, bestimmte Stile nur dann auf Webseiten anzuwenden bestimmte Stile nur dann auf Webseiten , wenn bestimmte Bedingungen erfüllt sind. In diesem Fall ist die Bedingung eine Mindestbreite von 768 Pixeln. Alles, was sich innerhalb der geschweiften Klammern befindet, wird also nur angewendet, wenn das Viewport eine Größe von 768 oder mehr hat Schauen wir uns das in CSS an. Sie können hier also sehen, dass ich eine Überschrift und einige Texttexte sowie zwei Bilder habe. In unserer HML ist das ein H, die Überschrift, der Text ist P, und dann haben wir hier unsere Bilder mit dem Image-Tag Jetzt können Sie im CSS sehen, dass ich den Text so eingestellt habe, dass er die Größe eines RM hat, dann etwas größer für die Überschrift, und ich stelle die Bilder so ein , dass sie den gesamten verfügbaren Platz einnehmen Dies sind meine Basisstile. ich jetzt nach unten scrolle, können Sie sehen, dass ich eine sofortige Abfrage hinzugefügt habe. Wenn ich 400 erreicht habe, machen wir es hier unten einfach größer. Sie können die Größe sehen, also können Sie sehen, wenn ich 400 drücke, dann ändert sich das im Layout. Was hier passiert, ist, dass alles innerhalb der Klammern aktiv wird. Ich habe eine neue Hintergrundfarbe, die H-Farbe ist größer und die Bilder verändern die Raumbelegung. Ich gehe noch größer vor, Sie können sehen, wie die zweite Medienabfrage zuschlägt. Ihr könnt auch hier unten sehen, ich eine Hintergrundfarbe hinzugefügt habe, damit diese sichtbar wird, und ich ändere auch die H-Farbe, um sie noch größer zu machen. 27. BREAKPOINTS: EINSCHRÄNKUNGEN:02 Haltepunkte in Figma: Wie können wir mit Breakpoints und Figma umgehen? Da wir derzeit kein Feature haben, das sich damit befasst, müssen wir das manuell lösen Bei einem klassischen spaltenbasierten responsiven Design ist die Einrichtung nicht allzu schwierig. Wir überprüfen nur unsere großartige Dokumentation. Denken Sie daran, dass dies möglicherweise in Ihrem Designsystem oder einem Framework dokumentiert ist. Mit den angegebenen Informationen können wir den Rahmen mit Gittern in Figma ganz einfach einrichten Wenn es also ein Bootstrap wäre, würde das ungefähr so aussehen, wenn wir alle unsere Breakpoints ausrechnen würden Wir können unsere Komponenten hinzufügen und uns daran erinnern, dass diese mit automatischem Layout in Figma eingerichtet werden müssen, und wir können sie dann mithilfe von Einschränkungen so einrichten, dass sie sich an die Spalten anpassen und sich verhalten Wir können den vertikalen Abstand nicht auf diese Weise kontrollieren, aber wir bekommen eine ziemlich gute Vorstellung davon, was im Allgemeinen passiert Jetzt wird es ziemlich mühsam sein, jeden Bildschirm für all diese Versionen zu entwerfen ziemlich mühsam sein, jeden Bildschirm für all diese Versionen Was wir also tun können, ist, einfach einige Mastergrößen auszuwählen. Normalerweise wähle ich einfach eine Handygröße und einen Schreibtisch W. Aber je nach Projekt benötigen Sie vielleicht auch eine Zwischenlösung. In den meisten Fällen wird es ziemlich logisch sein , wie sich die anderen anpassen werden. Aber da wir sowieso den gesamten Rahmen eingerichtet haben, könnten wir einfach schnell darüber springen und bestimmte Szenarien testen Wir müssen nicht die gesamte Seite neu erstellen. Wir können einfach die Abschnitte testen , bei denen wir uns nicht sicher sind. A, ein bisschen mühsam, aber eigentlich nicht zu schwierig, wenn es darum geht, responsive Designs in Figma einzurichten großer Vorteil Aus gestalterischer Sicht mag es also ein , dass Sie all diese Kontrolle haben Aber denken Sie daran, dass das Produkt letztendlich nicht in Figma lebt Es geht nicht um eine einfache Einrichtung. Es geht um das Endprodukt im Browser und wie es sich dort verhält und lebendig wird Heutzutage braucht man dieses Raster im Hintergrund also nicht mehr unbedingt Zumindest muss es kein so starres System wie Bootstrap oder ähnliches sein starres System wie Bootstrap oder ähnliches Du kannst das auch freier definieren. Es ist sehr wichtig , dass Sie dies zuerst mit Ihrem Entwicklungsteam besprechen . Denken Sie daran, als wir unsere Designs mit automatischem Layout eingerichtet haben, haben wir gelernt, dass dies Flexbox widerspiegelt In den meisten Fällen passen sich diese Designs von selbst perfekt an, aber manchmal benötigen sie auch Breakpoints Zum Beispiel. Möglicherweise haben wir eine Änderung im Layout. So könnte sich beispielsweise die gesamte Rasteranordnung ändern. Eine einzelne Komponente könnte sich ändern. Das ist also so etwas wie eine Navigation, Burger-Menü mit zwei Links, eine Fußzeile könnte sich ändern oder auch ein Hero-Bereich Es wird wahrscheinlich auf verschiedenen Größen ganz anders aussehen , und unsere Hypografie muss in verschiedenen Ansichten angepasst werden in verschiedenen Ansichten angepasst Wie bereits erwähnt, lässt sich unser automatisches Layout, das die Flexbox darstellt, sehr gut neu mischen Falls wir das Gesamtlayout ändern möchten, nehmen wir an, wir haben eine Seitenleiste, die wir ab einem bestimmten Schwellenwert entfernen müssen Dann können wir zwei verschiedene Frames für diese Szenarien einrichten . Ich mag es, einige visuelle Informationen hinzuzufügen, die deutlich zeigen, von wo bis wo wir diesen Rahmen verwenden würden, ein kleiner Tipp zu jedem Auto-Layout-Frame. Wir können auch eine minimale oder maximale Breite hinzufügen, sodass wir verhindern können, dass ein bestimmter Schwellenwert über- oder unterschritten wird . Dies wird normalerweise in unseren Komponenten verwendet, aber wir können es auch für den übergeordneten Frame verwenden , der das Viewboard darstellt. Schau dir an, wie diese Karten neu gemischt werden, wenn ich die Größe ändere. Nun, das ist das Verhalten von Ex Box, da diese Karten auch einen Mindest- und einen Höchstwert haben Wenn ich wollte, dass sie gut ausgerichtet sind, könnte ich das mit einem CSS-Grid einrichten. Wenn wir nun eine Änderung des CSS-Rasterlayouts anzeigen möchten, können wir dies derzeit nicht in Figma testen Wir würden zu einem statischen Design unserer Seiten zurückkehren, die verschiedenen Hauptbildschirme anzeigen und die Übergänge zwischen ihnen zusammen mit der Entwicklung im Browser herausfinden Übergänge zwischen ihnen zusammen mit der Entwicklung im Wir können bei Bedarf jederzeit weitere Stufen hinzufügen , um die Kommunikation zu verbessern Denken Sie auch daran, dass wir uns nicht immer mit der gesamten Seite befassen müssen. Wir können dies in Teile von Layoutabschnitten und etablierten Wenn es darum geht, dass einzelne Komponenten auf einzelne Breakpoints reagieren, erstelle ich gerne einen Komponentensatz und habe dann die verschiedenen Versionen als Varianten Da unsere Figma-Komponenten mit automatischem Layout eingerichtet sind, können wir das ziemlich gut testen und unseren Breakpoint definieren Dann nenne ich zum Beispiel meine Eigenschaft Breakpoint und die Werte, ich kleiner als und größer als oder dazwischen bestimmte Werte nenne größer als oder dazwischen Auf diese Weise weiß jeder, der mit einer Instanz arbeitet , immer , welche er wählen muss Es gibt fortgeschrittenere Techniken die Variablen und Modi verwenden. Ich werde sie Stück für Stück durchgehen. Wir könnten boolesche Variablen für unsere Navigation verwenden und die Elemente je nach Frame ein- und ausblenden , auf den ich sie ziehe, und wir können sogar Instanzen austauschen , indem wir Variablen und Modi verwenden Dies ist jedoch ein ziemlich fortgeschrittenes Setup, sodass Sie und Ihr Team ziemlich solide mit der Arbeit mit Variablen im Modus umgehen können müssen ziemlich solide mit der Arbeit mit Variablen im 28. BREAKPOINTS: 03 Modi und Bildschirmgrößen ein schnelles Intro: Lassen Sie mich Ihnen einen Überblick darüber geben, wie Modi in Figma funktionieren und wie wir sie nutzen können , um unterschiedliche Bildschirmgrößen zu erstellen Klicken Sie auf den grauen Canvas-Bereich, und Sie werden lokale Variablen im Eigenschaftenfenster auf der rechten Seite sehen im Eigenschaftenfenster auf der rechten Seite Klicken Sie auf Variablen öffnen und Sie werden Ihre Setup-Sammlungen sehen. Als Beispiel werde ich hier diese Farbsammlung verwenden, damit Sie sehen können, dass ich unterschiedliche Farbeinstellungen habe, und derzeit werden sie nur Werte genannt. Jetzt, direkt daneben, habe ich eine kleine Plus-Schaltfläche, und wenn ich hier klicke, kann ich einen zusätzlichen Modus hinzufügen. Sie können diese Modi beliebig nennen. Ich werde es in meinem Fall Hell und Dunkel nennen. Für meinen Dunkelmodus lasse ich alle meine Markenfarben unverändert und wechsle einfach zwischen meinen Grundfarben. Dieser hier ist jetzt weiß, und was weiß war, wird schwarz sein. Sobald wir diese Variablen erstellt haben, ist es wichtig, dass wir sie an unser Design binden. Wir könnten einfach eine beliebige Farbe auswählen und dann in unserem Dateimenü das Symbol für Variablen und Stile sehen, und wir können dann alle unsere Variablen sehen wir erstellt haben, und sie einfach hier anwenden. Ein kleiner Tipp: Sie können stattdessen den gesamten Rahmen auswählen und über die Auswahlfarben einfach alle Farben gleichzeitig auswählen. Das ist sehr praktisch , weil es dir auch hilft , dass dir keine Variablen fehlen. Sehr wichtig, stellen Sie außerdem sicher, dass dieser Rahmen mit weißem Hintergrund auch mit einer Variablen aus dieser Sammlung eingerichtet werden muss . Wenn wir nun unseren Artikel auswählen, können Sie neben dem Erscheinungsbild einen kleinen Schalter sehen , und wir können ihn jetzt zwischen hell und dunkel umschalten Wenn ich in den Dunkelmodus wechsle, werden meine Farben für den Dunkelmodus Standardmäßig ist es auf Auto eingestellt. Wir können dasselbe mit unserem Frame machen, und wir könnten sogar ganze Seiten umschalten Der Teil, der uns jedoch interessiert, ist das Erben. Im Moment ist dieser Frame auf den Dunkelmodus eingestellt. Mein Artikel, ich fahre mit dem Auto weg. Das ist wirklich wichtig. Stellen Sie es nicht auf einen anderen Modus ein, lassen Sie es auf Auto stehen. Wenn ich es jetzt in einen beliebigen Frame ziehe, erbt es den für den Frame eingestellten Modus Und so wie wir zwischen hell und dunkel gewechselt haben, können wir auch Modi verwenden, um zwischen verschiedenen Größen zu wechseln , die wir eingestellt haben Also hier habe ich eine weitere Kollektion, die ich gemacht habe. Ich habe eine Größenvariable eingerichtet, die ich für den Text und die Farbe der Schaltfläche verwenden werde. Ich werde das auch in verschiedenen Modi für diese Schaltfläche verwenden . Und ich habe auch einige Texte, die ich in der Schaltfläche verwenden werde. Und ich werde eine weitere erstellen, die eine Nummer sein wird, und ich werde diese Box anrufen. Und ich möchte , dass das Feld 300 weiß auf einem kleinen Bildschirm und 600 weiß auf einem großen Bildschirm ist. Und beachten Sie, dass alles mit automatischem Layout eingerichtet ist. Und wir können sie natürlich auch in Komponenten umwandeln, da sie immer alle von uns festgelegten Variablen erben würden Jetzt müssen wir diese Designs an die Variablen binden , die wir erstellt haben Lassen Sie mich mit der Größe der Schaltflächen beginnen. Ich verwende das Größen-Dropdown. Hier sehe ich die Variable und kann jetzt die Größenvariable verwenden, die ich erstellt habe. Kleiner Tipp, Sie können Variablen auch mit einem Gültigkeitsbereich versehen. Also zum Beispiel kann ich das hier einrichten. Wenn ich hier auf dieses kleine Bearbeitungsfeld klicke , erhalte ich das Scoping und ich kann es jetzt entweder für alles anzeigen, oder wie in diesem Fall, ich möchte es nur für die Schriftgröße anzeigen Jetzt entspricht die Größe, die ich hier habe , der Breite meiner Box Also hier habe ich den Umfang, und ich möchte ihn nur für Breite und Höhe anzeigen Und Sie können sehen, je nachdem, welche Variable ich verwende, erhalte ich ein anderes Scoping-Feld Lass uns das zu Ende bringen. Wir wollen auch unseren Text. Für den Text in der Typografie haben Sie hier diese kleine Schaltfläche und jetzt sehen Sie den Button-Text Für die Farbe muss ich hierfür die Variable löschen, die ich zuvor verwendet habe, und über das Variablenmenü können Sie jetzt in Bibliotheken sehen, ob Sie die von uns erstellte Variable nach unten scrollen Aber wir könnten meine Benennung hier verbessern. Für die Boxbreite haben wir einfach eine Box ausgewählt, und dann sehen Sie über das Breiten-Dropdown-Menü auch Variablen anwenden, und jetzt erhalten wir unsere Boxbreite. Beachten Sie, dass nur das Feld angezeigt wird , weil wir den Geltungsbereich festgelegt haben. Jetzt muss ich nur noch den Modus für diese Frames einstellen. Schauen wir uns einfach noch einmal unsere Sammlung an, klein und groß. Wenn ich diesen übergeordneten Frame auswähle und Sie sehen, dass ich nicht wechseln kann. Das liegt daran, dass es derzeit kein Element gibt , das eine Variable in diesem Frame enthält. Du wirst sehen, sobald ich hier irgendwas nachverfolgt habe, kriege ich jetzt den Schalter. Ich werde diesem hier sagen, dass es sich um den kleinen Modus handelt und meinem größeren hier um den großen Modus. Also ziehe ich diesen rein, ich möchte eine Instanz, du kannst sehen, dass sich das je nach eingestelltem Modus sehr gut ändert , und ich habe dasselbe hier mit meiner Box. Also hier ist eine Breite von 300, und sobald ich hierher springe, ändert sie sich jetzt auf die angegebene Breite. Ms sind also eine hervorragende Möglichkeit, Designelemente und Komponenten an unterschiedliche Bildschirmgrößen anzupassen . Denken Sie jedoch daran, dass sie sehr magisch aussehen, aber manchmal sind sie auch ein bisschen ein Hinweis, und es ist einfach einfacher, sie von Hand zu machen. Aber das müssen Sie je nach Design und Teamaufbau herausfinden . 29. BREAKPOINTS: 04 Bindungsvarianten zu Modi: Bindung der Varianz an Modi. Mit Modi können wir auch auswählen, welche Variante innerhalb eines Komponentensatzes wir für einen bestimmten Frame verwenden möchten Hier habe ich eine Navigation mit zwei Versionen. Ich möchte, dass dieser auf dem Handy verwendet wird und dieser hier für größere Bildschirme und das Gleiche gilt für die Karten. Was wir tun müssen, ist, diese verschiedenen Varianten an verschiedene Modi zu binden . Wir müssen damit beginnen, dafür eine Sammlung einzurichten. Ich richte eine neue Sammlung mit dem Namen Responsive Example ein. In dieser Sammlung erstelle ich eine Zeichenkettenvariable, und ich werde sie NAF nennen um mit der Navigation zu beginnen Jetzt spielt der Name der Variablen Sie erstellen, keine Rolle Was sehr wichtig ist, ist der Wert. Dieser Wert muss der genaue Name der Variante sein, an die Sie binden möchten. Wenn wir hier klicken, können Sie sehen, dass diese Karte S heißt und die andere M heißt, und ich verwende dieselbe Namenskonvention in der Karte, also das ist S, und die andere Karte heißt M. Hier sage ich an S binden, und ich werde einen anderen Modus erstellen, in dem ich an M binden werde . Lassen Sie uns nun auch diese Modi umbenennen. Ich rufe ein Handy und einen Desktop an. Ich werde dasselbe auch für unsere Karte hinzufügen. Jetzt haben wir die gesamte Logik in unserer Sammlung eingerichtet, aber wir müssen diesen Elementen auch mitteilen , dass dies passiert. Sie würden wahrscheinlich erwarten, Ihre Variante an diese Variable zu binden. Das ist jedoch etwas seltsam. Wir binden die Instanz tatsächlich an die Variable. Wählen Sie eine beliebige Instanz dann im Eigenschaftenbereich auf der rechten Seite Wenn Sie dann im Eigenschaftenbereich auf der rechten Seite den Mauszeiger über Ihren Instanznamen bewegen, sehen Sie ein kleines Variablenzeichen Klicken Sie darauf und Sie können jetzt die Variable finden, die Sie gerade erstellt haben, und wir werden diese an unsere Navigation binden, und wir werden dasselbe für unsere Karte tun Wenn wir nun unsere Instanz hierher ziehen, passiert nicht viel. Das liegt daran, dass der übergeordnete Frame auch noch nichts über den Modus weiß. Beachten Sie nun, dass Figma derzeit so eingerichtet ist, dass diese Frames keine Variablen festgelegt Wenn ich kein Element habe, das eine Variable im Rahmen enthält, wird kein Schalter angezeigt Beachten Sie nun, dass, sobald ich das hinzufüge , bei der Auswahl des übergeordneten Frames dieser Schalter angezeigt wird . Hier haben wir unser responsives Beispiel. Das ist mobil. Und hier sehen wir den Schalter noch nicht. Lassen Sie uns also einfach auch eine Instanz hierher ziehen. Und jetzt können Sie den Schalter sehen , weil wir diese beiden für eine Variable halten. Und jetzt können wir diese beiden Desktops ändern. Und Sie können sehen, dass unsere neue Version einfach so automatisch erscheint. Wenn ich also zwischen diesen Bildschirmen hin- und herschalten würde, dann können Sie sehen, dass es immer die richtige Version für mich auswählt. Und jetzt, wo wir den Modus eingerichtet haben, sollte er auch automatisch mit unserer Karte funktionieren. Sie können hier also sehen, dass wir unsere Karte S haben, und wenn wir sie hierher ziehen, wechselt sie automatisch auf die andere Version. Es dauert eine Minute, bis Sie sich damit zurechtfinden, aber Sie können es an so vielen verschiedenen Orten verwenden. Versuche damit zu experimentieren. Hier ist ein weiteres kleines Beispiel, damit Sie sehen können, dass es nicht nur an die verschiedenen Varianten gebunden ist, Sie können auch Farbe und unterschiedliche Größen hinzufügen, und dann erhalten Sie so etwas 30. HALTEPUNKTE: 05 Mit Booleans ausblenden und anzeigen: Elemente mit Booleschen Werten ein- und ausblenden. Boolesche Variablen sind eine ziemlich versteckte Funktion, aber Sie können kleine Zaubertricks wie diesen einrichten Zuerst habe ich eine Sammlung mit zwei Modi eingerichtet. In meinem Beispiel verwende ich einen für einen kleineren und einen größeren Bildschirm und dann boolesche Variablen Eine für ein Burger-Menü. Ich möchte auf einem kleineren Bildschirm anzeigen und für einen größeren ausschalten und umgekehrt für ein Lnx-Menü Jetzt richte ich meine Komponente ein und packe alle Elemente darin Also das Berger-Menü sowie das Link-Menü. Lass uns jetzt einfach alles verbinden. Also wähle ich den Berger und jetzt kommt der komische Teil. Wenn Sie es mit einem booleschen Wert verbinden möchten. Im Aussehen müssen Sie mit der rechten Maustaste auf I can very it und I klicken . Aber leider befindet es sich gerade dort, wo es sich gerade befindet Hier sehen Sie die Variable, die Sie für den Berger Boolean erstellt haben. Lass uns darauf klicken Es wird nichts passieren. Das erwarten wir. Wenn wir nun das Menü auswählen und dasselbe tun, wird es verschwinden, weil es uns standardmäßig die Einstellung des ersten Modus zeigt. Was wir jetzt tun können, ist Instanzen herausziehen, also werden wir eine Instanz hier platzieren und dann werden wir eine weitere Instanz auf unserem mobilen Frame platzieren . Bevor ich das mache, lass mich dir gleich zeigen, dass du keinen Modusschalter haben musst. Und sobald ich einen Moment hinzufüge , der an eine Variable gebunden ist, können Sie sehen, dass wir unseren Schalter sehen können, wenn ich jetzt einen übergeordneten Frame auswähle . Lassen Sie uns also diese Version auf unsere mobile Version umstellen und dann lassen Sie uns diese hier auf unsere größere Version umstellen. Und Sie können sehen, dass es automatisch die Goldbarren ein- und ausschaltet , je nachdem, wo ich sie platziere Es ist wirklich beeindruckend, diese Arbeitsweise zu nutzen. Schauen wir uns jedoch an , wie das eingerichtet ist. Seien Sie sich nur bewusst, dass es lediglich Ebenen ein- und ausblenden wird. Es besteht die Gefahr , dass jemand diese Arbeitsweise einfach nicht versteht und sie wieder einschaltet. Erkundigen Sie sich auch bei der Entwicklung, ob für alle sinnvoll ist , diese Komponente zu verstehen. Manchmal ist es sinnvoller, zwei Varianten zu haben, eine mit dem Berg und eine mit den Links, damit jeder weiß, welche Varianten gerade entworfen werden. Kleiner Tipp an der Seite. Sie können hier sehen, dass wir Größen angegeben haben. Das ist in diesem Fall kleiner als 500 und größer als 500. Was wir tun können, ist über das Breiten-Dropdown-Menü. Ich kann hier der kleinen Breite von 500 eine maximale Breite hinzufügen, und ich werde dasselbe für die große Breite tun. Ich werde in diesem Fall auf eine Mindestbreite von 500 gehen. Jetzt kann ich das testen. Hier können Sie sehen, dass das eigentlich ganz gut funktioniert, weil es wahrscheinlich auf 320 sinken wird oder so, dass alles in Ordnung ist. Und dann das größere, aber wenn ich die Größe ändere, dann kannst du sehen, dass das im Design nicht funktionieren wird , und deshalb ist es wirklich toll, es so auszuprobieren Wir wissen, dass wir bei diesem hier wahrscheinlich neu definieren müssen, in welcher Größe das Links-Menü angezeigt werden soll. 31. BREAKPOINTS: 06 Responsive Typografie mit Modi: Mithilfe von Modi können wir auch die responsive Typografie für verschiedene Bildschirmgrößen automatisieren responsive Typografie für verschiedene Damit dieser Ansatz funktioniert, müssen wir Textstile mit Variablen und Modi kombinieren Also hier ist eine vereinfachte Typenskala, die ich gerne verwenden würde, und Sie können sehen, dass ich bereits einige Stile erstellt habe, also alle hier wurden bereits erstellt, und ich werde zusammen mit Ihnen eine Anzeige erstellen. Wählen Sie also den Text und klicken Sie dann auf Typografie, klicken Sie auf „Stile anwenden und wir nennen diesen Text Display One Wenn wir auf den großen Hintergrundbereich klicken, können Sie sehen, dass der Stil erstellt wurde, und ich kann ihn einfach hier in meinen Ordner ziehen Ich habe ein sogenanntes responsives Typografie-Beispiel erstellt. Bei meinem Design ist es jetzt sehr wichtig, dass ich diese Stile anwende Stellen Sie sicher, dass jedes Textelement, das Sie verwenden, an einen Stil gebunden ist. Wenn Sie Komponenten verwenden, müssen Sie das nur einmal in Ihren Komponenten tun und alle Instanzen erben Wenn wir möchten, dass sich unsere Textgröße von Größe S an M und L anpasst, könnten wir einfach eine weitere Schriftskala für M und L erstellen weitere Schriftskala für M und und diese als separate Stile speichern Und Sie können Ihr Design absolut immer noch so einrichten. Mit Hilfe von Variablen und Modi können Sie diese Änderungen jedoch automatisieren. Anstatt separate Stile zu kreieren , werden wir unsere bestehende Textilindustrie verwenden. Wir verwenden eine Variable für die Größe und bei den Modi können wir dieser Variablen sagen, wie sie sich ändern soll, je nachdem welcher Modus auf dem Elternteil eingestellt ist, auf das wir das Design ziehen werden. Was wir tun müssen, ist, eine Variablensammlung zu erstellen. Klicken wir auf Neue Sammlung erstellen, und ich nenne das Typografie Jetzt können wir das alles entweder von Hand erstellen oder kleiner Tipp, wir können ein Plug-In verwenden Wählen Sie den Rahmen aus, in dem Sie all Ihre Textilien ausgestellt haben. Schauen Sie dann in den Plug-ins nach und suchen Sie nach den variablen Textstilen. Führen Sie dieses Plug-In aus Jetzt können Sie die Sammlungen auswählen. Ich werde mich für die Typografie entscheiden, die ich gerade erstellt habe. Sie können auch wählen , welche Teile Sie als Variablen einrichten möchten als Variablen einrichten möchten Klicken Sie auf Erstellen. Und das ist alles. Wenn wir nun zu unserer Variablensammlung zurückkehren, können Sie sehen, dass sie die Schriftgröße, die Schriftstärke und die Schriftfamilie für mich ausgefüllt hat. Wenn wir uns unsere Stile ansehen, können wir sehen, dass, wenn wir dieses Plug-In verwenden, das Tolle daran ist, dass alle Variablen bereits in unseren Stilen miteinander verbunden sind, was sehr praktisch ist. Wenn Sie eine Sammlung manuell einrichten, müssen Sie zu Ihren Stilen springen und auch alle Variablen manuell über das Dropdown verbinden Wirklich wichtig, sonst wird das nicht funktionieren. Jetzt haben wir das alles eingerichtet. Wir haben jedoch noch keine Informationen darüber hinzugefügt , wie sich die Größe je nach Bildschirm ändern sollte . Wir müssen also zu unserer Sammlung zurückkehren und einige Modi hinzufügen. Nun, mir gefällt die Benennung nicht. Es wird ziemlich verwirrend sein, also werde ich das nur ein bisschen aufräumen . Also werde ich sie einfach in T-Shirt-Größen umbenennen. Jetzt füge ich meine Modi hinzu und rufe S auf. Das sind meine Standardeinstellungen für M und L. Ich ordne sie auch einfach neu an, indem ich sie einfach ziehe Jetzt werde ich die Größen für M ändern. Ich werde nur meine Größe ein wenig erhöhen, auch die Größe Ich mache das einfach nach dem Zufallsprinzip in einem Designsystem , bei dem ich mir natürlich viele Gedanken darüber machen würde , wie sich diese Größen ändern würden. Jetzt müssen wir nur noch diesem sagen, dass es Mod M ist und diesem , dass es Mode L ist. Lassen Sie uns unsere Elemente mit unserem Design hierher ziehen. Ich werde das für S einrichten, und dieser hier wird es sein und jetzt schauen wir uns an , wie die neuen Größen ankommen. Das hier wird L sein . Sobald ich das Set habe, löschen wir es einfach. Der Modus wird dort bleiben. Wenn ich hier irgendwas draufziehe, wird die Typografie immer korrekt sein Ein kleiner Tipp. Sie können natürlich auch mehrere Modi verwenden. Im Moment habe ich das S eingestellt, aber ich habe auch den Hell- und Dunkelmodus, also könnte ich das auch in den Dunkelmodus umschalten. Noch ein kleiner Tipp, wenn ihr zum Beispiel mit einem IOS- und einem Android-Designer arbeitet und die Schriftfamilie wechseln müsst, dann könnt ihr auch Modi verwenden und die Schriftfamilie einfach so ändern. 32. Einige kostenlose Dinge, um sich zu verabschieden: Gut gemacht, dass Sie diesen Kurs abgeschlossen haben. Sie können sich gerne an mich bei Mo wenden und Do Tao verdienen. Ich bin immer an Ihrem Feedback interessiert. Sie würden mir auch einen großen Gefallen tun hier eine Bewertung hinterlassen würden. Ah, Ihnen hat dieser Kurs gefallen, und stellen Sie auch sicher, dass Sie sich Moon Learning DoTAO ansehen Wir können jede Menge zusätzliches Material sowie Kurse finden zusätzliches Material sowie Kurse Mit der M-Mitgliedschaft kannst du auf alle meine Videos zugreifen, also alles von den U XUI-Grundlagen viele FEMA bis hin zu vielen Tieftauchen und auch auf einen Abschnitt über die Grundlagen von CSS N UI Wir werden also besprechen, was passiert, wenn UI-Design auf Code trifft, Bezug auf Layout, Typografie, Farbe und andere relevante Auf Mo Learning findest du auch einen Paywall-Link zu all meinen letzten Artikeln sowie eine Ressourcenseite , auf der ich versuche, dich über die neuesten coolen Dinge auf dem Laufenden zu halten , die in der Welt des UX UI Designs passieren Wenn Sie eine Veranstaltung im echten Leben bevorzugen, schauen Sie sich den Workshop- und Vortragsbereich Ich spreche häufig auf Konferenzen und gebe Online-Workshops rund um die Themen UX-Design und Sol-Preneurship Abonnieren Sie unbedingt meinen Newsletter, um auf dem Laufenden zu bleiben Also bis bald auf Moearn dot IO.