Figma: Autolayout v2 (die neue Version!) | Bruno Sáez López | Skillshare
Drawer
Suchen

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

Figma: Autolayout v2 (die neue Version!)

teacher avatar Bruno Sáez López, UX/UI Designer and Front-end developer

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

    • 1.

      EINFÜHRUNG

      2:31

    • 2.

      2 Autolayout

      34:32

    • 3.

      3 Responsive

      24:53

    • 4.

      4 Ausgang

      1:33

  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Jedes Niveau

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

1.054

Teilnehmer:innen

2

Projekte

Über diesen Kurs

Autolayout ist eine Funktion, die a vor einiger Zeit veröffentlicht hat. In dieser Tutorial lernst du, wie du es verwendest und verstehst! Die Übersetzung nach Html und CSS ist viel besser als zuvor (jetzt verwendet sie Flexbox).

Wenn du die alte Autolayout lernst oder ein kompletter Neuling in Figma bist, ist dieses Tutorial genau das richtige newbie Wir werden einen responsive mit einem Tooltip, eine Gruppe von responsive und schließlich eine komplett a entwerfen.

Wenn du deinen Workflow beschleunigen und besser responsive mit Figma erstellst, kann dieses Tutorial ideal sein.

Wir sehen uns in der Tutorial!

PS: Sieh dir einfach dieses Video an, wenn du die gesamte Anleitung fertig hast: https://www.loom.com/share/a60d68770da74c1ba1ba1b1550777a

Triff deine:n Kursleiter:in

Teacher Profile Image

Bruno Sáez López

UX/UI Designer and Front-end developer

Kursleiter:in

Hey, I'm Bruno!

UX/UI Designer with more than 20 years of experience currently working in a big data company making complex products simple.

Figma, Sketch and Adobe XD are my favourite tools.

I love going to the mountains and record music.

If you like my classes follow me to be updated when new content arrives!

Cheers!

 

 

 

Vollständiges Profil ansehen

Level: Beginner

