Responsives UX/UI-Design in Figma: Auto-Layout, Einschränkungen und Haltepunkte (neueste Version 2023)

1. Promotions-Video: Auto-Layout macht Sie verrückt, Angst davor, was mit Ihrem Design im Browser passieren wird , dann ist diese Klasse genau das Richtige für Sie. Wir werden alles darüber lernen, wie man Responsive Designs und Figma einrichtet. Dies wird ein wirklich tiefer Einblick in Einschränkungen, Autolayout und die wichtigsten, aber selten diskutierten Breakpoints für Ihr UI-Design sein. Durch die Kombination dieser Tools können Sie Designs und Komponenten gemäß den tatsächlichen Codeeinstellungen erneut testen und dokumentieren . Wir werden mit dem Allmächtigen Auto-Layout beginnen und uns wirklich mit der Einrichtung wirklich reaktionsschneller Komponenten befassen. Fangen wir bei Null an und arbeiten uns bis zur Größenänderung und der Möglichkeit bis zur Größenänderung und der endloser Verschachtelungen vor, um komplexere Setups und sogar ganze Seiten mit Auto-Layout zu erstellen komplexere Setups und . Wie immer zeige ich euch ein paar versteckte Schätze und unterwegs ein paar versteckte Schätze und ein paar Tipps und Tricks. Wir werden uns dann mit Einschränkungen befassen und untersuchen, wie es ein Lebensretter ist , wenn es darum geht, das automatische Layout in Rastern zu kombinieren. Sobald wir sichergestellt haben, dass wir unsere responsiven Tools und Figma vollständig verstehen, werden wir etwas über Breakpoints lernen, wie sie in CSS wirklich unter der Haube funktionieren und wie wir unser Design in Figma einrichten können. Dementsprechend. Auf diese Weise können wir unsere responsiven Seiten und Komponenten unter realen Bedingungen testen unsere responsiven Seiten und Komponenten und unsere Dokumentation auf ein anderes Niveau bringen , was Ihre Entwickler sicherlich zu schätzen wissen werden. Mit der Kursmaterial-Datei können Sie neben mir arbeiten zwei Übungen mit ausführlicher Anleitung in Ihrer eigenen Zeit umkippen . Dieser Kurs ist genau das Richtige für Sie, wenn Sie Grundkenntnisse in Figma haben Grundkenntnisse in Figma oder wenn Sie ein fortgeschrittener Anfänger Ihre Fähigkeiten wirklich auffrischen möchten. Dies ist ein Kurs von Moon learning dot IO. 2. 1 Neues Figma-UI-Design AUTO LAYOUT NEW SKILLSHARE OLD: Bitte beachten Sie, dass ich eine aktualisierte Version dieses Kurses zur Wenn Sie also bereits auf die neue Figma-Benutzeroberfläche zugreifen, sollten Sie unbedingt zur neuen Version wechseln Um es zu finden, springen Sie einfach auf mein Profil, oder Sie können auch in der Beschreibung unten nachschauen Nur um das klarzustellen, dies ist die vorherige Figma-Benutzeroberfläche. Die neue Figma-Benutzeroberfläche sollte ungefähr so aussehen. Die wichtigste Änderung, die Sie feststellen werden, ist sich die Werkzeugleiste jetzt unten statt oben 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 Sie können auch den neuesten Kurs belegen , der eine etwas andere Struktur hat, aktualisierte Videos hat und die neueste Benutzeroberfläche verwendet. 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 FIMA sehr dynamisch ist. Diese Benutzeroberfläche, wie wir sie heute sehen, wird sich im Laufe des nächsten Jahres definitiv ändern Dies werden wahrscheinlich kleine Änderungen sein z. B. wenn ein Drop-down-Menü 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. Über diesen Kurs: Das Einrichten Ihrer Designs mit reaktionsschnelle Komponenten und Seiten Blick auf reaktionsschnelle Komponenten und Seiten ist heutzutage ein Muss für jeden UI-Designer Responsive Testing und Figma können Zeit und Nerven auf beiden Seiten sparen und verbessern In Zusammenarbeit mit der Entwicklung bietet uns Figma ziemlich erstaunliche Tools für die Einrichtung von Responsive Design. Wir haben die allmächtigen Autolayout-Einschränkungen sowie Raster. Es ist wirklich wichtig, dass Sie all diese Funktionen im Detail verstehen. Möglicherweise verwenden Sie hauptsächlich das automatische Layout, aber Sie werden feststellen, dass es für einen schnellen Test, bei dem Sie sich an ein unregelmäßiges Raster-Setup halten, sehr leistungsstarke Möglichkeiten gibt, sehr leistungsstarke Möglichkeiten gibt die drei zu kombinieren. Im ersten Teil dieses Kurses möchte ich wirklich tief in jedes dieser Tools eintauchen, von Anfang an bis hin zu fortgeschritteneren Techniken. Einschränkungen scheinen Ihnen also zunächst sehr grundlegend zu sein. Aber die Leistung wird wirklich entfesselt, wenn wir mit dem fortschrittlicheren Auto-Layout fortfahren und dann wieder Einschränkungen in sie kombinieren. In diesem Kurs geht es also wirklich darum, Ihnen zu zeigen, was möglich ist und was für bestimmte Setups die beste Lösung sein könnte . Es gibt keinen richtigen oder falschen Weg. Es geht wirklich darum, was du bauen willst. Nachdem wir unsere Tools im ersten Teil des Kurses durchgesehen haben, können wir ziemlich süße Responsive-Seiten und Komponenten einrichten . Wir stecken jedoch immer noch mit einem Problem fest. Das gleiche Design funktioniert nicht von mobilen bis hin zu größeren Desktops mit einem Setup, es funktioniert nur innerhalb eines bestimmten Bereichs. Und das ist wirklich ein Thema, das oft vernachlässigt wird, wenn es darum geht, Responsive Design zu lernen, denn was wir brauchen, ist ein Bruchpunkt. Dies ist keine automatische Funktion in Figma. Das ist also wirklich etwas, das wir als UI-Designer verstehen und uns im Einklang mit dem Code einrichten müssen . Wir werden das also im Detail durchgehen und wirklich verstehen, was diese Breakpoints sind, wie wir sie finden und wie wir sie einrichten und in Figma übersetzen können. Auf diese Weise können wir unsere Komponenten und Seiten mit den reellen Zahlen testen und dokumentieren . Auf diese Weise haben Sie eine ziemlich gute Vorstellung von der Realität. Und Sie können ein Gespräch zwischen Design und Entwicklung wirklich auf eine andere Ebene heben und sich auf die Details konzentrieren. Kurz gesagt, lassen Sie uns dieses ansprechende Durcheinander entwirren und alles schön und klar machen. 4. Kursmaterial: Vielleicht möchten Sie mit mir zusammenarbeiten, also habe ich einige Dateien vorbereitet, die Sie in dem Kurs herunterladen können. Navigieren Sie einfach zu Projekt und Ressourcen. Und dort finden Sie alle Informationen und den Link, über den Sie das Material herunterladen können. Auf dieser Seite finden Sie eine Vielzahl von Downloads. Sie können einfach die Ursache auswählen, die Sie gerade annehmen, und dann einfach auf Herunterladen klicken. Und die Datei wird automatisch für Sie heruntergeladen. Um die Dateien zu importieren, laden Sie sie einfach herunter. Es ist wichtig, dass Sie ein Figma-Konto haben. Sie in Ihrem Figma-Konto Navigieren Sie in Ihrem Figma-Konto entweder zu Entwürfen oder gehen Sie zu einem Projekt innerhalb eines Teams. Klicken Sie auf die Schaltfläche Importieren und Sie können auswählen, welche Datei Sie laden möchten. Es kann einen Moment dauern, da sie ziemlich groß sind, aber sobald Sie sie importiert haben, befinden sie sich in Ihrem Konto und Sie müssen diesen Vorgang nicht wiederholen. In der Akte. In den Videos findest du Material, um mit mir zusammenzuarbeiten, aber ich habe auch einige Anleitungen hinzugefügt, damit du immer in deiner eigenen Zeit wiederkommen und ausprobieren und üben kannst. Ich arbeite mit Google-Schriftarten für die meisten meiner Designs. Wenn Sie also mit der Figma-App arbeiten, müssen Sie nichts tun oder Google-Schriftarten werden automatisch vorinstalliert. Wenn du mit Figma im Browser arbeiten willst, dann musst du nur die Schriftart suchen , die dir als vermisst angezeigt wird, z. B. Poppins, ich benutze viel. Und dann können Sie diese Schriftart direkt herunterladen, auf Ihrem Computer installieren und schon kann es losgehen. 5. !!! BITTE BEOBACHTET !!! Neue Figma-Benutzeroberfläche in der Beta: Heads Figma hat seine Benutzeroberfläche aktualisiert, und Sie sehen möglicherweise ein neues Design anstelle des alten Dieses Update befindet sich derzeit in der geschlossenen Betaphase, sodass noch nicht jeder Zugriff darauf hat Ich werde die Grafiken aktualisieren und das neue Interface wiedergeben , sobald es für alle verfügbar ist. Die Änderungen sind hauptsächlich visuell. Alle Funktionen und Tools sind immer noch da, nur an etwas anderen Stellen oder mit einem neuen L. Beispielsweise wurde die obere Werkzeugleiste nach unten verschoben. Die linke Seitenleiste ist dagegen größtenteils unverändert geblieben. Sie können jetzt den Namen Ihrer Datei hier ändern. Sie können weiterhin alle Ihre Seiten, Ebenen und Elemente sehen. Auf der rechten Seite werden Sie einige Änderungen feststellen, wenn Sie in ein Design klicken, aber alle Funktionen sind weiterhin verfügbar. Wenn Sie ein Anfänger sind und die neue Oberfläche verwirrend finden , können Sie auf das Fragezeichen rechts unten klicken und vorübergehend zur alten Benutzeroberfläche zurückkehren. Das hat keinen Einfluss auf dein Design. Auf diese Weise können Sie die Videos des Kurses mit der alten Benutzeroberfläche viel einfacher verfolgen die Videos des Kurses mit der alten Benutzeroberfläche viel , bis Sie bereit sind, zur neuen zu wechseln. FIMA führt dieses Update schrittweise ein. Wenn Sie noch keinen Zugang haben, können Sie ihn auch bei FIMA beantragen, aber es gibt keine Garantie, einige von Ihnen müssen möglicherweise nur ein wenig Geduld haben Möglicherweise muss Ihr Team-Admin das Update auch für Sie aktivieren. Stellen Sie also sicher, dass Sie dies ebenfalls überprüfen Figma aktualisiert die Software regelmäßig Erwarten Sie also Änderungen und seien Sie bereit, sich anzupassen Funktionen können sich ändern wie diese Bibliotheksschaltfläche hier in den letzten Jahren an jeder möglichen Stelle Aber keine Sorge, nichts wird jemals verloren gehen, und Sie werden sich daran gewöhnen FIMA viel flexibler zu nutzen Es hat einen wirklich großen Fokus auf Benutzerfreundlichkeit. Es geht also nicht darum, etwas auswendig zu lernen, sondern die Software als Ganzes zu verstehen. 6. Automatische Layout-Updates am 23. Juni: Im Juni 2023, während der Figma-Konfliktkonferenz, einige Änderungen am automatischen Layout veröffentlicht Stellen Sie sicher, dass Sie die aktualisierte Figma-Übungsdatei herunterladen. So bekommt man am besten einen guten Überblick, welche Teile neu sind und wo Dinge einfach ein bisschen verschoben wurden. Keine Sorge, alles funktioniert wirklich wie zuvor, einige Sachen leicht ins Menü verschoben und zwei neue Funktionen wurden veröffentlicht. Lassen Sie mich Sie durch sie führen. Der Zwischenraum wurde verschoben. Während des Kurses werde ich auf eine Funktion namens Space Between eingehen. Das bedeutet, wenn wir so etwas haben und den Raum hier nicht nur um einen Wert anpassen wollen, sondern ihn automatisch immer auf die andere Seite verschieben wollen. Dann war das früher im erweiterten Menü. Du findest jetzt den Abstand dazwischen, wenn du in die Abstandsleiste gehst , indem du einfach auf Auto klickst. Sie können also sehen, dass wir, wenn wir die Folgendes erhalten. Wenn du gerade erst mit dem automatischen Layout anfängst und das alles ein bisschen verwirrend ist , dann mach dir keine Sorgen, wenn du die Übungsdatei herunterlädst, dann habe ich, sobald wir zu diesem Teil kommen, die Änderung der Position im Menü deutlich für dich beschriftet Die Alternativen dazu , indem Sie einfach auf den Bildschirmgriff klicken und Auto oder einen beliebigen festen Wert eingeben, bleiben unverändert Die andere Tastenkombination, nämlich das Klicken in das Ausrichtungsmenü und das Umschalten dieser Funktion mit X bleibt ebenfalls unverändert. Minimale und maximale Breite. Min and Max ist ein völlig neues Feature. Das heißt, wenn wir die Größe einer Karte wie diese ändern, können wir jetzt über unsere Felder für Breite und Höhe einen Mindest- und einen Maximalwert festlegen, indem wir einfach das Drop-down-Menü verwenden Wir können jetzt sowohl ein Minimum als auch ein Maximum festlegen. Und das würde sich dann widerspiegeln, sobald wir die Größe unserer Karte Ich habe kein ganzes Video dazu , in dem wir das Stück für Stück durchgegangen und uns auch angesehen haben, wie wir dieser Funktion Variablen hinzufügen können . Als nächstes ist Wrap dran. Das bedeutet, dass wir jetzt mit dem automatischen Layout Elemente umschließen können. Zur nächsten Zeile. Wir werden dieses Beispiel Stück für Stück durchgehen. So richten Sie diese Karten ein. Zuerst waren die Min- und Max-Werte. Und dann fügen wir Wrap hinzu. Der Zeilenumbruch wird dem Auto-Layout-Menü in der Richtung hinzugefügt. Sie finden es also als Nächstes, Vertikal, Horizontal. Und jetzt das neue Wrap-Feature. Außerdem gibt Figma Variablen heraus, die wir für das Padding im Autolayout verwenden können Wir können jetzt einfach unsere automatischen Layoutelemente auswählen. Und dann können wir über das Padding die von uns festgelegten Abstandswerte verwenden und sicherstellen , dass in unserem Design immer der gleiche Wert festgelegt Wir können sie auch als Leerzeichen zwischen einfach Variablen anwenden und Sie können dann auch Ihre eingestellten Werte auswählen. Variablen sind ein sehr großes Thema. Sie sind sehr leistungsfähig und du kannst viel mehr tun , als sie einfach hinzuzufügen, und mit ihnen Abstände zu setzen, wenn du an Variablen interessiert bist Ich habe einen eigenen Tieftauchkurs zu diesem Thema Sie können sehen, dass das automatische Layout so ziemlich wie zuvor geblieben ist, aber ein bisschen leistungsfähiger wurde 7. EINHALTEN: 01 Welche Einschränkungen in Figma gibt es?: Was sind Einschränkungen in Figma? Abhängigkeiten definieren, wie die Ebenen reagieren, wenn die Größe des übergeordneten Rahmens geändert wird. Auf diese Weise können wir steuern, wie Looks auf verschiedenen Bildschirmgrößen und Geräten gestaltet werden sollen. Wenn Sie ein Objekt in einem Rahmen auswählen, können Sie die kleinen gepunkteten blauen Linien sehen die auf den Rand des übergeordneten Rahmens zeigen. Das sind die Einschränkungen. Standardmäßig. Sie sind immer nach oben und links gesetzt. Sie können die Einstellungen auch im Eigenschaftenfenster auf der rechten Seite unter Einschränkungen sehen . Schränkt einen Satz sowohl für die horizontale als auch für die vertikale Positionierung ein. Sie können die Einschränkungen entweder per Dropdown oder einfach durch Klicken auf das Symbol festlegen . Halten Sie den Befehl gedrückt , um beide Seiten auszuwählen. Sie können Abhängigkeiten auf jede Ebenengruppe oder jeden verschachtelten Rahmen anwenden , sofern sich dieser innerhalb eines Rahmens befindet. Einschränkungen funktionieren nur innerhalb von Frames. Mit Ausnahme von Rahmen für Autolayouts können Sie keine Abhängigkeiten zu Rahmen für Autolayouts hinzufügen , mit Ausnahme der Elemente mit absoluten Positionen innerhalb Beachten Sie auch, dass Einschränkungen immer auf den übergeordneten Frame reagieren. Dies muss nicht unbedingt der Hauptrahmen sein. Also der Rahmen, den Sie verwenden, um Ihren Bildschirm darzustellen, da Sie auch Frames und Figma verschachteln können. Der übergeordnete Frame ist im Grunde das nächste Bild bis hin zu Objekten innerhalb eines Viertelkindes. 8. EINHALTEN: 02 Arbeiten mit horizontalen und vertikalen Einhaltungen Übersicht: Schauen wir uns die verschiedenen verfügbaren Arten von Einschränkungen genauer an. In der Dropdown-Liste sehen wir die folgenden Optionen. Horizontale Abhängigkeiten, links, rechts, links und rechts, Mitte. Und Skalierung. Für vertikal, oben, unten, oben und unten, Mitte und Skala. Gehen wir sie Stück für Stück durch. Hier habe ich ein Beispiel für einen Telefonbildschirm eingerichtet. Sie können sehen, wenn ich die Größe des übergeordneten Rahmens ändere, ist standardmäßig alles auf oben und links eingestellt. Daher ist nichts passiert. Nehmen wir an, ich möchte, dass dieses Menü auf der rechten Seite bleibt. Ich werde einfach die horizontale Beschränkung ändern, oder? Und Sie können sehen, wie die kleine blau gepunktete Linie jetzt nach rechts einrastet. Lassen Sie uns die Größe ändern und Sie können sehen , dass das einfach großartig funktioniert. Jetzt ändern sich Designs nicht nur horizontal, sondern auch vertikal. Wie Sie sehen, verliere ich hier meinen Plus-Button. Also werde ich die Einschränkungen nach unten und rechts setzen , um das zu beheben. Okay, wir haben also linken, rechten, oberen, unteren Schrank, ziemlich einfaches Zeug. Es wird einfach an diese Seite des übergeordneten Rahmens geheftet. Wenn wir nun Elemente wie unseren Inhalt in der Mitte positionieren möchten , können wir entweder links und rechts, zentriert oder skalieren. Links und rechts nehmen den Abstand von der Größe des Objekts zum übergeordneten Frame und behalten ihn bei der Größenänderung auf exakt derselben Größe bei. Skalieren hingegen definiert die Ebenengröße und -position als Prozentsatz der Rahmenabmessungen. Und es behält die Proportionen bei, aber nicht die genaue Zahl, wenn Sie die Größenänderung in der Mitte ändern. Sie haben vielleicht vermutet, dass das Objekt nur in der relativen Mitte bleibt , in der Sie es auf dem Rahmen platziert haben Originalgröße. Dies würde bei horizontaler oder vertikaler Ausrichtung genauso funktionieren . Kehren wir zu unserer Übung zurück. Also werde ich hier eine linke und rechte Einschränkung zu meinen Bildern hinzufügen . Und ich schicke ihm den Fehler ganz unten. Ich füge eine Mitte und einen Boden hinzu, da Sie horizontale und vertikale Abhängigkeiten so mischen können horizontale und vertikale Abhängigkeiten wie Sie sie benötigen. Mein Text hier, ich werde es einfach als Standardeinstellung von links und oben belassen . Ich möchte aber auch Einschränkungen zu meiner Statusleiste hinzufügen. Hier. Ich füge links und rechts zum Rahmen der Statusleiste hinzu. Und dann muss ich nur sicherstellen, dass ich den Kindern, also der Zeit und der Batterie, den darin enthaltenen Elementen, verschiedene Einschränkungen hinzufügen werde . Also mein Batteriestatus, ich möchte ganz oben sein. Wenn ich jetzt die Größe ändere, können Sie sehen, dass alles perfekt funktioniert. tipp. bei der Arbeit mit mobilen Designs das voreingestellte Rahmenmenü, Verwenden Sie bei der Arbeit mit mobilen Designs das voreingestellte Rahmenmenü, um zwischen beliebten Größen zu wechseln , die Figma für Sie ziemlich sicher macht. Manchmal möchten Sie vielleicht die Größe eines Rahmens ändern und die Einschränkungen ignorieren. Kein Problem. Halten Sie einfach den Befehl oder in der Windows-Systemsteuerung gedrückt und ändern Sie die Größe. 9. EINHALTEN: 03 Einhaltungen und Rastere: Es gibt ein bisschen Magie, die man mit Einschränkungen und Gittern machen kann . Einschränkungen selbst sind ziemlich einfach, insbesondere wenn Sie ein Element in Ihrem Design haben . Aber wenn wir mehr als ein Element zu einer Zeile hinzufügen , wird es schwierig. Mein einzelnes Element hier ist auf links gesetzt, richtig? Wenn ich dasselbe mit den anderen mache, können Sie an der blau gepunkteten Linie erkennen , dass die Kante des übergeordneten Rahmens und nicht das andere untergeordnete Element berücksichtigt wird. Wenn wir die Größe ändern, würde dies passieren. Wir könnten einige komplizierte Umgehungen mit Frames einrichten, aber das wird nicht sehr chaotisch sein. Wenn ich es auf Maßstab setze. Ja, das hält die Elemente an Ort und Stelle. Aber wie wir gelernt haben, definiert die Skalierung die Ebenengröße und -position als Prozentsatz der Framesdimension. Bei einigen Designs ist dies möglicherweise das, wonach Sie suchen. Wenn Sie jedoch eine bestimmte Größe für Ihre Ränder und Abstände zwischen Elementen verwenden möchten , können Sie mit Gittern einen kleinen Trick anwenden. Ich füge meinem Rahmen ein Gitter hinzu. Es ist auf Stretch eingestellt und ich werde 24 Ränder bearbeiten und habe auch eine Rinne von 24. Sie können diese Zahlen ändern. Benötigen Sie einfach, stellen Sie sicher, dass es sich dehnt. Ich werde jetzt meine Einschränkungen für diese Elemente wieder nach links und rechts ändern . Beachten Sie, dass die gepunktete Linie meines Buttons hier unten auf rechts gesetzt ist und unten nicht auf den Rand des übergeordneten Elements zeigt auf rechts gesetzt ist und unten nicht Frame nicht mehr, aber zur Spalte meines Gitters. Wenn ich die Einschränkungen ändere, können Sie sehen, dass jetzt die nächste Spalte als übergeordneten Container verwendet wird. Das gilt auch für meine Bilder hier. Sie nehmen diese Spalten als übergeordneten Container. Sie sitzen links und rechts drin. Wenn ich also alles neu dimensioniere, sitzt es gut im Raster. Sie können das Gitter natürlich ein- und ausschalten. Sie können entweder das Menü auf der rechten Seite verwenden oder einfach die Tastenkombination Strg und g verwenden. In diesem Beispiel ist mein Raster auf Stretch eingestellt. Wenn ich es in die Mitte ändere, wird es zu einem festen Gitter mit einer bestimmten festen Containergröße in der Mitte. Die linken und rechten Einschränkungen reagieren darauf nicht mehr. Sie müssten Ihre Abhängigkeiten auf Mitte ändern , wenn Sie dieses Raster verwenden möchten. Diese Technik würde übrigens auch für Reihen funktionieren. Und falls Sie es nicht wissen, können Sie mehrere Kreuzzüge auf einen Frame und Figma anwenden. Sie können also Zeilen und zwei Spalten hinzufügen und sie verwenden. Da ich jedoch dynamische Inhalte habe und die Höhe normalerweise nicht einschränken möchte, verwende ich Rosetta nicht wirklich oft und halte mich einfach an Raster, wann immer ich sie brauche. 10. EINHALTEN: 05 Fixposition beim Scrollen: Sie haben vielleicht bemerkt, dass wir in unserem Constraints-Feld eine zusätzliche Box haben. Wir können beim Scrollen die viertelfeste Position aktivieren. Wie der Name schon sagt, bleiben unsere Elemente beim Scrollen an Ort und Stelle. Es wird auch weiterhin alle Einschränkungen respektieren. Damit dies funktioniert, müssen wir jedoch zunächst ein paar Dinge einrichten. Zunächst müssen Ihre Inhalte über Ihren Rahmen hinausgehen. Im Rahmenmenü finden Sie das Clip-Inhaltsfeld, mit dem Sie Inhalte außerhalb Ihres Frames ein- und ausblenden können. Stellen Sie dann sicher, dass Sie die verschachtelten Rahmen oder Komponenten auswählen , die Sie fixieren möchten, und aktivieren Sie die feste Position. Dies ist eigentlich eine Prototyping-Funktion. Wir müssen also ein paar Dinge in einem Prototyping-Menü einrichten. Wählen Sie den Mainframe, wichtig, den Mainframe, nicht das Element, das Sie gerade repariert haben. Gehen Sie dann zum Prototyping-Menü, das Sie oben rechts auf Ihrem Bildschirm finden. Aktiviere das Scrollen. In meinem Fall aktiviere ich vertikales Scrollen. Übrigens können Sie hier auch ein Gerät auswählen. Stellen Sie einfach sicher, dass Ihre Bildgröße und die Gerätegröße übereinstimmen , um unerwünschte Skalierung zu vermeiden. Drücken Sie jetzt einfach die Wiedergabetaste oben rechts auf Ihrem Bildschirm und Sie werden sehen, dass alles gut gekritzelt und Ihre festen Elemente an Ort und Stelle bleiben. Dies ist wirklich großartig für obere und untere Navigationen oder schwebende Schaltflächen. Mit Prototyping, einem anderen Thema, und Figma können Sie diesem auch viel mehr Interaktionen und Verhalten hinzufügen . Im Moment ist dies eine wirklich großartige Möglichkeit, einfach durch Ihre Designs zu scrollen und auch einige erste Tests durchzuführen. Übrigens können Sie die Figma-App auch auf Ihr Telefon herunterladen und eine Live-Vorschau, die Sie auf dem eigentlichen Gerät entwerfen, sehen. Das ist super einfach und es wird einfach Ihren Bildschirm direkt auf Ihr Telefon gespiegelt. Stellen Sie sicher, dass Ihr physisches Gerät, das Sie für die Vorschau verwenden , und die Rahmengröße in Figma identisch sind. 11. EINHALTEN: 06 lustige Illustrationen mit Einschränkungen: Nur ein bisschen Spaß auf dieser Seite. Es gibt Einschränkungen, um ein Design auf unterschiedliche Bildschirmgrößen reagieren zu lassen. Und Sie können die Bildschirmgrößen auch verwenden , um einige Effekte zu erzielen. Hier habe ich ein Hintergrundraster erstellt und dann die Topographie bearbeitet, die in fünf Klassen liegt, wie Sie hier sehen können. Und dann habe ich eine kleine Illustration erstellt, in meinem Fall ist hier ein kleines Monster , das über sechs Säulen sitzt. Es ist einfach ein Quadrat mit abgerundeten Ecken. Und dann habe ich Mund hinzugefügt. Und Sie können sehen, dass ich das in Stücke geschnitten habe, da einige von ihnen nach links stehen. Dieser ist auf links, rechts eingestellt. Und auch meine Augen hier, z.B. sind auf die Mitte gerichtet. Wenn ich jetzt die Größe ändere, sieht man, dass sich das ändert. Schauen Sie sich die verschiedenen Bildschirmgrößen an. Du kannst also richtig damit spielen und ein paar lustige Dinge ausprobieren. Sie können dann testen, was auf dem mobilen Bildschirm passieren würde. Also hier würde ich die gleichen Elemente verwenden , sie aber ein wenig ändern. Spielen Sie also gerne mit diesem Beispiel. 12. Einschränkungen: 07 Beschränkungen der Einschränkungen: Es gibt einige Einschränkungen, wenn es um die Arbeit mit Einschränkungen geht. Einschränkungen funktionieren sehr gut, solange wir es mit einem recht einfachen Setup zu tun haben. Sobald Sie Elementen wie mehr Inhalt mehr Komplexität hinzufügen , werden Sie feststellen, dass Sie auf ein Problem stoßen. Der Inhalt überschneidet sich, da der Abstand und die Ränder nicht beibehalten werden. Dies ist übrigens ein Figma-Problem in CSS Diese Ränder und Polster würden weiterhin beibehalten. Wie können wir jedoch ein realistischeres Design in Figma einrichten ? Hier kommt Auto-Layout ins Spiel. automatischen Layout können Sie Designs erstellen, die mit wechselndem Inhalt wachsen und schrumpfen. Im nächsten Teil dieses Kurses werden wir uns eingehend mit dem Auto-Layout befassen. Wir werden sehen, wie man Auto-Layout-Komponenten und sogar ganze Seiten einrichtet. Und wir werden auch einen Blick darauf werfen, wo es sinnvoll ist, Autolayout, Grids und Einschränkungen zu kombinieren. Wenn Sie zu diesem Zeitpunkt etwas verwirrt sind, wann Auto-Layout-Einschränkungen verwenden und wann Sie sie kombinieren sollten, dann machen Sie sich keine Sorgen, wir werden es Schritt für Schritt durchgehen. Und ich gebe Ihnen auch einen Überblick darüber, wann der eine oder andere Sinn macht und wo die Stärke und Grenzen der einzelnen Ansätze liegen. Im Allgemeinen ist das automatische Layout am Anfang etwas schwieriger zu verstehen , aber es ist unglaublich leistungsfähig und definitiv eine Funktion, die Sie als UI-Designer verstehen müssen. 13. AUTO LAYOUT: 01 Was ist die automatische Layout?: Was ist eigentlich Autolayout. Mit dem automatischen Layout können Sie dynamische Frames und Komponenten erstellen , die auf die Größe ihres Inhalts reagieren. Auf diese Weise können Sie mit sich ändernden Inhalten arbeiten, z. B. mit unterschiedlicher Textlänge, und dabei Ihr Layout und die Abstände stets beibehalten. Sie können das automatische Layout die kleinsten Elemente Ihrer Designs, wie Schaltflächen, bis hin zu größeren und komplexen verschachtelten Komponenten verwenden. Und Sie können sogar ganze Seiten mit Auto-Layout erstellen. Automatisches Layout, das die Größe nur horizontal oder vertikal anpasst , aber auch das Hinzufügen eines festgelegten Polsters sowie des Abstands zwischen Elementen ermöglicht , auch beim Ändern an Ort und Stelle bleibt Inhalt oder Hinzufügen von Elementen. Süß. Sie können Elemente innerhalb des übergeordneten Containers mit automatischem Layout ausrichten und verteilen Elemente innerhalb des übergeordneten Containers mit und auswählen , auf welche Weise die Größe geändert werden soll. Mit ein paar einfachen Klicks können Sie mit Auto-Layout wirklich Magie erzeugen. Aber ich muss am Anfang ehrlich zu dir sein, es ist ein bisschen verwirrend und es scheint, als würdest du ein Layout mit Kaugummi erstellen , das wirklich normal ist und du wirst dich daran gewöhnen. Also haben Sie wirklich Geduld mit mir und lassen Sie uns das Schritt für Schritt durchgehen. 14. AUTO LAYOUT: 02 Einrichten eines automatischen layout: Richten wir unseren ersten Auto-Layout-Rahmen ein. Beginnen wir mit dem einfachsten Beispiel, einer Schaltfläche. Dies ist im Grunde ein Auto-Layout-Rahmen , der nur eine Ebene enthält. Aber lass uns Schritt für Schritt gehen. Zeichne einen Rahmen und füge dann Text mit dem ausgewählten Rahmen hinzu. Klicken Sie nun im Eigenschaftenfenster auf das Pluszeichen neben Auto-Layout. Beachten Sie, wie der Rahmen in einen Auto-Layout-Rahmen umgewandelt wurde. Sie können ein neues Symbol im Ebenenbedienfeld sehen. Lass uns etwas Styling hinzufügen. Ich füge eine Farbfüllung für den Hintergrund hinzu, einige abgerundete Ecken. Und ich werde den Text ein wenig anpassen. Ich kann jetzt den Inhalt der Schaltfläche anpassen und Sie können sehen, dass alle meine Einstellungen beibehalten werden. Es gibt grundsätzlich drei Möglichkeiten, Sie einen Auto-Layout-Rahmen einrichten können. Zuerst, wie wir es gerade getan haben, indem wir die Schaltfläche Auto-Layout im Eigenschaftenfenster gedrückt haben. Zweitens können Sie die Tastenkombination Shift und a wählen, oder Sie können einfach mit der rechten Maustaste klicken und Autolayout auswählen. So wie Sie einem Rahmen Auto-Layout hinzufügen, können Sie es auch entfernen. Sie können ein Eigenschaften-Panel verwenden und einfach auf Minus klicken. Sie können die Tastenkombination Halten, Umschalt und ein verwenden , oder Sie können mit der rechten Maustaste klicken und Autolayout entfernen auswählen. 15. AUTO LAYOUT: 03 Wo kann ich das Autolayout anwenden?: Wo kann ich Autolayout anwenden? Sie können Auto-Layout auf einen Rahmen oder eine Auswahl von Objekten anwenden . Dazu gehören Frames mit vorhandenem Inhalt, Gruppen oder andere Auswahlen von Ebenen und allen Objekten, Komponenten und Komponentensätzen, neuen oder leeren Frames. Text oder Formen. Hier sind zwei Ebenen, die einen Rahmen um ihn herum erstellen, aber wir werden uns das gleich ansehen. Lassen Sie uns sie genauer durchgehen. Also hier habe ich einen Rahmen mit Inhalt, und ich wähle ihn einfach aus und füge dann Auto-Layout hinzu. Wie Sie sehen können, nimmt dies die Polsterung und Positionierung auf und räumt sie bei Bedarf ein wenig auf. Wir können diese Einstellungen später immer anpassen. Wenn ich Auto-Layout auf die Gruppe anwende, wie ich es hier getan habe, wird die Gruppe in einen Rahmen oder einen spezifischeren und automatischen Layout-Rahmen umgewandelt . Wie Sie sehen können, wenn ich das Auto-Layout jetzt entfernen würde , bleibt ein Rahmen übrig. Die Gruppe ist weg, aber das ist völlig in Ordnung, denn in Figma richten wir unser Design normalerweise mit verschachtelten Rahmen ein. Jedenfalls. Sie können auch zwei Auto-Layout-Komponenten hinzufügen, und das ist sehr praktisch und Sie werden es häufig verwenden. Wenn ich meiner Komponente, die ich hier eingerichtet habe, Auto-Layout hinzufüge, scheint nichts passiert zu sein, da die Farbe und die Symbole gleich bleiben. Allerdings kann ich hier auf der rechten Seite sehen, Eigenschaften-Panel, Auto-Layout war Bearbeiten. Sobald ich Inhalte ändere oder hinzufüge, kann ich sehen, dass das automatische Layout angewendet wurde. Sie können auch das automatische Layout oder Ihre Varianz anwenden, da es sich im Grunde nur um Komponenten handelt. Beachten Sie nur, dass Sie das Auto-Layout direkt auf Ihre Varianz anwenden und nicht auf die Gruppe um sie herum, denn das war einfach, einen Auto-Layout-Rahmen für Ihre gesamte Varianz zu erstellen . Ich kann Auto-Layout auch auf leere Frames anwenden. Wenn ich das tue, wie Sie hier sehen können, scheint nichts passiert zu sein. Aber sobald ich Inhalte hinzufüge, kann ich sehen, dass Autolayout-Regeln gelten. Sie können das automatische Layout einzelner Ebenen wie Texte anwenden. Sie werden jedoch feststellen, dass es im Eigenschaftenfenster auf der rechten Seite keine Option gibt, um das automatische Layout einzurichten, wenn Sie ein Tags auswählen im Eigenschaftenfenster auf der rechten Seite keine Option gibt , um das automatische Layout einzurichten, wenn Sie . Dies liegt daran, dass Auto-Layout nur bei Frames funktioniert. Wenn Sie jedoch den Text markieren und dann die Tastenkombination Shift a verwenden, wird ein Rahmen um Ihren Text erstellt. Sie werden das vielleicht oft sehen, wenn Leute eine Schnellschaltfläche erstellen, da ich jetzt die Hintergrundfarbe ändern und einen Radius hinzufügen kann. 16. AUTO LAYOUT: 04 das automatische Layoutmenü: Schauen wir uns alles an, was wir mit dem Auto-Layout-Menü umgehen können. Sobald ein Rahmen in einen Autolayoutrahmen konvertiert wurde, gibt es im Bereich Autolayout im Eigenschaftenfenster auf der rechten Seite einen zusätzlichen Satz Bereich Autolayout im von Eigenschaften. Lassen Sie uns verstehen, was jeder von ihnen tut. Richtung. Rahmen mit automatischem Layout können zwei Richtungen haben , horizontal oder vertikal. Beachten Sie, wie sich das Symbol im Ebenenbedienfeld entsprechend ändert. Sie können nicht beides haben, aber Sie können verschiedene Autolayout-Richtungen nicht ineinander verschachteln . Dazu später mehr. Abstand dazwischen. Dadurch wird, wie der Name schon sagt, der Abstand zwischen den Elementen innerhalb des Autolayout-Rahmens erstellt. Beachten Sie, dass der Raum je nach gewählter Richtung entweder horizontal oder vertikal ist. Sie können hier einfach eine beliebige Zahl eingeben oder Abstand mit den Auf- und Ab-Tasten einstellen. tipp. Wenn Sie die Umschalttaste gedrückt haben, während Sie die Auf- und Abwärtstasten verwenden , um den Abstand Sie werden in den eingestellten Nudging-Betrag springen. In meinem Fall sind das also acht, weil ich ein Acht-Punkte-Abstandssystem verwende. Sie können Ihren Nudge-Betrag einfach ändern, indem das Figma-Menü auf der linken Seite öffnen. Geben Sie Nudge ein und legen Sie dann den Wert fest, nach dem Sie suchen. Neben dem Menü können Sie auch Steuergriffe auf dem Campus verwenden. Ziehen Sie sie einfach, um den Abstand anzupassen. Wenn Sie auf den Griff klicken, können Sie einen bestimmten Wert festlegen. Wenn Sie nicht möchten, dass die Elemente verteilt, sondern gestapelt sind, verwenden Sie einfach einen negativen Wert. Polsterung. Neben dem Abstand zwischen den Gegenständen können Sie auch die Polsterung um sie herum einstellen. gleiche gilt auch hier, Sie können das Menü verwenden, in dem Sie ein Feld für horizontales und eines für vertikales Padding angeben. Sie können aber auch das Menü erweitern und individuelle Werte festlegen. Oder Sie passen die Polsterung direkt auf der Leinwand an, indem Sie die eigenen Canvas-Steuerpunkte ziehen. tipp. Wenn Sie gleichzeitig die Horizontale oder Vertikale ändern möchten , halten Sie die Alt-Taste gedrückt und ziehen Sie. Wenn Sie alle vier Seiten gleich ändern möchten, drücken Sie einfach die Alt-Umschalttaste und ziehen Sie weitere Spitzen. Sie können auch die Befehlstaste gedrückt halten und im Menü auf Enter your padding klicken. Sie erhalten dann die CSS-Notation und Ausrichtung. Mit dem Ausrichtungsmenü können Sie die Positionierung der untergeordneten Elemente innerhalb Ihres Auto-Layout-Rahmens ändern . 17. AUTO LAYOUT: 05 Erweiterte Einstellungen: Werfen wir einen Blick auf das Menü Erweitertes Autolayout. Das ist also ein wenig versteckt, aber sehr mächtig. Klicken Sie auf die drei kleinen Punkte im Auto-Layout-Menü, um das erweiterte Menü anzuzeigen. Lassen Sie uns jeden von ihnen genauer durchgehen. Beginnen wir mit dem Abstandsmodus. Sie können zwischen gepackten Übungen und Platz zwischen Übungen für die Einstellung wählen. Wenn Sie die Größe des Rahmens ändern, können Sie sehen, dass der festgelegte Abstand zwischen Ihren Augen Thames beibehalten wird. Abstand zwischen wird dagegen den gesamten verfügbaren Speicherplatz nutzen und gleiche Lücken zwischen den direkten untergeordneten Elementen erzeugen . Und dies passt sich automatisch an wenn Sie die Größe des Rahmens ändern. Das Tolle daran ist, dass man Elemente gruppieren kann. Sie können entweder einen verschachtelten Gruppenrahmen oder idealerweise einen anderen verschachtelten Auto-Layout-Rahmen verwenden einen verschachtelten Gruppenrahmen oder , wie ich es hier getan habe, mein Beispiel, weil der Auto-Layout-Rahmen nur die nächsten untergeordneten Elemente berücksichtigt es wird diese beiden Kinder berücksichtigen. Dies ist sehr praktisch, um Gruppen auf zwei verschiedenen Seiten des übergeordneten Frames auszurichten Gruppen auf zwei verschiedenen Seiten des , wie eine Navigation. Ich kann später immer mehr Elemente hinzufügen und sie werden einfach den festgelegten Autolayout-Regeln entsprechen. Tip. Sie werden diese Funktion wahrscheinlich häufig nutzen. Es gibt also zwei großartige Abkürzungen, über die Sie Bescheid wissen sollten. Sie können auf das Ausrichtungsfeld klicken und dann mit x zwischen Abstand zwischen Aufprall umschalten. Sie können auch auf das Canvas-Steuerelement klicken und einen festen Wert für packed eingeben und einfach auto für Leerzeichen dazwischen eingeben. Unser nächstes Feature ist Stroke, Include und Exclude. Striche werden bei der Raumverteilung nicht berechnet, was dazu führen kann, dass sie sich überlappen und Verwirrung bei der Entwicklung stiften. Also hier kannst du deinen Strich einstellen. Bevor wir uns das Stapeln von Canvas ansehen, sollten wir uns daran erinnern, dass ich in meinem automatischen Layout Platz dazwischen habe in meinem automatischen Layout Platz dazwischen und wenn ich das auf einen negativen Wert setze , werden Elemente gestapelt. Durch Klicken auf Canvas Stacking kann ich einfach die Reihenfolge ändern. Beachten Sie, dass Canvas-Terrassendielen die tatsächliche Position im Ebenenbedienfeld nicht ändern . Es wird keine Änderung geben. Wenn Sie die tatsächliche Position eines Elements ändern möchten, wählen Sie das Element aus und verschieben Sie es mit den Auf-unten-Links-Rechts-Tasten in das Auto-Layout. Die letzte ist eine Ausrichtung der Textgrundlinie. Also hier habe ich meine Artikel, aber sie haben alle unterschiedliche Größen und ich möchte, dass sie alle auf einer schönen Grundlinie stehen. Wählen Sie also Auto-Layout-Rahmen und Sie erhalten eine kleine Vorschau. Wenn Sie klicken, können Sie sehen, dass das schön ausgerichtet ist. Es hängt ein bisschen davon ab, wonach Sie suchen, ob dies in Ihrem Design Sinn macht oder nicht. 18. AUTO LAYOUT: 06 Auto: Lassen Sie uns über Größenänderung und Autolayout sprechen. Dies ist der leistungsstärkste Teil des Auto-Layouts, aber auch der, den Sie möglicherweise einen Moment brauchen, um sich Gedanken zu machen. Zuvor hatte diese Funktion ein eigenes kleines Feld unter dem Auto-Layout-Menü. Jetzt findest du es in einem Rahmenabschnitt. Also unter der Breite und Höhe. Die Größenänderung gibt im Wesentlichen an, wie sich das Element horizontal und vertikal verhält , wenn sich Inhalt oder Größe ändern. Wir haben drei Größenänderungsoptionen: feste Breite, Höhe, Umarmungsinhalt, wirklich niedlich und voller Behälter. Und du kannst sie mischen. Sie könnten also eine für die Höhe und eine andere für die Breite haben. Lassen Sie uns zunächst unsere Einstellungen etwas genauer verstehen . Schauen wir uns also zuerst das Problem behoben an. Also hier muss ich Rahmen automatisch gestalten, einen mit einer Form im Inneren und einen mit Text. Stellen wir also die Form auf feste Höhe und feste Breite ein. Und ich werde den Text auch auf eine feste Höhe setzen. Und wie Sie sehen können, umarmt es mich schon aus einem Grund hier für vertikal, aber ich setze es vorerst auf eine feste Höhe. Wenn ich jetzt die Größe des übergeordneten Containers ändere, können Sie sehen, dass nichts passiert da das Objekt offensichtlich auf fest gesetzt ist und dasselbe mit Text der Fall ist. So kann ich den Text ohne Probleme korrigieren und die Breite korrigieren lassen. Aber wie Sie feststellen, hat es mich standardmäßig umarmt, wenn es darum ging, mich zu verstecken. Der Grund dafür ist, dass wenn ich diesen Text hier kopiere und weiteren Text hinzufüge, Sie sehen können, dass er kopiert wird, aber er wird nicht mehr in einem Textfeld stehen. Andere Elemente werden also nicht darauf reagieren und wir wollen das nicht. Mal sehen, was passiert, wenn ich das in Umarmung ändere. Ich wähle den gleichen Text aus und jetzt ändere ich die Höhe wieder auf Hug-Inhalt. Und Sie werden sehen, dass sich dieses Feld jetzt an Text anschmiegt. Es verwendet also alle vorhandenen Texte und fügt dann den Abstand und den Abstand hinzu. Wenn Sie hug with text verwenden, ist es sehr wichtig, dass Sie auch Ihre Texteinstellungen überprüfen. Dies sollte immer auf automatische Höhe eingestellt werden, oder wenn Sie mit einem horizontalen Layout auf automatischer Breite arbeiten . Was würde nun passieren, wenn ich die Breite ändere , um auch Inhalte zu umarmen? Lass uns das versuchen. Nun, das wird in diesem Fall nicht viel Sinn machen , weil es einfach alles auf Auto Width verteilt, dann hat sich die Box angepasst. Also will ich das in diesem Fall nicht. Aber wenn ich z.B. eine Schaltfläche einrichte, ist das ein gutes Beispiel, wo ich Hub-Inhalte horizontal und vertikal verwenden würde . Wie Sie sehen können, gibt es keine einzige Lösung, die wirklich davon abhängt, was Sie erstellen und dann die horizontalen und vertikalen Größenänderungseinstellungen richtig mischen . Wenn ich jetzt meinen Rahmen hier überprüft habe, die Form in der Mitte, habe ich nicht einmal die Option für Hug-Inhalte. Der Grund dafür ist, dass dies einfach eine Form ist und daher nichts aufnehmen kann, was umarmt werden könnte. Wenn ich jetzt den Rahmen auswähle, kann ich ihn auf Inhalt umarmen. Aber es scheint nicht viel passiert zu sein. Wenn ich hier allerdings meine Polsterung ändere, wirst du feststellen, dass sie sich anpasst. Sobald ich die Größe manuell ändern würde. Schau dir meine Größenänderungseinstellungen an. Dies wird wieder auf behoben zurückgesetzt. Wenn ich mich dann wieder umarme, wird es mein Paddeln wieder respektieren. Schauen wir uns unseren letzten an, einen vollen Behälter. Wenn ich nun diesen übergeordneten Rahmen auswähle, gibt es keine Option Container erfüllen. Dies liegt daran, dass es einfach keinen Container gibt, zu dem man aufschauen kann. Nehmen wir also das untergeordnete Element hier und stellen es so , dass es Behälter füllt und Behälter fühlt. Wenn ich nun die Größe der Eltern ändere, können Sie sehen, dass die Polsterung beibehalten wird und der gesamte verfügbare Platz aus der angegebenen Größe genutzt wird. Verwenden wir dasselbe für unser Textbeispiel. Also werde ich das auf phil container setzen , und ich werde dies auch als vollen Container hinzufügen, obwohl, wie Sie vielleicht vermuten, nicht die beste Lösung ist. Wenn ich also die Größe des Containers ändere, ist das wirklich großartig und es wird den gesamten verfügbaren Platz beanspruchen und meine Polsterung respektieren. In der Höhe werden Sie jedoch feststellen, dass ich leeren Raum mit Text erstelle. Normalerweise verwenden Sie Füllbehälter häufig horizontal, aber wir halten uns normalerweise an Ug-Inhalte , wenn es um vertikale Einstellungen geht. Es ist wirklich wichtig, dass du ein bisschen mit diesen Einstellungen spielst ein bisschen mit diesen Einstellungen und verstehst, was sie tun. Aber das Beste ist, mit ihnen an einem echten Beispiel zu spielen. Also lasst uns zusammen ein Auto bauen. 19. AUTO LAYOUT: 07 Errichtung einer responsiven Karte mit der Größe der auto: Lassen Sie uns unsere neu erlernten Größenänderungseinstellungen auf das Verwerfen anwenden. Zunächst wähle ich den übergeordneten Rahmen der Karte aus und wende das automatische Layout an. Wie Sie sehen können, versucht Figma bereits zu erraten, welche die besten Größenanpassungseinstellungen sind. Also in diesem Fall, umarme, umarme dich. Und das ist wirklich toll, denn wenn ich z.B. diesen Inhalt dupliziere und weitere hinzufüge, kannst du sehen, dass das wirklich gut funktioniert. Wenn ich jedoch die Größe ändere, dann ist das nicht wirklich das, wonach ich suche. Gehen wir also jedes Element Schritt für Schritt durch. Mein Bild, ich möchte die Größe mit dem übergeordneten Rahmen ändern. Also stelle ich das ein , um den Behälter zu füllen. Mal sehen, was passieren würde. Ja, das funktioniert ganz gut. Ich werde hier meine Überschrift setzen , um auch den Behälter zu füllen. Und jetzt schauen Sie mal, was passiert, wenn ich die Texte so ändere , dass sie sich Container anfühlen. Und beachten Sie, dass dies derzeit die einzige feste Größe ist. Das ist also eindeutig nicht das, wonach wir suchen, und das passiert weil dies keine Größe ist, die die Breite meiner Karte definiert, weil meine Karte, der übergeordnete Behälter, zum Umarmen, Umarmen geschickt wird. Das heißt also vorerst einfach auf feste Breite. Und jetzt können wir hier auch volle Container haben. Und wenn wir die Größe unserer Karte ändern, funktioniert das so , wie wir es beabsichtigt hatten. Denken Sie daran, dass wir bei der Arbeit mit Texten sicherstellen müssen, dass unsere Texteinstellungen immer so eingestellt sind , dass sie sich in einer Schaltfläche automatisch ausblenden, auf der wir uns bei Umarmung, Umarmung befinden. Dies wird die automatische Breite sein, aber alle Tags, die länger als eine Zeile sein können , müssen immer auf Auto Hide gesetzt werden. Dieser muss automatisch ausgeblendet werden. Und das hier muss automatisch ausgeblendet werden. Und wie gesagt, Figma war wirklich gut darin das zu erkennen und es bereits für Sie einzurichten. Aber wenn Sie jemals auf Probleme stoßen bei denen sich der Text nicht wirklich mit dem Auto-Layout verhält. Achten Sie darauf, diese Einstellungen zu überprüfen. Und weil wir die automatische Breite haben und sie so eingestellt haben, dass sie vertikal umarmt, können wir einfach mehr Inhalte hinzufügen. Lassen Sie mich das einfach kopieren und hier weitere Inhalte hinzufügen. Und man sieht, dass das perfekt funktioniert. Und selbst wenn ich jetzt die Größe ändere, wird das gut funktionieren. Schauen wir uns also unser letztes Element in unserer Karte Fertig an und dieses ist auf Umarmen, Umarmen eingestellt. Und das ist einfach perfekt, denn Umarmung, Umarmung bedeutet, dass horizontal immer diese Polsterung verwendet wird und vertikal wird es auch diese Polsterung respektieren und unser Knopf geht nur um eine Zeile zu sein. Wenn ich hier mehr Inhalte hinzufüge , passt sich das einfach gut an. Wenn Sie jedoch eine Schaltfläche in voller Breite wünschen, würden Sie sie so einstellen, dass sie den Behälter füllt. Und Sie können dann hier mit dem Ausrichtungszentrum den Inhalt mit dem übergeordneten Frame sehen. Sie können natürlich immer noch den gesamten Abstand und die Polsterung anpassen . Sie können auch Elemente in das Auto-Layout hinein- und herausnehmen. Und genau so haben Sie eine Responsive-Karte, die sich vollständig an jeden Inhalt anpasst. 20. AUTO LAYOUT: 08 Auto und -instanzen: Wie wir gelernt haben, hat Auto-Layout auch mit Komponenten gearbeitet und das ist sehr praktisch. Also hier habe ich meine Responsive-Karte. Was ich jetzt tun möchte, ist, dass ich diese Karte auswählen und eine Komponente erstellen möchte. Es macht auch sehr viel Sinn , dass dieser Button hier eine eigene Komponente ist , da ich wahrscheinlich Instanzen an verschiedenen Stellen verwenden werde . Ich kann keine Komponente innerhalb einer Komponente erstellen. Was ich also tun werde, ist, diese Schaltfläche herauszunehmen, eine Komponente zu erstellen, eine Instanz dieser Schaltfläche und sie wieder in meine Hauptkomponente einzufügen. Das Tolle daran ist, dass, wenn ich hier meine Instanz der Schaltfläche auswähle, Sie sehen können, dass sie alle Auto-Layout-Einstellungen und Größenänderungseinstellungen erbt . Also z.B. wenn ich in der Hauptkomponente die Breite auf fest ändern würde. Sie können sehen, dass die Instanz die Einstellung erbt. Setzen wir es wieder auf „Hug Content“ zurück. In Figma haben Sie die Möglichkeit, die Auto-Layout-Einstellungen in Ihren Instanzen außer Kraft zu setzen. Also z.B. ich könnte diesen Knopf setzen , um den Behälter zu füllen. Ich empfehle jedoch dringend, dass Sie alle Autolayout-Einstellungen beibehalten und wirklich nur z.B. den Inhalt der Schaltfläche ändern . Wenn Sie eine Variante haben möchten, z. B. eine Schaltfläche mit voller Breite oder etwas mit einem anderen Verhalten, empfehle ich Ihnen, eine andere Variante einzurichten. Okay, großartig. Erstellen wir nun eine Instanz der gesamten Karte. Ich kann entweder einfach eine Kopie meiner Hauptkomponente erstellen oder ich kann mein Menü hier verwenden, Ressourcen, und dann einfach die Karte eingeben und Sie werden die Komponente finden, nach der Sie suchen. Und ich nehme hier eine Kopie. Sie können auch das Assets-Panel verwenden. Ich kann diese Instanzen jetzt in meinem gesamten Design verwenden , um den Inhalt anzupassen. Lass uns hier einfach ein bisschen mehr Text hinzufügen. Lass uns einfach mehr Überschrift hinzufügen. Das. Ich werde das Gleiche behalten. Und dann werde ich für die Bilder ein Plugin verwenden. Also gehe ich Plug-In und dann setze ich Splash auf, führe es aus. Mit Unsplash können Sie also entweder ein bestimmtes Bild suchen oder einfach eine der voreingestellten Kategorien verwenden . Also gehe ich erstmal ins Interieur , wähle die Form aus. Und dann können Sie einfach eines der Bilder auswählen und es füllt die Form aus. Sie können natürlich auch Ihre eigenen Bilder verwenden und diese einfach in Figma importieren. Also meine Karte selbst, sie funktioniert hervorragend bei der Größenänderung. Was ich jedoch möchte, ist, wenn ich diese Karten zusammen hätte, möchte ich, dass sie auch die Entfernung respektieren. Wenn das Verschachteln eingeht, wählen Sie einfach beide Karren aus und klicken Sie dann auf Autolayout Sie erstellen einen weiteren Rahmen für das automatische Layout um diese beiden Karten. Lass uns das verstehen. Dieser neue Rahmen, den ich erstellt habe. Wenn wir einen Blick in das Ebenenmenü werfen, können Sie sehen, dass dies jetzt der übergeordnete Frame für diese beiden Auto-Layout-Karteninstanzen ist . Und hier kommt es zu einer Menge Verwirrung. Beachten Sie also, dass diese Karten immer noch alle Autolayout-Einstellungen von der Hauptkomponente erben. Wenn ich mir also eine dieser Karten schnappe und die Größe manuell ändere, können Sie sehen, dass alles noch vorhanden ist. Wenn ich jedoch den übergeordneten Rahmen auswähle und seine Größe ändere, passiert nichts. Warum ist das so? Der Grund dafür ist, dass diese Karte einfach hineinschaut. Also alles, was ich in dieser Auto-Layout-Karte gesagt habe , funktioniert mit dieser einzelnen Karte. Die Karte weiß nicht, wo die Instanzen in größeren Gruppen verwendet werden. diesem Grund muss ich für jede dieser Karten eine andere Größenänderungsoption festlegen und ihr mitteilen, wie sie sich mit einem neuen übergeordneten Rahmen verhalten soll. Also wähle ich übergeordneten Frame aus und drücke die Eingabetaste. Dies ist eine Verknüpfung, um alle untergeordneten Elemente eines Rahmens auszuwählen. Und ich kann jetzt die Größenänderung für alle gleichzeitig festlegen. Und ich nehme Phil Container. Wenn ich jetzt die Größe des übergeordneten Rahmens ändere, können Sie sehen, dass sie die Breite respektieren. Durch Auswahl des übergeordneten Frames kann ich jetzt den Abstand zwischen ändern. Und ich könnte auch etwas Polster hinzufügen. Und das entspricht immer dem übergeordneten Frame, nicht den untergeordneten Elementen im Inneren. Wenn ich hier Änderungen vornehmen möchte, würde ich die Domain-Komponente verwenden. 21. AUTO LAYOUT: 09 Nesting automatische Layoutrahmen Aufbau einer Navigation: Lassen Sie uns eine reaktionsschnelle Navigation mit verschachteltem Auto-Layout erstellen. Also hier habe ich meine verschiedenen Elemente , die ich in der Navigation platzieren kann. Und hier habe ich einen Rahmen eingerichtet , der meine Navigation enthalten soll. Das erste, was ich tun werde, ist, meinen Artikel hier in einen Auto-Layout-Rahmen zu verwandeln. Und ich werde es auch zu einer Komponente machen. Und ich mache dasselbe mit meinem Knopf. Und nur um ein sauberes Design zu haben, werde ich auch mein Logo und meinen Avatar in Komponenten verwandeln. Ich hole mir diesen Artikel hier. Ich werde drei Instanzen erstellen und sie als Blog und Kontakt aufnehmen. Ich füge jetzt eine Instanz meiner Buttons sowie eine Instanz meines Avatars hinzu. Und ich benenne den Button um, um ihn zu abonnieren. Jetzt wähle ich alle aus und verwandle dies, indem ich Shift a in einen Auto-Layout-Rahmen drücke. Und ich werde den Rahmen in meiner Navigation platzieren. Also lass mich das ein bisschen aufräumen. Ich ändere den Abstand auf ein Vielfaches von acht. Also 16, vielleicht ist es ein bisschen klein, 24. Und ich werde mal schauen, was gut aussehen wird. Ich könnte es hier schicken oder ich könnte auch Ausrichtungshals der Textgrundlinie verwenden. Das wird mit meinem Avatar nicht funktionieren. Ich lasse es und benutze hier einfach mein Alignment-Tool. Ich erstelle nicht nur eine Instanz meines Logos und platziere dieses auch in meinem Navigationsrahmen. Jetzt fehlt nur noch , dass ich meinen Navigationsrahmen auswähle , der jetzt mein neuer übergeordneter Frame ist. Und ich werde das jetzt in einen Auto-Layout-Rahmen verwandeln einen Auto-Layout-Rahmen , um meine Polster und Abstände aufzuräumen. Ich möchte also, dass dies auch ein Vielfaches von Acht ist, passend zu meinem Acht-Punkte-Abstandssystem. Und ist diese Position in der Mitte? Ich werde das alles einfach in der Mitte positionieren. Wenn ich jetzt die Größe ändere, wird dies jedoch nicht funktionieren. Jetzt könnte Ihr erster Gedanke darin bestehen, das Größenänderungsmenü zu verwenden. Es gibt jedoch einen viel besseren Weg. Denken Sie daran, dass es sich um den Vertrieb handelt. Nutzen wir also unser erweitertes Menü. Wechseln Sie dann von gepackt zu Platz dazwischen. Jetzt verbraucht es den gesamten verfügbaren Speicherplatz, wenn ich die Größe ändere. Das Tolle daran ist auch, dass wenn ich Elemente wegnehme oder Elemente hinzufüge, das immer noch funktionieren wird. Ich kann das sogar weiter verschachteln. So konnte ich alle meine Link-Elemente auswählen. Und ich werde das hier im Ebenenbedienfeld machen , weil es eine Struktur etwas besser zeigt. Ich könnte jetzt Shift a drücken und ein anderes Bild erstellen. Ich nenne das einfach Links. Jetzt könnte ich es auf Distanz innerhalb dieser verteilen. Und ich kann auch den Abstand zwischen diesem verschachtelten Rahmen ändern . Ich könnte diese verschachtelte Gruppe auch herausnehmen und eigene Elemente bearbeiten lassen. Auf diese Weise hätten wir also wieder drei untergeordnete Elemente. Und jetzt mein Raum zwischen einem noch arbeitenden, aber auf drei Kinder verteilten . Beachten Sie, dass es mit Auto-Layout normalerweise nicht nur eine Möglichkeit gibt, dies zu erstellen. Es gibt verschiedene Möglichkeiten, dieses Ergebnis zu erzielen. Sie können z.B. alle Abstände hier oben in Ihren Hauptkomponenten festlegen . In euren Atomen gibt es also kein Richtig oder Falsch. Bedenken Sie jedoch, dass ein bisschen Padding hier und ein bisschen Abstand hier wahrscheinlich ziemlich verwirrend sein werden. Ich empfehle Ihnen daher, sich an eine Technik zu halten und nur Ihr Team zu besprechen, was für Sie am besten funktioniert. 22. AUTO LAYOUT: 10 Absolute Positionierung: Wir können andere Elemente innerhalb von Auto-Layout-Rahmen absolut positionieren . Was heißt das? Also hier habe ich einen Auto-Layout-Rahmen. Ich möchte diesen neuen Aufkleber hier reinziehen und ich wollte mich auf mein Bild setzen. Wenn ich es jetzt einfach in den Auto-Layout-Rahmen ziehe, werden Sie feststellen, dass ich es nicht über das Bild ziehen kann da es Teil des Auto-Layouts wird , sobald es in den Rahmen gelangt. Was ich jetzt tun kann, ist es in den Rahmen zu legen und es auszuwählen. Und dann befindet sich in meinem Rahmenmenü auf der rechten Seite ganz oben der versteckte kleine Knopf namens absolute Position. Wenn ich darauf klicke, nehme ich es aus dem Auto-Layout-Ablauf. Ich kann es jetzt frei in meinem Rahmen positionieren. Da ich jedoch die Größe der Karte geändert habe, werden Sie feststellen, dass sie nicht mehr auf die Breite reagiert. Dies liegt daran, dass es nicht mehr Teil des Auto-Layouts ist und daher Rezitationen nicht zutreffen. Ich werde jetzt jedoch wieder sehen, dass Einschränkungen für absolut positionierte Elemente angezeigt werden. Also repariere ich das auf der rechten Seite und oben. Jetzt, da ich die Größe geändert habe, bleibt es genauso auf der rechten Seite des Rahmens, wie ich es wollte. Übrigens, wenn Sie so etwas wie eine Alarmblase hinzufügen möchten , die über den Rahmen hinausgeht, können Sie das auch tun. Fügen Sie es dem Rahmen hinzu und setzen Sie es auf absolute Positionierung. Und dann müssen Sie es vielleicht ein wenig mit den Pfeiltasten positionieren wenig mit den Pfeiltasten damit es nicht aus dem Rahmen geht. Und dann müssen Sie einen übergeordneten Frame auswählen und das Häkchen bei Clip-Inhalt entfernen. Sie können es jetzt sehen. Und es bewegt sich immer mit deinem Rahmen. 23. AUTO LAYOUT: 11 Komplexere auto: Lassen Sie uns komplexere Auto-Layout-Setups verstehen. Hier habe ich verschiedene Optionen für die Karte eingerichtet. Fügen wir allen Auto-Layout hinzu, um uns mit dem Prozess ein wenig vertraut zu machen. Wie Sie feststellen werden, ist es wichtig, wirklich beim kleinsten Element zu beginnen und sich dann nach oben zu arbeiten. Fangen wir mit unserem ersten Layout an. Wenn ich das Auto-Layout einfach auf den gesamten übergeordneten Frame anwenden würde , funktioniert das. Ich hätte jedoch den gleichen Abstand zwischen allen untergeordneten Elementen und das möchte ich nicht. Lassen Sie mich das Ebenenmenü öffnen, damit Sie das etwas besser sehen können. Ich werde hier verschachtelte Auto-Layout-Rahmen erstellen , um ihm mehr Struktur zu geben. Also all meinen Intro-Abschnitt, die Überschriften-Subline und das Datum, werde ich auswählen, dass ich Shift a drücke und ich werde einen verschachtelten Auto-Layout-Rahmen erstellen. Sie können sehen, dass hier der Abstand auf Null gesetzt ist. Wenn ich das also erhöhen würde, bekomme ich mehr Abstand. Ich kann jetzt schon den übergeordneten Frame nehmen, Auto-Layout hinzufügen, und Sie werden sehen, dass es jetzt funktioniert. Dies ist ein verschachtelter Rahmen. Jetzt können Sie sehen, dass der Abstand nur für die direkten untergeordneten Elemente gilt. Es ist jetzt auf 14 eingestellt und ich könnte es erhöhen oder verringern. Ich möchte es auf 16 setzen, um ein Vielfaches von acht zu erhalten. Auto-Layout hat alle meine Polster links, rechts, oben und unten automatisch aufgenommen . Und es sind auch Sets mit 14. Ich drücke Command und klicke in meine Fülloptionen. Denken Sie daran, dass dies die Abkürzung für CSS-Not Ich füge 16 hinzu, und auf diese Weise kann ich mit einem Klick alle Padding auf 16 ändern. Jetzt muss ich nur noch die Größenänderungsoptionen für den Frame S festlegen die Größenänderungsoptionen für den Frame S Bisher passiert nichts. Ich wähle das Bild aus und lasse es bei fest, behoben. Dann wähle ich meinen verschachtelten Rahmen aus. Und deshalb müssen Sie vorsichtig sein. Wenn ich diesen an den Füllbehälter sende, wähle ich das untergeordnete Element aus. Sie werden sehen, dass dies immer noch behoben ist. Daher ist es wichtig, das übergeordnete Element auszuwählen, die Eingabetaste zu drücken, dann erhalten Sie sofort ein altes untergeordnetes Element und stellen Sie es dann auf Behälter füllen. Also setze ich sowohl die untergeordneten Elemente als auch diesen übergeordneten Container, der sein eigenes neues Auto-Layout zum Füllen von Inhalten ist. Ich stelle meinen Text so ein, dass er sich zufrieden anfühlt. Und ich sorge dafür, dass es auf Auto-Highs eingestellt ist. Mein Link kann ich sagen, ich solle mich umarmen, umarmen, da ich ihn ein bisschen wie einen Knopf behandle. Und jetzt werden Sie sehen, dass alles einfach super funktioniert. Lassen Sie uns unser zweites Layout in Angriff nehmen. Also hier müssen wir horizontales mit vertikalem Auto-Layout kombinieren . Denken wir einfach über die Struktur nach, bevor wir beginnen. Das ist also im Grunde das, was wir vorher eingerichtet haben. Wir haben hier einen verschachtelten Rahmen. Dann erstellen wir einen Rahmen um den rechten Bereich. Und dann haben wir diesen übergeordneten Rahmen mit einem horizontalen Auto-Layout-Rahmen. Lass es uns machen. Also wähle ich hier noch einmal meine Überschriften aus, mein Intro und ich drücke Shift a, und daraus wird ein Auto-Layout-Rahmen. Du solltest es natürlich immer benennen. Nennen wir das Schlagzeilen. Dann wähle ich meine Texte und meinen Link und drücke erneut Shift a. Und ich kann das auch rechts oder rechts nennen. Jetzt wähle ich den Rahmen meiner Eltern aus. Und wie Sie jetzt sehen können, habe ich hier nur die beiden untergeordneten Elemente. Es wird also das horizontale Layout anwenden. Schauen wir uns auch dieses Layout an. Und Sie können sehen, dass dies automatisch auf horizontal eingestellt ist . So wie Figma Polsterung und Abstand aufgreift und auch Richtungen aufgreift. Lassen Sie uns das also bereinigen und unsere Größenänderung sofort hinzufügen. Also stelle ich das hier ein, um Inhalte zu umarmen. Ich stelle meinen Text , dass er sich als Container anfühlt, und stelle sicher, dass er automatisch hoch ist Und jetzt habe ich mein letztes Element, das ist ein verschachtelter Auto-Layout-Rahmen. Zuerst müssen Sie nach innen gehen, wählen Sie alle untergeordneten Elemente mit N um sie so einzustellen, dass sie den Behälter füllen. Und dann wähle ich das übergeordnete Element erneut und setze es auch auf vollen Container. Nun, warum passiert das? Dies geschieht, weil der übergeordnete Frame auf Umarmung eingestellt ist. Ich kann das einfach skalieren. Stellen Sie dies ein, um den Behälter zu Und jetzt wird es wieder richtig sein. Ich habe meine rechte Seite fertig. Mein Bild hier. Ich wollte wieder zu einem festen Zeitpunkt gehen. Was ich tun könnte, ist, dass ich die Position ändern könnte, wenn ich in der Mitte möchte oder etwas mit Ausrichtung. Und jetzt wollen wir sehen, was passiert, wenn ich die Größe ändere und das funktioniert. Einfach großartig. Sie fragen sich vielleicht, was passieren würde, wenn ich das so einstellen würde, dass es auch den Behälter füllt, dann würden sie sich diesen Raum teilen. Du könntest also auch so etwas haben. Aber in meinem Fall möchte ich es reparieren lassen. Lassen Sie uns hier noch einmal unser Design einrichten, ich habe eine Mischung aus horizontalem Layout. Das hier wird also mein horizontal verschachtelter Rahmen und das vertikale Autolayout sein. Sowie ein kleines absolut positioniertes Element der oberen rechten Ecke. Lassen Sie uns zuerst unsere Überschriften wie gewohnt auswählen, verschieben Sie einen, um einen Auto-Layout-Rahmen zu erstellen , der übrigens immer das Menü verwenden kann. Es ist genau das Gleiche. Dann wähle ich das Bild und meinen neuen verschachtelten Rahmen und drücke erneut Shift a. Und jetzt habe ich nur vertikale untergeordnete Elemente in meinem übergeordneten Rahmen mit dem gleichen Abstand. Also wähle ich meinen übergeordneten Rahmen aus und verwandle ihn in einen Auto-Layout-Rahmen. Das sieht also nicht so aus, wonach ich suche, weil dieses Element hier jetzt als untergeordnetes Element angesehen wird. Ich werde das vorerst aus dem Rahmen nehmen und mich später darum kümmern. Okay, schauen wir uns zuerst an , was hier passiert ist. Es hat meine Polster herausgenommen. füge ich einfach hinzu. Ich drücke Command und klicke in meine Füllfelder und setze das rundum auf 16. Das ist also wieder das , was ich will. Jetzt mache ich mein übliches und wähle hier das untergeordnete Element meines verschachtelten Rahmens aus, den vollen Container. Mein verschachtelter Rahmen wollte auch den Behälter füllen. Mein Bild wie immer, ich lasse es bei einem festen und ich stelle dies ein, um den Behälter zu füllen. Und jetzt nehmen wir diesen hier. Mal sehen was passiert. Ja, es behält den Behälter bei, weil der Elternteil bereit ist, sich zu umarmen, aber bereits genug Inhalt zum Umarmen hat. Also lass uns jetzt die Größe ändern, lass uns sehen, ob das funktioniert. Das funktioniert ganz gut. Das einzige, was ich nicht mag, ist diese Polsterung hier. Es ist auch ein bisschen eingestellt auf, ist auf drei gesetzt. Das ist viel zu klein. Setzen wir es auf acht. Perfekt. Und jetzt werde ich mich mit meinem absolut positionierten Element befassen . Also nehme ich das und ziehe es rein. Es wird wieder als untergeordnetes Element angesehen bis ich die absolute Position aktiviere. Jetzt ist es aus dem Auto-Layout-Ablauf entfernt. Ich kann es jetzt überall in meinem Rahmen positionieren, wo ich es haben möchte. Und denk dran, ich kann Einschränkungen hinzufügen. Wenn ich jetzt die Größe ändere, funktioniert das, nur ein großer kleiner Fehler passiert hier. Mal sehen, dass sich dieser verschachtelte Rahmen ich nicht gesagt habe, dass er sich Container anfühlt Lass uns das ändern. Jetzt. Alles ist so, wie ich es mir wünsche. Auch hier können Sie hören, wenn Sie diesen Rahmen auswählen, das Bild so positionieren, dass Sie es oben haben können, oder ich mag es hier in der Mitte sehr gut. Das liegt an dir. Hier ist zweifellos mein komplexestes Layout. Schauen wir uns an , was passiert. Ich habe also zwei Hauptbereiche. Hier gibt es eine untere Leiste und den Hauptinhalt. Der Hauptinhalt ist wieder in ein horizontales Layout aufgeteilt. Also habe ich diese Seite und mein Bild. Fangen wir mit den Hauptinhalten an. Wählen wir also den gesamten Text auf der rechten Seite shift a aus, und wir haben ihn in einen Auto-Layout-Rahmen verwandelt. Jetzt lasse ich das ausgewählt, wähle mein Bild aus und drücke erneut Shift a. Und jetzt habe ich meinen oberen Teil. Ich nenne das nicht die beste Bedeutung. Dann werde ich mir ansehen, was hier unten mit meiner unteren Leiste passiert . Schauen wir uns das an. Wenn wir das alles einfach in Auto-Layout umwandeln würden, würde ich denken, dass all die, die ich versuche, Elemente zu , wir das nicht wollen, also müssen wir hier ziemlich viel verschachteln. Also beginne ich hier mit meinen Avataren, wähle sie alle aus, drücke Shift a, und Sie können sehen, dass sie gut nebeneinander positioniert werden. Ich will das nicht, aber ich kann sie einfach durch Ziehen stapeln oder du könntest auch negative Abstände hinzufügen. Du kannst das nach deinem Geschmack machen. Ich glaube, es war ungefähr so. Jetzt können Sie sehen, dass dies nicht der Fall ist, der früher oben war. Was ich also tun kann, ist, das erweiterte Menü zu nehmen und zum Canvas-Stacking zu gehen. Zuerst oben drauf. Perfekt. Okay, dann scheinen diese beiden mit ihrer eigenen Entfernung auf der linken Seite zu sein. Also wählen wir diese beiden aus. Drücken Sie die Umschalttaste a und verwandeln Sie sie in einen Auto-Layout- Und dann könnte ich hier sogar den Raum anpassen. Ich setze das einfach auf 24 und habe mein Vielfaches von acht, nett und ordentlich. Jetzt kann ich die beiden verschachtelten Frames auswählen, die ich erstellt habe, und ich erstelle einen weiteren Auto-Layout-Rahmen um sie herum. Jetzt kann ich sie so positionieren, dass sie nett sind, alle in der Mitte, z. B. und ich muss schauen, was ich mit dieser Bar hier machen werde. Also würde ich sagen, dass diese Leiste, ich könnte bei ihrem eigenen Element belassen, ihrem eigenen untergeordneten Element. Aber lass mich sehen, vielleicht habe ich später einen meiner verschachtelten Frames hinzugefügt . Okay, jetzt habe ich das hier oben. Ich habe, ich nenne das untere Leiste. Und ich nehme die Leitung. Lassen Sie mich das einfach in die Position bringen, in der ich sie haben möchte. Jetzt nehme ich meinen übergeordneten Container und verwandle ihn in einen Auto-Layout-Rahmen. Das sieht gut aus. Und jetzt legen wir das Größenänderungsverhalten fest. Also hier wähle ich diesen Rahmen erneut aus und drücke Enter Alle untergeordneten Elemente, um den Behälter zu füllen. Und ich stelle das hier ein, um den Behälter wieder zu füllen, mein Bild, ich lasse es repariert, repariert. Und diesen Behälter für den oberen Teil stelle ich auch vor, um einen Behälter zu füllen. Sehen wir uns den Hauptcontainer an, der auf hoc gesetzt ist. Ich werde das jetzt auf fix setzen, damit die Größe nicht geändert wird. Jetzt werfe ich einen Blick auf meine untere Leiste. Diese Bilder hier. Ich belasse sie bei Fixed und Hunk Content. Das ist alles in Ordnung. Hier. Wie zufrieden das gut aussieht, ihr Inhalt, großartig. Der übergeordnete Frame hat auch Inhalt. Und jetzt, was ich hier mache, ist, dass ich das auf Abstand dazwischen setze. Und dann muss ich mich hier nur noch um meine Linie kümmern , die ich einstellen werde, um auch den Behälter zu füllen. Okay, schauen wir mal, ob das funktioniert. Mein oberer Teil und meine Linie funktionieren also, aber ich habe vergessen, hier die gesamte Leiste zu setzen , um einen Behälter zu füllen. Lass uns die Größe noch einmal ändern. Fantastisch, das funktioniert. Wie Sie sehen können, ist es eigentlich nicht so , solange Sie einen strategischen Ansatz für das Auto-Layout schwierig, solange Sie einen strategischen Ansatz für das Auto-Layout verfolgen. Denken Sie nur an kleine Teile, die Sie zusammenkleben, und nicht an ein großes, überwältigendes Design. Ich verwende gerne den Ansatz, dass ich zuerst meinen verschachtelten Rahmen eingerichtet habe. Also zuerst denke ich an die Struktur, dann sagte ich die Größenänderung. Und am Ende müsste ich hier noch sicherstellen, hier noch sicherstellen dass alles ein Vielfaches von Acht ist und mein Hilfspunktabstandssystem respektiert. Und natürlich musste er sich auch mit klösterlichen Kindelementen befassen , um sicherzustellen, dass alles mit meinem Abstandssystem übereinstimmt. 24. NEU! AUTO LAYOUT: Variablen für Abstand und Polsterung: Verwendung von Variablen für Innenabstände und Abstände und Figma. Schauen wir uns zunächst die Sammlung an , die wir für unseren Abstand verwenden Klicken Sie auf den grauen Canvas-Hintergrund und dann sehen Sie lokale Variablen. Klicken Sie auf das lokale Variablenzeichen und Sie werden Ihre Sammlungen sehen. Sie können zu jeder Sammlung wechseln, die Sie bereits erstellt haben, und Sie können hier auch neue Sammlungen erstellen. Ich habe diese Variablen bereits für Sie erstellt. Wenn Sie jedoch mehr erstellen möchten, klicken Sie einfach auf Variablen erstellen. Dann würden Sie für den Abstand eine Reihe von Variablen verwenden, und Sie können jede andere Variable erstellen , die Sie möchten. Sie können auch Variablen dazwischen hinzufügen, indem Sie einfach die Variablen, die Sie erstellt haben, in Ihre Sammlung ziehen Ihre Sammlung Aber lass uns diesen hier löschen. Sie können dies tun, indem Sie mit der rechten Maustaste klicken und dann einfach auf Variable löschen klicken. Wie Sie sehen können, verwende ich für mein Abstandssystem ein Vielfaches von Acht Beachten Sie auch, dass Sie auf die Bearbeitungsvariable klicken und dann definieren können, wo diese Abstandsvariable verwendet werden soll Lassen Sie uns zunächst einfach unsere Sammlung schließen und diesen Abstand und diese Polsterung auf unsere Karte anwenden Dies funktioniert nur bei der Elementkonfiguration mit automatischem Layout. Lassen Sie uns unsere Karte auswählen Sie können sehen, dass derzeit auf dem übergeordneten Element hier kein Abstand festgelegt ist. Ich könnte einfach eine Variable auswählen , indem ich in das Feld auf dem Variablensymbol klicke und dann eine Variable aus meinem Drop-down-Menü auswähle. Dies würde jedoch zu mehr Abstand auf meiner Karte führen. Nun, ich will das nicht wirklich. Ich will diesen Abstand hier in meiner Karte haben. Dieser Teil ist hier, um die Polsterung hinzuzufügen. Ich werde diesen verschachtelten Rahmen für das automatische Layout auswählen. Sie können also sehen, dass dies bereits ein Vielfaches von Acht ist, aber ich möchte meine Variable verwenden, damit ich sicherstelle, dass alles in meinem Design aufeinander abgestimmt ist Auch hier wähle ich das Feld aus. Ich sehe die Variable C erscheinen. Klicke darauf. Ich kann jetzt meinen Abstandsblock M wählen. Ich werde ihn auch hier wählen, und ich kann ihn auch für den Abstand verwenden. Denken Sie daran, dass wir den Abstand dazwischen verwenden können. Aber ich wähle eine Variable und wieder die Acht, die ich zuvor schon manuell eingerichtet habe. Wenn wir das als Komponente einrichten und jetzt eine Instanz herausziehen, dann können Sie sehen, dass, wenn ich dieses verschachtelte Layout in meiner Instanz auswähle, die Variablen von der Hauptkomponente übernommen werden Wenn ich die Größe ändere, bleibt alles an seinem Platz und meine Variablen legen den Abstand und die Polsterung für diese legen den Abstand und die Polsterung für Wenn ich den Wert einer Variablen ändern würde, also lass uns einfach meinen Abstandsblock nehmen und die Zahl erhöhen, dann würde jede Stelle, an der ich diese Variable in meinem Design verwendet habe ich diese Variable in meinem Design 25. VARIABLEN: Beachten Sie, dass Variablen ein wirklich, wirklich großes und mächtiges Thema sind. Sie wurden Ende Juni 2023 eingeführt . Wenn Sie mit Variablen nicht vertraut sind, dann habe ich einen ganz eigenen, tiefen Einblick in dieses Thema. 26. NEU! AUTO LAYOUT: Einstellung einer minimalen und maximalen Breite: Mit Figma eine minimale und maximale Breite einrichten. Hier habe ich keine Autos mit automatischem Layout. Jetzt kann ich die Größe dieser Karte ändern, aber irgendwann wird sie zu schmal sein Irgendwann wird es zu groß sein. Was ich also tun wollte, ist, eine Mindestbreite wie hier festzulegen . Und eine maximale Breite. Beginnen wir mit einer Mindestbreite. Ich werde einfach die Größe ändern, bis ich denke, dass es hier immer noch gut aussieht Es werden also ungefähr 240 sein. Also ich kann hier rüber gehen und in der Breite sehe ich einen kleinen Fehler. Ich erhalte jetzt dieses Drop-down-Menü und kann die Mindestbreite der Anzeige auswählen. Und ich gebe hier einfach meine Nummer ein, die ich will, und das kann ich jederzeit ändern. Mal sehen, was passiert, wenn ich jetzt die Größe ändere. Du kannst sehen, dass ich immer noch genauso groß gehen kann. Aber wenn ich kleiner werde, kannst du sehen, dass, sobald ich diesen Schwellenwert erreicht habe, zwei rote Linien, eine PM, und ich daran gehindert werde, die Größe weiter zu ändern. Das Gleiche gilt für eine maximale Breite. Ich glaube, ich werde das hier ansetzen, vielleicht 450. Also das gleiche Verfahren mit einem Dropdown, füge eine maximale Breite hinzu, ich nehme 450 Und auch hier kann ich das jederzeit auf einen anderen Wert ändern. Wenn ich jetzt die Größe ändere, können Sie sehen, dass ich es noch weiter ziehen kann, aber ich kann die Größe zwischen diesen beiden Sätzen von Min und Max ändern zwischen diesen beiden Sätzen von Min und Und du kannst sie beide zusammen verwenden. Oder Sie können einfach Min oder Max verwenden, wenn Sie eine Komponente entfernen möchten, und wählen Sie dann einfach Ihre Komponente aus. Und du wirst sehen, dass hier Min und Max eingestellt sind, wenn du den Mauszeiger darüber bewegst. Und Sie können hier sehen, Min und Max entfernen. Sie könnten auch Variablen einrichten und sie dann als Min- und Max-Werte verwenden. Schauen wir uns das an. Wenn wir zu unserem Design springen, erstelle ich eine Sammlung mit einer Mindestbreite und einer maximalen Breite von 250.450. Wenn ich jedoch einfach die Karte auswähle, wähle „Variable anwenden und füge, sagen wir, die Mindestbreite hinzu. Dann würde dies als Mindestbreite hinzugefügt werden, wie die Hauptbreite der gesamten Karte Das hätte also nichts mit Min oder Max zu tun. Es wäre einfach so, wenn ich die Größe ändere, die Variable, die ich hier gesetzt habe, wegwerfe müsste ich zuerst min-width hinzufügen, dann erhalte ich ein neues Feld dann erhalte ich ein Und von hier aus kann ich jetzt meine Min-Width anwenden. Und dann mache ich dasselbe für die maximale Breite. Ich erhalte ein neues Feld und wende jetzt meine Variable für die maximale Breite an. Wenn ich jetzt die Größe ändere, dann ist das, wonach ich suche Jetzt kann ich daraus eine Komponente machen, eine Instanz herausziehen und Sie werden sehen, dass diese Instanz den festgelegten Min- und Max-Werten der Hauptkomponente folgt. Übrigens verwenden wir so viel weniger, aber beachten Sie, dass Sie Min und Max auch auf die Höhe setzen können 27. NEU! AUTO LAYOUT: Automatische Layoutumwicklung: Automatischer Layoutumbruch. Auf der linken Seite habe ich zwei Komponenten, eine Basiskarte und eine Newsletter-Karte. Und auf der rechten Seite habe ich einen Elternrahmen. Und in dem Rahmen der Eltern habe ich Exemplare dieser Karten. Jetzt können Sie diesen übergeordneten Frame hier sehen als automatisches Layout eingerichtet ist. Und seit Juni 2023 haben wir nicht nur das automatische horizontale und vertikale Layout eingerichtet, sondern wir haben auch Wrap. Mal sehen, was jetzt passiert, da ich das auf Horizontal eingestellt habe. Und Sie können sehen, dass sich die Größe ändert. Aber irgendwann müsste das in die neue Zeile überspringen. Hier kann ich Wrap verwenden. Hallo Anbieter, füge einfach diesen Wrap hinzu, dann wird nichts passieren, weil meine Komponenten immer noch mit Autolayout eingerichtet sind und sie nicht wissen an welchem Punkt ich möchte, dass sie kaputt gehen. Wir könnten sie vom Phil-Container auf eine feste Breite ändern . Jetzt haben sie eine feste Breite, wenn ich die Größe ändere, wird immer noch zur neuen Zeile gewechselt Aber ich brauche vielleicht etwas mehr Flüssigkeit. Ich möchte, dass das flüssig ist und bin an einem bestimmten Punkt zur nächsten Zeile übergegangen. Was ich also tun kann, ist eine Mindest- und eine maximale Breite festzulegen. Also werde ich das zu meiner Hauptkomponente hinzufügen. Fügen wir einfach eine Mindestbreite von 250 und fügen wir auch eine maximale Breite von Kein Newsletter. Ich werde vorerst nur eine Mindestbreite hinzufügen und sehen, wie das aussieht, weil ich es sehr mag , wenn es gestreckt wird. Was ich tun muss, ich muss den Elternteil auswählen. Wenn ich die Eingabetaste drücke, wähle ich alle Instanzen gleichzeitig aus. Und ich lege es jetzt zurück, um den Behälter zu füllen. Derzeit ist das Erben von Minmax immer noch ein wenig fehlerhaft. Also, was ich tun werde, ist, alle Instanzen erneut auszuwählen und sicherzustellen, dass ich die Größen zurücksetze. Sie müssen die Größen wirklich nur neu einstellen, wenn Sie Probleme haben. Andernfalls ist dies das Ergebnis , das Sie erhalten sollten. Jetzt, da die Instanzen ihre Mindestgröße erreicht haben, werden sie in die neue Zeile umgestellt 28. NEU! Einrichten einer gesamten Seite mit automatischem Layout: Lassen Sie uns eine ganze Seite mit automatischem Layout einrichten. Hier habe ich eine Basisseite eingerichtet. Es enthält eine Navigation sowie drei Instanzen von Karten mit automatischem Layout. Alles ist bereits in einem automatischen Layout eingerichtet, sodass meine Navigation bereits so eingerichtet ist , dass der Abstand dazwischen eingehalten wird und reagiert. Meine Karten sind auch mit automatischem Layout eingerichtet. Wenn ich jedoch die Größe meines übergeordneten Frames ändere, reagieren sie nicht Wenn ich den übergeordneten Frame einfach in einen Auto-Layout-Frame verwandle , wird das nicht funktionieren, weil dann alle vertikal verteilt werden. Ich muss etwas Struktur hinzufügen, indem ich das automatische Layout von Nesting verwende. Zuerst. Ich wähle alle drei Karten und erstelle einen automatischen Layoutrahmen um sie herum. Der Zwischenraum ist jetzt im Grunde meine Dachrinne , die ich anpassen kann Jetzt kann ich den Rahmen meiner Eltern verwenden und ein automatisches Layout hinzufügen. Stellen Sie sich Ihr Design im Grunde als verschiedene Abschnitte , die Sie mit dem endgültigen automatischen Layout auf einem übergeordneten Frame verbinden . Jetzt füge ich die Größenänderung hinzu. Und was ich gerne mache, ist, von der untersten untergeordneten Elemente, also von der Mitte, bis zum übergeordneten Frame vorzugehen der untersten untergeordneten Elemente, also von . Ich wähle jetzt meine Kartengruppe aus und drücke die Eingabetaste. die Eingabetaste drücke, wähle ich alle Kinder in diesem automatischen Layoutrahmen aus. Und ich werde jetzt die Größenänderung für all diese untergeordneten Elemente ändern, um den Container horizontal zu füllen. Wenn ich also erneut die Kartengruppe Set apparent frame auswähle, kann ich das testen und ich kann sehen, dass das gut funktioniert. Der Inhalt dieser Fahrzeuggruppe reagiert also. Aber wenn ich die Größe des übergeordneten Frames ändere, weiß Web selbst noch nicht, was zu tun Einige müssen auch die gesamte Gruppe so einstellen, dass der Behälter gefüllt wird. Also lass uns das noch einmal verstehen. Diese Gruppe ist so eingestellt, dass sie den Behälter füllt, und ältere Kinder in dieser Gruppe sind ebenfalls so eingestellt, dass sie den Behälter füllen. Das sind zwei verschiedene Dinge. Ich werde die Navigation so einstellen , dass auch der Behälter gefüllt wird. Und jetzt ändere ich die Größe des Elternteils. Und Sie können sehen, dass das funktioniert. Jetzt, wo es vielleicht funktioniert, funktioniert der automatische Layoutrahmen. Ich kann ein bisschen einrichten und aufräumen, bis die Abstände eingehalten werden. Der Abstand hier wäre der Abstand zwischen meinen verschiedenen Abschnitten und Rand, den ich mit horizontaler Polsterung festlegen könnte Ich glaube, ich werde mich für Top Zero entscheiden. Und ich möchte nur ein bisschen Platz auf der Unterseite schaffen, damit mein Design atmen kann. Update Figma hat die eingeführten Variablen. Ich könnte diese Variablen also auch verwenden , um meine Abstandswerte festzulegen. Jetzt möchte ich noch einmal erwähnen , dass ich dieses Padding auch zu meiner Kartengruppe hätte hinzufügen können, liegt ganz bei dir Das Wichtigste ist, konsistent zu sein. Es hängt auch stark davon ab , was Sie bauen. Das funktioniert zum Beispiel, weil meine Navigation nicht über die gesamte Breite geht. Nehmen wir an, diese Navigation hätte eine Hintergrundfarbe, dann wäre das sicherlich nicht die ideale Lösung. Also, wenn ich will, dass wir arbeiten und ich trotzdem die 48 Rand behalten will trotzdem die 48 Rand behalten will, die ich jetzt hier auf dem Elternrahmen für links und rechts habe, muss ich das zuerst den Eltern abnehmen. Also setze ich das auf Null. Und ich setze das hier auf Null. Jetzt ist alles in voller Breite. Ich füge jetzt die 48 wieder zur Navigation hinzu. Ich wähle die gesamte Kartengruppe und füge 48 hinzu. Lassen Sie uns nun die Größe ändern, um zu sehen , ob alles funktioniert. Und das funktioniert einwandfrei und ich habe jetzt eine Navigation in voller Breite Sobald Sie eine klare Vorstellung von Ihren Abschnitten und Ihren Größenänderungseinstellungen haben Ihren Abschnitten und Ihren Größenänderungseinstellungen und was Sie erreichen möchten Es geht buchstäblich darum, mit Ihrem Layout zu spielen. Probiere es aus, dupliziere Karten und Gegenstände hintereinander und nimm auch einige davon mit. Und Sie können die Größenänderung sowie Ihre Ränder weiterhin individuell ändern. Versuchen Sie außerdem, Text hinzuzufügen, achten Sie darauf, dass Sie beim Hinzufügen neuer Gruppen immer verschachteln. Und Sie könnten sogar ganze Abschnitte hinzufügen , wie zum Beispiel einen Intro-Bereich Stellen Sie sicher, dass Sie die Margen konsistent halten. Also hier würde ich noch einmal 48 hinzufügen. Und dann spielen Sie einfach mit Hintergrundeinstellungen, Rändern und Abständen herum . Richten Sie also nicht eine ganze Seite ein und versuchen Sie dann, überall Autolayout hinzuzufügen Fangen Sie zunächst mit den kleinsten Komponenten an, Ihren Navigationen, Ihrer Karte, all Ihren verschiedenen Abschnitten arbeiten Sie sich nach oben, bis Sie am Ende den übergeordneten Frame erstellen Dadurch bleibt es einfach und skalierbar. Lassen Sie uns das etwas weiter vorantreiben und an unsere Helfer erinnern, von denen wir bereits erfahren haben Fangen wir hier mit dem Text an. Moment haben wir also entweder die Wahl zwischen dem Füllen des Containers und dann wird die Größe mit den Eltern Aber dann könnte es irgendwann zu groß werden. Wenn wir das ändern und die Größe ändern, haben wir eine feste Größe, aber dann reagiert unser Text nicht Ich könnte jedoch Maya max-width verwenden, um Also werde ich die maximale Breite verwenden und das auf etwa 900 einstellen Und dann muss ich nur sicherstellen, dass ich das so einstelle, dass der Behälter gefüllt wird. Lassen Sie uns überprüfen, ob die maximale Breite noch vorhanden ist. Ja. Und jetzt können wir sehen, dass alles gut an Ort und Stelle bleibt und wenn ich kleiner auswähle, wird es mit der neuen Größe genommen. Jetzt fügen wir noch ein paar Karten hinzu. Also möchte ich all diese hier und da hinzufügen nur eine einzige Karte, die dieselbe Instanz wie die anderen ist. Ich habe gerade schon einige Inhalte hinzugefügt, also lass uns sie hier reinstellen und du kannst sehen , dass sie jetzt genau das tun. Ich möchte, dass sie in der nächsten Zeile eingeschlossen werden. Wir wissen also, dass wir hier unsere Wrap-Funktion und das automatische Layout verwenden könnten . Also habe ich das auf den Elternrahmen gesetzt. Aber im Moment passiert nichts , weil diese Karten keine feste oder minimale Breite haben. Also, was ich tun werde, ist, einen Elternteil auszuwählen. Ich drücke die Eingabetaste und habe jetzt alle untergeordneten Elemente ausgewählt. Also alle Karten. Und ich kann jetzt eine Mindestbreite hinzufügen, und ich tippe das einfach von Ich könnte dafür auch Variablen verwenden. Also habe ich eine Mindestbreite von 250, und ich könnte auch eine maximale Breite festlegen Machen wir einfach das von, sagen wir 450. Verschieben wir das also einfach ein wenig nach oben und ändern wir die Größe. Und dann kannst du dir vorstellen, dass das dort funktioniert. Sie werden hier feststellen, dass es nicht immer gleichmäßig verteilt wird. Was du tun könntest, ist, hier eine Geisterkarte hinzuzufügen , wenn du willst, dass sie alle gleich sind, und dann könntest du das auf Null setzen. Sie können auch eine Komponente einrichten , die Sie Ghost oder Space SAP nennen könnten. Aber eigentlich belasse ich es einfach so im natürlichen Zustand. Jetzt wollen wir nur noch unseren Food-Tab hinzufügen. Und beachten Sie, dass ich möchte, dass sich die Größe dieses Lebensmittelsets ändert, aber ich möchte, dass die Allgemeinen Geschäftsbedingungen auf der rechten Seite stehen Ich wähle diesen Rahmen aus. Und dann denk dran, wir können auch hier entweder tippen oder wählen. Oder wir können in unsere Ausrichtung klicken und einfach X drücken, um zwischen Auto und dem Leerzeichen dazwischen umzuschalten Also jetzt füge ich einfach diesen hier hinzu. Lass uns das aufräumen. Ich möchte das außerhalb meiner Kartengruppe haben. Wenn du ein Chaos anrichtest, geh einfach zurück. Jetzt ziehe ich das wieder rein und das ist es, wonach ich suche. Schauen wir uns das also genau an. Wenn das funktioniert, wählen wir diesen Balken und stellen sicher, dass er auf „Füllen “ eingestellt ist. Ja. Und jetzt sollte alles funktionieren, damit Sie sehen können, dass mein Text vorhanden ist. Meine Karten passen die Größe gut an und meine Fußzeile reagiert auch auf jede Größenänderung wirklich alle automatischen Layout-Funktionen verwendet In diesem kleinen Beispiel werden wirklich alle automatischen Layout-Funktionen verwendet, das könnte ein wenig überwältigend sein Keine Sorge, nimm einfach Schritt für Schritt ein Element nach dem anderen 29. AUTO LAYOUT: 13 gleiche Höhe für alle Kinder: Einstellungen, gleiche Höhe für alle Elemente mit automatischem Layout sind eigentlich ziemlich einfach. Hier habe ich vier verschiedene Auto-Layout-Karten und Sie können sehen, dass sie alle bereits responsiv eingerichtet sind. Aufgrund der unterschiedlichen Inhaltslänge haben sie unterschiedliche Höhen. Meistens ist das in Ordnung, aber es kann Fälle geben, in denen alle diese Karten die gleiche Höhe haben sollen. Wenn wir nach Cannes auf feste Höhe setzen würden, die Wagen jedoch reagieren die Wagen jedoch nicht mehr auf sich ändernde Inhalte und Größenänderungen. wollen wir also nicht wirklich. Was wir wirklich wollen, ist die Karte mit dem meisten Inhalt zu diktieren, die Höhe für alle anderen. Und es gibt einen kleinen Trick , mit dem das funktioniert. Zunächst müssen wir einen übergeordneten Rahmen dafür erstellen . Also wählen wir alle unsere untergeordneten Elemente aus, drücken die Umschalttaste a und erstellten einen Auto-Layout-Rahmen um sie herum. Ich rufe diesen Elternteil an. Ich gebe diesen Eltern- und Hintergrundfarbe und füge etwas Polsterung hinzu. Jetzt wähle ich das übergeordnete Element aus und drücke die Eingabetaste, um alle meine untergeordneten Elemente auszuwählen. Und ich werde sie jetzt so einstellen, dass sie sich vertikal anfühlen und den Behälter horizontal füllen. Mein übergeordneter Container muss ich jetzt auf fixiert und umarmen. Und jetzt sieht man, dass sich alles gut verteilt , auch wenn man die Größe ändert. Wenn wir den Inhalt ändern würden, würde sich das auch automatisch anpassen. Es wird sich also immer an die Karte mit dem meisten Inhalt anpassen . Schlüssel hierbei ist, dass die Elemente auf Füllhöhe eingestellt sind und das übergeordnete Element auf Umarmung eingestellt ist. Wenn Sie möchten, dass einige der Elemente unten haften bleiben, wählen Sie einfach die Karte aus, gehen Sie zum Menü Erweitert und wechseln Sie in den Abstand dazwischen, horizontal als auch vertikal funktioniert. 30. AUTO LAYOUT: 14 Stacking: In Ihrem Design haben Sie wahrscheinlich Abschnitte, in denen Sie mehrere Karten oder ähnliche Elemente haben mehrere Karten oder , die Sie stapeln möchten. meinem Beispiel könnten meine Karten in Reihen oder in Spalten verteilt werden . Fangen wir hier mit meinem ersten Beispiel an. Alle meine Karten sind bereits als reaktionsschnelle Auto-Layout-Frames eingerichtet . Also wähle ich alle Karten in einer Reihe aus. Und das können so viele sein, wie du willst. Erstellen Sie dann einen verschachtelten Auto-Layout-Rahmen. Also drücke ich die Umschalttaste. Ich mache das für alle meine Reihen. Ich wähle jetzt den übergeordneten Frame und wende hier auch das automatische Layout an, entweder durch Drücken der Umschalttaste a oder über das Menü. Jetzt muss ich nur noch meine Größenänderung einstellen. Ich wähle meinen Rahmen aus und drücke die Eingabetaste. Jetzt kriege ich die Reihen. Ich werde sie schon so einstellen, dass sie den Behälter füllen. Ich drücke erneut die Eingabetaste, und jetzt erhalte ich alle untergeordneten Elemente, in denen sich alle Karten befinden , und ich stelle sie so ein, dass sie auch den Behälter füllen. Wenn ich jetzt die Größe des übergeordneten Rahmens ändere, verteilen sich alle meine Karten gut. Wenn ich den Inhalt ändern würde, passt sich das automatisch an. Und ich könnte z.B. mehr Karten zu einer Reihe hinzufügen. Sie würden dann in dieser Reihe gleichmäßig verteilen. Ich muss also nicht in allen Zeilen die gleichen Beträge haben. Wenn ich möchte, dass meine Karten die gleiche Höhe haben, könnte ich das auch tun. Drücken Sie die Eingabetaste, drücken Sie erneut die Eingabetaste, um wirklich zu den untergeordneten Elementen zu gelangen und die Höhe zum Füllen des Behälters einzustellen. meinem zweiten Beispiel möchte ich, anstatt Zeilen zu erstellen, Spalten erstellen. Also wähle ich alle Karten in einer Spalte aus. Und ich drücke Shift a, um einen Auto-Layout-Rahmen um ihn herum zu erstellen. Ich mache genau dasselbe mit meiner zweiten Kolumne. Wähle nicht den Rahmen meiner Eltern aus. Und ich verwandle das auch in einen Auto-Layout-Rahmen. Ich werde nur ein bisschen aufräumen. Also hier rein, lass uns den Abstand für beide bei 40 haben. Und ich will auch den Abstand dazwischen bei 40. Also, wenn ich jetzt nur noch meine Größenänderung einstellen muss , also drücke ich die Eingabetaste, dann erhalte ich meine Spalten und ich habe gesagt, dass sie den Behälter füllen sollen. Drücken Sie erneut die Eingabetaste. Jetzt bekommt es alle meine untergeordneten Elemente, alle meine Karten, und ich stelle sie so ein, dass sie auch den Behälter füllen. Wenn ich jetzt die Größe ändere, reagiert mein Design auf Spalten. Und hier ist es genauso. Sie können einfach einzelne Karten zu allen Ihren Spalten hinzufügen. Sie können Ihrem Design auch ganze Säulen hinzufügen. In meinem Beispiel habe ich alles eingestellt, um den Behälter zu füllen. Aber was ich auch tun könnte, ist, dass ich eine Spalte auswählen und sie auf feste Breite setzen könnte. Jetzt hätte ich eine feste Spalte und alle anderen würden reagieren. Du kannst also wirklich damit spielen. 31. AUTO LAYOUT: 15 Einschränkungen der automatischen Layout und deren Lösung: Auto-Layout ist erstaunlich, aber es gibt auch eine Einschränkung. Lassen Sie uns das untersuchen und lassen Sie mich Ihnen auch einen kleinen Workaround zeigen. Also hier habe ich einen Auto-Layout-Rahmen , der Auto-Layout-Karten enthält. Und diese Karten sind bereit, einen Behälter zu füllen. Wenn ich die Größe ändere, wirst du sehen , dass das perfekt funktioniert. In diesen Beispielen hatten wir also immer eine gleiche Verteilung aller drei Karten. Wenn ich das nicht möchte, könnte ich eine Karte auswählen und sie auf feste Breite ändern. Wenn ich das mache, behält diese Karte die Breite, die ich ihr gegeben habe, und alle anderen bleiben flüssig. Und das sind so ziemlich zwei Optionen , die mir mit Auto-Layout gegeben werden. Was also mit Auto-Layout nicht funktioniert , ist, dass ich eine Verteilung wie diese habe, z. B. dass ich 40 Prozent für ein Element verbrauche und den Rest dann um 20 Prozent verteile. Lassen Sie mich Ihnen dieses vereinfachte Beispiel zeigen. Also hier habe ich einen Auto-Layout-Rahmen , der zwei Bilder unterschiedlicher Breite enthält. Sie sind derzeit auf feste Breite eingestellt. Wenn ich es ändere, um den Behälter zu füllen können Sie sehen, dass die Bilder sofort auf eine neue gleiche Größe springen. Es spielt keine Rolle, wie viele Bilder sich in Ihrer Reihe befinden. Sie haben immer die gleiche Breite, wenn der Behälter gefüllt werden soll. Nehmen wir an, ich will das nicht, ich möchte, dass dieser wieder seine ursprüngliche Größe annimmt. Schau mal, was passiert , wenn ich die Größe ändere. In meinem Resize-Menü. Es wurde jetzt von Phil auf automatisch behoben geändert. Wenn ich also die Größe des übergeordneten Rahmens ändere, wird die gesamte Breite verwendet. Ein Bild bleibt jedoch fixiert und das andere verwendet den verbleibenden Speicherplatz. Es gibt also keine Möglichkeit, die Proportionen mit dem automatischen Layout beizubehalten . Was ich tun könnte, wenn ich eine solche Verteilung haben möchte ist das automatische Layout von meinem übergeordneten Frame zu übernehmen. Und jetzt wende ich ein Gitter an. Ich gehe zu den Spalten und füge ein bisschen Spielraum hinzu. Und jetzt kann ich sie so einrichten , dass sie in die Spalten passen. Und Sie können sehen, dass ich jetzt eine ungleiche Verteilung von 2,3 habe. Wenn ich sie jetzt auf links und rechts setze und die Größe des übergeordneten Rahmens ändere, behalten sie diese Proportionen bei. Wir können natürlich vom Netz abschalten und diesen wirklich schönen Effekt erzielen. Kehren wir zu unserem ursprünglichen Beispiel zurück. Was ich hier gemacht habe, ist, dass ich das automatische Layout vom übergeordneten Hauptrahmen und ein Raster angewendet habe. Beachten Sie, dass alle anderen Elemente wie meine Karte und meine Navigation immer noch wie zuvor mit automatischem Layout eingerichtet sind. Auto-Layout funktioniert also innerhalb dieser Elemente, aber um sie herum habe ich jetzt meine Einschränkungen angewendet und sie alle auf links, rechts gesetzt, um auf das Raster zu reagieren. Also, wenn ich jetzt die Größe des Rasters ändere, dann funktioniert das innerhalb des Karten-Auto-Layouts. Die Elemente verhalten sich jedoch mit dem Raster. Da ich das Raster verwende, kann ich jetzt die Anzahl der Spalten ändern, die sie belegen. Hiermit ändere ich die Verteilung in meinem Design nach meinen Wünschen. Und das würde immer noch funktionieren. Schalten Sie natürlich aus dem Netz. Und Sie erhalten ein Layout wie dieses mit ungleicher Verteilung. Leider ist dies möglicherweise auch keine perfekte Lösung. Wie bei wachsendem Inhalt können Sie beim Entfernen des automatischen Layouts möglicherweise den horizontalen Abstand nicht beibehalten . Dies ist jedoch ein Figma-Problem. Dies wird später kein Problem mit CSS sein. 32. AUTO LAYOUT: 16 Einschränkungen und den automatischen layout: Lassen Sie uns das automatische Layout und die Einschränkungen zusammenfassen und vergleichen , um zu verstehen, wann was verwendet werden muss. Auto-Layout ist zweifellos eine leistungsfähigere Funktion und Sie werden es wahrscheinlich auch ein bisschen mehr verwenden. Wir haben Richtungen, wir haben Abstände zwischen Elementen, horizontale und vertikale Polsterung können wir einstellen, wir können sie mit dem automatischen Layout ausrichten. Und wir haben natürlich unser Menü zum Ändern der Größe sowie die Superkraft verschiedene Auto-Layouts zu verschachteln und all diese Funktionen mit Einschränkungen zu kombinieren all diese Funktionen mit Einschränkungen Wir können horizontale und vertikale Einschränkungen festlegen. Und wir können auch feste Elemente setzen. Beachten Sie, dass Sie Einschränkungen verwenden müssen, wenn Sie feste Elemente in einem Prototyp festlegen , wenn Sie feste Elemente in einem Prototyp möchten. Sie haben diese Option nicht mit automatischem Layout. In größeren Projekten trennen Sie wahrscheinlich das Prototyping in einer festen Größe von Ihrem responsiven Design in einer anderen Datei. Wie dem auch sei, das ist also nicht wirklich ein Problem. Lassen Sie uns die Vorteile und Einschränkungen beider zusammenfassen wenn es darum geht, Elemente wie Abschnitte oder ganze Seiten einzurichten . Auto-Layout ist also perfekt. Wenn Sie eine gleiche Verteilung haben. Bei ungleichmäßigen Verteilungen funktioniert es nicht gut , denn wenn Sie sagen, dass alle Ihre untergeordneten Elemente den Behälter füllen sollen, erhalten sie immer automatisch die gleiche Größe. Das wird also nicht funktionieren. Wenn Sie mit einem oder mehreren Elementen arbeiten möchten , die repariert werden und das andere flüssig ist. Das ist beim Auto-Layout kein Problem und funktioniert einwandfrei. Einrichten Ihrer Komponenten. Im Auto-Layout ist das im Allgemeinen eine wirklich gute Idee und es wird die meiste Zeit funktionieren. Benoten Sie einfach. Hier sprechen wir wirklich von einer Schaltfläche und bis hin zu verschachtelten komplexen Elementen wie Karten, Navigationen fallen herunter. All das sollte im Auto-Layout eingerichtet werden. Sie können dann diese responsiven Autolayout-Komponenten entweder innerhalb einer gesamten Autolayout-Setup oder innerhalb eines Layouts mit Rastern und Abhängigkeiten verwenden diese responsiven Autolayout-Komponenten entweder innerhalb einer gesamten Autolayout-Setup entweder innerhalb einer gesamten Autolayout-Setup . Alle diese kleinen Elemente hier wären also immer noch automatisches Layout, jedoch in einem Raster und verwenden Einschränkungen. Schauen wir uns das an. Gleichverteilung funktioniert einwandfrei. Wie du es sehen kannst. Sie könnten beide Ansätze verwenden. In diesem Fall sollten Sie wahrscheinlich nach Möglichkeit den Auto-Layout-Ansatz wählen, da der einzige Nachteil, den Sie bei Gittern und Einschränkungen besteht, dass der horizontale Abstand nicht eingehalten wird. Dies ist ein Figma- und kein CSS-Problem. Wenn Sie eine ungleichmäßige Verteilung verwenden und mit Reaktionsfähigkeit arbeiten möchten. Und das ist wirklich ein Grund, sich für Einschränkungen und Gitter zu entscheiden. Denken Sie daran, dass alte Komponenten, die Sie im Raster platzieren werden, immer noch reagieren. Die einzige Einschränkung, die Sie haben werden, ist das horizontale Auffüllen mit wachsendem Inhalt , der nicht beibehalten wird. Wenn Sie feste und flüssige Elemente kombinieren möchten, können Sie dennoch Raster und Abhängigkeiten verwenden , indem Sie einfach einen Rahmen mit einem Raster verschachteln. Es könnte jedoch eine etwas hackige Lösung sein. Es hängt wirklich davon ab, was Sie in Ihren Komponenten bauen, es sei denn, Sie haben einen wirklich guten Grund. Warum Verwenden Sie Einschränkungen nicht nur, weil, wie Sie sehen, der Rand nicht beibehalten wird. Sobald Sie die Größe ändern, laufen die Dinge ineinander. Auch dies ist ein Figma - und kein CSS-Problem. Wie Sie sehen, geht es wirklich darum, was Sie erreichen möchten. Es hängt von Ihrem Team ab, wann Sie das Setup haben, Sie entscheiden , ob Sie mit Ihrem Entwicklungsteam sprechen. Und denken Sie daran, dass Figma nur ein Werkzeug ist , um zu demonstrieren, was Sie bauen möchten. Sie bauen das Endprodukt nicht und es ist in Ordnung, wenn Sie einige dieser Elemente dokumentieren und darüber sprechen müssen dokumentieren und . 33. AUTO LAYOUT: 17 Bilder des Formats mit festem Seitenverhältnis: Sie haben vielleicht bemerkt , dass es derzeit keine Möglichkeit gibt , das Seitenverhältnis von Bildern in Figma beizubehalten. Was heißt das? Das bedeutet, dass die Höhe und Breite dieses Bildes, wenn ich die Größe ändere, nicht proportional skaliert werden. Das funktioniert vielleicht mit einigen Bildern, aber manchmal möchten Sie diese Größe einfach beibehalten. Es gibt einen kleinen Trick, den du benutzen kannst. Gehen Sie zum Community-Bereich und geben Sie das Seitenverhältnis ein. Sie erhalten einen Überblick über mehrere Dateien. Ich persönlich benutze diesen gerne, aber wahrscheinlich werden die meisten von ihnen einwandfrei funktionieren. Doppelklicken Sie und klicken Sie dann auf, holen Sie sich eine Kopie. Die Datei wird nun auf Ihr Figma-Konto dupliziert . In der Akte finden Sie eine gute Erklärung. Wer also wirklich verstehen will, wie das alles funktioniert, wird hier alles ausführlich erklärt. Wenn du faul sein willst, nimm einfach das Seitenverhältnis, das du suchst. In meinem Fall sind es also 16 mal neun. Und dann kopiere ich es springe zurück zu meiner Akte. Und ich werde es jetzt einfach hier einfügen. Also, wenn ich das Bild austauschen und dieses hinzufügen würde , mache es einfach etwas kleiner, damit es passt. Füge das hier hinzu, lass uns meinen Kaffee entfernen oder lass es uns stehen, damit du den Unterschied sehen kannst. Dann habe ich es auch so eingestellt, dass es den Behälter füllt. Und jetzt, wo ich die Größe ändere, können Sie sehen, dass das Seitenverhältnis beibehalten wird und dieses nicht. Also was ich tun möchte, ich möchte einfach dieses Bild hier einfügen. Lass uns das rausnehmen. Und jetzt stellen wir zunächst sicher, dass dies das richtige Seitenverhältnis hat, das ich möchte. Da ich also mit 16 bis neun arbeite, schneiden wir es hier ab und setzen dann 160, und stellen Sie dann sicher, dass dies auf 90 eingestellt ist. Großartig. Sie können auch einen Rahmen zeichnen, der auf 16 mal neun gesetzt ist, und dann einfach das Bild oben hinzufügen. Was ich jetzt tun muss, ich muss das exportieren. Ich werde es mit der dreifachen Größe, JPEG, exportieren und es exportieren. Großartig. Jetzt wähle ich das Bild hier und ich werde dieses Overlay tatsächlich löschen. Das ist also das wahre Bild. Und ich werde das Bild wählen. Und ich wähle das Bild aus, das ich gerade exportiert habe. Und jetzt befindet sich das in diesem Setup und Sie können sehen, dass dies ein ziemlich komplexes Setup ist. Wenn ich jetzt die Größe ändere, wird das Seitenverhältnis beibehalten. 34. BREAKPOINTS: 01 Eine Ausführung funktioniert nicht für alle Größen: Ein Design funktioniert nicht für alle Größen. Was meine ich damit? Okay, jetzt richten wir unsere responsiven Seiten und Komponenten ein. Wir stecken jedoch immer noch mit einem Problem fest. Das gleiche Design funktioniert nicht von mobilen bis hin zu größeren Desktops. Mit einem Schritt. Es funktioniert nur innerhalb eines bestimmten Bereichs. Wie können wir damit umgehen? Was wir tun müssen, ist, dass wir verschiedene Bereiche für unser Design einrichten müssen . Hier kommen Breakpoints ins Spiel. Ein Breakpoint definiert einen bestimmten Punkt an dem sich das Design anpassen kann. Während wir also immer noch responsives Verhalten zwischen diesen Breakpoints verwenden , haben wir uns ein allgemeines Layout überlegt sobald wir einen neuen Bereich betreten haben. In meinem Beispiel hier konnten Sie sehen, dass ich bis zum Haltepunkt a mein mobiles Setup habe, also ist dies meine Standardeinstellung. Und dann ändere ich ab Haltepunkt a die Navigation und ich ändere das allgemeine Layout ein wenig. Das funktioniert bis zum Bruchpunkt B. Was ich dann wieder bin, benutze die gleichen Elemente, passe Delay Out an die Arbeit an der neuen Bildschirmgröße an. Das bedeutet nicht , dass sich alles an einem bestimmten Haltepunkt anpassen muss. Wie Sie sehen können, bleibt meine Navigation hier dieselbe. Während Figma großartige Funktionen bietet , um mit responsivem Design umzugehen, nämlich Autolayout-Einschränkungen und Raster. Es gibt uns derzeit keine Automatisierung zum Einrichten von Breakpoints. Also müssen wir das selbst einrichten. 35. BREAKPOINTS: 02 Überlege die Anpassung der einzelnen Komponenten, nicht der gesamten Seiten!: Es ist wichtig, an Komponenten zu denken die nicht ganze Seiten anpassen. Es geht wirklich nicht darum, pro Breakpoint eine ganz neue Seite einzurichten . Denken Sie daran, dass wir mit einem komponentenbasierten Designansatz arbeiten. Es geht also wirklich darum zu überlegen , an welchem Breakpoint sich eine Komponente anpasst. Und es gibt verschiedene Möglichkeiten, wie dies geschehen kann. Manchmal müssen Sie die gesamte Komponente ändern, z. B. auf einem kleineren Bildschirm haben Sie möglicherweise eine Burger-Menünavigation, die sich in eine Navigationsleiste mit Links auf größeren Bildschirmen ändert . Elemente wie Karten oder Heldenbereiche benötigen möglicherweise ein völlig anderes Setup für kleinere und größere Bildschirme. Sie können sogar entscheiden, bestimmte Elemente für kleinere oder größere Bildschirme ganz hinzuzufügen oder zu entfernen . In vielen Fällen ist es jedoch effizient, nur den Raum und das Element anzupassen . Dies könnte dieselbe Karte sein, die auf allen Bildschirmen verwendet wird. Wir würden jedoch anders verteilen, also unterschiedlich viele Karten pro Reihe. Und wir könnten auch die Breite angeben. Dies kann in Prozent oder in einer bestimmten Anzahl von Rasterspalten erfolgen . Es hängt wirklich davon ab, wie Ihre Seiten eingerichtet sind. Und natürlich können auch Gesamtelemente wie Ränder und Polsterungen sowie die Textgröße angepasst werden. Sie können also sehen, dass es wirklich darum geht, jedes Element und jeden Breakpoint einzeln zu betrachten . Wir wollen generell so wenig wie möglich und so viel wie nötig ändern . Halte es einfach. 36. BREAKPOINTS: 03 Breakpoints in CSS: Bevor wir unsere Breakpoints in Figma einrichten, wollen wir zunächst verstehen, wie sie in CSS funktionieren. In CSS werden Breakpoints mit den sogenannten Medienabfragen implementiert. Eine Medienabfrage besagt im Grunde Pay-Browser, überprüfe die Breite. Und wenn es größer oder kleiner als x ist, dann zeige hier das Design oder die Änderungen an, die ich für dich definiert habe. Sie können so viele Medienabfragen einrichten, wie Sie möchten oder benötigen. Sie werden jedoch feststellen , dass die meisten Designs etwa drei bis fünf verwenden. Vielleicht haben Sie zuerst von dem Begriff Handy gehört. Kurz gesagt, das bedeutet, dass Sie zuerst das kleinste Design einrichten Sie können sich dies als Ihre Basiseinstellung für die gesamte Seite vorstellen . Dann nur, wenn du etwas anpassen willst, z.B. an meinem Fall, meiner Überschrift auf dem Handy, das könnte eine 32 oder an RAM sein. Und ich möchte, dass es größer ist, also sind es 64 oder vier RAM auf einem größeren Bildschirm. Dann würde ich diese Einstellung überschreiben. Alles andere wird an Ort und Stelle bleiben. Es würde also dieselbe Schriftstärke, dieselbe Zeilenhöhe usw. verwenden . Nur wenn ich es in der nächsten Medienabfrage abbreche , dann wird es überschrieben. Wie Sie sehen, ist dies der Grund, warum wir nicht an jedem neuen Breakpoint ein komplettes Design erstellen und dokumentieren müssen . Wir müssen die Basis, die wir haben, und dann alle Änderungen , die von dort aus eintreten werden, dokumentieren . Dies bedeutet auch nicht unbedingt , dass alle Ihre Designs auf Mobilgeräten eingerichtet sind. Und später werft ihr einen Blick darauf, was passieren wird. Denn wenn Ihre Hauptzielgruppe eine größere Bildschirmgröße ist, dann auf jeden Fall zuerst darauf ausgelegt und Figma. Wenn es jedoch um die Dokumentation geht, sollten Sie dies mit Ihrem Entwicklungsteam besprechen und wahrscheinlich zuerst alle Ihre Basiseinstellungen dokumentieren und dann nur sehen, was sich ändern würde. 37. BREAKPOINTS: 04 Welche Breakpoints sollte ich verwenden?: Welche Breakpoints sollten Sie verwenden? Wenn Sie mit einem bestehenden Projekt arbeiten, ist dies alles wahrscheinlich im Styleguide dokumentiert. In größeren Unternehmen haben sie wahrscheinlich ihre eigene Styleguide-Seite. Hier ist ein Beispiel für Jahrzehnte und das ist öffentlich. Sie können dies bei Decade Lawn Dot Design besuchen. Und es ist absolut fantastisch. Also würdest du hier auf Digital gehen. Und dann können Sie weiter unten sehen, Sie würden Richtlinien und Layout wählen. Sie können sehen, an welchem Produkt Sie gerade arbeiten. In unserem Fall werden das also Web-Richtlinien sein. Und dann können Sie die gesamte Dokumentation hier sehen. Sie können sehen, dass sie in ihrem Fall ein Rastersystem verwenden und Sie ältere Informationen erhalten. Und weiter unten finde ich Informationen über die Breakpoints, die sie verwenden. Möglicherweise wird Ihnen auch mitgeteilt , dass sie ein vorhandenes System verwenden und nur eine Standardeinstellung verwenden. In diesem Fall erhalten Sie wahrscheinlich einen Link zur Dokumentation. Und dann finden Sie in dieser Dokumentation normalerweise die Breakpoints. Also hier ist das z.B. Bootstrap und Sie können sehen, dass dies die verschiedenen Breakpoints sind und Sie diese Werte verwenden könnten. Hier ist ein weiteres Beispiel für Tailwind, und Sie können sehen, dass die Dokumentation variieren wird, aber sie wird immer ähnlich sein. Sobald Sie also wissen, wonach Sie suchen, können Sie sehen, dass dies die verschiedenen verwendeten Breakpoints sind . Und Sie können auch sehen, dass sie sich alle ziemlich ähnlich sind. Wenn es immer noch absolut keine Informationen gibt und Sie einfach mit allem gehen können, was Sie wollen. Dann empfehle ich Ihnen, gängige Systeme wie Rückenwind oder Bootstrap zu verwenden und einfach deren Breakpoints auszuwählen. Das bedeutet nicht, dass Sie das System danach oder andere Komponenten oder Einstellungen verwenden müssen. Absolut nicht , wenn wir vorerst einfach die Breakpoints bei der Einrichtung unseres Figma-Designs setzen. Wie wir bereits gesehen haben, sind Breakpoints in den meisten Systemen nicht identisch, aber sehr ähnlich. Dies liegt daran, dass Sie so viele Bildschirme wie möglich pro Bereich gruppieren . Manchmal finden Sie dies vereinfacht als Handy, Tablet, Laptop und Desktop. Es ist nicht wirklich so einfach, weil die Bildschirmgrößen sehr dynamisch sind, also verlassen Sie sich nicht darauf. Es geht wirklich darum, die meisten Bildschirmgrößen innerhalb dieser verschiedenen Gruppen zu erfassen. Also jemand, der das alles schon für mich recherchiert. Deshalb nehme ich persönlich gerne nur bestehende Breakpoints. Aber wenn Sie sich fragen, ob Sie einfach Ihre eigenen einrichten können, ja, theoretisch könnten Sie auch Ihre eigenen Breakpoints definieren. Jeder Wert würde funktionieren. Sie können auch die Haltepunkte des vorhandenen Systems ändern. Ich wäre jemals ein bisschen vorsichtig damit gewesen. Bleib lieber bei dem, was mir gegeben wurde und konzentriere dich auf mein Design. 38. BREAKPOINTS: 05 Setting in Figma: Wir lieben es also, dass Breakpoints bereit sind, aber wir haben keine Breakpoints in Figma. Was können wir tun? Nun, wir können unsere eigenen einrichten. Also hier sind die Breakpoints, die ich von meinem Team bekommen habe. Was ich jetzt tun werde, ist eine visuelle Darstellung der gegebenen Breakpoints in Figma zu erstellen eine visuelle Darstellung der . Auf diese Weise kann ich die verschiedenen Bereiche sehen , mit denen ich es zu tun habe. Also im Grunde, wie ich es mache, fange ich hier an, Sie können sehen, dass meine Basisgröße hier meine Standardeinstellungen sein wird. Und als kleinster Punkt verwende ich 320, was ein verwende ich 320, altes iPhone wie E ist . Also das ist alt und ziemlich klein, sollte wirklich eine der kleinsten Größen sein. Und dann ist das alles mein Standard und das geht hoch, bis ich treffe. Sie können hier S sehen, was 506, 76 ist. Das ist es also, was das einsetzt, und das ist jetzt meine S-Reihe. Und das wird alles funktionieren, bis ich 768 hatte und so weiter. Dann wäre der letzte hier mein extra großes, das bei 1200 beginnt. Das ist also die Mindestbreite, 1.200. Hier beginnt es also bei 1.200 und dann wäre alles darüber hinaus im Excel-Bereich. Also wir müssen das nur einmal für mein Projekt einrichten, und jetzt verwandle ich es in eine Komponente und ich kann jetzt Instanzen zum Testen verwenden. Manchmal füge ich gerne einige Anleitungen hinzu, um den Überblick zu erleichtern, aber das liegt ganz bei Ihnen. Und dann kopiere ich die Elemente , die ich als Komponenten einrichten möchte , und jetzt kann ich sie hier testen. Also habe ich normalerweise schon alles im Auto-Layout eingerichtet. Und jetzt kann ich sehen, bis zu welcher Größe die Dinge funktionieren. Und wenn ich mich anpassen muss. In dieser Testumgebung kann ich einzelne Komponenten testen. Ich kann den ganzen Abschnitt testen. Also zum Beispiel, wie etwas hintereinander funktioniert. Oder ich teste auch ganze Seiten. Normalerweise habe ich für all das eine eigene Seite eingerichtet und ich nenne das Responsive Testing. Das ist wirklich ein Spielplatz für mich. Und sobald ich eine klare Vorstellung davon habe, was funktioniert und was an welchem Haltepunkt angepasst werden muss, kann ich mit der Dokumentation beginnen. 39. BREAKPOINTS: 06 Reaktionskomponenten testen: Lassen Sie mich Ihnen ein Beispiel zeigen, wie ich eine tatsächliche Komponente teste. Wir nehmen die Navigation als Beispiel. Im Moment bin ich also auf meiner Designseite und so richte ich meine Projekte gerne ein. Das könnte für Ihr Team völlig anders sein. Ich habe gerne einen Abschnitt , der Entwicklung genannt wird. Hier leben also alle meine Designs. Und dann habe ich eine Seite, auf alle meine Stile und Komponenten dokumentiert sind. Dann habe ich noch einen Abschnitt, das Responsive Testing. Hier werden wir mit unserer Komponente spielen. Und ich habe noch einen namens Playgrounds. Hier kann ich also einfach verschiedene Designs ausprobieren und Dinge testen. Und ich habe eine namens Dateiverwaltung. Also hier füge ich Dinge hinzu, wie du meine Breakpoints, Überschriften und ältere Informationen sehen kannst . Das ist nicht wirklich Teil des Designs. Also könnte es hier eine Designseite geben. Normalerweise muss ich Bildschirmgrößen haben, also eine für Handys und eine für Desktop. Und ich halte mich gerne an die gleichen Größen. Also habe ich diesen hier, setze Edge 375 und meinen Desktop auf 1.440. Möglicherweise haben Sie unterschiedliche Größen. Das ist völlig in Ordnung. Ich mag es jedoch, sie in der gleichen Größe zu belassen , da dies meine Referenz ist , die ich später entwerfe, um meine Prototypen zu erstellen. Und dann werde ich bei meinen Responsive-Tests und bei meinen Komponenten sicherstellen, dass auch alle anderen Größen funktionieren. Wie Sie sehen können, habe ich für mein Handy eine Navigation mit einem Burger-Menü eingerichtet . Und ich weiß, dass ich auf größeren Bildschirmen etwas mit Links oder einer anderen Navigation haben möchte . Was ich jetzt herausfinden und dokumentieren muss , ist, was zwischen diesen Größen und sogar über die Größe hinaus passieren wird . Wahrscheinlich nett, kopieren Sie sie einfach und fügen Sie sie in mein responsives Test-Setup ein. Und ich habe diese Elemente bereits mit Auto-Layout eingerichtet, das kannst du genauso gut hier im Test machen, egal. Wichtig ist, dass Sie beim Testen ein responsives Element haben . Jetzt können Sie sehen , dass ich jetzt testen kann , bis zu welcher Größe sie funktionieren werden. Sie können also sehen, dass das Handy hier kein großes Problem ist, da das so ziemlich überall funktionieren wird . Aber dieser hier wird irgendwann auf das Logo stoßen. Außerdem möchte ich ein bisschen Platz haben, weil ich möglicherweise weitere Links hinzufüge. Also könnte ich davonkommen, was S nicht funktionieren wird. Em, ich könnte mit mir durchkommen, aber nicht ideal. Aber ab L sieht es nach einer sicheren Sache aus. Ich werde das wahrscheinlich mit ein paar weiteren Menüpunkten in einer Anzeige zu meiner Dokumentation testen , wie viele Links Sie hier haben können. Aber das werde ich vorerst belassen. Was ich gerne mache, wenn ich die Größen kenne, zeichne ich ein kleines Rechteck. Und ist es wirklich nur für mich, für meine eigene Orientierung? Und ich werde das mit einer Farbe markieren , die ich Helfer genannt habe. Jetzt weiß ich, dass dieser hier bei l beginnt. Und bis jetzt habe ich mein Menü, mein mobiles Menü läuft von Exzess, beginnt hier tatsächlich von Exzess bis n. Also deckt es diese drei ab Breakpoints und dann nur hier die Treffer ändern und ab L und M verwende ich ein anderes Design. 40. BREAKPOINTS: 07 Dokumentation der ansprechenden Komponenten: Nachdem ich meine Komponenten getestet habe, muss ich sie jetzt dokumentieren. Hier habe ich also meine Erkenntnisse und beschäftige mich jetzt mit Stilen und Komponenten. Und Sie können sehen, dass ich die Navigation bereits für Sie eingerichtet habe. Schauen wir uns das genauer an. Hier bewahre ich wirklich alle Hauptkomponenten auf und ich fange wirklich mit den kleinsten bis hin zu Atomen an. Sie können also sehen, dass dies hier das de logo ist und ich habe die verschiedenen Icons zum Öffnen und Schließen der Links, alles hier. Und dann können Sie sehen, dass ich hier Maya-Moleküle habe, also sind diese kombiniert. Und das ist im Grunde die Responsive Master-Komponente, die ich in meinem gesamten Design verwenden werde. Das sind also die beiden, wir testen es einfach und Sie fragen sich vielleicht, warum der dritte funktioniert , das werde ich gleich erklären. Scrollen wir also nach unten und dann können Sie sehen, dass ich hier unten tatsächlich einen zusätzlichen Abschnitt namens Responsive Behaviour habe . Und deshalb dokumentiere ich, was wir gerade getestet haben. Also hier habe ich einfach eine Instanz meiner Komponente hinzugefügt. Und Sie können auch sehen, dass ich einen Breadcrumb hinzugefügt habe und dann gesagt habe , dass dies über den Breakpoint-Überschuss hinweg funktionieren wird. Sie können es auch bewegen, Sie können sehen, wie es sich verhält. Und dann sind wir weiter unten, wir haben unseren größeren. Und wie Sie sehen können, funktioniert dieses Design mit einem Raster. Also habe ich das Raster hinzugefügt, damit ich zeige, wie es im Raster sitzt. Jetzt fragen Sie sich vielleicht, warum wir noch einen für S M haben. Der Grund dafür ist , dass ich hier rausspringen darf und Sie sehen , dass ich auch eine Dokumentation habe , wie mein Grid funktioniert. Und mein Raster ändert die Marge bei S M. Das kleinste hat also eine Marge von 24. Dann gehe ich für 40 und dann für 80. Lassen Sie mich also hier auf meine Dokumentation zurückkommen. Und jetzt können Sie hier oben mit meinen Hauptkomponenten sehen, Sie können sehen, dass dieser hier mit 24 eingerichtet ist. Dann wird dieser mit einer Marge von 40 eingerichtet. Und dieser hier ist mit einer ATP-Marge eingerichtet. In CSS. Dies wird automatisch aktiviert, aber so ist es für mich einfacher, sie in meinem Figma-Design wiederzuverwenden. Das wird also für die Typografie genauso sein. Ich müsste mein Typografie-Stylesheet überprüfen. Und hier können Sie sehen, dass ich meine Standardeinstellungen habe, also meine Mobile-First-Einstellungen, und ich muss überprüfen, ob sich etwas anpasst. Also z.B. mein H1, das würde sich bei Größe S anpassen und dann wieder bei Größe L. Für meine Navigation ändert sich nichts, also muss ich mir darüber keine Gedanken machen. Also werde ich eine separate Komponente erstellen, zB wenn ich H1 in einer Hero-Sektion verwende, erstelle ich eine für Mobile-First als eine für Größe wie weiter und Größe L. Das ist nichts, was du später in CSS brauchst wird automatisch aktiviert, wenn sich nur die Größe ändert. Ich mache es jedoch sehr gerne so, wenn ich in Figma arbeite. Es ist also sehr klar und ich entwerfe immer mit dem eigentlichen Setup. Also ja, so teste und dokumentiere ich gerne alle meine Komponenten. Und das ist keine festgelegte Regel, das ist einfach etwas, das ich gerne gemacht habe. finden Sie möglicherweise auch leicht unterschiedliche Möglichkeiten Je nach System finden Sie möglicherweise auch leicht unterschiedliche Möglichkeiten , dies zu dokumentieren. Schauen wir uns das noch einmal an. Natürlich ist auch jede Komponente ein bisschen anders. Hier können Sie sehen, dass dies eine Komponente ist, mit der ich durchkomme, aber ich dokumentiere, wie sie sich an verschiedenen Haltepunkten im Design befindet . Und ich kann auch Breakpoints kombinieren, wie Sie hier sehen. Also habe ich wirklich versucht, das so weit wie möglich zu vereinfachen. Und hier können Sie sehen, dass ich eine Komponente für Mobilgeräte verwende und dann eine andere Komponente habe. Und wieder, das kann in meinem Design ganz anders sitzen, aber ich habe immer die gleiche Komponente. Ein kleiner Tipp. Wenn Sie Dinge wie Karten hintereinander testen, möchten Sie nicht für jede dieser Reihen eine ganze Komponente einrichten . Sie möchten nur diesen und die dokumentierten Einkaufswagen einrichten. Aber Sie wissen, dass Sie sich ändernde Ränder in Ihrem Design haben werden. Was Sie also tun können, ist einfach diesen Rahmen im Hintergrund zu erstellen. Und dann können Sie entweder Einschränkungen verwenden. Also hier habe ich das mit 40 Spielraum auf jeder Seite eingerichtet. Oder Sie können dies auch in ein automatisches Layout umwandeln und dann sicherstellen, dass Sie hier den 40-Rand festgelegt haben. Auf diese Weise können Sie eine einzelne Karte in den verschiedenen Bildschirmgrößen testen , aber Sie müssen nur eine Karte dokumentieren. Und es ist dasselbe, wenn Sie etwas mit einer festen Breite haben, das in der Mitte sitzt. In dieser Karte ist das also wie ein modales Fenster. Und was ich mache, ist, dass ich das einfach mit Einschränkungen in den Mittelpunkt stelle. Und so kann ich einfach sagen , bis zu welcher Bildschirmgröße das funktionieren wird. 41. BREAKPOINTS: 08 Responsive variants: Ich möchte Ihnen einen kleinen Hack zeigen, mit dem ich meine responsiven Komponenten organisiere. Zunächst stelle ich sicher, dass ich alle Atome habe, also alle einzelnen Elemente, die ich als ihre eigenen Komponenten verwende, ich werde dann Instanzen z.B. dieses Logos und des Icons in meinem Navigationen in meinen Komponenten hier. Sie können auch sehen, dass dies eigentlich keine Einzelkomponenten sind, sondern ich habe einen Komponentensatz mit Varianz für jede der verschiedenen Größen erstellt . Hier drin. Sie können sehen, dass ich diese Navigationsstrahlen und Röntgenstrahlen benannt habe. Hier ist mein Zeichen dafür, dass diese Komponente mehr Varianz für verschiedene Haltepunkte aufweist. Die Varianz wird dann nach den Breakpoints benannt , denen sie dienen. Dieser ist also übertrieben, dieser ist Navigation S und M, und dieser ist Navigation l und x l. Ich behalte es so weil ich es vielleicht zu einem späteren Zeitpunkt in zwei Teile teilen könnte. Also dann würde ich es in Navigation L umbenennen und einfach ein anderes für die Navigation XL erstellen. Ich könnte diese Navigation auch als Standard bezeichnen. Wenn ich diese Navigation also nur für meine gesamte Seite hätte, dann nennen wir sie Navigationsstandard. Und nur wenn ich es zu einem späteren Zeitpunkt überschreiben würde, würde ich es eine Navigation nennen und dann S, M oder L weiter oder was auch immer. Es spielt keine Rolle, wie genau Sie es benennen, es muss nur für jeden, der es betrachtet, klar sein , dass Sie sich auf Ihre Breakpoints beziehen. diesem Grund ist es so wichtig, auch diese Informationen über das Rastersystem, über die Haltepunkte, über alle Ränder und Polsterungen, die Sie verwenden, in Ihre Dokumentation aufzunehmen. Und das muss auch die visuelle Dokumentation sein, nicht nur die technische Dokumentation. Ich hätte sie also genauso gut als einzelne Komponenten einrichten können , die auch funktionieren würden. Aber warum ich variant mag, ist, weil ich jetzt eine Eigenschaft namens Breakpoint hinzufügen kann . Und mal sehen, wie das in meinem Design aussieht. In meinem Design habe ich jetzt meine Navigation hier. Und Sie können sehen, dass dies ein Zeichen dafür ist, dass mehr Breakpoints verfügbar sind und es als Breakpoints bezeichnet wird. Und mit einem Dropdown könnte ich jeden anderen Haltepunkt wählen. Nehmen wir an, ich würde ein mobiles Design oder ein iPad einrichten , z. B. kann ich jetzt die Navigation über meine Ressourcen durchsuchen. Ich habe gerade meine Navigation gepackt und jetzt kannst du sehen , dass mir das immer die kleinste gibt. Es gibt mir also immer die Standardeinstellung, wie ich es eingerichtet habe. Und jetzt werde ich jedoch aufgefordert, mehr Breakpoints zu haben. Und dann gehe ich zu den Breakpoints , die mit dieser Breite funktionieren. Und ich kann es einrichten, ich kann Beschränkungen für links und rechts festlegen. Verwandeln Sie das in einen Auto-Layout-Rahmen. Und dann sehen Sie , dass wir immer die richtige Komponente für die richtige Größe mit den richtigen Einstellungen haben. Ich finde das also ein wirklich netter Ansatz, aber es stellt sicher, dass, wenn Sie dies verwenden möchten, wenn Sie sie in Varianten verwandeln möchten, dies mit Ihrem Team besprechen, wenn es im System Sinn macht, dass Sie benutzen. Wenn Sie z.B. ein Team haben, das nur auf Mobilgeräten arbeitet und ein Team nur auf größeren Desktops oder auf Tablets arbeitet, dann ist es für sie etwas ärgerlich , dass sie immer wechseln müssen. Es hängt also wirklich von Ihrer Teamstruktur ab und auch davon, wie Ihr Designsystem aufgebaut ist. 42. NEU! BREAKPOINTS: Responsive Breakpoint mit Variablen: Lassen Sie uns lernen, wie Sie responsive Seiten einrichten, die Breakpoints mit Variablen und Das ist es also, wonach wir suchen. Wir haben verschiedene Bildschirme die die Bereiche für unsere Breakpoints darstellen Und innerhalb dieser verschiedenen Bereiche werden wir die richtigen Varianten verwenden und das Layout dynamisch neu mischen Bei der Größenänderung. einen Moment bemerkt, dass ich das aufnehme Variables ist gerade in einer noch offenen Beta veröffentlicht worden. Es ist also sehr wahrscheinlich, dass sich einige davon in naher Zukunft ändern werden. Gehen wir das Schritt für Schritt durch. Also fangen wir damit an. Wir haben nur ein Komponentenset mit drei Varianten für einen anderen Navigations-Breakpoint, 12.3 Und wir haben diese Kartenkomponente. Also habe ich schon eine Sammlung eingerichtet. Sie können einen Screenshot davon machen und dies dann Schritt selbst einrichten, wenn Sie möchten. Ich werde Ihnen zuerst einen einfachen Weg zeigen , dies zu tun. Und dann etwas fortgeschrittener, wo wir die Größe unserer Frames tatsächlich ändern können Größe unserer Frames tatsächlich ändern Wir werden sie also nicht alle für beide verwenden. Beginnen wir zunächst mit der Bildschirmbreite. Also, was ich tun möchte, ist, diese Rahmen an eine bestimmte Bildschirmbreite zu binden . Und das heißt, indem ich sie an die Bildschirmbreite binde, kann ich sie an die verschiedenen Modi binden, sodass alles ich auf diesen Frames platziere, dann erben kann Wählen wir also unseren ersten Frame aus. Und dann klicke ich in der Breite auf das Variablenzeichen. Und ich werde mir meine Sammlung ansehen und einfach die Bildschirmbreite wählen. Jetzt wähle ich die anderen beiden und binde sie auch an die Bildschirmbreite. Aber es wird mir vorerst nur diese geringe Bildschirmbreite geben . Lass uns das einfach machen. Und dann zeige ich Ihnen, wie wir zu den verschiedenen Modi springen können. Jetzt haben wir sie mit der Variablen verbunden. Wählen wir nun den ersten aus und gehen wir zur Ebene. Und dann wählen wir die Kollektion aus und wir wollen eine kleine. Es wird sich nichts ändern , da dies die Standardgröße ist. Aber wenn wir dasselbe für Medium und dann dasselbe für Large tun , können Sie jetzt sehen, dass sie die Größen des Modus übernehmen. Lass uns zurück in unsere Sammlung springen. Schau es dir an. Wir haben also die kleine 390, die mittlere, 834 und vergrößern diese Falls du dich über die Größen wunderst, ich habe nur einige voreingestellte Größen aus dem Menü genommen einige voreingestellte Größen aus und sie dort einfach hinzugefügt. Ich habe mich also für das iPhone 14 entschieden und Sie können das 390 sehen. Und dann habe ich mich einfach für ein Tablet entschieden und dann nach dem Zufallsprinzip einen Desktop ausgewählt. Sie können jede andere Größe wählen. Es ist nicht relevant , welche verwendet werden. Als Nächstes hole ich mir eine Instanz meiner Variablen. Und lassen Sie uns zu unserer Sammlung zurückkehren und sehen, was ich hier zusammengestellt habe. Sie können also sehen, dass ich meine Navigation eingerichtet habe und beachten , dass der Name der Variablen keine Rolle spielt. Ich könnte das alles nennen. Ich nenne es also nicht so, wie es meine Komponenten gesagt haben. Aber was wichtig ist, sind die Variablen, die ich verwenden möchte und hier den genauen Namen haben müssen wie meine Variablen im Komponentensatz. Wenn ich also darauf klicke, siehst du einen Überschuss an Navigation. Dann ist der nächste S und L und so weiter. Und auch hier können Sie sie nach dem System benennen , das Sie in Ihrem Team verwenden. Stellen Sie nur sicher, dass Sie, wie auch immer Sie sie nennen verweisen, wenn Sie sie für die verschiedenen Modi aufrufen. Okay, also wählen wir diese Instanz aus. Und dann kannst du über das Instanzmenü sehen, wenn du mit der Maus darüber fährst, ich erhalte diese kleine Variable Ich kann eine Variable zuweisen. Und ich kann jetzt meine variable Navigation finden. Und ich werde das auf die Instanz setzen. Sie setzen es auf die Instanz, die sich derzeit nicht in Ihrem Komponentensatz befindet. Fügen wir das hier hinzu und ich werde es so einstellen, dass es den Behälter füllt. Oh ja, wir haben vergessen, unsere Frames tatsächlich als Autolayout einzurichten. Wählen Sie einfach Ihre Frames aus und verwandeln Sie sie in Rahmen mit automatischem Layout. Jetzt können wir unsere Instanz der Navigation erneut auswählen und den Container füllen. Und jetzt wird es hier gut sitzen. Ich wähle auch meine Frames aus und gebe ihnen einfach eine Folienhintergrundfarbe , damit du sie besser sehen kannst. Jetzt kommt der einfache Teil. Wenn Sie Ihre Instanz zwischen den verschiedenen Frames verschieben, erbt sie den Modus, den Sie im übergeordneten Frame angegeben Und deshalb ist es gegangen, die richtige Variante auszuwählen , die Sie in Ihrer Sammlung eingerichtet haben. Also lass uns einfach einen auf jeden Frame legen. Ich kopiere das einfach, wähle alle Frames aus und füge Vielleicht hast du hier eine natürliche Polsterung. Sie können einfach Ihren Rahmen auswählen und dann alles auf Null setzen. Fügen wir die Karte auch hinzu. Also mache ich dasselbe. Ich füge eine Instanz hinzu. Bisher habe ich noch keine Varianten. Also, was ich tun möchte, ist, eine Gruppe zu erstellen. Also möchte ich ein paar Instanzen in einer Gruppe haben. Wählen wir das einfach aus , drücken Sie Shift a und ich erstelle einen automatischen Layoutrahmen , den ich als Kartengruppe bezeichnen werde. Und ich kann die Größe anpassen und hier kann ich auch meine Variablen verwenden Und jetzt füge ich das hier hinzu. Was mir jetzt nicht gefällt, ist , dass die Polsterung nicht wirklich funktioniert Ich könnte das mit der Ausrichtung zentrieren, aber ich möchte eine feste Polsterung Also werde ich das in dieser Gruppe hinzufügen. Ich möchte das gleiche Padding verwenden, das ich hier oben in meiner Navigation verwende Und tatsächlich ist das für jede meiner Varianzen anders. Wenn wir uns diese genauer ansehen, können Sie sehen, dass ich Variablen verwende , um dieses Padding festzulegen Und jetzt, was ich in meiner Sammlung gemacht habe, können Sie sehen, dass ich eine Variable namens Margin eingerichtet habe und Aliase verwende. Lassen Sie uns das hier einfach löschen und Sie können sehen, dass ich das manuell auf 24 setzen könnte, aber wenn ich es hier ändern würde, dann würde es nicht aufgenommen. Was ich also tun kann, ist diesen Klick auf dieses kleine Symbol mit einem Alias oder einfach mit der rechten Maustaste zum Alias zu klicken. Und jetzt wähle ich den Abstand , ich auch in meiner Navigation verwende. Und ich werde das jetzt zu meiner Kartengruppe hinzufügen . Wählen wir das aus und dann klicke ich auf mein linkes und rechtes Padding Und jetzt wähle ich nicht aus meinem Abstand, ich wähle hier von meinem Rand, 24. Und um es dann so einzustellen, dass der Behälter gefüllt wird, drücken Sie die Eingabetaste, um alle untergeordneten Elemente abzurufen und stellen Sie sie auch so ein , dass der Behälter gefüllt wird. Toll, jetzt bringen wir sie hierher. Eigentlich möchte ich oben etwas Spielraum hinzufügen. Also hier könnte ich auch meinen Abstand oder meine Ränder verwenden. Ich glaube, ich könnte meinen Berg von hier aus benutzen. Lassen Sie uns diesen Wert auf Null setzen, damit alles sauber bleibt. Und jetzt ziehe ich einfach eine Kopie dieser Kartengruppe auf meine mittlere Größe Also, ich will es nicht so haben. Ich möchte, dass sie sich herumwickeln. Also könnte ich Auto Layout Wrap verwenden. Ich kann das hier schon einrichten, also würde sich nichts ändern. Und jetzt richten wir es hier ein. Und Sie können sehen, dass sie jetzt in Position springen werden. Dies funktioniert jedoch nur, wenn Sie in Ihrer Hauptkomponente oder auf Ihrer Instanz einzeln eine Mindestbreite einrichten. Sie können also sehen, dass eine Mindestbreite von 250 und eine maximale Breite von 450 eingestellt ist 250 und eine maximale Breite von 450 Und deshalb mischen sie sich um. Machen wir es also für unseren letzten Rahmen und räumen hier einfach die letzte Polsterung auf Und jetzt ziehe ich das rüber. Das ist also wirklich toll, um statisches Design zu zeigen und sich verschiedene Breakpoints anzusehen , und Sie können es absolut so verwenden Es gibt jedoch eine Sache , die Sie ein wenig nerven könnte. Wenn Sie dies auswählen und die Größe ändern, schauen Sie sich hier meine Variable an Sobald ich die Größe ändere, wird die Variable weggeworfen und ich müsste das erneut einrichten Es sagt mir auch nicht, wo meine Breakpoints beginnen und enden Aber wenn wir uns unsere Sammlung ansehen, dann kannst du sehen, dass ich hier unten zwei weitere Variablen eingerichtet habe. Einer heißt Breakpoint Max und Walk heißt Breakpoint Min. Und diese Breakpoints stellen einfach meine Breakpoints dar , die ich später in CSS verwenden werde Mit dem Minimalwert sage ich also im Grunde, dass hier meine mittlere Größe anfängt und dann bis hierher steigt Lassen Sie uns das also anwenden. Nehmen wir zuerst unseren kleinen Bildschirm. Und jetzt füge ich eine Mindestbreite hinzu. Und dann muss ich erneut auf diese Ära drücken, eine Variable anwenden und dann deinen Breakpoint Min finden Und dann füge ich auch eine maximale Breite hinzu. Das Gleiche gilt für die Variable und finde deinen Breakpoint Max. Ich werde dasselbe für die anderen Frames tun. Ich wähle den Frame an meiner Breakpoint-Min-Variablen, meiner Breakpoint-Max-Variablen meiner Breakpoint-Max-Variablen Ich werde das nur für dich ein bisschen beschleunigen, und das Gleiche gilt für unseren letzten Frame. Und beachten Sie, dass sie bereits den richtigen Modus aufrufen. Das liegt daran, dass ich den Modus bereits vorher eingestellt habe. Wenn Sie das nicht haben, stellen Sie sicher, dass Sie den Rahmen auswählen und den Modus über die Ebenen ändern. Ich bräuchte eigentlich nicht einmal eine maximale Größe für meinen größeren Bildschirm, aber ich füge sie einfach hinzu, damit alles vollständig ist. Okay, schauen wir uns das an. Wenn ich das also auswähle und jetzt die Größe ändere, kannst du sehen, dass es an einem bestimmten Punkt stoppt Und es wird auch aufhören, wenn ich eine maximale Breite erreicht habe. Wenn ich jetzt klein werde, können Sie sehen , dass das nicht gut sitzt. Achte immer darauf, deine Ausrichtung zu regeln . Und jetzt können wir dasselbe für unseren größeren Bildschirm versuchen. Auch hier können wir unsere Ausrichtung regeln. Darin wird unser Kleiner sein. Wenn wir jetzt mit diesem Setup arbeiten, dann brauchen wir diese feste Größe hier eigentlich nicht mehr, also könnten wir das löschen. Nehmen wir nun an, wir wollen tatsächlich ein anderes Design für einen der Breakpoints Wir wollen also, dass sich das Layout unseres Autos ändert. Ich habe meine Originalkarte hier und ich habe eine neue namens Karte Horizontal, und ich werde diese eine Karte Vertikal nennen. Wählen wir beide aus und wir können sie als Varianten kombinieren. Und jetzt nenne ich das eine Karte. Und Sie können die Immobilie auch nach Ihren Wünschen benennen. Schauen wir uns unsere Sammlung an. Sie können also sehen, wir haben Karte und wir haben Karte Vertikal und Karte Vertikal für klein und mittel eingezogen. Und dann ist Karte horizontal die Variante für groß. Das Wichtigste ist also noch einmal , dass dies die genaue Benennung sein muss Du kannst das also auch kopieren und hier einfügen. Manchmal wird es ein bisschen fehlerhaft. Kehren wir zu unseren Designs zurück. Was Ihnen jetzt auffallen wird, ist, wenn Sie Ihre Karten auswählen und die Eingabetaste drücken, um die untergeordneten Instanzen aufzurufen. Und jetzt können Sie sehen, dass dies noch nicht verbunden ist, also müssen wir sie alle mit unserer Karte verbinden. Das Gleiche machen wir hier. Wählen Sie eine Gruppe aus, drücken Sie die Eingabetaste und verbinden Sie sie nun alle mit unserer Karte. Und lassen Sie uns hier dasselbe tun. Drücken Sie die Eingabetaste, und jetzt sollten wir hier eine Änderung sehen. Und lassen Sie uns die Karte nehmen, also wechselt sie zu unserem horizontalen Design. Wir können dann einfach Ihre Bilder und Texte überschreiben. Und schon haben Sie ein vollständig responsives Design, das Ihre Breakpoints respektiert 43. BREAKPOINTS: 09 Breakpoints und ein Raster: Wenn Sie mit dem responsiven Grid und Figma arbeiten, können sich dadurch auch die verschiedenen Breakpoints ändern. Es gibt also zwei Dinge, die Sie tun sollten. Machen Sie eine visuelle Darstellung und dokumentieren Sie wirklich ein Raster, das Sie verwenden sollen. Also hier, zB kannst du sehen , dass dies mein Raster für Überschuss ist, dann für S M und dann für Breakpoint L ab, ich habe eine weitere Änderung. Das ist einfach die Marge , die sich hier ändert. Also dokumentiere ich das alles und dann ist das das zweite, was Sie tun sollten, diese Grid-Stile zu speichern. In meiner Stilübersicht können Sie sehen, dass ich Grid Access Mobile als S und M und L in Excel habe. Und auf diese Weise kann ich das immer richtig auf einen neuen Rahmen anwenden. Das klingt nach viel Hin und Her, wenn mit verschiedenen Bildschirmgrößen gearbeitet wird. Aber denken Sie daran, dass wir im Allgemeinen nur für Mobilgeräte und dann für Desktop entwerfen. Deshalb verwenden wir momentan nur diese beiden Grids. Und dann später. Die ganzen Tests? Ja, bei all diesen Tests hier müssen Sie, wenn Sie mit einem Raster arbeiten, sicherstellen, dass Sie ab den verschiedenen Breakpoints mit einem korrekten Raster testen. Eine andere Möglichkeit, dies noch klarer zu machen , besteht darin, Ihre Stile nach den Breakpoints zu benennen und auch die tatsächlichen Zahlen der Breakpoints oder des Bereichs hinzuzufügen . Ich habe gesehen, wie ich einen Aufkleber auf dem Designsystem hinzugefügt habe. Sie benutzen das und ich denke, es ist wirklich, sehr klar für jeden, denn auf diese Weise kann ich, wenn ich einen Rahmen habe , die Größe und Breite überprüfen. Und dann kann ich aus dem Dropdown-Stilmenü für meine Raster einfach die Rasterverschuldung auswählen , die für diese Bildschirmgröße gilt. Wirklich, sehr nett und ordentlich. 44. BREAKPOINTS: 10 Vergiss deine Typografie nicht: Vergessen Sie nicht Ihre Typografie wenn Sie reaktionsschnelle Komponenten testen. Das ist ein bisschen wie eine Hühnchen-Ei-Situation. Was kommt zuerst? Beginnen Sie mit der Einrichtung Ihrer Typenskala und wenden Sie sie dann auf reaktionsfähige Komponenten an, oder testen Sie zuerst responsiven Komponenten und entscheiden dann , an welchem Haltepunkt Sie Ihre Typografie wird sich ändern. Nun, das hängt wirklich von Ihrem Projekt ab. Wenn Sie bereits mit einer vorhandenen Typenskala arbeiten, müssen Sie dies beachten. Aber wenn Sie nur einrichten, dann ja, auf jeden Fall können Sie mit Ihren Komponenten und mit Ihrer gesamten Seiteneinrichtung spielen und später stellen Sie einfach sicher, dass Sie dokumentiert haben und dass Sie haben ein ordentliches Setup. Und ja, es sieht so nett und einfach aus, wenn es fertig ist, es ist tatsächlich eine Menge Ausprobieren und Testen und Kompromisse. Und das bedeutet nicht, dass ich hier oder da irgendwann keine weitere Größe hinzufügen muss . Lassen Sie uns das kurz durchgehen falls Sie das noch nie gesehen haben. Also hier sind meine Mobile-First-Einstellungen. Hier können Sie das für Schlagzeilen sehen. Also habe ich 123, dann meine Body-Tags, Links-Schaltfläche. Und Sie könnten dies für so viele oder so wenig einrichten , wie Sie benötigen. Ich habe das Gewicht definiert, um die Linienhöhe und den Abstand zu messen. Und dann habe ich hier ein kleines Beispiel. Und das wird dann als Stil gespeichert. Wenn ich ab einem Bruchpunkt diese Größe ändern wollte, z. B. in meinem Fall für H1, dann würde ich das hier dokumentieren. Dies könnte auch nur eine Änderung im Line-Hide oder irgendetwas anderes sein . Es gibt verschiedene Ansätze für reaktionsfähige Typenskalen. Sie könnten also den Verhältnis-Ansatz verwenden. Sie könnten sogar mit Clamp oder mit Calc arbeiten. Dies ist wirklich nur ein sehr einfaches Beispiel , das ich jetzt verwenden möchte. Sie können sehen, dass diese alle als Stile gespeichert sind. Und dann habe ich sie so benannt, dass ich in meinem H1 sein kann, z. B. kann ich sehen, dass ich einen Basisstil habe, dann habe ich einen für Bildschirm m und einen für Bildschirm L ab. Wenn ich mir z.B. die Body-Texte ansehe, die Sie hier haben, wo wir keine Änderung in den Stilen für Breakpoints haben , die immer 16 und die gleiche Zeilenhöhe bleiben . Sie können also sehen, dass ich einfach eine Basis gegeben habe und er, ich kann einfach zwischen sekundär und primär wählen, was der Unterschied zwischen regulär und fett ist. Was würde das für meine Tests bedeuten? Und lass uns hier rüber springen. Und dann kannst du hier sehen, dass ich verschiedene Karten habe und für die Überschrift verwenden sie ein H2. Also habe ich meinen Stil hier in H2 angewendet und ich kann sehen, dass es in L eine Änderung gibt. Also bis hier funktioniert das alles gut. Also gehe ich hier runter und finde hier, dass das ab L passiert. Also hier nehme ich die Überschrift und dann muss ich das jetzt in etwas anderes mit der Zeilenhöhe ändern , ich muss vielleicht korrigieren, was ich tun müsste. Wenn ich jetzt zu meinen Unterlagen übergehe , muss ich diese Karte nehmen. Ich muss auch diese Karte nehmen. Also muss ich jetzt zwei verschiedene Karten einrichten. Nochmals, das ist wirklich eine Figma-Sache. Ich würde immer noch so dokumentieren. Ich hätte diese Karte. Ich hätte diese Karte. Und dann werde ich auch dokumentieren, wie sie in den verschiedenen Breakpoints so sitzen. Hier sind drei und hier muss ich mich an den kleinen Trick erinnern, den ich dir mit der Verwendung von Varianten gezeigt habe . Also könnte ich diese Karte einfach Standard nennen. Und diese Karte nenne ich L. Dann wähle ich beide aus und erstelle ein Komponenten-Set. Und ich nannte diese Komponente „Card Rays“. Wenn ich jetzt mit Instanzen arbeite, ziehen wir eine Instanz heraus. Ich kann jetzt wie hier die Immobilie sehen, die ich ihr benannt habe. Also lass uns wieder reingehen. Nennen wir diese Eigenschaft Breakpoints. Und wenn ich jetzt diese Instanz wähle, kann ich zwischen der Standardkarte und der L-Karte wählen Die einzige Änderung hier wäre der Unterschied im Stil meiner Überschrift. 45. BREAKPOINTS: 11 Mehr über die ansprechende Typografie und die Grids: Diese Klasse ist wirklich ein tiefer Einblick in Responsive Design mit Figma. Es geht also wirklich um Auto-Layout-Einschränkungen und darum , was Raster berührt. Und wir berühren reaktionsschnelle Typografie. Aber wir gehen nicht so viel allgemeine Tiefe und keine Themen ein. Wenn Sie etwas mehr darüber wissen möchten, empfehle ich Ihnen, sich zwei weitere meiner Kurse anzusehen . Du findest sie alle hier auf Skillshare und tippst einfach Moon Learning ein. Und dann siehst du alle meine Kurse. Und eines davon, das ich empfehle sind Grids und Responsive Design. Hier schauen wir uns also wirklich verschiedene Setups an, verschiedene Arten von Grids. Und wir schauen uns auch echtes HTML und CSS an. Sie können also mit einer echten Sache herumspielen und wirklich verstehen, wie diese Medienabfragen funktionieren, und wirklich mit der Realität spielen , was ein totaler Unterschied ist. Der andere Kurs, den ich empfehle, ist Topographie im UX-UI-Design. Und hier sprechen wir z.B. über Einrichten von responsiven Topographie-Skalen. Was sind die verschiedenen Techniken und wie können wir mit Reaktionsfähigkeit auf verschiedenen Ebenen umgehen? Und wie können wir das mit unserem Entwicklungsteam kommunizieren ? Diese beiden Kurse sind also wirklich empfehlenswert, um Ihr Wissen zu erweitern, nicht nur in Figma, sondern nur ein allgemeines Verständnis dieser Themen im UX-UI-Design. 46. BREAKPOINTS: 12 Breakpoint: Es gibt auch ein großartiges Plug-In, mit dem Sie zu Plugins gehen und dann Breakpoints eingeben können. Führen Sie jetzt das Plugin aus. Sie erhalten dieses kleine Fenster, in dem Sie Ihre aktuellen Breakpoints hinzufügen können. Ich verwende momentan nur ein paar zufällige Breakpoints. Das Wichtigste ist, dass alle Ihre Frames bereits responsiv eingerichtet sind. Idealerweise mit Auto-Layout. Wählen Sie nun die Frames aus, sodass Sie sie im Grunde mit einem Bereich verknüpfen , der den Breakpoints entspricht. Und wenn Sie jetzt die Größe des Fensters ändern, das das Plugin für Sie erstellt hat, können Sie eine schöne ansprechende Darstellung Ihres Designs sehen . Es ist wirklich, wirklich toll, aber bedenke auch, dass dies eher zu zeigen ist wie eine Homepage oder so etwas oder ein besonderes Feature. Weil es alles in Komponenten verwandelt und einige knifflige Teile hat, aber trotzdem ein wirklich, wirklich tolles Plug-In zum Spielen. 47. Bye bye und einige kostenlose Sachen: 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.