Figma für Vielbeschäftigte: Auto-Layout beherrschen

1. Willkommen beim Kurs: Figma ist ziemlich genial, aber seien wir ehrlich Einige seiner Funktionen wie automatische Layout können sich manchmal sehr kompliziert anfühlen, oder? Die Sache ist, sobald Sie den Dreh raus haben, ist es ein totaler Game-Changer für Ihr Figma-Erlebnis Und in diesem Kurs geht es darum , das automatische Layout unterhaltsam und einfach zu gestalten, egal wo Sie beginnen Jeder. Mein Name ist Adi und ich bin Webdesigner und Entwickler mit über zehn Jahren Erfahrung. Und ich habe viele Kurse und Tutorials zu den Themen Figma, UI, UX Design, Webentwicklung und mehr Und normalerweise sind meine Kurse sehr detailliert. Aber dieser ist anders. Dieser ist speziell für vielbeschäftigte Menschen konzipiert speziell für vielbeschäftigte Menschen , die nicht viel Zeit zur Verfügung haben, aber dennoch etwas Wertvolles lernen möchten. Dieser Kurs ist kurz und dennoch voller wichtiger Informationen Meiner Meinung nach ist das automatische Layout jetzt die leistungsstärkste Funktion von Figma Egal, ob Sie Websites, Apps oder andere digitale Inhalte erstellen , Apps oder andere digitale Inhalte Dies kann Ihren Arbeitsablauf erheblich beschleunigen und Ihre Designs flexibler und reaktionsschneller machen . Lassen Sie es uns also aufschlüsseln. Wir werden sechs Hauptlektionen haben, sich jeweils auf einen grundlegenden Aspekt des automatischen Layouts konzentrieren. Zunächst lernen wir, wie Sie Ihrem Design automatisches Layout hinzufügen und Objekte effizient organisieren und anordnen können. Dann gehen wir zu verschachtelten Rahmen über, die für die Erstellung komplexer Layouts unerlässlich sind In der dritten Hauptlektion werden wir uns mit dem sogenannten Layoutfluss befassen, der die Richtung und Position von Wir werden uns ansehen, wie Abstände im automatischen Layout funktionieren und wie Lücken und Abstände verwendet werden. Dann werden wir über die Ausrichtung und die verschiedenen Möglichkeiten sprechen die verschiedenen Möglichkeiten sicherzustellen, dass die Elemente perfekt platziert sind Abschließend werden wir uns mit den verfügbaren Optionen zur Größenänderung befassen , mit denen wir dynamische Layouts erstellen können. Nun, ich habe diesen Kurs so konzipiert , dass er sehr praktisch ist. Jede dieser sechs Hauptlektionen hat also einen theoretischen Teil , den ich Grundlagen nenne, und dann einen praktischen Teil , den ich praktische Anwendung nenne. Und für jede praktische Anwendung werde ich ein Layout von einer echten Website nachbauen Ich beginne mit einem Screenshot dieses Layouts und einigen Designspezifikationen, die ich zuvor vorbereitet habe Dann zeige ich Ihnen Schritt für Schritt, wie es mithilfe des automatischen Layouts neu erstellen Darüber hinaus hat jede Hauptstunde eine Aufgabe. Für dich. Und es gibt sechs Aufgaben, die Sie erledigen können. Diese sollen Ihnen helfen, das, was Sie in jeder Lektion gelernt haben, zu üben . Wenn du sie machst, wirst du die Theorie viel besser verstehen. Außerdem werden Sie einige dringend benötigte praktische Erfahrungen sammeln. Und die Aufgaben sind genau wie die praktischen Anwendungen, mit einem großen Unterschied. Ich habe auch schriftliche Anweisungen bereitgestellt , die Ihnen helfen, das von mir ausgewählte Layout neu zu erstellen Also, wenn das interessant klingt, werde ich dich im Unterricht sehen 2. Aufgaben und Kursprojekt: Hallo, willkommen in der Klasse, lass mich dir von den Aufgaben und dem Klassenprojekt erzählen . Es gibt sechs Aufgaben, die du erledigen kannst. Sie finden diese in der Figma-Datei, die in den Klassendetails auf der Registerkarte Projekte und Ressourcen verlinkt den Klassendetails auf der Registerkarte Projekte und Ressourcen Jetzt kannst du entweder alle Aufgaben erledigen, nachdem du dir den Kurs angeschaut hast, oder eine nach der anderen. Es liegt wirklich an dir. Ich schlage vor, jede Aufgabe erst nach einer Lektion zu erledigen . Schauen Sie sich zum Beispiel die Lektion über Abstände und machen Sie dann die Aufgabe über Abstände. Das Klassenprojekt sieht nun wie folgt aus. Sobald Sie alle Lektionen und Aufgaben abgeschlossen haben , besteht Ihre Aufgabe darin, ein Layout auszuwählen, das Ihnen gefällt, und es in Figma neu zu erstellen, wobei Sie natürlich das automatische Layout verwenden natürlich das automatische den Aufgaben sehr ähnlich, aber dieses Mal können Sie das Layout auswählen, und es gibt keine von mir vorbereiteten Designspezifikationen Die müssen Sie selbst herausfinden. Um dir dabei zu helfen. Ich habe eine Figma-Datei erstellt, die Sie verlinkt finden können Es wurde in die Community hier bei Figma hochgeladen und heißt Skillshare Class Project Alles was Sie tun müssen, ist dies zu öffnen , während Sie in Ihrem Figma-Konto angemeldet sind, und dann hier auf diese Schaltfläche mit der Aufschrift In Figma öffnen zu klicken hier auf diese Schaltfläche mit der Aufschrift In Figma öffnen Und das wird ein Duplikat für Sie in Ihrem Figma-Konto erstellen ein Duplikat für Sie in Ihrem Figma-Konto In dieser Datei finden Sie nun die folgende Struktur Wir haben hier im Grunde einen Abschnitt mit zwei Frames : Referenzdesign und Nachbildung. Sie müssen lediglich einen Screenshot des Layouts erstellen , das Sie neu erstellen möchten, ihn in dieses erste Frame-Referenzdesign einfügen Sie haben also, Sie wissen schon, etwas, auf das Sie sich beziehen können. Außerdem können Sie hier unten einen Link zu der Website einfügen , von der Sie den Screenshot abgerufen haben. Das ist völlig optional. Natürlich. Und dann im zweiten Bild, wo es eine Neuauflage heißt, hier werden Sie im Grunde das Layout neu erstellen Wenn Sie damit fertig sind, wählen Sie diesen Abschnitt aus , der als Skillshare-Klassenprojekt bezeichnet wird, und gehen Sie nach unten rechts Ich habe bereits eine Exportregel für Sie vorbereitet. Du exportierst es als One X PNG und postest es dann als Klassenprojekt auf Skillshare Jetzt hat es seine Vorteile, deinen Fortschritt zu teilen. Zunächst kannst du sehen, woran deine Klassenkameraden gerade arbeiten, Layouts sie ausgewählt haben und wie gut sie sie neu erstellt haben Zweitens lernen Sie nicht nur Theorie. Sie beschäftigen sich aktiv mit einem Projekt. Ich würde mich freuen, wenn du dein Klassenprojekt mit uns teilst. Und denken Sie daran, wenn Sie sich zu irgendeinem Zeitpunkt über ein bestimmtes Thema verwirrt fühlen oder Fragen haben, posten Sie diese bitte im Diskussionsbereich, und ich werde mein Bestes tun, um Ihnen zu helfen. Nachdem das geklärt ist, fangen wir mit dem Unterricht an. 3. Deinen Designs automatisches Layout hinzufügen: Automatisches Layout ist eine Eigenschaft, die nur auf Rahmen angewendet werden kann . Es funktioniert also nicht bei Gruppen, es funktioniert nicht bei Abschnitten, sondern nur bei Frames. Und Sie können es für sehr einfache Dinge verwenden, wie zum Beispiel für eine Schaltfläche, deren Größe sich an den darin enthaltenen Text anpasst, oder um komplexe Layouts zu erstellen, wie dieses, das aus mehreren automatischen Layoutrahmen besteht, von denen jeder unterschiedliche Eigenschaften hat. Und wir werden uns in den nächsten Lektionen mit den verschiedenen Anwendungsfällen für das automatische Layout befassen und mehr über dessen Komplexität erfahren. Aber vorerst möchte ich Ihnen zeigen, wie Sie es zu Ihren Designs hinzufügen können. In Figma haben wir also einen einfachen Rahmen und fügen ein automatisches Layout hinzu Alles was Sie tun müssen, ist zum Inspektor zu gehen und hier auf den Text für das automatische Layout oder auf die Schaltfläche zu klicken . Und das ist es. Um es zu entfernen, klicken Sie einfach wie folgt auf die Minus-Schaltfläche. Alternativ können Sie mit der rechten Maustaste auf einen Rahmen klicken und dann ganz nach unten gehen wo dort „ Automatisches Layout hinzufügen“ steht, oder die Tastenkombination Shift A wie folgt verwenden . Und um es zu entfernen, würden Sie dasselbe tun, mit der rechten Maustaste klicken und dann das automatische Layout entfernen oder die alte Umschalttaste A unter Windows oder die Wahltaste A auf einem MAC verwenden. Sobald Sie einem Frame das automatische Layout hinzugefügt haben, erhalten Sie Zugriff auf verschiedene Optionen. Hier steuern Sie die Richtung des Layouts. Hier steuern Sie die Ausrichtung. Hier legen Sie den Abstand zwischen den Elementen fest. Und diese beiden Felder sind für horizontale und vertikale Polsterung vorgesehen, und keine Sorge, wir werden all das in den nächsten Lektionen ausführlicher besprechen in den nächsten Lektionen ausführlicher Eines der coolsten Dinge am automatischen Layout ist die Art und Weise, wie Sie Elemente innerhalb des Rahmens anordnen oder neu anordnen Wenn ich zum Beispiel dieses erste Feld nach rechts verschieben möchte , muss ich nur die rechte Pfeiltaste oder die linke Pfeiltaste verwenden, wenn ich es nach links verschieben möchte Wenn ich ein vertikales automatisches Layout hätte. Ich würde die Aufwärts - und Abwärtspfeiltasten verwenden , um es zu verschieben oder seine Position zu ändern. Alternativ kann ich mit der Maus klicken und ziehen und es an eine beliebige Stelle verschieben. Und Figma verschiebt das Element und behält die gleiche Ausrichtung und den gleichen Abstand zwischen den Elementen bei, die ich im übergeordneten Frame festgelegt habe, was fantastisch ist Jetzt können Sie auch einzelnen Elementen oder Elementgruppen ein automatisches Layout hinzufügen einzelnen Elementen oder Elementgruppen Und ich weiß, dass ich gesagt habe, dass automatisches Layout nur auf Frames angewendet werden kann. Figma wickelt diese Elemente jedoch automatisch in einen Rahmen ein wenn sie nicht bereits in einem enthalten sind Also hier ist, was ich damit meine. Wir haben hier eine zweite Demo. Wenn ich diese beiden Elemente auswähle, sind es nur, du weißt schon, eigenständige Ebenen hier im Ebenenfenster, und ich kann Shift A drücken, um einen Rahmen zu erstellen. Siehst du, sie sind jetzt hier in einen Rahmen gehüllt, und auf diesen Rahmen wurde auch das automatische Layout angewendet. Wie cool ist das? Das hier ist eine Gruppe, wie Sie im Ebenenfenster sehen können, sie heißt Gruppe 87. Nun, wenn ich Shift A mache und ich euch eigentlich nur den Inhalt hier zeige , zwei Boxen. Wenn ich bei ausgewählter Gruppe die A-Taste verschiebe, ist diese Gruppe jetzt ein Frame mit natürlich automatischem Layout. Jetzt fragen Sie sich vielleicht, wie füge ich einem vorhandenen Rahmen mit automatischem Layout ein Element hinzu? Nun, es ist so einfach wie Klicken und Ziehen. Also, wenn ich das hier zu diesem Rahmen hinzufügen möchte , muss ich nur auf Ziehen klicken und schon ist es drin. Ich möchte es herausnehmen. Klicken und ziehen Sie aus dem Rahmen heraus. Und Figma passt die Größe des Rahmens automatisch so an, dass er der Innenhöhe seiner Kinder entspricht . Mehr dazu später Alternativ kann ich, wissen Sie, diesen Befehl X oder Control X nehmen, den Rahmen auswählen und ihn einfach in Command oder Control V einfügen ihn einfach in Command oder Control V Schauen wir uns nun eine praktische Anwendung an Und für diese Lektion erstellen wir ein Layout von loom.com neu, und hier ist diese Liste mit Wir haben im Grunde ein Häkchensymbol und einen Text. Also habe ich in Figma die Textelemente neu erstellt . Ich habe die Ikone mitgebracht. Also fangen wir damit an, das hier nach oben zu verschieben, Befehl oder Ctrl D, um es zu duplizieren. Noch dreimal. Und dann habe ich links neben dem Screenshot neben dem Screenshot auch einige Designspezifikationen hinzugefügt, wie den Abstand zwischen den einzelnen Listenelementen und auch den Abstand zwischen dem Symbol und dem Text. Also lass uns das machen. Und ich möchte das nur einleiten, indem ich sage , dass diese Art von Layout mit automatischem Layout unglaublich einfach zu erstellen sein wird , wenn wir all den Schnickschnack verwenden würden, wie die GAP-Funktionalität, die Alignment-Funktionalität, wir sind noch nicht da Wir werden also nur ein Minimum an automatischem Layout-Magie verwenden nur ein Minimum an automatischem Layout-Magie und den Rest manuell erledigen, wie die Ausrichtung und die Abstände Okay? Fangen wir also mit der Ausrichtung an. Zuerst wählen wir jedes Symbol und jeden Text und richten sie dann aus. Entschuldigung. So, so und so, richten Sie sie einfach zur Mitte aus. Und dann wähle ich den Text aus, halte ULT oder Option gedrückt und bewege Mauszeiger über das Symbol, um den Abstand zwischen ihnen Und dann kann ich mit der rechten oder linken Pfeiltaste den Text pixelweise nach links oder rechts bewegen pixelweise Jetzt bin ich 29. Ich muss bei 16 sein, also mache ich eins, zwei, drei und verschiebe dann nach links, um es jeweils zehn Pixel zu verschieben, und jetzt bin ich bei 16. Lassen Sie uns hier dasselbe tun. Ich bin bei 46, also schalte ich links, links, links, und jetzt bin ich bei 16, 30, also machen wir eins, zwei, drei, vier, Shift, links, und jetzt bin ich bei 16. Hier gilt das Gleiche. Nach links schalten und jetzt bin ich bei 16. Großartig. Jetzt wähle ich jedes Symbol und den Text Shift A, Shift A , Shift A Shift A. Ich habe jetzt vier automatische Layoutrahmen. Wählen Sie alle aus, richten Sie sie links aus, und jetzt geht es nur noch darum, den Abstand von 24 Pixeln zwischen ihnen einzustellen. Also machen wir dasselbe wie zuvor, halten die Optionstaste oder ULT-Taste gedrückt, Mauszeiger auf das Element darüber und verwenden die Pfeiltasten, um an die gewünschte Stelle zu gelangen, etwa so Und so fügen Sie Ihren Designs ein automatisches Layout hinzu. Als Nächstes haben Sie eine Aufgabe. 4. Aufgabe: Deinen Designs ein automatisches Layout hinzufügen: Jetzt, da Sie mit dem automatischen Layout besser vertraut sind und die Grundlagen gelernt haben, ist es an der Zeit, etwas zu üben. Und die Aufgabe für diese Lektion ist ziemlich einfach. Sie werden ein Layout von stripe.com neu erstellen. Wenn wir also in der Fußzeile der Website ganz nach unten gehen , erstellen Sie diese Unternehmensliste mit drei Links neu Jetzt gibt es drei Links auf der Live-Website. Als ich vor einiger Zeit den Screenshot gemacht habe, gab es vier Links, aber das ist nicht wirklich wichtig. Das ist also das Layout, das Sie neu erstellen werden. Sie haben einen Titel und dann vier Links Und zwischen allen besteht eine Lücke von vier Pixeln. Ich habe alle Textelemente für Sie vorbereitet. Außerdem habe ich auf der linken Seite einige Anweisungen beigefügt, die Sie verwenden oder ignorieren können . Die Wahl liegt wirklich bei Ihnen. Sie sind einfach als helfende Hand da. Und nur zur Erinnerung: Sie finden den Link zur Aufgabendatei in den Kursdetails. Und das ist es. Machen Sie weiter und erledigen Sie diese Aufgabe. Wir sehen uns in der nächsten Lektion, in der das Verschachteln von Rahmen für das automatische Layout geht 5. Verschachteln von Auto-Layout-Frames: In Figma bedeutet das Verschachteln von Rahmen, einen oder mehrere Rahmen innerhalb eines anderen zu platzieren Es ist sehr einfach und voll kompatibel mit dem automatischen Layout. Lassen Sie mich Ihnen zeigen, wie Sie das machen würden. Hier haben wir zwei Frames. Einer ist ein horizontaler Rahmen, einer ist ein vertikaler Rahmen, und beide haben ein automatisches Layout. Wenn ich nun einen viel größeren Rahmen erstellen möchte , der beide Elemente enthält, kann ich das auf verschiedene Arten tun. Zuallererst, und das ist am einfachsten, einfach diese beiden Frames auszuwählen und Shift A zu drücken . Dadurch werden sie beide zu einem Frame hinzugefügt , oder ich sollte sagen, zu einem neuen Frame , der über ein automatisches Layout verfügt, wie Sie hier sehen können. Auf diese Weise kann ich viel komplexere Layouts erstellen indem ich sowohl horizontale als auch vertikale Rahmen verwende. Eine andere Möglichkeit wäre, einfach einen der Rahmen zu nehmen und ihn in einen anderen zu ziehen. Und das können Sie über das Ebenenfenster tun. Wenn ich also diesen, den vertikalen Rahmen, innerhalb des horizontalen Rahmens platzieren möchte , kann ich hier zum Ebenenbedienfeld gehen und einfach klicken und hineinziehen. Jetzt habe ich nur noch einen Rahmen, der den vertikalen Rahmen und meine beiden Elemente enthält. In diesem Fall ist der Rahmen mit Objekten ein verschachtelter Rahmen. Schauen wir uns nun eine praktische Anwendung für das Verschachteln an eine praktische Anwendung für das Verschachteln Und für diese Lektion erstellen wir ein Layout von get pixel snap.com neu Wenn wir also nach unten scrollen, finden wir genau hier diesen Bereich , in dem „Entfernung messen “ steht, und das werden wir neu erstellen Jetzt habe ich in Figma einen Screenshot mitgebracht. Ich habe einige Messungen durchgeführt, um die Lücke zwischen dem Titel und der Beschreibung zwischen der Beschreibung und diesen Funktionen, nennen wir sie, Und auch der Abstand zwischen den einzelnen Features und zwischen dem Symbol und dem Feature-Text. Jetzt erstellen wir den ersten Frame, der den Titel und die Beschreibung enthält. Richten wir diese also links und legen einen Abstand von 14 Pixeln zwischen ihnen fest. Wählen Sie auf diese Weise beide Shift A aus, der erste Frame ist fertig. Lassen Sie uns die Funktionen erstellen. Also werde ich den Text verschieben, das Symbol verschieben. Wählen Sie Text und Symbol aus, richten Sie sie in der Mitte und legen Sie einen Abstand von 24 Pixeln zwischen den beiden fest. Wählen Sie beide Shift A Machen Sie dasselbe für das andere. 24 Pixel, wählen Sie „Ausrichten“, „Shift A“. Jetzt haben wir einen Frame, zwei Frames, drei Frames. Lassen Sie uns diesen Teil hier erstellen , einen Rahmen mit den beiden Funktionen. Also wählen wir beide aus oder entschuldigen Sie, wir richten sie einfach zuerst links aus. Stellen Sie sicher, dass wir den richtigen Abstand zwischen ihnen haben, und jetzt wählen wir beide Shift A, um den zweiten großen Frame zu erstellen. Um alles zusammenzubringen, wählen wir einfach diese beiden Frames aus, richten sie links aus und müssen den Abstand von 42 Pixeln zwischen ihnen festlegen. Also wählen wir einfach das und so weiter, bis wir 42 Pixel haben. Schließlich wählen wir beide aus und drücken Shift A oder klicken mit der rechten Maustaste auf das automatische Layout. Es macht genau das Gleiche. Schauen wir uns jetzt an, was wir hier haben. Wir haben Frame 96. Das ist unser Hauptrahmen. Dann haben wir drinnen den oberen Rahmen, der den Titel und die Beschreibung enthält. Und dann der untere Rahmen. Das hat die beiden Funktionen. Und jedes Feature ist ein Rahmen für sich, der das Symbol und den Text enthält. Also, wie viele verschachtelte Frames haben wir hier? Nun, wir haben Frame 94, also eines der Features, das ist eins Das andere Feature, das sind zwei. Frame 95 ist ebenfalls ein verschachtelter Frame, und zwar deshalb, weil er sich innerhalb des größeren Rahmens befindet Das sind also drei, und das sind vier. Wir haben also vier verschachtelte Frames innerhalb dieses Hauptrahmens. Und so verschachteln Sie Auto-Layout-Frames. Als Nächstes haben Sie eine Aufgabe. 6. Zuweisung: Verschachtelung von Auto-Layout-Frames: Verschachteln von Rahmen für das automatische Layout ermöglicht es Ihnen komplexere Konstruktionsstrukturen zu erstellen, und genau das möchte ich Ihnen in dieser Lektion beibringen Die Aufgabe für Sie besteht also darin , ein Layout von timely app.com neu zu erstellen Wenn Sie zum Produkt-Megamenü gehen, finden Sie diesen ersten Abschnitt , den ich hier hervorhebe, sodass Sie ihn neu erstellen werden Ich habe alle Elemente für Sie in Figma hinzugefügt , einschließlich des Symbols und der Textelemente, und Sie haben auch einige Designspezifikationen sowie Anweisungen hier auf der linken Seite, die Sie verwenden oder ignorieren können . Die Wahl liegt wirklich bei Ihnen Sobald Sie mit der Neuerstellung dieses Layouts fertig sind, sehen wir uns in der nächsten Lektion, in der den Layoutfluss geht 7. Erforschen des Layoutflusses in automatischen Layoutrahmen: Layoutfluss bezieht sich auf die Art und Weise, wie Elemente innerhalb eines automatischen Layoutrahmens angeordnet werden . Er besteht aus drei Dingen. Richtung, absolute Position und Stapelreihenfolge der Leinwand. Fangen wir mit der Richtung an. Hier habe ich einen Rahmen mit drei Elementen, die von oben nach unten nacheinander angeordnet sind . liegt daran, dass die Richtung in meinem Auto-Layout-Rahmen auf vertikal eingestellt ist. Ich kann diese Einstellung jederzeit auf „ Horizontal“ oder „Rap“ ändern , indem ich auf die anderen Schaltflächen klicke. Eine horizontale Richtung würde also ungefähr so aussehen , wenn Elemente in einer einzigen Zeile von links nach rechts positioniert werden . Rap ist etwas Besonderes, weil Figma automatisch Elemente, die nicht passen , in zusätzliche Reihen platziert Elemente, die nicht passen , in zusätzliche Reihen Wenn ich also die Größe dieses Rahmens und die Elemente in der ersten Zeile nicht mehr passen, werden sie in der zweiten oder dritten Zeile angezeigt der zweiten oder dritten Zeile Und Figma erledigt das automatisch für mich, wobei Ausrichtung und der Abstand zwischen den Elementen beibehalten es kurz zusammenzufassen in einer Spalte angezeigt In einer Vertikalen werden Elemente vertikal von oben nach unten , unabhängig von der Höhe des übergeordneten Elements Wenn ich also die Größe ändere, bleiben die Elemente in einer Spalte Horizontal, zeigt das Element unabhängig von der Größe des übergeordneten Frames von links nach rechts in einer Zeile an, und bei einem Zeilenumbruch werden Elemente in zusätzlichen Zeilen angezeigt oder verschoben , wenn sie nicht passen, wenn ich die Größe des Hauptrahmens ändere Gehen wir nun zur absoluten Position über. Ich habe also einen Rahmen mit zwei Objekten, und ich habe diesen weißen Rand hinzugefügt, damit Sie die Grenzen dieses übergeordneten Rahmens sehen können. Wenn ich dieses Element nach innen ziehe, wird die Größe des Rahmens an seinen Inhalt angepasst Wenn ich dieses Element auswähle und es nach links, rechts, oben und unten bewege, platziert Figma es automatisch an festgelegten Positionen, abhängig von der Ausrichtung und dem Abstand zwischen den Ich kann dieses Element also nicht beliebig verschieben dieses Element also nicht beliebig Wenn ich jedoch zum Inspektor gehe und auf diese Schaltfläche mit der Aufschrift Absolute Position klicke, passieren zwei Dinge. Zuallererst hat sich der Rahmen einfach selbst an die Größe und Höhe der beiden ursprünglichen Elemente angepasst Im Grunde betrachtet der Rahmen dieses rosafarbene Element nicht einmal als Teil davon Und zweitens kann ich mich jetzt bewegen. Ich kann dieses Element innerhalb dieses Rahmens beliebig verschieben . Und wenn ich es außerhalb der Rahmengrenzen verschieben möchte , kann ich die Leertaste gedrückt halten. Das ist ein Profi-Tipp für dich. Und es wird die Ebene nicht aus dem Rahmen herausnehmen Ebene nicht aus dem Rahmen herausnehmen Bewege es einfach, ändere im Grunde nur seine Position. Das ist eine absolute Position. Lassen Sie uns abschließend die Reihenfolge der Canvas-Stapelung besprechen. Das ist super einfach zu verstehen. Ich habe hier einen automatischen Layoutrahmen mit drei Feldern, und ich verwende eine negative Lücke zwischen Elementen, dazu später mehr, um sie zu überlappen. Wie Sie hier sehen können, sind sie also übereinander angeordnet. Und wenn wir uns die Position in der Ebenenliste ansehen, haben wir die Felder eins, zwei, drei. Box drei steht also über allem anderen. Box zwei befindet sich zwischen Box eins und Box drei, richtig? Visuell. Wenn ich jetzt diesen Rahmen auswähle, den Inspektor im Auto-Layout-Panel aufrufe und auf die erweiterten Einstellungen klicke, kann ich die Canvas-Stapelung von der letzten Position nach oben ändern, was standardmäßig die erste Option ist Das bedeutet, dass jetzt die erste Ebene im Ebenenfenster , in meinem Fall das Feld eins, oben liegt Und dann werden die anderen folgen. Jetzt befindet sich Box drei hinter den anderen beiden Boxen. Schauen wir uns nun eine praktische Anwendung an. Und für diese Lektion erstellen wir ein Layout von airbnb.com neu Genauer gesagt eines dieser Inserate, das ein Bild, einige Textinformationen, einige Symbole und in einigen Fällen ein Lieblings-Abzeichen für Gäste enthält einige Textinformationen, einige Symbole und in einigen Fällen ein Lieblings-Abzeichen und in einigen Fällen ein Zurück in Figma habe ich einen Screenshot von einem dieser Angebote gemacht und auch einige Designspezifikationen hinzugefügt Ich habe auch jedes Symbol, das wir benötigen, in das Bild eingebracht und die Textelemente erstellt Fangen wir also an, dieses Layout neu zu erstellen. Mit dem Lieblingsabzeichen des Gastes. Dies ist ein einfacher Rahmen , dem wir einen Hintergrund, eine Rahmenbreite und eine Höhe hinzufügen eine Rahmenbreite und eine Höhe und den wir auch umrunden. Das ist also ziemlich einfach zu machen. Lass uns das auswählen. Shift A, um damit einen Rahmen zu erstellen. Wir werden seine Höhe auf 26 setzen. Wir werden eine Füllfarbe hinzufügen. Und wir werden einen weißen Rand hinzufügen, ein Pixel. Und machen wir es auch rund, so. Als Nächstes beginnen wir mit dem Text hier unten. Wir haben also das Entfernungsdatum der Kacheln nach links ausgerichtet , ohne dass eine Lücke dazwischen besteht. Also lass uns das machen. Titel, Entfernung, Datum. Richten wir sie links und lassen wir keine Lücke zwischen ihnen. Wenn diese drei ausgewählt sind, verschieben Sie A, und das ist unser erster Frame. Und weil die Objekte ursprünglich übereinander positioniert wurden, ist Figma sehr intelligent, und es legt die Richtung für uns automatisch auf Vertikal fest für uns automatisch auf Vertikal Als Nächstes haben wir den Preis , der sechs Pixel von den obigen Elementen entfernt Also lass uns das machen. Wir richten alles aus und setzen es so auf sechs Pixel. Shift A, um einen weiteren vertikalen Rahmen zu erstellen. Lassen Sie uns als Nächstes hier an dieser Bewertung arbeiten. Wir haben also einen Stern, einen Abstand von vier Pixeln und die Bewertungspunktzahl. Lassen Sie uns diese beiden Elemente auswählen. Richten wir sie auf die Mitte aus. Platzieren wir das Symbol hier bei vier Pixeln, etwa so. Und dann wählen wir beide aus und fügen einen automatischen Layoutrahmen hinzu. Lassen Sie uns nun den Text nach oben verschieben und auch den horizontalen Bewertungsrahmen nach oben verschieben, diese am Bild auszurichten. Dann wählen wir beide aus, verschieben A, um einen horizontalen Rahmen zu erstellen, und wählen dann diesen Rahmen und das Bild aus, und verschieben A, um einen vertikalen Rahmen zu erstellen. Die letzten beiden Elemente, die wir platzieren müssen , sind das Gast-Favoritenabzeichen und das Hardicon. Sie befinden sich über dem Bild, 12 Pixel von den Rändern entfernt. Wie machen wir das? Nun, wenn wir uns diese Elemente schnappen und sie über unseren Hauptrahmen bewegen, werden sie einfach entsprechend der Richtung des Rahmens positioniert , in meinem Fall vertikal. Ich kann sie jedoch auswählen und zum Inspektor gehen und auf absolute Position klicken. Dadurch kann ich dieses Element innerhalb des Auto-Layout-Rahmens frei bewegen . Und mit ein bisschen Rauf und Runter. Wir sind in der Lage, diese korrekt zu positionieren, sodass der Abstand von 12 Pixeln zu den Bildrändern Das ist also unser fertiger Rahmen. Wir haben hier mehrere Techniken verwendet, zum einen die Verschachtelung, und wir haben auch vertikale automatische Layoutrahmen erstellt, wir haben horizontale automatische Layoutrahmen und wir haben auch die absolute Positionierung für diese beiden Elemente verwendet absolute Positionierung für diese beiden Elemente Und das war's auch schon für den Layout-Flow. Als Nächstes haben Sie eine Aufgabe. 8. Zuweisung: Erforschen des Layoutflusses in automatischen Layoutrahmen: Ordnung, es ist Zeit für Sie, die Verwendung von Layout Flow in Figma zu üben Verwendung von Layout Flow in Figma Und Ihre Aufgabe ist es, ein Layout aus Notion neu zu erstellen. Dies ist die Notion-Website Wenn Sie ganz nach unten scrollen, finden Sie diesen Abschnitt Sie werden also diese Box zusammen mit dem Bild darüber neu erstellen zusammen mit dem Bild darüber Und zurück in Figma habe ich natürlich einen Screenshot, einige Designspezifikationen und auch die Rohbilder, den Text und die Symbole bereitgestellt , zusammen mit einigen Anweisungen , die Sie wie üblich verwenden können, um sich eine helfende Hand zu holen oder ignorieren und alles selbst zu erledigen Machen Sie also weiter und erledigen Sie die Aufgabe, und wenn Sie fertig sind, nehmen Sie bitte an der nächsten Lektion teil , in der es um Abstände geht 9. Auto-Layout-Abstände meistern: Beim mündlichen Layout haben wir zwei wichtige Methoden zur Steuerung des Abstands Und das sind Abstand und Polsterung. Beginnen wir mit der Lücke, genauer gesagt mit der Lücke zwischen den Elementen, und in einem mündlichen Layoutrahmen ist der Abstand zwischen den Elementen immer gleich In diesem Beispiel habe ich also 56 Pixel zwischen dem ersten und dem zweiten Element und wiederum 56 Pixel zwischen dem zweiten und dem dritten. Und ich kann den Abstand ganz einfach ändern indem ich auf die Griffe klicke und hierher ziehe, oder ich gehe zum Inspektor und gebe hier manuell einen Wert ein, sagen wir 50. Ich kann auch mathematische Operationen ausführen. Ich kann also 50 mal zwei oder plus zwei oder minus zwei oder geteilt durch zwei machen. Es funktioniert genauso. Ich kann hier auch auf diesen Griff klicken und ihn ziehen , um den Abstand manuell zu ändern. Jetzt habe ich in horizontalen und vertikalen Rahmen einen einzigen Wert für den Abstand. Wenn mein Rahmen jedoch auf Umbruch eingestellt ist, habe ich Werte sowohl für horizontal als auch für vertikal. Und standardmäßig ist der vertikale Abstand derselbe wie der horizontale. Aber das kann ich überschreiben. Ich kann einen ganz anderen Wert angeben, und ich kann sie auch von hier oder von hier aus ändern. Und wenn ich zurückgehen möchte , sodass die vertikale Lücke dieselbe ist wie die horizontale, kann ich einfach das Löschen auswählen und die Eingabetaste drücken, und sie werden einfach wieder miteinander verknüpft Jetzt kann die Lücke auch ein negativer Wert sein. Lassen Sie uns das wieder in ein horizontales Layout ändern, und ich kann es einfach ziehen bis ich auf minus was auch immer, -100, komme In diesem Fall überlappen sich meine Elemente, meine untergeordneten Elemente Sie sind übereinander gestapelt. Und ich kann diese Lücke vom Canvas aus oder vom Inspektor aus ändern , genau wie ich es Ihnen zuvor gezeigt habe Jetzt kann die Lücke auch auf automatisch gesetzt werden. Und hier ist, was das bewirkt. Also ein numerischer Wert wir grundsätzlich den gleichen Abstand zwischen den untergeordneten Elementen festlegen Abstand zwischen den untergeordneten Elementen unabhängig von der Größe des übergeordneten Frames. Aber wenn ich das auf Auto setze , indem ich entweder hier im Inspektor auf das Drop-down-Menü klicke und Auto auswähle, oder indem ich auf die Griffe klicke und Auto eintippe. Es macht genau das Gleiche. Dabei wird der größtmögliche Abstand zwischen Elementen verwendet , unabhängig von der Größe des übergeordneten Frames. Ich kann die Größe also so ändern, und Figma fügt automatisch den gleichen Abstand zwischen allen Elementen Es wird das im Handumdrehen berechnen. Wirklich, wirklich cool. Und es gibt auch eine sehr praktische Tastenkombination zwischen automatischer Lücke und Zahlenlücke hin- und herschalten Wenn Sie also hier auf das Ausrichtungsfeld klicken und X drücken , wechseln Sie zwischen Auto und Lassen Sie uns nun mit der Polsterung fortfahren. Und das Padding ist im Grunde der Abstand zwischen den Grenzen eines Auto-Layout-Frames und seinen untergeordneten Elementen Und um das zu veranschaulichen, habe ich diesem automatischen Layoutrahmen einen weißen Rand hinzugefügt So können Sie sehen, wo seine Grenzen liegen. Und Sie können Polsterung hinzufügen, indem Sie zum Inspektor gehen Sie können diese beiden Felder verwenden Um horizontale Polsterung hinzuzufügen, was linke und rechte Polsterung bedeutet, oder vertikale Polsterung, was oben und unten bedeutet Alternativ können Sie hier auf das Feld klicken, um den Abstand wie folgt zu ändern, oder Sie können die Griffe hier auf der Leinwand verwenden, wie hier gezeigt, oder Sie können klicken und einen Wert manuell eingeben Sie können auch die Optionstaste oder die alte Taste gedrückt halten, während Sie auf diese Griffe klicken, um beide gegenüberliegenden Seiten gleichzeitig zu ändern Das heißt also oben und unten oder links und rechts. Wenn du zusätzlich die Shift-Taste gedrückt hältst, kannst du alle vier Seiten gleichzeitig wechseln. Im Inspektor können Sie hier auch zwei Werte eingeben. Also, zum Beispiel 5030, wir verwenden 50 Padding links, 30, rechts Das Gleiche gilt für die Unterseite. Zehn, 20, wir verwenden zehn oben, 20 unten. Und Sie können auch auf Individuelle Polsterung klicken , sodass Sie jede einzelne Seite nach Ihren Wünschen ändern Da wir hier sind, können Sie auch die Strg- oder Befehlstaste gedrückt halten und auf eines dieser Felder klicken , um alle vier Seiten gleichzeitig zu ändern alle vier Seiten gleichzeitig indem Sie denselben Wert eingeben Schauen wir uns nun eine praktische Anwendung für GAAP und Padding an eine praktische Anwendung für GAAP und Padding Und für diese Lektion werden wir ein anderes Layout von Get Pixel Snap.com neu erstellen ein anderes Layout von Get Und wir werden diesen ersten Teil des Heldenbereichs neu erstellen , der den Titel, die beiden Schaltflächen und den 30-Tage-Geld-zurück-Text enthält und den 30-Tage-Geld-zurück-Text Zurück in Figma habe ich einen Screenshot mitgebracht und auch einige Messungen vorgenommen Ich habe einige Designspezifikationen erstellt. Und ich habe die Textelemente neu erstellt und das Symbol eingefügt, das wir hier in der zweiten Schaltfläche platzieren Apropos Schaltflächen, fangen wir dort an, denn eine Schaltfläche ist einer der Hauptanwendungsfälle für das automatische Layout Das ist sehr einfach zu erstellen und ermöglicht es dieser Schaltfläche, ihre Größe selbst zu ändern, wenn sich der Text darin ändert Lassen Sie uns also diese erste Schaltfläche mit der Aufschrift „Inzwischen“ neu erstellen diese erste Schaltfläche mit der Aufschrift „Inzwischen Und wir müssen ihm einen Hintergrund hinzufügen, einen linearen Farbverlauf. Randradius ändert die Textfarbe in Weiß, und wir werden auch den Abstand ändern. Beginnen wir also mit der Auswahl der Schaltfläche „Inzwischen“. Shift A, um es zu einem automatischen Layoutrahmen hinzuzufügen. Und wir werden hier die notwendige Polsterung hinzufügen. Oder weißt du was? Nein, lassen Sie uns die Füllfarbe hinzufügen. Also werden wir hier einen linearen Farbverlauf hinzufügen. Lassen Sie mich hier genauer hineinzoomen, damit Sie ein bisschen besser sehen können, was wir machen. Also ändern wir die erste Farbe auf F E 84 B. zweite Farbe wird FA 4567 sein Da wir schon hier sind, ändern Sie die Farbe des Textes auf Weiß. Und jetzt ändern wir die Polsterung. Wenn wir uns die Spezifikationen also sehr schnell ansehen, haben wir 30 Pixel Seitliche oder horizontale Polsterung und 14 vertikale Polsterung Lassen Sie uns auch den Randradius auf acht Pixel ändern, und unsere erste Schaltfläche ist jetzt fertig Wie einfach war das? Und natürlich, wenn ich den Text hier, inzwischen, oder sagen wir heute, ändere , siehst du die Schaltfläche nur um sie an das Textelement anzupassen. Gehen wir zur zweiten Schaltfläche über. Das ist sehr ähnlich, außer dass wir dieses Symbol haben. Lassen Sie uns also weitermachen und diese zunächst ausrichten. Shift A, um beide zu einem automatischen Layoutrahmen hinzuzufügen, und wir müssen hier einen Rahmen hinzufügen, also machen wir einen Rahmen mit zwei Pixeln. Und lassen Sie uns auch den erforderlichen Abstand hinzufügen, sodass das 30 horizontal und 14 vertikal Wir ändern den Eckenradius auf acht und den Abstand zwischen den Elementen auf zehn Pixel, einfach so Und damit ist unser zweiter Button fertig. Gehen wir nun zum Rest des Layouts über. Wir benötigen einen Abstand von 30 Pixeln zwischen diesen beiden Tasten. Lassen Sie uns also mit beiden einen Rahmen erstellen. Wählen Sie beide aus, verschieben Sie A und ändern Sie dann den Abstand einfach auf 30. Stellen wir nun einen Abstand von 40 Pixeln zwischen dem Text und den beiden Schaltflächen ein. Also werden wir diese grob in der Mitte ausrichten. Wählen Sie beide Shift A aus, und wir setzen den Abstand auf 30 Pixel. Und zum Schluss brauchen wir Hoppla , da waren es 40 Pixel Es tut uns leid. Und schließlich müssen wir einen Abstand von 55 Pixeln zwischen dem Titel und diesen anderen Elementen festlegen. Wählen Sie also alles aus, Shift A und 55. Da haben wir's. Die waren perfekt positioniert. Durch die Verwendung der Abstandstechniken sowie einiger anderer Techniken , die wir zuvor gelernt haben, konnten wir dieses Layout also sowie einiger anderer Techniken , die wir zuvor gelernt haben, sehr schnell neu erstellen Deshalb haben wir die beiden Schaltflächen mithilfe von Innenabständen erstellt, und wir haben auch die GAP-Eigenschaft verwendet, um den Abstand zwischen allen Elementen in unserem Layout sowie den Abstand zwischen dem Symbol und dem Text innerhalb der zweiten Schaltfläche festzulegen sowie den Abstand zwischen dem Symbol und dem Text innerhalb der zweiten Und das war's auch schon für den Abstand. Als Nächstes haben Sie eine Aufgabe. 10. Aufgabe: Den automatischen Layoutabstand meistern: dieser Aufgabe dreht sich alles darum, den automatischen Layoutabstand zu beherrschen , da Sie viel mit Abständen und GAPS arbeiten werden und GAPS Ihre Aufgabe besteht also darin, ein Layout von cleanshot.com neu zu erstellen Wir sprechen über diesen ersten Teil des Hero-Layouts , der hier beginnt und mit diesem 30-tägigen Geld-zurück-Text endet Und um Ihnen zu helfen, habe ich wie gewohnt den Screenshot, einige Designspezifikationen und alle Textelemente hinzugefügt den Screenshot, einige Designspezifikationen . Außerdem sind alle Symbole zusammen mit einigen Anweisungen hier auf der linken Seite für Sie vorbereitet zusammen mit einigen Anweisungen hier auf der linken Seite für Sie , die Sie verwenden oder ignorieren können. Es liegt wirklich an dir. jetzt weiter und erledigen diese Aufgabe, denn sie ist sehr, sehr wichtig. Und wenn Sie das getan haben, nehmen Sie an der nächsten Lektion teil, in der wir über Alignment sprechen werden. 11. Perfekte Ausrichtung erreichen: Bevor wir beginnen, gibt es eine wichtige Sache, die Sie verstehen müssen. Und das heißt, Sie können die Ausrichtung untergeordneter Objekte nicht separat steuern . Stattdessen legen Sie die Ausrichtung auf dem übergeordneten Frame fest. Und hier ist, was ich damit meine. Genau hier haben wir drei Elemente. Shift A, um sie zu einem automatischen Layoutrahmen hinzuzufügen. Und wenn wir in den Inspektor schauen, haben wir das Ausrichtungsfeld. Derzeit sind alle drei Elemente so eingestellt, dass sie oben links ausgerichtet sind. Und wenn ich die Größe dieses Rahmens ändern würde und ich Ihnen hier das Gesamtbild zeigen und die Ausrichtungsoption ändern würde, würden und ich Ihnen hier das Gesamtbild zeigen die Ausrichtungsoption ändern würde, wir alle drei Elemente in die gewünschte Richtung verschieben oder sie so ausrichten, wie ich es möchte Und ich kann sie an allen vier Seiten ausrichten. Also oben, rechts, unten links sowie oben links, oben in der Mitte, oben rechts und so weiter. Also, wenn ich möchte, dass sie sich genau in der Mitte meines übergeordneten Frames befinden, sowohl horizontal als auch vertikal. Ich klicke einfach genau hier in der Mitte. Wenn ich sie links haben möchte, aber vertikal in der Mitte, mache ich das einfach. Du verstehst das Bild. Aber die Idee ist, dass sie sich alle gleichzeitig bewegen, sie sind gruppiert. Sie sind als Gruppe ausgerichtet, und ich kann die Ausrichtung nicht einzeln ändern . Bei jedem von ihnen. Ich kann also nicht zulassen, dass dieses erste Element oben links und dieses andere Element oben rechts ausgerichtet wird. So funktioniert es nicht. Und Sie haben diese neun Ausrichtungsoptionen fast immer zur Verfügung, unabhängig von der Richtung, in der Ihr Rahmen eingestellt ist. Selbst wenn es auf vertikales oder horizontales Layout oder um, p eingestellt ist vertikales oder horizontales Layout oder um, , stehen Ihnen dieselben neun Richtungen zur Verfügung, aus denen Sie wählen können. Es gibt nur geringfügige Unterschiede. Wenn Sie es beispielsweise auf p setzen, wird hier ein anderes Symbol angezeigt. Und die Elemente werden, weißt du, etwas anders ausgerichtet, weil du es vielleicht mit mehreren Zeilen zu tun hast. Aber in den meisten Fällen werden Sie diese neun Optionen haben. Das ist natürlich so lange, bis Sie den Abstand zwischen den Elementen von Zahl auf Automatisch ändern . Wenn Sie das tun, wenn Sie zu Auto wechseln, Ihnen keine neun Ausrichtungsoptionen mehr zur Verfügung. Sie haben nur drei Ausrichtungsoptionen. Und je nach Richtung des Layouts können diese entweder links mittig oder rechts bei einem vertikalen Layout oder oben mittig oder unten bei einem horizontalen Layout sein. Und wenn Sie das durch Umbrechen ersetzen, dann haben Sie, Sie wissen schon, zwei Lücken, und die Ausrichtungsoptionen ändern sich dort auch. Jetzt können Sie jederzeit auf dieses Feld klicken und die Pfeiltasten auf Ihrer Tastatur verwenden. Sozusagen um den aktiven Punkt zu verschieben. Wenn ich also derzeit nach rechts drücke, wird das nach rechts verschoben. Wenn ich von links nach links drücke, oben nach unten, bekommst du das Bild. Du kannst auch WASD drücken, um sie in die Ecken zu verschieben. So wie es ist. Bevor ich zu einer praktischen Anwendung übergehe, möchte ich Sie kurz über eine weitere Ausrichtungsoption informieren , die als Textgrundlinie bezeichnet wird. Wenn Sie also horizontale, vorsichtige, nur horizontale oder horizontale Layoutrahmen haben , haben Sie die Möglichkeit, Textelemente an ihrer Grundlinie auszurichten Textelemente an ihrer Grundlinie Und was ist eine Grundlinie? Nun, im Grunde ist es diese Zeile genau hier, auf der sich der Text befindet. Okay. Also hier habe ich zwei Textelemente unterschiedlicher Größe. Und wenn ich mit ihnen einen automatischen Layoutrahmen erstelle, kann ich wählen, ob ich sie nach oben in der Mitte oder nach unten ausrichten möchte, aber keine dieser Optionen sieht wirklich gut aus. Ich möchte ihre Grundlinien ausrichten. Okay? Und das können Sie ganz einfach tun, wenn Sie zu den erweiterten Einstellungen für das automatische Layout und dieses Kästchen hier ankreuzen. Und das wird im Wesentlichen das tun. Dadurch wird die Grundlinie von Text eins an der Grundlinie von Text zwei ausgerichtet . Wirklich, wirklich praktisch, und Sie werden gleich genau einen sehr coolen Anwendungsfall für diese Technik sehen . Lassen Sie uns nun eine praktische Anwendung machen. Und für diese Lektion werden wir ein Layout von kineticlabs.com neu erstellen Genauer gesagt, dieser Teil hier , der Informationen zu einem bestimmten Produkt bietet Also habe ich alles zu Figma gebracht. Wie üblich haben wir den Screenshot zusammen mit einigen Designspezifikationen Und ich habe auch alle notwendigen Bilder mitgebracht. Ich habe die Textelemente neu erstellt. Und ich habe einige der Rahmen wie diese Schaltfläche oder diesen Sternenstapel erstellt diese Schaltfläche oder diesen Sternenstapel , nur um ein bisschen Zeit zu sparen Nachdem das geklärt ist, wollen wir das Layout mit den neuen Techniken, die wir heute über die Ausrichtung gelernt haben, neu erstellen neuen Techniken, die wir heute über die Ausrichtung gelernt haben, Fangen wir mit diesem Teil ganz oben an. Ich möchte meinen Stapel von Sternen, einen Pixelabstand, eine Bewertung, Abstand von zehn Pixeln und dann einen Link für die Bewertungen, und alles muss in der Mitte ausgerichtet sein. Also lass uns die Sterne machen und diese auswählen. Stellen wir sicher, dass die Ausrichtung hier auf Mitte eingestellt ist, und legen wir den Abstand auf eins fest. Und dann lassen Sie uns die Bewertungen einbringen. Wählen Sie beide aus. Shift A. Und wieder werden wir sicherstellen, dass die Ausrichtung auf Mitte eingestellt ist. Und wir werden den Abstand auf zehn Pixel einstellen. Damit ist unser erster größerer Frame fertig. Wenn ich nun diese komplexen Layouts erstelle, versuche ich immer, Elemente zu sehen, zwischen denen ich den gleichen Abstand habe, und diese dann in einem automatischen Layoutrahmen zu gruppieren. Zum Beispiel haben die ersten drei Elemente in meinem Layout den gleichen Abstand, nämlich 16 Pixel. Schnappen Sie sich also diese drei, verschieben Sie A und stellen Sie sicher, dass sie nach links ausgerichtet sind. Ich werde einen Abstand von 16 Pixeln festlegen. Lass uns weitermachen. Wir haben die Liste hier. Also Symbol und Text. Und wir haben einen Abstand von acht Pixeln zwischen Symbol und Text und einen Abstand von zehn Pixeln zwischen jedem Listenelement. Lassen Sie uns dann die Symbole einfügen. Lass uns das duplizieren. Bring den anderen mit. Wählen Sie dann den ersten aus, verschieben Sie A, richten Sie ihn auf die Mitte aus und stellen Sie den Abstand ein. Machen wir dasselbe für den zweiten. Stellen Sie die Lücke ein und für diesen. Und dann wähle alle drei aus, Shift A. Achte darauf, dass wir sie links ausrichten und einen Abstand von zehn Pixeln festlegen. Damit ist unser zweiter Frame fertig. Lass uns weitermachen. Wir haben den Preis und dann die Packung mit 18 Stück. Es gibt keine Lücke dazwischen, aber sie sind anhand der Grundlinie, der Textgrundlinie, gut ausgerichtet . Okay? Also wähle das aus. Shift A, ich ändere das Layout auf horizontal, klicke hier und drücke B. Das ist die Tastenkombination, um die Textausrichtung ein- und auszuschalten Und lassen Sie uns einfach die Lücke dort entfernen. Also, das ist Bild Nummer drei. Lassen Sie uns als Nächstes sehen, wir haben diesen Mengentext , der bereits fertig ist, und dann haben wir diese Schaltflächen. Wir haben also Plus Minus. Jede Schaltfläche hat einen Kreis mit einer Größe von 48 Pixeln und das Symbol befindet sich genau in der Mitte Dann haben wir eine Zahl dazwischen und einen Abstand von 16 Pixeln. Beginnen wir also mit der Erstellung der Schaltflächen. Nun, diese Symbole hier sind bereits Rahmen, wie Sie im Ebenenfenster sehen können, und sie enthalten einen Vektor darin. Und da es sich bereits um Frames handelt, können wir das automatische Layout hinzufügen. Shift A. Und im Inspektor ändere ich einfach die Breite und die Höhe. Ich werde den Grenzradius 2100 ändern , sodass ein perfekter Kreis entsteht. Und dann möchte ich sicherstellen, dass das Symbol genau in der Mitte positioniert ist, also werde ich darauf klicken. Und dann füge ich endlich einen Rand hinzu, der ein Pixel dF D F ist. Machen wir dasselbe für das Minus. Und dann nehmen wir das Minus und die Zahl. Wählen Sie alle drei aus, Shift A. Achten Sie darauf, dass wir sie in der Mitte ausrichten. Und wir werden auch einen Abstand von 16 Pixeln festlegen. Und das ist ein weiterer Rahmen, der einsatzbereit ist. Danach haben wir die Schaltfläche, die bereits erstellt wurde, und wir müssen noch daran arbeiten, diese beiden Elemente hier zu erstellen. Also Symbol, Text, Symboltext. Acht Pixel zwischen den 230 Pixeln zwischen den beiden größeren Elementen. Bringen wir das Symbol ein. So wie. Und so. Wählen Sie diese aus. Shift A, auf die Mitte ausrichten. Acht Pixel, mach hier dasselbe. Wählen Sie nun beide Shift A aus, richten Sie beide in der Mitte aus und stellen Sie einen Abstand von 30 Pixeln ein. Jetzt haben wir alle wichtigen Frames fertiggestellt. Jetzt müssen wir sie nur noch alle zusammenbringen und den richtigen Abstand zwischen ihnen festlegen. Fangen wir also von ganz oben an. Wir haben den ersten Frame und dann 18 Pixel und dann diesen zweiten Abschnitt. Wählen Sie also alle aus und richten Sie sie nach links aus. 18 Pixel. Als nächstes haben wir einen Abstand von 22 Pixeln und den Preis. Und hier werde ich dir tatsächlich einen wirklich coolen Trick zeigen. Anstatt beide auszuwählen und einen weiteren Rahmen mit ihnen zu erstellen , nur damit ich die größere Lücke setzen kann. Ich kann das innerhalb des Hauptrahmens verschieben, ich kann es nach unten drücken, und ich habe derzeit einen Abstand von 18 Pixeln, und ich benötige 22. Ich kann also die anderen vier Pixel wieder wettmachen , indem diesem Rahmen eine obere Polsterung hinzufüge Es geht also ungefähr so. Ich wähle den Rahmen aus, gehe hier rein und füge vier Pixel hinzu. Richtig? Dadurch werden lediglich vier Pixel Polsterung über dem Preistext hinzugefügt Polsterung über dem Preistext Und diese vier Pixel zusammen mit den anderen 18 Pixeln, die ich aus der Lücke im Hauptrahmen habe, bringen mich auf 22 Pixel Auf diese Weise können Sie diese Frames effizienter erstellen , ohne sie mit mehreren verschachtelten Frames zu komplizieren Wirklich cool. Als Nächstes haben wir einen Abstand von 25 Pixeln bis zum nächsten Objekt, das ist diese Menge. Also kann ich X das einfach befehlen, es einfügen. Und da es sich auch um einen Rahmen handelt, kann ich den Rest des Unterschieds ausgleichen , indem ich eine obere Polsterung Ich brauche also 25 Pixel, und ich habe hier 18 Lücken. Der Unterschied liegt bei sieben Pixeln, oder? Wählen Sie also diesen Rahmen aus und fügen Sie oben sieben Pixel hinzu. Und dann haben wir 16 Pixel zwischen diesem Element und der Tastenreihe. Hier muss ich diese beiden Elemente auswählen, a verschieben, um einen weiteren Frame zu erstellen, und dann diesen Abstand auf 16 setzen, weil er kleiner als 18 ist, was wir als Lücke für den Hauptrahmen festgelegt hatten. Und weil ich keinen negativen Abstand verwenden kann , um diesen Wert auf 16 zu bringen, musste ich einen weiteren Rahmen mit diesen beiden Elementen erstellen Jetzt wählen wir diese Elemente aus, verschieben A, um einen weiteren Rahmen mit ihnen zu erstellen, richten sie zur Mitte aus und setzen den Abstand auf 16 Pixel Das wird die Sache für mich nur ein bisschen einfacher machen , denn jetzt muss ich den Abstand zwischen diesem und dem Rest auf 32 Pixel setzen, wie Sie hier sehen können. Also nochmal, ich kann das auf zwei Arten tun entweder beide auswählen, einen neuen Frame mit ihnen erstellen oder das Ganze direkt im Hauptrahmen verschieben Wir haben hier 16 Pixel und ich brauche weitere 16. Und da es sich um einen automatischen Layoutrahmen handelt, kann ich 16 hinzufügen, wodurch er gerade genug nach unten gedrückt wird. Visuell habe ich also diesen Abstand von 32 Pixeln. Also da hast du es. Auf diese Weise können Sie in Figma ein etwas komplexeres Layout erstellen , indem Sie alle Ausrichtungs- und Abstands- und Abstandsoptionen verwenden, die wir bisher gelernt haben Nun, als Nächstes hast du einen Auftrag, also werde ich dich dort sehen 12. Aufgabe: Perfekte Ausrichtung erreichen: dieser Aufgabe geht es darum, sich mit der Ausrichtung innerhalb von Auto-Layout-Frames vertraut zu machen. Es ist sehr wichtig, also verpassen Sie es bitte nicht. Jetzt besteht Ihre Aufgabe darin, ein Layout aus der Nucleo-App neu zu erstellen Und das ist einer dieser Abschnitte mit der Preistabelle. Es ist nicht genau das, was Sie gerade auf der Live-Website sehen. Ich habe eine etwas ältere Version. Offenbar hat die Nucleo App ihre Preisseite zwischen dem Zeitpunkt, an dem ich den Screenshot gemacht habe, und dem Zeitpunkt, an dem ich mit der Aufnahme begonnen habe, geändert ihre Preisseite zwischen dem Zeitpunkt, an dem ich den , aber das ist alles gut kann man immer noch viel Selbst mit dieser veralteten Version kann man immer noch viel üben Also habe ich wie immer den Screenshot, die Designspezifikationen und auch alle Textelemente, die Symbole, beigefügt den Screenshot, die Designspezifikationen und auch alle Textelemente, die Symbole, und auch diese Schaltfläche für Sie erstellt, damit Sie nicht mit den Farbverläufen und all dem herumspielen müssen den Farbverläufen und all dem Außerdem habe ich einige Anweisungen beigefügt, die Sie ignorieren oder verwenden können. Es liegt ganz bei Ihnen Machen Sie also weiter und erledigen Sie diese Aufgabe. Wie gesagt, es ist sehr wichtig, und wenn Sie fertig sind, sehen wir uns in der nächsten Lektion, in der die Größenänderung mit dem automatischen Layout geht. 13. Größenanpassung mit Auto-Layout: Bei der Größenänderung mit automatischem Layout können Sie sowohl den übergeordneten Rahmen als auch die untergeordneten Elemente steuern . Und in dieser Lektion lernen Sie die folgenden drei Optionen zur Größenänderung kennen. Inhalt umarmen, Behälter fixieren und befüllen. Als Bonus besprechen wir die Mindest- und Maximalgröße. Fangen wir mit dem Inhalt von Hug an. Dies funktioniert nur im übergeordneten Frame und ist das Standardverhalten Wenn ich also diese drei Elemente auswähle und automatisches Layout hinzufüge, stellt Figma die horizontale und vertikale Größenänderung auf „umarmen“, genauer gesagt auf „Inhalt umarmen Das bedeutet, dass der Rahmen nur so hoch und breit ist wie Das heißt, wenn ich eines seiner untergeordneten Elemente lösche, wird die Größe des Rahmens dann geändert Es ist viel kleiner, oder? Wenn ich es wieder hinzufüge, wird der Rahmen größer. Denken Sie jetzt daran, dass Figma dies unter Beibehaltung der gleichen Polsterung tut , die ich Wenn ich also den Abstand hier auf, sagen wir, 30 Pixel ändere , wird der Rahmen so groß und so hoch wie die untergeordneten Elemente plus die Polsterung, die ich darauf eingestellt habe Auch hier gilt: Wenn ich dieses eine untergeordnete Element lösche, wird der Rahmen kleiner, aber dieser Abstand wird beibehalten Und wenn ich zu irgendeinem Zeitpunkt einen Rahmen habe, der weiß , was eine andere Größenänderungsoption ist als den Inhalt zu umarmen Ich kann es im Inspektor immer wieder auf Inhalt umarmen setzen Inspektor immer wieder auf Inhalt umarmen Wenn ich hier klicke, kann ich es horizontal oder vertikal einstellen, oder ich kann es tatsächlich, und das ist ein Profi-Tipp, ich kann entweder auf eine horizontale Kante doppelklicken, um die horizontale Größenänderung so einzustellen, dass Inhalte wie diese umarmt werden, oder ich kann auf eine vertikale Kante doppelklicken. Also entweder die obere und die untere Kante, etwa so, um die vertikale Größenänderung so einzustellen, dass sie den Inhalt umarmt Wenn Sie nun möchten, dass Ihr übergeordneter Frame unabhängig von der Größe der untergeordneten Elemente unverändert bleibt , müssen Sie die Option zur Größenänderung auf fest setzen Und das können Sie auf zwei Arten tun. Hier habe ich einen Standardrahmen , der Hug-Content verwendet, und um ihn auf „fest“ zu setzen, kann ich entweder die Größe von der Leinwand aus ändern, weißt du, indem ich an einem der Griffe ziehe Und wenn wir jetzt im Inspektor nachschauen, sowohl die horizontale als auch die vertikale Größenänderung sind sowohl die horizontale als auch die vertikale Größenänderung auf fest eingestellt, oder wenn sie so eingestellt sind, dass sie den Inhalt umarmen, kann ich manuell einen Wert eingeben, kann ich manuell einen Wert eingeben, der automatisch auf fest gesetzt wird Und das funktioniert natürlich für beide Richtungen. Und ein Rahmen, der auf „fest“ gesetzt ist, ändert seine Größe nicht entsprechend den untergeordneten Elementen Wenn ich dieses Element zum Beispiel viel größer machen würde, würden Sie feststellen, dass der Rahmen, weil er auf fest eingestellt ist , exakt dieselbe Größe Bisher haben Sie gelernt, dass Hug-Inhalte es einem Frame grundsätzlich ermöglichen, ihn nach Bedarf zu verkleinern oder zu vergrößern, um seinen Inhalt an die Größe der untergeordneten Elemente anzupassen Aber was ist, wenn Sie möchten, dass ein untergeordnetes Element verkleinert oder erweitert wird, um den gesamten verfügbaren Platz innerhalb des übergeordneten Frames auszufüllen innerhalb des In diesem Fall müssen Sie „Container füllen“ verwenden. Jetzt funktioniert „Container füllen“ nur für untergeordnete Elemente. Schauen wir uns also diesen Rahmen an, in dem sich zwei Boxen befinden. Jeder ist auf eine feste Dimension eingestellt. Wenn ich also die Größe dieses übergeordneten Frames ändere, passiert nichts. Die untergeordneten Elemente behalten exakt dieselbe Größe. Wenn ich jedoch eines davon auswähle und, sagen wir, die horizontale Größenänderung so festlege, dass der Container gefüllt wird, nimmt dieses untergeordnete Element jetzt den gesamten verfügbaren Speicherplatz ein. Und Figma berücksichtigt natürlich die Polsterung innerhalb des Elements und auch den Abstand zu den anderen Wenn ich dieses Element als Füllcontainer festlegen würde, hätten diese beiden untergeordneten Elemente außerdem exakt dieselbe Größe, da sie den Behälter in gleichen Mengen füllen Sie werden beide den gleichen Speicherplatz beanspruchen. Und wenn ich noch eine dritte hinzufüge, haben alle drei jetzt die exakt gleiche Größe, weil sie alle so eingestellt sind , dass sie den Behälter füllen, sodass sie den gleichen Platz beanspruchen. Ich kann ein untergeordnetes Element so einstellen, den Container auch in vertikaler Richtung füllt dass es den Container auch in vertikaler Richtung füllt, einfach so. Und das bedeutet, dass jetzt die Größenänderung dieses übergeordneten Frames völlig anderen Ergebnissen führt als zuvor. Die Größe der Elemente wird jetzt zusammen mit ihrem übergeordneten Frame geändert. Und hier ist noch ein Profi-Tipp für dich. Wenn Sie ein untergeordnetes Element ausgewählt haben und Option oder ULT gedrückt halten und auf einen seiner Kanten doppelklicken Zum Beispiel dieser untere Rand, zu diesem Element wird, oder es wird seine vertikale Größenänderung so einstellen, dass es den Container füllt. Wenn es aber auf „Horizontal fixiert“ gesetzt ist, sagen wir, ULT oder Option gedrückt halten und entweder auf den rechten oder linken Rand doppelklicken , wird das Element so eingestellt, dass es den Container in horizontaler Richtung füllt . Nun kann die automatische Größenänderung manchmal dazu führen, dass ein Element das Layout beschädigt, wenn es zu groß oder zu klein wird. Aus diesem Grund können Sie Mindest- und Höchstwerte für Breite und Höhe festlegen . Und das funktioniert sowohl bei untergeordneten Elementen als auch bei übergeordneten Frames. Und es ist wirklich einfach zu machen. Nehmen wir an, ich möchte die Größe dieses Rahmens ändern lassen , aber nicht zu klein Also, wenn es so klein wird, ist das nicht gut. Ich wollte mindestens 400 Pixel haben. das zu tun, gehst du zum Inspektor, wo du die Breite findest , und klickst auf das Drop-down-Menü und fügst eine Mindest - oder Höchstbreite hinzu. Also Mindestbreite, sagen wir 400, und lassen Sie uns auch eine maximale Breite von 800 hinzufügen. Jetzt kann ich die Größe dieses übergeordneten Frames nur auf 400-800 Das sind die Grenzwerte, die ich dafür festgelegt habe. In Ordnung Zeit für eine praktische Anwendung zur Größenänderung. Und für diese Lektion erstellen wir ein Layout aus Air Call Dot IO neu Genauer gesagt, dieser hier, diese ganze Preistabelle Also habe ich es zu Figma gebracht. Wie immer habe ich einen Screenshot gemacht und einige Designspezifikationen gemacht Und ich habe auch die Textelemente neu erstellt, ich habe die Symbole eingefügt Und aus Zeitgründen habe ich bereits einige der komplexeren Abschnitte erstellt Wo wir, wissen Sie, im Grunde Techniken verwendet haben, die wir in den vorherigen Lektionen gelernt haben. Jetzt möchte ich einfach dieses Layout fertigstellen und Ihnen einige Techniken zur Größenänderung zeigen , die sich als nützlich erweisen werden. Das Wichtigste zuerst, wir haben hier im Grunde zwei Hälften. Diese linke Hälfte ist schon fertig. Sie hat eine, wir sollten sie eigentlich auf Auto stellen. Je nach Höhe hier bleibt dieser Button also immer unten. Jetzt möchte ich, dass dieser Button den gesamten verfügbaren Platz einnimmt. Also werde ich darauf klicken und die horizontale Größenänderung so einstellen , dass der Container gefüllt wird horizontale Größenänderung , einfach so. Gehen wir als Nächstes zur rechten Seite über, wo wir diese Trennzeichen haben, diese grauen Linien zwischen den einzelnen Elementen Deshalb möchte ich diese so einstellen , dass sie auch den gesamten verfügbaren Speicherplatz ausfüllen Also werde ich tatsächlich all diese auswählen und einen automatischen Layoutrahmen erstellen, indem ich sie nach links ausrichte. Und ich werde jedes einzelne Objekt hier auswählen und die horizontale Größenänderung so einstellen , und die horizontale Größenänderung so einstellen Container gefüllt wird. Und das schließt die Listenelemente selbst sowie die Trennzeichen Und lassen Sie uns tatsächlich so viele Trennzeichen erstellen , wie wir benötigen, indem wir einfach ihre Position duplizieren und ändern Wir müssen den Abstand von 32 Pixeln zwischen dem Titel und der Liste festlegen zwischen dem Titel und der Liste Also lass uns das machen. Shift A. Wir setzen den Abstand hier auf 32 Pixel. Und dann haben wir diesen Abschnitt unten , der zusammen mit allem anderen auch seine Größe ändern sollte Wählen wir also diese beiden Schichten A aus. Wir brauchen hier keinen Abstand dazwischen. Also wähle ich diesen Abschnitt aus und mache einen Doppelklick mit der Alt-Taste, um ihn so einzustellen, dass er den Container füllt. Wählen Sie auch diesen oder die Rahmenlage aus. Machen Sie dasselbe, stellen Sie es so ein, dass es den Behälter füllt, und dann machen wir dasselbe für diese beiden. Wir stellen sie so ein, dass sie gefüllt werden, anstatt sie zu befüllen. Wenn ich die Größe ändere, sehen die Dinge langsam okay aus, aber nicht genau Also dieser Abschnitt unten ist in Ordnung, aber nicht der oben Lassen Sie uns diesen so einstellen, dass er den Behälter füllt, und dann gehen wir die Reihenfolge runter und stellen den Rest ein. Das ist gut. Lassen Sie uns auch die Textelemente festlegen. Ich wähle einfach alle Textelemente und stelle sie so ein, dass sie den Container füllen. Wenn ich jetzt die Größe ändere , wird alles entsprechend skaliert. Dazu gehören das Trennzeichen, der Text und diese beiden Elemente am unteren Rand Lassen Sie uns nun diese beiden zusammenbringen. Sie sind Teil eines größeren Rahmens mit weißem Hintergrund. Ich habe etwas Polsterung darauf aufgebracht. Wählen Sie beide aus, Shift A. Und lassen Sie uns zuerst die Polsterung anwenden, also haben wir SI 4 und 48. Und lassen Sie uns eine weiße Füllung machen. Machen wir 24 für den Grenzradius. Und wir sollten startklar sein. Und was ist mit der Lücke zwischen diesen? Derzeit auf 103 festgelegt. Machen wir es etwas kleiner, sagen wir 96, und stellen wir beide Elemente so ein, dass sie den Container füllen. Sie nehmen also gleich viel Platz ein, und wenn ich die Größe dieses Hauptrahmens ändere, ändern sich auch die darin enthaltenen Elemente Nun, es gibt eine Sache, deren Größe sich nicht ändert. Und das ist diese erste Hälfte. Und hier habe ich die Wahl. Ich kann diese auch so einstellen, dass sie den Behälter füllen. Aber vielleicht möchte ich, dass diese genau so bleiben, wie sie sind. Lassen Sie uns also tatsächlich eine maximale oder, Entschuldigung, eine minimale Breite für den Abschnitt festlegen . Derzeit sind es also 376 Pixel. Lassen Sie uns 300 und so bald und sechs Pixel als Mindestbreite für den Abschnitt festlegen so bald und sechs Pixel als Mindestbreite für den Abschnitt Das heißt, wenn ich die Größe ändere, wird dieser Wert nicht unterschritten. Und ich kann dasselbe für den auf der rechten Seite tun. Ich kann sagen, dass ich vielleicht möchte, dass diese mindestens 450 Pixel haben. Jetzt gibt mir die Größenänderung also im Grunde das. Ordnung. Also das waren ziemlich viele Informationen zur Größenänderung. Hoffentlich haben Ihnen die grundlegenden Demos und auch diese praktische Anwendung alle Informationen gegeben, Ihnen die grundlegenden Demos und auch diese praktische Anwendung alle Informationen gegeben die Sie benötigen, um sie viel besser zu verstehen Als Nächstes haben wir einen Auftrag, oder besser gesagt, Sie haben einen Auftrag 14. Zuweisung: Größenänderung mit Auto-Layout: Der Aspekt der Größenänderung des automatischen Figma-Layouts ist wahrscheinlich der komplexeste Aspekt Und deshalb sollten Sie sich wirklich damit vertraut machen. Und um dir dabei zu helfen, hier ist eine Aufgabe, an der du üben kannst. Sie werden ein Layout anhand des Modulsystemdesigns neu erstellen , und wenn Sie ganz nach unten scrollen, finden Sie den Abschnitt mit den Preisen Das ist also der Abschnitt, den Sie neu erstellen werden. Es ist etwas komplexer. Aber wenn Sie alle Techniken anwenden , die Sie bisher gelernt haben, werden Sie sicher kein Problem damit haben. Ich habe alles geschaffen, was du brauchst. Ich habe den Screenshot mitgebracht, die Designspezifikationen erstellt und die Textelemente und Symbole erstellt. Natürlich haben Sie wie immer eine Reihe von Anweisungen, die Sie verwenden oder ignorieren können . Die Wahl liegt wirklich bei Ihnen. Nun, das war die letzte Aufgabe. Bitte schließen Sie sich mir in der nächsten Lektion um das Fazit und einige abschließende Gedanken zu lesen. 15. Schlussbemerkung und abschließende Gedanken: D Hey, herzlichen Glückwunsch zum Abschluss dieses Kurses und vielen Dank fürs Zuschauen Ich hoffe, Sie fanden es hilfreich und wertvoll und Sie haben etwas Neues gelernt mir wirklich Spaß gemacht, diesen Kurs zu erstellen, und ich freue mich darauf, Sie im nächsten zu sehen. Aber bis dahin wollen wir kurz zusammenfassen, was wir bisher gelernt haben Wir haben verschiedene Methoden zum Hinzufügen von automatischem Layout und zum Organisieren von Objekten in Frames untersucht automatischem Layout und zum Organisieren von Objekten in Frames Wir haben entdeckt, dass automatische Layoutrahmen verschachtelt werden können, was für die Erstellung komplexer Strukturen unerlässlich ist Wir haben mit dem Layoutfluss experimentiert etwas über Richtung und absolute Positionierung gelernt Wir beherrschten Abstandstechniken, darunter das Erstellen von Lücken zwischen Objekten und das Hinzufügen von Polsterungen Gegen Ende haben wir alle Ausrichtungsoptionen des automatischen FiCMA-Layouts gründlich untersucht alle Ausrichtungsoptionen des automatischen FiCMA-Layouts Und schließlich haben wir etwas über die verschiedenen Optionen zur Größenänderung gelernt und erfahren, wie man sie zur Erstellung dynamischer Layouts verwendet Was sollten Sie also als Nächstes tun? Zuallererst würde ich mich sehr freuen, wenn Sie eine Bewertung für diesen Kurs hinterlassen würden. Ihr Feedback ist sehr wertvoll und wird mir helfen, in Zukunft bessere Kurse für Sie zu erstellen . Zweitens, schau dir mein Profil an und erkunde meine anderen Figma-Kurse Vielleicht findest du etwas , das dich interessiert. Ich betreibe auch einen YouTube-Kanal , auf dem ich Inhalte zu einem Webdesign teile , wobei der Schwerpunkt auf Figma und Webflow Wenn du Interesse hast, schau es dir gerne an. Du kannst mich auch auf X Instagram oder Facebook kontaktieren . Links befinden sich auf meiner Profilseite. In Ordnung. Zeit für mich, mich abzumelden. Nochmals vielen Dank fürs Zuschauen und ich freue mich darauf, Sie in meiner nächsten Klasse zu sehen . Tschüss fürs Erste.