Kursbewertung

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen auf Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. EINFÜHRUNG: Hey, willkommen zu einem neuen Tutorial über das neue Auto-Layout in Fema. Fema hat vor kurzem in einer komplett erneuerten Auto-Layout-Version veröffentlicht. Also werden wir darüber reden. Denn wenn Sie meine vorherigen Videos über das automatische Layout gesehen haben , hat es jetzt nichts. Es ist alles im Vergleich zur vorherigen Version. Es ist also gut, dass wir fast von Grund auf neu anfangen. So werden wir einige interessante Features mit diesem neuen äußeren Layout sehen. Wir werden lernen, diese Tooltip zu machen. Zum Beispiel. Sie sehen, dass Sie es größer machen können und Sie können die Elemente positionieren, wissen Sie, die Tiefe. Sie können es positionieren, wann immer Sie wollen. Das gleiche, was wir in dieser Schaltfläche machen werden, die eine ansprechende Schaltfläche ist. Es wendet die gleiche Methodik an wie diese. Und wir werden wie eine neue Funktion sehen , die Auto-Layout Haus diese Art von super responsive Designs. Und, und wie diese später auf eine Art perfekte Ziege mit Flexbox übersetzt werden können . Verwenden von Flexbox. Und auch werden wir sehen, wie man diese responsive Website zu machen, zum Beispiel, hohe Hälfte, Art der Kopie dieser OPO-Website, so dass Sie sehen können, dass es voll reagiert. Sie können die Elemente auf der Kopfzeile sehen, sie bewegen sich. Und wenn es eine Zeit kommt, wenn es auf eine Art der mobilen Version ändert. Und Sie können es auch hier unten mit Fotos und allem sehen. Alles ist irgendwie justierbar. Also werden wir all diese Dinge während unseres Tutorials sehen. Also, wenn Sie daran interessiert sind, diese super cool überarbeitet fitter über fema zu verwenden. Kommen Sie auf eine Reise in dieses schnelle Tutorial. 2. 2 Autolayout: Hey, danke für dich in mir, in diesen Fostoria. Also zuerst werden wir sehen, was der Unterschied zwischen dem gesamten Auto-Layout ist. Penelope, Wenn Sie mit ihm gearbeitet haben, wenn nicht, Sie können einfach auf ein wenig weiter bewegen und diesen Teil überspringen, wenn Sie neu in Auto-Layout sind. Also für alle Arbeiter oder Auto-Layout, wir haben vor ein paar Bananen hier. Wenn Sie die Belastung haben, haben Sie diese Auto-Layout mit, wo Sie die wählen können, wenn Sie die Position des Elements vertikal oder horizontal wollen. Und wenn Sie möchten, wie ohne eine Welle, oder wenn Sie wollen, wenn bin fix Breite und dann fügen Sie die Polsterung außerhalb aller Elemente und der vertikalen Pauling und des äußeren Layouts und der Trennung zwischen den Elementen. Und das war für das Kind. So könnten Sie die Kachel links, in der Mitte, auf der rechten Seite und andere Kacheln anders positionieren. Nun, das hat sich sehr verändert. Wir dann neue Auto-Layout Banane. Nun, wie Sie hier sehen können, haben wir die, für das Patent, wir haben fast die gleichen Elemente, die wir zuvor haben. Wie wenn Sie es vertikal oder horizontal wollen. Das ist so. Und dann haben wir diag, die Trennung zwischen Elementen, die ähnlich ist, wie Sie sehen können, ist das gleiche Symbol, nur Rohdaten. Und das ist der Bug, das ist diese Justi Rohr geht beide, diese beiden hier, dann und dann. Also jetzt haben wir nur eine, aber wir haben diese neue, die wir sehen werden, dass Sie zwischen verschiedenen Plug-Ins für jede Seite wählen können. Dafür können Sie eine andere Knospe von der setzen, für die obere und verschiedene Kauf für den Boden. Jetzt ist es flexibler. Und auch diese Elemente, Symbol wird uns ein Popup bringen, das es uns ermöglicht, Elemente nach links, nach rechts und so weiter zu positionieren . Wir haben dieses neue Taschenmesser hier mit, was irgendwie mit Einschränkungen arbeitet. Wir werden es so sehen, aber es hat neue Elemente, diesen heißen Inhalt, Gebühren mit und alles verursacht , was wir darüber sehen werden. Aber das ist irgendwie neu für das Elternteil und für die Kachel. Anstatt dies wie diese Art von Ausrichtung zu haben. In Positionierungssymbolen. Jetzt haben Sie auch die Größenänderungsoptionen. Also werden wir es im Detail sehen. Also lassen Sie uns zum gehen, um mit der Arbeit damit zu beginnen. Wir werden mit dem Boden beginnen, was einfacher nach unten ist, machen einen Erwachsenen es. Also werden wir später verketten, wir werden den Tooltip rot machen. Also lassen Sie uns mit dem Boden beginnen. Also dafür, was ich tun werde, ist ja, Schöpferrechteck und Azzam Strich, um es zu leben, sagen wir, drei Pixel geben ihm einen Grenzradius wird ziemlich geradlinig sein, wenn Sie bereits damit gearbeitet haben. Also lasst uns hier wie einen weißen Hintergrund setzen. Ich werde nur kopieren und einfügen, dass dies, okay, also das nur ein zufälliger Text. Es spielt keine Rolle. Ich werde nur diese Elemente herausbringen. Wie machen Sie eine Kopie davon. Dies ist die, unsere regelmäßigen Symbole. Wenn Sie hoffen, ich werde nur dieses kühle Blau verwenden und ich benutze in all meinen Tutorials, es heißt Fehlersymbole. So starten Sie es und Sie können den Pfeil einfügen. Also füge ich diesen und erstelle eine Komponente davon, damit es einfacher ist zu arbeiten. Nun, erstellen Sie eine Komponente davon. Und positionieren Sie es einfach hier. Es ist in Ordnung. Ich werde das nochmal bringen. Weitere Icons. Ich werde diese mehrere auf unten wählen, die wir hier haben. Das ist also ziemlich cool. Und ich werde erstellen, wie Komponente wird das Gleiche wieder machen. Ordnung? Okay, also werde ich es kopieren und einfügen, damit es im Rahmen ist. Und nun, wir haben unsere drei Elemente und Sie können sehen, wenn ich hier schreibe, nichts passiert ist ja, sie sind jetzt unabhängige Elemente. Aber wenn ich sie alle auswähle, aus allen Elementen, okay? Und Sie können sehen, dass ich hier kein Auto-Layout-Menü habe. Also, was ich tue, ist hierher kommen, Rechtsklick und Brust als Auto-Layout, Ich benutze normalerweise ja, die Verknüpfung Shift a, was für mich einfacher ist. Also lasst uns hier drücken, Bombe, und jetzt haben wir unser Auto-Layout runter. Das wird also reaktionsschnell sein. Wir fangen an, aber wir können sehen, dass unsere Elemente nicht ausgerichtet sind. Und wir können jetzt das neue Eigenschaftenfenster hier sehen, Auto-Layout. Sie können sehen, dass die Elemente im horizontalen Element in der Array-Mittelachse I bin Achsenrichtung positioniert sind . Und wir können das ändern, wenn wir diese Art von seltsamen Knopf wollen. Es ist fast wie ein Gesicht. So erkennt das automatische Layout automatisch, wenn Sie es erstellen. Wann wenden Sie es an? Wir haben versucht herauszufinden, was du tun willst. Also in diesem Fall ist es irgendwie perfekt. Aber wir sehen, dass dieser Text nicht Eigentum allein ist. Okay, also werden wir all diese Dinge hier ausprobieren. Also, was das tut es gelten Trennung zwischen den Elementen. Ok, wenn Sie also so wollen oder wenn Sie mit einem Acht-Pixel-Raster arbeiten, könnten Sie sich einfach wie ein Achtel bewerben. Oder die, wenn das zu eng ist, Sie können einfach mit 16 gehen, was ich denke, ist ziemlich gut. Und wie Sie hier sehen können, dass die Polsterung um Gegenstände gemischt ist. Okay, als wir also kreierten, als unser Tryout unseren Button kreierte, unser ganzer Knopf angeordnet. Wir hatten wie verschiedene Polsterungen für die Oberseite, für die unteren vier von links oder von rechts. Also sagte es wie gemischt. Wenn wir wie 0 setzen, werden wir versuchen, alle Körper um gleich zu sein. Wir können sehen, dass jetzt unsere Schaltfläche. Offensichtlich hat 0 Polsterung umgeben alle, alle Container. Aber das ist was, das ist nicht das, was wir wollen. Wir könnten wie ähnliche Polsterung anwenden. Stellen Sie sich vor, wir arbeiten mit dem 16 Pixel-Raster, also wollen wir wie 16 anwenden. Oder wenn Sie mit einem Vier-Pixel-Raster arbeiten, können Sie zu 12 gehen. Das sieht ziemlich gut aus für mich. Aber stellen Sie sich vor, Sie möchten mehr Polsterung auf die Oberseite legen. Wie machst du es? Nun, Sie können es hier tun, getrennt durch Kommas, aber das ist irgendwie, das ist irgendwie seltsam. Tun Sie so ein weiteres Panel, neues Panel haben wir hier, seine Ausrichtung auf Polsterung. Dies ist die, die wir verwenden möchten. Stellen Sie sich vor, wir wollen oben 80 Pixel, das wird riesig sein, aber stellen Sie sich vor, Sie prüfen oder stellen Sie sich vor, Sie wollen mehr Polsterung auf der linken Seite. Für diesen speziellen Fall fügen wir es links hinzu. Das ist also ziemlich cool, denn jetzt können Sie die Polsterungen unabhängig voneinander steuern. Ding, das vorher sein musste, wie Tricks zu machen, transparente Abstände hinzuzufügen, seltsame Dinge zu machen, wirklich schmutzige Sachen zu machen. Aber jetzt mit diesem neuen Auto-Layout ist es einfacher als je zuvor. Ok? So wollen wir den gleichen Körper in o, unsere Umgebung der Elemente anwenden. Und was wir hier wollen, diese Texte, wie Sie sehen können, ist nicht Eigentum ausrichten. Was wir also wollen, ist, unsere Elemente auf das Zentrum auszurichten. Und jetzt können Sie sehen, dass dieses blaue Zeug es uns erlaubt, die inneren Elemente an der Mitte, an der Unterseite auszurichten. Die Sache im Vergleich zum vorherigen Auto-Layout ist vorher, ich könnte dieses Element nach oben positionieren, diese nach unten ausgerichtet und diese beiden Mitte. Jetzt funktioniert es wie ein Loch. Also, wenn Sie, können Sie die Elemente nur nach oben, in der Mitte oder nach unten alle positionieren . Sie können nicht wählen, welche Sie wollen, oben oder unten, wissen Sie? Es gibt also Tricks, damit es funktioniert. Aber ich bin die Problemumgehungen. Aber jetzt funktioniert es wie ein Ganzes, OK. Eine weitere interessante Sache hier ist, wenn wir die Größe dieser Schaltfläche ändern, können Sie sehen, dass sich alle Elemente gleichzeitig bewegen. Sie sind wie auf dem gleichen Weg gepackt. Ok? Hier nennt man es hier verpackt. Wenn ich sage, ein Leerzeichen zwischen, Sie können sehen, dass die Elemente, die gleichmäßig Abstand sind. Das ist also großartig, weil es so ist, als ob Websites funktionieren, wenn Sie in ihnen in HTML und CSS codieren. Dies ist, was HTML und CSS tut. Also, bevor ihr Verhalten war irgendwie anders, wie eine Website funktioniert. Also okay, wir haben unseren Knopf. Dies, wie Sie jetzt sehen können, haben wir wie eine feste Taste, aber wir wollen das nicht. Was wir wollen, ist es wieder reagieren zu lassen. Also dafür statt fixiert, können Sie hier sehen, dass es links sagt. Aber zur gleichen Zeit in der gleichen fixiert. Was wollen wir also, um Kontexte zu hacken, Inhalte zu hacken? Was es tut, ist das, dieses Element reagiert auf den Inhalt es hat, okay, also in diesem speziellen Fall denke ich, es ist ziemlich gut. Ok? So ist das, wie unsere Schaltfläche, und das ist unser erster Ansatz, um es. Okay, also jetzt, was wir den Tooltip dafür machen werden, werden wir fast das gleiche Thema machen, wie wir es mit dem getan haben, mit dem Boden. Hab ich, ich mache das, weil es irgendwie schwierig ist, den Tipp zu machen. Okay, also dafür werde ich wieder ein Pixel anwenden. Hier. Ich werde nur einen Schwarzen auftragen. Ich werde hier nur ein Dreieck zeichnen. Ich könnte es zeichnen, aber damit geht es mir gut. Lass es uns drehen. Setze das ins Glück. Wenden Sie einen Randradius an, um schöner zu sein. Sagen wir vier. Whoa, das ist zu viel. Vielleicht ist 22 gut. Und das ist zu groß für meinen Geschmack. Also lasst uns ein bisschen glänzender machen, okay, dasselbe. Ich werde diesen Text nur außerhalb von ihm kopieren und einfügen und ihn hier positionieren. Okay, also jetzt dasselbe wie der Knopf. Alles ist unabhängig. Für diesen speziellen Tooltipmöchten wiralso Für diesen speziellen Tooltip möchten wir zwei verschachtelte Auto-Layout trennen. Okay, also was wir wollen, dass das zu diesen beiden Komponenten erstellt wird, wie Auto-Layout und dann mit der Party zu diesem Tipp hier verbunden. Also werde ich mit der rechten Maustaste drücken und Auto-Layout hinzufügen. So ist jetzt reagiert auf die Dinge, die wir schreiben, das ist großartig, was wir wollen. Aber Sie sehen, dass die tiefsten nicht bewegen oder wenn ich dieses t positionieren möchte, Wenn ich es manuell tun muss und das ist irgendwie, wissen Sie, nicht so, nicht so gut. Also, was wir tun werden, ist es für Ihre In die Party so tief. Also für das, wir wählen unsere zuvor gerahmt ist, Ich werde diese Tooltip-Box und diese Polygon nennen und nur gehen, um es wie gekippt zu nennen. Und was wir hier wollen, ist unsere Tooltip-Box und unser Team zusammen. Also, was wir dafür tun, ist ein Alkali raus, okay? Und Sie können unsere Tiefe sehen, es ist nett von nirgendwo. Ja. Wir können uns in einer Mitte nach rechts und links positionieren, aber es ist irgendwie beschissen. Also vier Tage, was ich tun werde, ist, einen Rahmen in diesem zu erstellen. Ok? Ich werde einen Rahmen erstellen, eingefügt Rahmen hier, und ich werde den TP in den Rahmen setzen. So. Jetzt habe ich den tiefen Super oben. Ich werde es einfach runterlegen. Und sagen wir, ich will es dort hinstellen. Wo tun die, dieser Frame Trick, denn wir brauchen einige Abstände hier auf der linken Seite. Also, was wir tun können, seine Position, unser Element, unseren Tipp dort, und dann setzen Sie es hier. So wird der Rahmen erlauben, etwas Platz hier zu gewinnen und diese TPP zu entfernen, das ist, es ist wie Überlappung hier. Das ist also gut, wird unsere Tiefe sein, okay, denn das sind die guten Zähne. Okay, jetzt haben wir unsere Tiefe mit unserem Tooltip, tut mir leid. Ok. Und mit diesem Tooltip können wir jetzt kontrollieren, wie sich die Tiefenbewegungen bewegen. Okay, das ist also hübsch, das ist ziemlich cool. Dasselbe wie zuvor. Wir können die Trennung der Tooltip steuern. Aber in diesem Fall wollten wir wie bei 0, wenn wir diese Art von seltsamen Ding in horizontalem Abstand machen, wollen wir das nicht. Wir wollen vertikal zuerst nach Osten, dieses Element, und dann die Tooltip unter, unter dem Tooltip. Also haben wir unsere beiden Elemente. Und das Gute daran sind die Tooltip-Kabinen, okay? Innerhalb dieser Breite reagiert mit einem Text. Also machen wir das. Und dann wollen wir den Tooltip immer in der Mitte positionieren. Wir kommen hierher und positionieren es dann hier. Okay, also haben wir schon zwei Dinge. Lassen Sie uns also mit etwas komplexeren Mitarbeitern beginnen. Hier, eine halbe Reihe von Karten, auch nichts. Wir sind bei. Aber Sie sehen hier, dass sie völlig reaktionsschnell sind. Bilder sind reaktionsschnell. Die Texte sind ansprechbar. Bildgebung. Wir haben hier wie ein höheres Textfeld. Es verhält sich wie die Website, wenn Sie Flexbox in HTML und CSS verwenden. Dies ist das Verhalten, das sie haben, auch N. Sie können ihr Verhalten hier auf den Elementen ändern. Wenn anstelle von wenigen Container, sage ich nur riesigen Inhalt. Tut mir leid, Huck, überzeugen Sie. Sie sehen, dass es sich wie verhält, verhalten Sie sich wie mit Flexbox. Also das ist großartig für vier. Gehen Sie Ihre Designs von Fema bis HTML und CSS. Jetzt ist es viel, viel, viel, viel besser. Ok? Es ist komplexer, das automatische Layout jetzt zu verwenden, macht es aber vollständiger. Also werden wir, um dies zu replizieren, wie dieses perfekt responsive Design hier zu machen. Ok. werde ich nur alle Elemente kopieren, die ich hier habe. Weil ich nicht will, dass sie es wieder schaffen. Also lass mich einfach alles fallen und alles aufheben. Also ist alles irgendwie getrennt. Wie Sie hier sehen können, habe ich alles getrennt, damit ich alles bewegen kann. Und, und wenn E1 passieren wird, weil alles getrennt ist. Ok. Stellen Sie sich vor, Sie haben den Namen des Saboteurs, den Ort, dieses Foto. Bei Fotografien in diesem Fall ist es wichtig, sich zu fühlen oder zwei Füße zu setzen, je nachdem welches Futterfeld in diesem Fall gut funktioniert. Eine andere wichtige Sache ist, nun, ich werde das Auto dahinter ziehen. Also schicken Sie nach hinten. Sagen wir, das ist weiß. Ich werde hier ein wenig Hintergrund hinzufügen, damit wir sehen können, was los ist. Also wählen Sie einfach diesen Hintergrund, in Ordnung, und dann wenden Sie einen Randradius an, sagen wir acht, speichern wir sie. Also, was wir hier erreichen wollen, ist, dass wir diesen Abstand hier kontrollieren wollen, es könnte genießen, mit einem achten Pixel Trauer zu arbeiten. Also sagen wir, ich habe das da und somit dort und dort und alles. Also, was ich normalerweise beginne, es zu tun, indem ich Dinge in im Auto-Layout gruppiere. Also, dafür werde ich nur Auto-Layout drücken und du würdest sagen, wow, aber das ist vielleicht zu lächerlich. Sie können hier einfach mit diesem Messwerkzeug einstellen. Person sollte es. Ich mag es mit Auto Layout zu tun, weil es, es ist mehr, es ist einfacher für mich am Ende. Also kann ich hier zu acht Pixeln gehen. Und für dieses bestimmte Element werde ich jetzt ein weiteres Auto-Layout zwischen diesen beiden Elementen hinzufügen, die Texte und, und, und die Position und die Elemente. Also, ja, lassen Sie uns mit Auto-Layout gehen. Und warum ich das tue, weil ich die Entfernungen besser kontrollieren kann und konsistenter zwischen einem Abstand von Dingen sein kann. Also in diesem Fall ist Acht zu eng, also werde ich es einfach auf 16 belassen. Und ich sage, OK, jetzt möchte ich, dass dieses Auto-Layout-Ding, dieser Name und Ort in der Mitte stehen. Okay, also was wir dafür tun, ist hierher zu kommen und einfach hier das Zentrum auszuwählen. Ok? Jetzt haben wir unser Foto hier. Wir haben unseren Titel, und wir sind irgendwie gut, nur wir zu gehen, wir haben laut wie unsere vertikalen M Elemente hier, oder? Also haben wir diese Komponente, dieses Foto, diesen Titel. Also werden wir nur hier drücken Auto-Layout, um zu sehen, was passiert. Bond. Es ist perfekt. Ich meine, sie, es hat unseren Abstand mehr oder weniger erkannt, also möchte ich es wie 24 von Abstand machen. Wir könnten hier weiter gehen, okay? Aber für diesen speziellen Fall, da ich mit AP, mentalen acht Pixelraster arbeite , werde ich hier wie 424 Pixel setzen. Aber ich sehe hier etwas, das mir nicht gefällt. Ich will das, anstatt 24 zu sein, will ich, dass es enger wird. Vielleicht acht Pixel mit 16 Pixeln. Was, was kannst du hier tun? In Ordnung, Sie wählen einfach diese beiden Elemente, den Titel und den Text aus. Und was Sie tun, ist, dass Sie ein anderes äußeres Layout anwenden. Okay, Sie fügen also ein weiteres äußeres Layout für diese beiden Elemente hinzu. Und jetzt können Sie den Abstand zwischen diesen beiden steuern, was für diesen speziellen Fall großartig ist. Mal sehen, 16 ist zu viel. Gehen wir mit 88 vielleicht ist zu tippen, aber ich bevorzuge acht, Daniel. Also sehe ich jetzt, dass hier sogar, sogar ich mag es, aber ich denke, wir haben mehr Abstand auf der Seite, die auf der anderen Sache. Also werde ich 32 für unser Auto bewerben. Und stellen Sie sich vor, Sie wollen mehr Polsterung auf der Oberseite und der Lautstärke. Also hier, was wir tun werden, es sind beide 4848 zum Beispiel. So haben wir unsere, unsere Polster, 32 auf der linken Seite und 5248 für die Spitze und entwickeln. Das ist ziemlich cool. Okay, also haben wir unser erstes Auto. Ich werde es nur Karte eins nennen. Und ich werde diese Karte einfach duplizieren. Ok? Sie sind also riesig, aber es spielt keine Rolle. Das Wichtigste ist, dass du es bekommst. Also haben wir unsere drei Karten hier. Und wie Sie sehen können, sind sie eingerichtet. Nun, wir haben gesehen, was das tun kann. Aber lassen Sie uns sehen, sind Einschränkung und Größenänderung. Das ist ziemlich interessantes Zeug. Also, jetzt ist dieses Element, diese Karte, es ist eingestellt, um Inhalte zu hacken. Wir könnten, also reagiert es auf zwei. Als wir ankamen, können Sie sehen, dass es zunimmt. Ok. Es ist so eingestellt, dass Inhalte auf der horizontalen Achse und auch auf der vertikalen Achse hacken. Wenn wir diese beiden fest setzen, was wir jetzt tun können, ist die Breite der, der, der, dieser äußeren Layout-Komponente zu ändern der, . Aber es funktioniert nicht, wie Sie sehen können, alles bewegt sich, alles ändert sich. Also, warum ist das? Da unsere Stilelemente, sind sie auf Flächenbreite eingestellt. Ok? Es gibt etwas, das wir vorher nicht berührt haben, aber jetzt werden wir es berühren. Also, wenn Sie möchten, dass dies reagiert. Okay, lass mich das einfach machen. Was wir wollen, ist, die untergeordneten Elemente hier in der Größenänderung auf zwei verschiedene Konfigurationseinstellungen zu setzen , ok, also anstelle von Fünfteln, was wir wollen, ist das Füllen des Containers, okay? Wir haben hier wie einen imaginären Raum, der ein Knospen ist. Und was wir das wollen, wenn wir es größer machen , wird diese Polsterung gleich sein. Aber die Elemente werden sich ändern, bis sie diese Polsterung fühlen. Also für das, was wir tun werden, es, anstatt auf unsere tatsächliche Größe fixiert zu werden, werden wir dies so einstellen, dass Container fühlen, okay? Die Höhe, die wir können, können wir es fixieren oder setzen, um Behälter zu fühlen. Und dieses Element, sehen Sie, dass es Inhalt auf der Breite und in der vertikalen Seite hatte. Auf der vertikalen Seite ist gut, wenn wir dieses Leben Hack Inhalt setzen. Ok, und das hier. Aber das, was wir hier wollen, ist Container zu fühlen. Wenn wir uns also dehnen, wird es zu, diese Polsterung aufrecht zu erhalten und wenn wir es aufbringen und es größer machen, wird das Buy in zu halten, damit es erhöht wird. Mal sehen, ob sich das bewegt oder was ist das, was tut, okay? Unser Image funktioniert gut. Es ist wie zu erhöhen und einfach diese zu löschen, diese beiden, ok. So können Sie sehen, dass unsere Bilder reagiert, aber der Rest der Elemente nicht. Also, was ist hier los? Weil wir diesen Feldcontainer hier haben, also ist das gut. Aber wir müssen ins Innere eines anderen gehen. Das ist also der Titel und das Deck. Wir wissen also, dass wir arbeiten. Und jetzt, wenn wir erneut doppelklicken und wir den Titel auswählen, können wir das sehen. Jetzt sehen wir, was das Problem ist, ist, dass unser Titel auf eine feste Breite gesetzt ist. Also, was wir wollen, ist, Container zu fühlen, um dies zu füllen Container und dies anstelle von fester Breite, das ist der Text. Gehen Sie zu Behälter füllen zu. Mal sehen, wie es reagiert. Jetzt unser Auto und jetzt unsere Karte reagiert brillant ist, was wir wollen. Nun, ich werde das einstellen, anstatt, Entschuldigung, lassen Sie mich das einfach rückgängig machen. Was wir wollen, ist anstelle des Kraftstoffbehälters, ich werde nur die Höhe fixieren, damit es nicht so gestresst wird. So behält es die Höhe. Und etwas funktioniert hier nicht. Also, was wir wollen, ist auf dem Ja, das ist gut. Also haben wir gesehen, was hier passiert ist. Mein Container, mein Hauptcontainer hier auf der linken Seite, auf der, auf der horizontalen Achse, ist so eingestellt, dass wir ihn manuell ändern möchten. Aber hier wurde es aufgestellt, um oben zu sein, nicht zu skalieren oder nicht zu heiß Inhalte. In diesem Fall wollen wir heiß davon überzeugt, dass sie sich wie die vorherigen Steuerbeschränkungen gemischt haben und präzise und sie machen hier eine Art seltsame Sache. Aber jetzt können wir sehen, dass unser Element darin arbeitet. Wenn ich hier mehr Texte habe, dupliziere ich es, und ich erhöhe das ein bisschen, damit wir unser Auto sehen können. Das funktioniert ziemlich gut. Okay, also was ich tun werde, ist eine ziemlich anständige Karte zu machen. Und was ich wieder tun werde, ist wie doppelte Abwürfe. Verwirft. Alle von ihnen funktionieren ziemlich gut. Okay, reagieren. Also, was ich jetzt will, ist es, diese drei Karten zwischen einen Container und AF zu legen, Auto-Layout zu ihnen. Sie sind also, sie verhalten sich wie ein Loch. Okay, dafür gehe ich einfach zum Auto-Layout. Und jetzt können Sie sehen, dass wir, wenn wir das tun, alles passiert, auch wenn alle in einem äußeren Layout sind. Also haben wir unser Auto-Layout und jetzt sehen wir, dass alles passiert nicht funktioniert. Wir haben hier nichts reagiert. Nun, die Karten selbst reagieren, wie Sie sehen können, dass sie sich nicht wie ein Loch verhalten. Also, was ist los? Mal sehen. Wir sehen hier, dass wir wie Mix Knospen haben. Ich werde das nur auf 40 einstellen. Also alles, es ist etwas, es ist ähnlich. Wir können sehen, dass wir das anpassen können, okay? Das ist also der Raum zwischen den Elementen. Also die Sache, die wir wollen, ist, dass diese Elemente Füße auf allen Gipfel, den ganzen Raum. Also haben wir nicht mehr eins. Dies, sehen Sie hier, wenn wir diese Knospen größer bekommen, kommen die Elemente draußen unsere Hauptform heraus. Und dafür, was wollen wir? Es, anstatt die Elemente unterstützt zu werden, was wir wollen, ist der Raum zwischen. So jetzt können Sie sehen, dass dies jetzt auf auto eingestellt ist. Also, jetzt werden die Elemente nehmen die, diesen Raum, diesen Raum, den wir drei haben. Und das wird uns nicht erlauben, es zu ändern. Wir können dies einfach wieder auf einen Wert setzen und dann wird wie 20 Pixel hier und 20 Pixel dort sein. Aber wenn wir rauswollten, oh, kommen wir hier, um zu packen statt, aber machen uns einfach auf den Raum zwischen. Und was wird jetzt tun? Es wird effektiv den Raum zwischen den Elementen festgelegt. Aber Sie sehen, dass die Elemente selbst, sie sind nicht ansprechbar. Warum ist das so? Mal sehen, was mit den Fliesen los ist. Okay, wir sehen, wenn wir den Stil auswählen, zu dem er sagte, dass er passt , okay, also werden wir das in allen Elementen ändern, einem Satz, diesem. Also sehen wir, was los ist. Und wir werden das ändern, um Inhalte zu hacken, okay? Und wir können sehen, dass es seltsame Dinge macht. Also werden wir rückgängig machen und dann werden wir dasselbe wie zuvor festlegen. Der Feldcontainer, okay? Wir haben gesehen, dass wir die nicht geändert haben, dies ist auf eine feste Breite gesetzt, so dass Sie sehen können, können wir es ändern. Und die anderen werden sich in Höhe und Breite an die anpassen, zu, zu, um den verfügbaren Platz auszuwählen. Ok. Also dieses hier, ich werde einfach wieder rückgängig machen. Und wir werden alle von ihnen zu fühlen Container. Okay, jetzt haben wir das Leben. Sie füllen den Behälter und was hier los ist, ist, dass, ja, jetzt verhalten sie sich so, als ob sie sich verhalten sollen. Stellen Sie sich vor, Sie wollen mehr zwischen diesen Elementen. Das Einzige, was du tun musst, ist, einfach voran zu gehen und zu pumpen, ok. Wie Sie sehen können, ist es ein bisschen schwierig, mit einem Leerzeichen zwischen zu spielen. Dann hier in den psi-Elementen, legen Sie diese beiden f_0 Container und Sie können damit herumspielen. Zum Beispiel könnten Sie so in der Faustbreite wollen, so etwas wie das. Und diese werden reagieren. Also wird sich dieser nicht ändern, wenn ich ihn bewege, aber der Rest von ihnen wird reagieren. Es hängt von der, die Wirkung, die Sie suchen. Ok? Wenn Sie also möchten, dass diese drei Karten gleich sind, ist dies der richtige Weg, dies zu tun. Lassen Sie mich das einfach anstelle dieser Breite setzen, um Container wieder zu fühlen. Ok? So verhalten sie sich wie reaktionsschnell. Eine andere Sache wichtig hier zu berücksichtigen ist, wie Sie sehen können, wenn ich dieses Element super, super groß, diese Elemente, hier kleben. Was wäre, wenn ich wollte, dass sie größer werden, Seufzer automatisch erhöhen? Statt hier Boolean Hack Inhalt, tun Sie ja, setzen Gefühl, Gebühr Container. Und was es tut, es ist, es ist, das wird versuchen, all diese n zu suchen . Wir können das Gleiche hier in Philly Container setzen. Und, und jetzt, wenn ich das gerade getan habe, können Sie sehen, dass das ziemlich reaktionsschnell ist. Und wissen Sie, es wird die Höhe des größeren Elements wählen. Ok? Also liegt es an dir. Wie willst du arbeiten? Also haben wir alles gesehen, wie man wie von einem einfachen Button mit nur einem einfachen Auto-Layout hier mit verschachtelten Outro-Layouts für unseren Tipp und unseren Tooltip macht . Und hier haben wir wie eine komplexere Version und wir haben damit gearbeitet, wie diese flüssigen Behälter Wörter, Hack Inhalt funktioniert. Wie Inhalt ist, dass, wenn alle, die erhöht seine Größe in Höhe oder Höhe oder Breite und Breite, feste Breite und auch, diese Pakt und ein Raum zwischen Umdrehungen. Okay, also springen wir zum letzten Mal und letzten Übung hier. 3. 3 Responsive: K. Also in diesem Teil werden wir diese sehen, wie man dieses ansprechende Design macht. Wir sahen auf dem vorherigen, auf der Einführung. Wie Sie das Menü sehen können, wenn es darum geht, verhält es sich wie eine mobile Version. Und Sie können sehen, dass der Text übernommen wird und die Bilder sind, werden in und auch übernommen. Die, diese Bilder gibt es eine Art von machen einen Haltepunkt vielleicht ist zu einem gesättigten. Aber du verstehst den Punkt richtig. Was wir versuchen, diese Ziele zu erreichen, um hier zu erreichen. An der gleichen Stelle möchte ich Sie sehen, ich würde gerne, dass Sie hier sehen. Sie sehen, dass wir wie ein ansprechendes Menü als auch haben. Und dann bricht es die Bindung. Und dann haben wir unsere Hamburgerkarte. Ok, oh, unsere Hamburger-Ikone da. Also, wie man das macht? Okay, also werde ich das nur duplizieren. Und das wird zerstören oder alles, was ich hier mehr oder weniger getan habe. Ok. Also habe ich kein Auto-Layout mehr. Und hier habe ich auf einem Auto-Layout, die Medienunterbrechung, alles. Ich werde nicht alles von Grund auf neu machen. Ich meine, das sind reguläre Texte. Dies sind alles ist eine Art von regelmäßigen Drang, die Quadrate, Icons Texte. Du weißt also schon, wie man das macht. Also werde ich nur diese Farbe für vier auswählen. Und was wir hier haben, ist der Hintergrund für das Menü und Icon und regulären Text. Sie können es hier sehen. Ok, also dafür, was ich tun werde, um dieses Menü alle Elemente auswählen zu lassen, nicht, nicht den Hintergrund, nur die Elemente. Denken Sie daran, dass Sie einfach ziehen können, wählen Sie alles und mit der Umschalttaste, dann deaktivieren Sie das gewünschte Element. So, jetzt sehen Sie, wir haben alles ausgewählt. Und wieder, was wollen wir diese Rechtsklick, Auto-Layout hinzufügen oder verschieben ein. und wir haben unsere Auto-Layout dort. Ok? Also hier haben wir gesehen, dass Sie den Abstand zwischen den Elementen standardmäßig steuern können, ich werde diese beiden festlegen. Ich weiß es nicht. 72, das ist ein Vielfaches von acht und fühlt sich gut zu mir. Ich werde das an der Mitte ausrichten. Und Sie können sehen, dass der Text in diesem automatischen Layout ausgerichtet ist , dass der Text an einem Dopant ausgerichtet ist, den ich an der Mitte ausrichten wollte. Okay, also lasst es uns an der Mitte ausrichten. Und zur gleichen Zeit möchte ich, dass diese Elemente sich verhalten, wenn wir es dehnen, dieses Element, alle Elemente eine Strecke und gehen in die Mitte. Nicht, nicht, nicht, nicht nach links, nur in die Mitte. Deshalb setze ich das auch ein. Ok. Also werde ich diesen Hintergrund haben und eine weitere Steckdose hinzufügen. Das wird also die Kachel sein. Okay, also haben wir es. Und jetzt haben wir wie acht Pixel dazwischen. Das ist eigentlich nicht wichtig. Und wir haben hier gerne gemischte Polsterungen. Okay, es ist gut. 1919 bis 211. Es ist, es ist in Ordnung. Und etwas Wichtiges, was ich hier tun möchte, ist, wenn wir das auswählen, es ist, ich will die Elemente mit. Nun, das ist, das ist nicht wichtig, aber etwas Wichtiges hier ist statt Teil, was ich will, sind die Elemente mit einem Leerzeichen dazwischen und man sieht hier nicht wirklich den Unterschied. Was ist, wenn wir das jetzt tun? Wir können den Unterschied nicht bemerken, weder weil wir dieses Setup zu heißen Inhalten haben. Und wenn du nicht hacken musst, bedeutet es, wenn ich das vergrößere, wird das erhöht werden. Aber für diesen speziellen Fall wollen wir diesen ganzen Header auf fix setzen, okay? Zu fixieren und nach links zu fixieren. Also, wenn wir die Größenänderung wird B auf der linken Seite sein und die I V Elemente werden ein ausgestrecktes sein. Mal sehen, etwas, das hier nicht funktioniert. Ok? Also jetzt anstelle von Fünfteln, müssen wir es füllen Behälter. Das ist etwas, mit dem Sie arbeiten werden, wenn Sie etwas auf der Bar ändern und dann müssen Sie es auf das Kind ändern. Also haben wir es jetzt, lasst uns nochmal überprüfen. Wir haben wie eine feste mit vier von Header, was etwas ist, was wir wollen. Und unsere Kachel hat einen Feldcontainer. So wird es den Raum auf der zu halten, auf den Größen auf den verschiedenen Seiten. Und mal sehen, wie das funktioniert. Jetzt. Siehst du, dass es tut. Alles klar, aber es hält diese Marge hier und diese, diese Marge da, die irgendwie kühl ist, was wir wollten. Aber was wir auch wollen, ist es von links und nach und nach rechts zu gehen. Also versuchen wir es mit links und rechts. Es bewegt sich weiter auf der linken Seite. Also für dieses bestimmte Element, was wir es wollen, könnte ich ein Auto-Layout mit Dieselelement machen. Aber für diesen speziellen Fall möchte ich es nicht, weil ich möchte, dass diese so reagieren. Lassen Sie mich einfach, also wenn Sie sehen, dass die Elemente diesen Raum einnehmen und diesen Raum beibehalten. Aber das ist etwas, das diese Elemente dann so sind , wie bei der Wertschätzung zwischen ihnen. Und um das zu tun, können wir das nicht tun, wenn wir diese beiden Elemente in das gleiche Auto-Layout setzen. Weil das automatische Layout keine automatischen Füllstände von für die beiden Elemente setzt. Ok? Also, in diesem Fall möchte ich eine Gruppe daraus machen, anstatt ein geradeaus. Dies wird also als Header bezeichnet. Ok? Und mal sehen, wie sich das verhält. Nun, das sieht ziemlich gut aus für mich, aber das ist etwas, das es vermisst. Hier habe ich fix passt höhere Breite. Und anstelle von hinten möchte ich ein Leerzeichen zwischen den Elementen setzen. Und mal sehen, was jetzt los ist. Nun sind die Elemente, wie Sie sehen können, sie sind wirklich, wirklich, wirklich, wirklich reagieren. Ok? Und etwas, was ich getan habe, bedeutet zu tun. Etwas ist hier passiert, ist, diese Elemente an der Mitte auszurichten. Okay, also haben wir unsere Kopfzeile und jetzt haben wir hier wie einen Text. Und Sie können sehen, ich habe diesen Schreibtisch mit einer festen Breite, aber mit unterschiedlichen Höhen. Also, wenn wir hier weiter schreiben, wird uns eine weitere Zeile geben. Aber Sie sehen, dass dies sagen musste, dass dies nicht in diesen Hintergrund kommt. Was wir also dafür tun müssen, ist, diese beiden Elemente auszuwählen. Wieder aus auf Auto-Layout. Jetzt ist alles an Ort und Stelle. Aber was passiert, wenn ich das mache? Wieder? Nichts ist reaktionsschnell. Angst, dass es reagiert, wenn ich ankomme. Jetzt ist es nicht. Warum ist das so? Denn wie Sie sehen können, hat das äußere Layout das Verhalten dieser geändert. Also will ich sein, gehen müssen, um wie eine Faust mit diesem Element zu haben. Ich möchte es mit einer festen Breite. Ok? Also für dieses Element werde ich es auswählen und ich werde es verkaufen, um es zu verkaufen, um Breite zu fixieren. Da unser Auto-Layout bereits hier eine Polsterung für das Formular links hat, gehen wir, wir müssen hier einige Anpassungen vornehmen. Also lass mich einfach hunderteinhundert setzen. Und dann werde ich nur Anpassungen manuell eingestellt. Ok. Und das, und das, alles hat sich hier wieder verändert. Na ja, okay. Das kann also, also möchte ich, dass diese Ränder auf der Ausgabe stehen. Also stimmte hier etwas nicht, dass es drängte. Die DevOps war, drängte. Ok. Also, wenn ich dieses Nichts reaktionsschnell mache, aber jetzt, wenn dieses Element anstelle der Faustbreite auf dem Feldcontainer sein muss. Also, jetzt können wir mit spielen, mit, mit, mit diesem N. Wenn wir das tun, passiert nichts wieder, weil wir das ändern müssen. Es funktioniert nicht in diesem Breitenbehälter, okay? Und jetzt funktioniert es UC, also müssen beide Elemente so eingestellt werden, dass Container gefüllt werden, okay? Und dieses Element auf Faust Breite und dann alles auf der linken Seite. Manchmal wird es nehmen Sie ein wenig hin und her gehen und kommen hierher zu Fisk hatte Cortes, was Sie, wo Sie wollen, um die Dinge nach links, rechts, links und rechts ausrichten . Ok, für diesen speziellen Fall wollen wir nach links und rechts ausgerichtet sein. Also, wenn wir dies rezitieren, Es ist, wie Sie sehen können , funktioniert, aber wir haben das nicht mit unserem Header gemacht, also müssen wir links und rechts setzen. Das sind also die Mülleimer. Und was es tut, ist, dass, wenn Sie die Größe Ihres Rahmens ändern, die Elemente von links und von rechts geändert werden. Es dauert also den Buy-In, den Sie haben und dann dafür angepasst, wir sehen, dass unser Header funktioniert, unser Menü funktioniert. Und und, und Sie bemerken, dass die Benachrichtigung funktioniert. Ok. Also werde ich nur die s hinzufügen, Dieses Foto, ein paar Pixel hier. Und das sind einfache Texte. Was ich normalerweise mache, ist genauso gut wie ein automatisches Layout von ihnen. Und ich werde Ihnen sagen, Standardausrichtet alles nach links. Und was wir tun werden, ist hierher zu kommen und es an der Mitte auszurichten, okay? Und der Abstand, der Abstand zwischen den Elementen, wo ich diese acht Pixel will. Und ich werde das nur ein bisschen nach oben bringen, sagen wir 488, es sind 46. Ok. Also haben wir hier unser Bild. Ich werde es nur auf die Größe anpassen und ist eingestellt, um zu fühlen. Mal sehen, wie sich dieses Bild verhält. Wenn wir, die KI verhält sich gut, wir sehen, alles bewegt sich, aber unser Test ist nicht. Also, was werden wir hier tun? Wir werden dies setzen, anstatt nach links ausgerichtet. Sie sehen, dass der Text auf der linken Seite bleibt. Und es wurde diese, dieser Raum dazwischen und bewegt sich nicht. Und wir wollten ins Zentrum ziehen. Also gehen wir nur zwischen diesen beiden, dem Absender, okay? Also, wenn wir es entfernen, sehen Sie, dass es großartig ist. Und tut was, was wollen wir? Ok. Nun, das ist nur ein Foto. Dieser Dido, nichts Schickes hier. Etwas, das ich tun möchte, ist es, ein Auto-Layout mit diesen drei Bildern hier zu machen. Und gut in der Mitte ausgerichtet. Ich werde mich nur ausrichten, weil ich meine IV Film bewegt Maya sind so viel wert, dass. Es hat keine normale Breite mehr. Jedenfalls. Es ist, es ist in Ordnung. Und diese Elemente möchte ich auch ein automatisches Layout mit ihnen machen. Nur weil ich das Gefühl habe, weiter zu üben, wie man Elemente hier positioniert. Und Sie können sehen, und Sie können, dies ist großartig für die Kontrolle Ihrer Abstände. Wie ich schon sage. Ich weiß, dass ich mich oft wiederhole, aber diese Dinge sind wichtig, und ich sehe hier zu viel Trennung. Also wähle ich diese beiden Elemente aus und ich werde einen weiteren Ausreißer machen. Warum? Weil ich diesen bestimmten Bayesianer kontrollieren will und hier weniger Platz will. Und sagen wir, ich will nur acht Pixel, okay, also ist dieser Abstand acht und von hier nach gibt es 24. Okay, weil wir es haben, haben wir es in einem anderen Auto-Layout. Ich werde diese Elemente auch an der Mitte ausrichten. Also, wenn wir unsere Laube ändern bleibt, bleibt in der Mitte. Also werde ich das einfach tun. Und dafür werde ich nur dasselbe tun. Ich bringe es nur ins Zentrum. Also, wenn wir sie arrangieren, wenn wir unsere, unsere, unsere, unsere, unsere Arbeit ändern , lassen Sie uns sehen, wie sich das verhält. Alles bleibt in der Mitte und das ist, das nimmt zu. Seine, seine, seine Höhe, die kühl ist. Also wir, was wir hier auch wollen, ist, dass dieses Element beginnt, wie das, wenn wir sie kleiner machen. Ok? Also für das, was wir wollen, ist es, wir geben auf die Fliesen und Sie sehen, dass es passt zu. Also wollen wir füllen, um dies zu ändern, um Container fühlen. Ok. Und die Feed-Seite, wir wollen, dass sie auch nicht eine Gesichtshöhe, sondern um den Behälter zu füllen. Okay, also haben wir alle im Feldcontainer und Füllbehälter. Was passiert, wenn wir die Größe ändern? Mal sehen, was los ist und nichts passiert. Warum ist das so? Mal sehen, was da los ist. Okay, statt zurück, werde ich groß wie ein Raum dazwischen. Also diese Elemente nehmen alle Abstände. Unglaublich, okay? Ich in diesem Element. Und jetzt sehen Sie wieder, dass wir das Spanning auf auto gesetzt haben. Und hier haben wir unseren Elementbalken in die Mitte, was cool ist. Und, und was wir hier wollen, ist es halten die linke und rechte am Ende der Seite. Also statt Mitte, werden wir diese beiden nach links und rechts setzen. Mal sehen, wie das funktioniert. Wir sehen, dass sich die Elemente bewegen, was gut ist, aber sie sind nicht entkommen. Also, wenn wir das Element wieder auswählen, sehen Sie, wann, wann Sie, wenn Sie etwas besteuern, das nächste Mal ist eine Art Veränderung. Also dafür werden wir dies so einstellen, dass sich Container anstatt fixiert fühlen. Fühlen Container und Finkel Dana, alles ist jetzt eingerichtet, um Container fühlen. Wenn wir das ändern, sehen Sie jetzt, dass es vollständig, vollständig, irgendwie voll verantwortlich ist. Responsive, sorry. Ok. Alles ist super glatt jetzt und alles läuft super gut. Also, was ich tun werde, ist ja, dupliziere das und mach eine mobile Version davon. Also dafür, was ich tue, ist ja, zweiseitig alle 380 oder was auch immer, diese Größe ist vollkommen in Ordnung. Ok. Viele Wege verliebt. Wie Sie sehen können, sind diese Texte zu groß. Nun, nicht gekauft zu werden. Ja, nun, es sind eigentlich zwei Wochen. Also werde ich mich einfach schnell ändern. Diese 424, das wird den Schreibtisch hängen gehen, um auf 18 zu treten, und das wird ein Schritt nach unten auf 14 sein. Also haben wir wie mehr. Und ich werde diese an einem Zentrum ausrichten. Diese, ich werde es nur dort anpassen. Und diese 40 werden gerade hier sein. Also haben wir das. Und für die Speisekarte, was wir tun werden, es öffnen Sie einfach ein wenig unsere, unser, wie man es sagt, unsere Kopfzeile. Und ich werde nur alle diese Elemente löschen. Diese wollen, und was wollen wir? Einfachste Einfügung Und ja, eins, diese beiden sind ein bisschen hier, da wir diesen Raum dazwischen haben, ist, wenn ich Elemente hinzufüge, sie werden, wissen Sie, sagen Sie bar acht gleichmäßig. Also für diesen speziellen Fall will ich nur das in. Oh, nicht dieser hier. Ich will Federsymbole. Und lassen Sie uns ein Menü wählen. Cool. Ich werde das nur gruppieren. Und ich werde das hier ansprechen, es hier aufstellen , gruppieren und das einfach in Weiß ändern. Nicht zu viel Komplikation hier. Und ich werde nur diesen Bac löschen. Ok? Also, so haben wir bereits unseren Header. Und jetzt werden wir diese Tinier machen. So passt alles C 240. Und diese Bilder, statt, dies ist ein nettes Feature. Anstatt sie in der horizontalen Richtung auszurichten, lassen Sie es uns mit automatischem Layout in die vertikale Richtung setzen. Und wir können das vergrößern und dann diesen Abschnitt erweitern. Wir können es angesichts des Ganzen sogar noch breiter machen, wenn man so etwas anbelangt. Und lasst uns alles auf das Zentrum ausrichten, damit die Felder besser sind. So haben wir unsere mobile Version. Dan auch. Und lassen Sie mich diese einfach in mobil umbenennen, aber ich werde auch mobil setzen. Also und Desktop auch, weil ich bereits die gleichen Namen hier in. Ich wollte Ihnen dieses Plugin zeigen. Mal sehen, wie das funktioniert. Nun, das funktioniert nicht. Also, was wir hier wollen, ist es statt halber Inhalt. Ja, ich schaffte es hier und Auto-Layout. Wir brauchen es eigentlich nicht. Oh, nein. Ja. Wir brauchen sie nicht. Ja, wir haben das getan. Das ist genug. Also, was wollen wir diese großen Texte draußen? Ich habe diesen Fehler gemacht, dass der Attentäter sagen, Auto-Layout den Hintergrund und die Dichte ist, das ist überhaupt nicht notwendig. Also, was wir jetzt wollen, ist in den Einschränkungen, setzen Sie ihr Hintergrundbild auf den Balken, nach links, nach rechts. Also, wenn wir es größer machen, können Sie sehen, die Bilder und immer größer werden. Das wollen wir also. Also, wenn wir sehen, ob es funktioniert. Ja, es funktioniert. Aber dieses Team arbeitet überhaupt nicht. Ich meine, ich muss diese Summe für einen anderen Dad erhöhen. Und wenn wir zu mehr Draht kommen, so ist es ein bisschen hier unten gekommen. Es gibt Möglichkeiten, das automatische Layout zu weben. Wir könnten diese effizienter machen. Ich meine, wenn, wenn diese Komponente, es ist nicht so hoch, das führt Element kommt. Und dann, wenn, wenn das geht, geht das nach unten. Aber für dieses besondere Element, ich nicht, ich brauche nicht wirklich, dass es abgelaufen ist. Ich möchte Ihnen zeigen, wie ein Bloggen funktioniert und wie man hier in Fiqh einen reaktionsfähigen Designer macht. Verrückt, das funktioniert ziemlich gut. Es gibt dieses Plug-in namens responsive. Seine Verwendung ist ziemlich einfach. Was machst du? Wählen Sie die, die Responsive Designs, die Sie haben, und Sie wählen sie als Eingabe-Frames. Das werden deine, deine, deine, deine Hauptentwürfe sein, sagen wir mal. Und dann brauchen wir einen reaktionsfähigen Rahmen. Also werde ich hier nur einen Rahmen malen. Ich werde es nur auf 111000 setzen, hundertneunundvierzig Hass. Nun, die Hitze wird wie die mobile Version sein, damit wir sehen können, was los ist. Und das wird unser Responsive Design sein. Und wir fügen nur ihren Rahmen hinzu, dass wir die Responsive ausgewählt haben , die wir bei Responsive Frame Bombe hinzugefügt haben. Also haben wir schon hier, die ich entworfen habe, aber das wird funktionieren. Mal sehen. Also werde ich diesen Teil etwas größer machen. Also, was wir jetzt tun, können wir sehen, dass sich alles irgendwie verändert. Siehst du, es tut es, okay? Und wir können bis ihre mobile Version gehen und alles verhält sich wie erwartet. Dies ist also eine ziemlich coole Möglichkeit, verzögerungsfähige Designs zu machen. Natürlich wäre vielleicht ein weiterer Haltepunkt in der Mitte zwischen diesen beiden wünschenswert, so dass das Hamburgermenü nicht so früh erscheint. Aber und, und weißt du, vielleicht muss das nicht so früh gummiert werden. Keiner. Aber du bekommst ADI, richtig? Ich hoffe, Sie haben all das gelernt, all diese Dinge über Kot. Wir würden Inhalte umhüllen, den Raum zwischen Elementen und all das. Wir sehen uns in ihrer letzten Phase. 4. 4 Ausgang: Hey, danke, dass du bis zum Ende gekommen bist. Ich hoffe, Sie haben dieses schnelle Tutorial genossen. Nun, ganz am Ende war ein wenig Standard-Version davon. Aber dieses neue gefälschte Mao-Auto-Layout hat viele Optionen und es ist ein bisschen knifflig. Also musst du ein bisschen arbeiten, das wir getan haben, um zu zwei wirklich zu kommen, um wirklich darüber hinauszukommen. Daher ermutige ich Sie, einige der Beispiele zu machen, die wir hier gesehen haben. Also ich denke wirklich, es ist eine schöne Übung, diese Tooltip und einen Knopf zu machen und dann zu den Autos gegangen und versucht, sie zu einem reaktionsfähigen und machen das Verhalten, das Sie haben wollen. Und wenn Sie irgendwelche Zweifel haben oder Ihre, oder Ihre Prototypen RN arbeiten oder Ihre Auto-Layouts sind und funktionieren wie erwartet. - Gas. Lassen Sie es mich in den Kommentaren wissen und ich werde versuchen zu helfen. Ich danke Ihnen sehr. Und ja, wenn Sie sich für weitere Kurse wie diese oder Tutorials wie diese interessieren, folgen Sie mir einfach und ich werde versuchen, Sie es zu aktualisieren, um Ihnen mit neuen Tutorials aktualisiert zu geben. Und auch, wenn Sie daran interessiert sind, etwas zu sehen , das ich nicht in den Tutorials im Zusammenhang mit 50K Mao oder Design habe. Lassen Sie es mich wissen und ich werde versuchen, ein Tutorial zu machen, wenn, wenn es behandelbar ist. Also vielen Dank, dass Sie dieses Tutorial gesehen haben. Tschüss.