Figma: Erstelle Responsive Designs! | Bruno Sáez López | Skillshare
Drawer
Suchen

Playback-Geschwindigkeit


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

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.

      1 – Einführung

      0:48

    • 2.

      2 – Responsives Design in Figma

      36:22

    • 3.

      3 Congratulations

      0:56

  • --
  • 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.

646

Teilnehmer:innen

2

Projekte

Über diesen Kurs

In diesem kurzen Kurs (30min) lernst du, wie du mit Figma reaktionsfähige Designs erstellst. Du wirst die Konzepte hinter Constrains und Autolayout zu entwerfen und eine einfache Landingpage zu erstellen, die sich reagieren.

Anwenden dieser Methoden du in der Zeit anpassen Verbessere deinen Design-Workflow und beschleunige deine Zeit mit dieser Methodik!

Wir sehen uns im Kurs!

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

Skills dieses Kurses

Design UX/UI-Design Responsive Design
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. 1 – Einführung: Hey, in diesem Kurs wird super schnell sein. Wir werden sehen, wie Responsive Designs innerhalb von Sigma zu machen. Also werden wir Einschränkungen verwenden, um ein paar responsive Designs zu erstellen. So zur gleichen Zeit lernen Sie das Werkzeug und lernen die Fähigkeiten notwendig, um es responsive Designs innerhalb fema zu machen. Und so ist es auch gut für Ihr Portfolio. Also ermutige ich Sie, an der Klasse teilnehmen, die ich denke, wird super interessant und lustig sein. Übrigens bin ich Bruno UX, Designer mit 20 Jahren Erfahrung. Jetzt entwerfe ich Big-Data-Ansatz. Und so ermutige ich Sie, an diesem Kurs teilzunehmen und Sie in der ersten Lektion zu sehen. 2. 2 – Responsives Design in Figma: Hey, also lasst uns anfangen und wir werden anfangen, diese ansprechende Landingpage, die ich hier erstellt habe, zurückzutreten , S3, KI, es ist ein Kunstwerk, das Milliarden Webköder verkauft. Eigentlich habe ich nicht alle, alle Dinge kopiert, aber ich habe versucht, diese drei Elemente hier zu replizieren, eine Art Blog, eine Nachrichtenleiste. Und auch, ich habe versucht, es zu replizieren. Viele. Diese habe ich gerade erfunden, nur um der Webseite willen. In, wie Sie hier sehen können, haben wir diese drei Bildschirme. Es d Dann, wie wir jetzt sehen werden, dauerte es nicht zu viel Zeit, um diese Entwürfe basierend auf diesen zu machen, auf ihrem Desktop eins. Und dass wir es schneller machen konnten, weil wir, wie Sie sehen, die Sandbeschränkungen angewendet hatten , um dies zu bauen, um diese Schnittstelle zu bauen. Also später war es super einfach, ja, diese Einstellung vorzunehmen. Und es war irgendwie super schnell. Also lasst uns damit beginnen und lasst uns anfangen, diese Webseite in diesem laufenden zu entwerfen , nur um es hier schieft zu nennen. Und ich werde einfach den Rahmen einfügen. Denken Sie daran, tun Sie ja, Brust F oder a. Und dann können Sie einfach voreingestellt hier eingeben. Und ich, in diesem Fall werde ich MacBook Pro verwenden, ist derjenige, den ich normalerweise für meine Designs verwendet habe. Es ist also ein schöner Ausgangspunkt. Hier habe ich einige Layoutraster vorkonfiguriert. In diesem Fall werde ich Bootstrap fünf x X L-Layout verwenden. Sie können sehen, wie Sie diese Layouts in meinem anderen Tutorial über Layoutraster erstellen, dem Sie lernen, Bootstrap zu erstellen. Für Bootstrap auch fünf Layouts. Sie werden lernen, ein Pixel perfekte Gitter zu erstellen, okay, so ist es nur ein Raster zu, um mein Design hier zu beginnen. Es ist keine, es ist keine große Sache. Also, was ich getan habe, um es zu erstellen, ein Rechteck zu erstellen, um eine rectangle.js zu erstellen, kommen Sie hierher und drücken Sie Rechteck oder zwei. Ja, Brüste sind der Schlüssel. Abkürzung und Sie sind gut zu gehen. Und was ich getan habe, ist das, was wir hier tun, das Minus-Plus-Plugin zu verwenden. Also lasst uns sie finden. Ein Raum und der Raum folgen. Also im Großen und Ganzen hier im Weltraum, ja, wir haben 40 hier. So sitzt es perfekt, wie wir wollen. Was ich normalerweise auch mache, ist ein weiteres Rechteck über DS1 zu machen. Was ich normalerweise mache seine Stiefel, ein Feld in einer Art bläulicher Farbe und dann hinunter Ausführlichkeit an einen Ort, an dem ich mag. Also kann ich Text darüber legen, okay, damit Sie sehen können, Sie den Unterschied bei der Anwendung dieser Art von Maske erkennen können. Ich mag es, ist so zu tun. Vielleicht gibt es einen anderen Weg oder in einem anderen Feld und dann mischen und alles. Aber ich mag es, es so zu machen. Ok. Und lassen Sie uns unsere ich getan habe, laden Sie das Logo vor. Das musst du nicht. Sie können das Niveau setzen, das Sie wollen. Also müssen Sie diese nicht wirklich als Sektenlogo darauf setzen. Lass uns Hörmaterial holen. Ja, das schätze ich. Lasst uns nach draußen klicken. Und da diese versteckten Schwarz, habe ich es hier zu Bildeinstellungen gehen und dann diese Haltung aufstoßen. Stoß oben nach unten, lege die Glanzlichter hoch, die Silos hoch. Und nun, ich habe meistens weiß gegessen, was wir hier für den Namen wollen. So ist Phi S3 AI? Ja. Das ist gerade etwas langweiliges Zeug. Du gehst, wir müssen die Dinge jetzt ein bisschen aufstellen. Also schätze ich, da zentriert. Und ich werde nur meine Speisekarte hierher bringen. Die Gegenstände. Ich will nicht alles mitbringen, alles, weil ich dir zeigen will, wie ich es mache. So können Sie es in Ihre Gesichter anwenden. Die Kunst, wie Sie sehen können, regelmäßige Text-Ebene, so dass keine Komplikationen hier. Ich werde das nur in eine Gruppe namens Logo gruppieren. Also haben wir es dort. Und, und was ich tun werde, ist ein anderes Plugin zu verwenden, das ich viel benutze. Es wird als Quantifizierer bezeichnet, wie Sie hier sehen können. Und Sie qualifizieren sich als großartig, um Symbole zu finden. Denken Sie daran, normalerweise die gleiche Art von Symbolsatz zu verwenden. Wechseln Sie also nicht zwischen verschiedenen Symbolsätzen. Uns. Wählen Sie einen Symbolsatz aus, und wenden Sie ihn dann an. Aber für diese besondere, ich werde nur, wir brauchen wie eine Suche, wie ein Suchsymbol. Also denke ich, das ist ein guter. Ich glaube schon. Ja. Kicking Port oder ziehen Sie es und justin Gruppe es, so dass wir nur das Symbol hier haben. Und lasst uns die Farbe in Weiß ändern. Also haben wir das, und wie wir hier in unserer sehen, haben wir diesen Knopf mit dem bekommen uns begonnen. Sehen wir die Höhe 48. Also sind wir in einer, acht Pixel Breite. Also werden wir ein Rechteck mit Fourier-Pixeln zeichnen. Ich werde hier Sound und Grenzradius hinzufügen, wie sagen wir zehn. Und lassen Sie uns auf einen Strich, einen Strich von einem Pixel anwenden und den Hintergrund entfernen. Und dann werde ich es einfach kopieren. Und dieser Text hier, und es wird sagen, was war es, die außergewöhnlich beginnen. Alles klar, also ist das hier ziemlich einfach. Wir werden dies in eine Auto-Layout-Schaltfläche konvertieren. Es ist also so, dass es auf den Schreibtisch reagieren wird, den wir darauf setzen. Also für das, Sie können einfach auf klicken, Rechtsklick und AF-Auto-Layout oder ich empfehle zu lernen, die Schaltung ist ein sieben und es macht seltsame Dinge hier. Also wollen wir das nicht. Ich weiß nicht, was los ist. Also lassen Sie mich das einfach sagen. Jetzt war es die Layer-Konfiguration. Denken Sie daran, es ist eine gute Übung, das Rechteck zu setzen und in die Ebenen den Text zu setzen. Und jetzt, wie Sie sehen können, haben wir wie 48 Pixel Höhe Taste und wir können hier das Bobben anpassen. Also, da wir irgendwie mit acht Pixeln Kummer arbeiten, also werden wir wie 32 abstimmen, okay? Also haben wir es einfach hier, und ich möchte diese Elemente 232 Pixel setzen, um diese Messungen zu bringen. Hier. Sie sollten nur Brust auf, auf Mac oder Option auf, auf Mac und alle in BC investieren. Ordnung. Und noch eine Sache, die ich tun werde, um es hier zu liefern. Und ich Auto-Layout zu. Klicken Sie mit der rechten Maustaste und fügen Sie ein weiteres Auto-Layout Was er tut. In diesem Fall kann ich den Abstand des Randes und der Polsterung und den Abstand zwischen den Elementen steuern , so dass wir sie konsistent halten. Okay, dafür werde ich es auch auf 32 belassen. Und jetzt müssen wir es wieder hier setzen, 32. Ok. Wir werden nichts anderes jetzt tun, dass sagen, dies wäre schön, es auf 32 und diese 232 haben. Denken Sie daran, dass Sie sich bewegen können, können Sie in Tinte bewegen. Wenn Sie die Pfeiltasten drücken, wird es um ein Pixel nach links, nach rechts, nach oben und unten verschoben . Und wenn Sie die Umschalttaste drücken, wird es in Schritten von zehn bewegen. Also mache ich es normalerweise so. Okay, also haben wir unser Menü Setup. Und jetzt werden wir unser Layout wieder hierher bringen, damit wir einige, ich weiß nicht, irgendwie einen Stift entwerfen können. Das wird also etwa 16 haben. Also ist es, wir sind immer noch auf dem Pixelraster. Ich werde hier erstellen, indem ich sechs Spalten für den Titel nehme. Ich erinnere mich nicht an den Titel. Also werde ich es einfach kopieren. Und diese Schrift, hey hatte verwendet Livery Schloss auf dem Display ist eine freie ist eine freie Schrift. Es ist eine freie Schrift. Sie können, Sie können einfach von verwenden, Sie können einfach sprechen. Sigma zu hören, weil er gemacht hat, ist es von Google. Okay, also hier, was wir wollen, ist gesagt, dass diese nicht in der äußeren Breite, sondern in der Auto-Höhe, okay? Also, und die Breite wird hier bleiben. Wenn wir es weiter schreiben, geht es runter. Aber, aber, so ist die Breite fest, aber die Höhe ist drei. Ok? Und jetzt haben wir hier einen Text. Ich werde es auch kopieren. Und dafür werde ich es einfach verlassen. Beginnen Sie wie fünf Spalten. Wir könnten mit sechs Spalten gehen, wenn wir wollen. Nun, das wird absolut von Cs Säulen verstorben sein, aber das, ich werde es auf fünf belassen. Denken Sie daran, sie würden denken, es geht um die Arbeit mit Layout ist, dass Sie Elemente mit der ganzen Sicherheit positionieren können. Sie werden Elemente ausrichten. Ich bin hier nicht in meiner Speisekarte ausgerichtet. Ich lasse nur diese 32 bobbing oder Abstand um diese Elemente herum, weil ich diesen vollen, vollen, vollen, vollen Vollbildmodus gehen möchte . Wenn Sie die Breite des Fensters erhöhen, möchte ich den ganzen Weg gehen. Aber dieser Teil möchte ich bleiben, um an der Trauer zu bleiben. Wenn dies zunimmt, wird das Foto zunehmen, aber das wird an der gleichen Stelle bleiben. Okay, das ist es, was wir tun wollen. Und wieder, wenn wir uns den Fehler in unserem Design ansehen, haben wir hier eine andere Schaltfläche aufgerufen wird oder mehr, die das gleiche wie die ersten Schritte ist. Also, dafür werde ich nur diesen Knopf nach draußen kopieren. Whoo. Ich werde es nur duplizieren, indem ich die Alt-Taste oder die Wahltaste gedrückt halte und es hierher bringe. Und das Gute an Auto-Layout, und Sie können hier sehen, dass diese beiden Arten von Türmen oder Pause-Symbol, was es bedeutet, ist, dass es das Auto-Layout aktiviert ist. Also, was war der Text? Erfahren Sie mehr. Also, wenn wir ändern die, der Text wird reagieren auf unsere Texte werden immer erhöht oder verringert werden, abhängig von dem Text. Wie Sie sehen können, schreiben wir hier. Diese Neymar, es wird größer, es wird größer. Also dafür, ich mag es, Auto-Layout anzuwenden, um wie ein konsistenter Abstand dafür zu gelten, werde ich 32 verwenden, wie wir in unserem Menü verwendet haben. Und Sie können sehen, manchmal diese Art von seltsamen Verhalten erscheint für, dass Sie nur das Element auswählen. Und hier können Sie die Elemente innerhalb des automatischen Layouts ausrichten. Automatisches Layout, können Sie Dinge ausrichten. Ja. Wir könnten es hier ausrichten oder sogar die Reihenfolge ändern, wie Sie sehen können. Es ist also eine gute Übung, alle Elemente auf der linken Seite auszurichten, wenn Sie es auf diese Weise möchten. Und was ich normalerweise auch mache, ist, dies in dieses Auto-Layout zu setzen. Ja, ziehen Sie hier, können Sie sehen, dass, wenn dieses Blau ausgewählt ist und tatsächlich ist es nicht so schlimm. Also werde ich es in diesem automatischen Layout lassen, okay, also werde ich das einfach als Schaltfläche umbenennen. Und diese haben Titel. Also wissen wir später, was wir hier haben. Und das wird als Menü bezeichnet. Und das wird der Knopf sein. Ok? So können wir die Dinge irgendwie in Ordnung halten oder richtig? Okay, also haben wir unseren ersten Teil im Vergleich dazu. Und jetzt werden wir diese Elemente hier erstellen. Also, dafür werde ich es nicht irgendwie erstellen, ich werde eine Kopie einige Teile erstellen. Also, wenn wir sehen, wenn wir die Größe ändern, können wir das alles mehr sehen. Also ist es gut und wir können unseren Kolumbus größer machen. Ich werde nur diesen Text kopieren. Dieser Text, den ich hier verwende, heißt Regula inter intergranular zu 16 Pixeln, und VCs inter bolt auf 52 Pixel. Und die Menüpunkte sind intergranulare 14 Pixel. Sie können herumspielen oder Sie können eine Schrift wählen, fühlt sich gut zu Ihnen. Das ist nur ein Titel, nichts Schickes. Und mal sehen, wie das gemacht wird. Ich meine, lass uns die Struktur davon sehen. Okay, also haben wir ein Foto, wir haben eine Art graue Grenze hier, die ich eigentlich kopieren werde, nur um diese Farbe zu schlagen, diese Farben. Und wir haben dieses Datum, dann den Titel, dann ein bisschen hinten und einen Pfeil hier. Okay, also komm zurück. Ich werde nur hier als Referenz kopieren. Ich werde es nicht einfach hier setzen. Ich will dir zeigen, wie ich es mache. Also dafür, da wir drei Elemente haben, die wir für unseren Artikel nehmen möchten. Dies wird also die Verteilung sein, dass ich mit uns mit Rastern arbeite, weil es super einfach ist, Elemente zu positionieren, Konsistenz über verschiedene Seiten und alles zu behalten. Wenn Sie also nicht daran gewöhnt sind, mit dem Layout zu arbeiten, empfehle ich Ihnen wirklich, dass Sie es in Ordnung machen. Also, was ich hier tun werde, ist wieder das Plugin zu verwenden, das Plug-in. In diesem Fall werde ich nur booten. Militär. Würde Militär und ja, wir haben unsere vier. In Ordnung. Aber ich werde es nur für diesen Hubschrauber ändern. Und ich werde nur den Text kopieren, weil es ein wenig mühsame Aufgabe sein kann. Ich will sie nur so hinstellen. Für den Shake können Sie hier die Konfiguration einfacher in fett 16, Intervall 22 und Intervall sehen . Dann für das, für den Stapel, okay, also für dieses Symbol, kam ich gerade zurück zu meinem Loft, Plug-in-Economy Phi und Sets für Pfeil. Richtig? Und ich glaube, ich habe das benutzt, aber es spielt keine Rolle. Ja. Stattdessen wird derjenige, der sich gut fühlt, und es wird großartig sein. Wie Sie sehen können. Es quantifiziert Einsätze wie ein Rahmen und fügt dann eine Art Gruppe ein. Also würde ich normalerweise diesen Rahmen aufheben, damit er verschwindet. Und ich habe den Pfeil. Also lass uns den Pfeil setzen und auf den Desktop, lass uns das ein bisschen größer machen, etwas um das herum. Und wir hatten vor dieser Art von Rechteck für diese, was ich mache, ist einfach zu erschaffen, Yeah. Und jedes Mal, wenn ich es nach hinten schicke, entfernen Sie den Einsatz und einen Schlaganfall. Ich werde einfach mit dem Farbwähler sein. Ich werde das kopieren, außer grau, und das ist ein subtiles Grau. Und was ich tue, ist, dass ich es normalerweise etwas höher stelle, damit es vor dem Foto versteckt ist. Du könntest es so ausdrücken. Aber Sie werden wie diese große große Zelle hier haben, die irgendwie schmutzig ist. Also schätze ich, legen Sie es hinter sich. Und wir haben fast unsere Wünsche hier, aber ich möchte einige Dinge vorher machen. Wir ließen 32 Pixel auf der linken Seite. Also in diesen Elementen hier und zwischen diesen Elementen auch. Also möchte ich es konsistent und Blatt wie 32-Bit uns hier zu halten, hier haben wir 32, wie Sie jetzt sehen können, 32, hier haben wir 32. Und jetzt hier möchte ich noch eine 52. Also ist es gut, o. Und hier wollen wir wie 32 Pixel zu. Also werde ich diese nur ausrichten, sie an der Mitte ausrichten, was gut ist. Und hier wollen wir wie 3032 wird eine Art von zwei Diäten sein. Sagen wir also 34. Nun, wir können, wir können uns daran erinnern, dass Sie hier wie Samsung setzen können oder ja, unterdrücken minus n wird, jetzt sollten wir 32 haben, also sind wir gut zu gehen. Also haben wir unser erstes Auto oder neue oder so werden wir eine Komponente daraus erstellen. Und das werden Neuigkeiten sein, okay? Also werde ich es nur Nachrichten nennen. Und ich werde nur unser Layout wieder bringen und es duplizieren. Ok? So haben wir bereits unser Design gemacht. Oh, dass es diesen Kampf gibt, den wir erschaffen müssen. Aber hier in diesem responsiven Design, können Sie sehen, dass Elemente für diejenigen bewegen, die skaliert werden. Die, die, diese Elemente sind wirklich, Sie sind wirklich auf die gleiche wie das Menü reagieren. Und wenn wir es hier in unserem neuen Design machen, entfernen Sie das einfach. Und das machen wir hier. Wir können sehen, dass einige Dinge passieren, die wir nicht passieren wollen. Also ist dieses Foto nicht entkommen der Speisekarte. Es ist, wir haben es irgendwie verloren. Nun, die Speisekarte, es ist irgendwie gut zu benehmen. Was die Elemente hier unten, können wir sehen, dass sie nicht die Skalierung richtig sind. Also lasst uns das reparieren. Okay, also werde ich diese vier nicht ändern. Oh, nun, ich werde sie noch ändern. Wirklich schnell. Wir öffnen wieder und ein Splash-Plug-In, und lassen Sie uns einige zufällige Fotos anstacheln. In Ordnung. Also haben wir es hier. Lassen Sie mich einfach, wir wollen nicht das ganze Licht hier. Also, was wir brauchen, ist, diese Einschränkungen zu verstehen, Panel. Das Bedienfeld „Einschränkungen“ wird Ihr Design reaktionsschnell machen oder sich so verhalten, wie Sie wollen, okay? Also für diesen bestimmten Fluss, was wir wollen, dass dies auf der linken Seite. Also wollen wir diese Knospen aufrechterhalten, sagten wir vor 32 Pixel und das Gleiche. Wir wollen in der Spitze dafür, Sie lassen es einfach so. Wir haben dieses Panel gesponnen. Wir können sehen, dass Sie es auf der linken Seite, nach rechts, links und rechts, Mitte oder Maßstab für diesen speziellen Fall anheften können nach rechts, links und rechts, , wir wollen es so. Für die Speisekarte ist das, was wir wollen, anstatt links, wir wollen hier nicht so viel Platz nehmen. Was wir wollen, ist, es nach rechts zu bringen. Also wollen wir diesen Raum aufrechterhalten. Hier. Wir wollen diesen Raum auf der rechten Seite und auf der Oberseite beibehalten. Also legen wir es einfach rechts, oben, den Text, diesen Text. Wir wollen das Gleiche. Wir wollen nach links sein, um diesen Abstand hier zu halten und nach oben zu halten. Ok? Und das gleiche gilt für diese Daten, und das gleiche gilt für hier. Dafür. Wenn ich es nach links und nach oben bringe, wird das nicht reagieren. Also in diesem speziellen Fall, was wir tun wollen, ist es notwendig sein, SK. Ok? Mal sehen, was jetzt passiert. Wie Sie sehen können, ist eine Art von Verhalten gut. Diese verschieben diese RNA-Skalierung nicht richtig. Die erste ist eine Skalierung, wie wir erwartet haben, aber die anderen nicht. Also müssen wir das in Ordnung bringen. Lassen Sie mich dies nochmals auf hunderthundert, zehnhundert, einhundertvierzig setzen. Also war es unser Orientalisch. Sehen wir uns also das Menü und den Rest der Elemente an, wie sie sich verhalten. Der Rest der Elemente verhalten sich. Ordnung? Anstatt hier zu skalieren, ist das, was wir tun wollen, links und rechts. Also wird es das gleiche nehmen, es wird den gleichen Abstand hier führen als hier. Was wir hier wollen, ist, unsere Autoelemente nach links und rechts und nach oben zu setzen . Ok. Wir könnten hier wie eine Skala setzen. Aber Maßstab wird diese Elemente machen. Lassen Sie mich überprüfen, ob das in Ordnung ist. Es ist nicht einer, ist es nicht. Ja, aber hier ist etwas passiert. Also lass mich das noch mal duplizieren. Und etwas Wichtiges. Es ist, dass wir hier nichts in den Einschränkungen angewendet haben. Und die Zwänge. Wann tun Sie, wenn Sie ändern die, die obere Einschränkung, der Vater, sagen wir, der Vater, wenn Sie in einer Gruppe sind, stellen Sie sich dies als eine Gruppe vor. Wenn Sie hier ändern, die Mitte oder Skala oder diese Elemente, sie gehen zu wählen, was wählen Sie das erste Mal? Es ist also eine Art knifflige Sache, denn wenn Sie die Einschränkungen vor diesen kleinen Elementen anwenden , bevor Sie Ihren Master erstellen , wird diese übergeordneten Einschränkungen später wie eine Kaskade sein. Es ist also besser, zuerst die Abhängigkeiten auf die Gruppe oder die Komponente anzuwenden und dann zu den inneren Elementen zu gehen und ihre, ihre Abhängigkeiten anzuwenden. Ok? Denn für dieses Ding ist das, was wir wollen, anstatt eine Skala, wir wollen es nicht skalieren. Wir wollen nur, dass es respektiert. Es braucht diesen Abstand hier und diesen Abstand hier und respektiert ihn. Okay, also das Gleiche. Was wir hier tun können. Wir können sehen, ist, dass diese weißen, es war konsistent und der Abstand zwischen den Spalten ist konsistent zu. Das ist also, das ist, was wir in unserem Design wollen. Und dafür, anstatt zu skalieren, was sich so machen wird, als ob wir so denken oder so etwas. Wir möchten, dass diese Leerräume zwischen Elementen konsistent sind. Also, was hast du getan? 2s ist links und rechts. Damit der Inhalt nicht skaliert wird, bewegen Sie sich einfach. Und so werden wir jetzt für Element-für-Element-Anwenden von Einschränkungen gehen. Ordnung? Wir wollen also nicht, dass dieses Element eine Skala hat. Wir wollen das nicht machen, okay, wenn wir es größer machen oder Spore. Kleiner. Also, was wir das wollen, dies, in diesem speziellen Fall, wollen wir es nach rechts anheften, weil wir diese Leerzeichen konsistent und den unteren Raum auch konsistent halten wollen . Also wenden wir uns auf den Boden an. Also ist es, wenn wir diese diese R0 bewegen wird ein Stock nach rechts sein und nach unten geht, wird der Abstand konsistent sein. Ordnung? Gleiches gilt für Ankündigungen. Wir wollen es links halten, und das Bor tut mir leid. Also wird dieser Leerraum konsistent sein zu gleichen Sache gilt hier für den Titel, den wir wollten, bin auch links, halten Sie diese Boarding, um diesen Raum zu besuchen und nach oben. Und für dieses Datum genau die gleiche Weise. Wir wollen es nach links und oben anheften. Ok. Diese wollten wir an die Spitze geheftet. Aber wir wollen nach links und rechts. Wir wollen es erhöhen und verringern, wie Sie, wie wir hier sehen können. Und das Wichtigste hier, ich habe dieses Aldehyd in Ordnung. Wenn wir also, wenn wir, wenn wir das ansprechende Ding hier versuchen, können wir sehen, dass sich dies nicht ändert. Ok? Also müssen wir etwas damit machen. Und das ist Spin für die Linkshänder zu adoptieren, ich habe hier einen Fehler gemacht, aber was wir wollen, ist, dieses Tempo aufrechtzuerhalten, basierend auf der rechten und auf der linken Seite. Also für diesen speziellen, müssen Sie es nach links und nach rechts bringen. Das Gleiche, was wir hier gemacht haben. Okay, also jetzt, wenn wir das tun, wie Sie sehen können, ist der Text ansprechbar. So erstellen Sie es. Und lassen Sie uns ein Tablet erstellen, das dafür entwickelt wurde. Ich werde nur das hier erwähnen. Tötet sie und löscht den Inhalt. Nun, lasst uns sehen, wie ich hier ihre responsiven Designs mache. Was ich tue, ist es einfach Drag & Drop alle Inhalte hier. Und ja, einige. Und was ich tue, ist, diese drei auszuwählen und hierher zu bringen. Ok. Also wende das einfach an und wende das an. Und du nur, und du siehst, dass sie fast da sind. Sie müssen offensichtlich einige Änderungen hier vornehmen um diese Texte zu senken, weil sie zu groß für diese ansprechende Antwort sind , wie Sie es tun würden, wenn Sie dies in HTML Assisi, CSS tun würden, würden Sie wie eine maniac Abfrage oder so etwas setzen. Also, das Beste wäre ein kleiner, okay? Das ist also ein Teil davon. Und das Gleiche gilt hier. Sie möchten einige Änderungen vornehmen. Wenn es so ist, ist Meredith die Art und Weise, wie es funktioniert, ist nicht möglich, alles Art von super reaktionsschnell zu machen . Ich meine, ja, das Bild, das Bild, wie Sie sehen können, ist reaktionsschnell. Jetzt können Sie, was Sie hier tun können, wenn Sie es ändern wollen, um zu beschneiden. Und Sie können sich im Bild bewegen, wenn Sie es besser positionieren möchten. Aber wie Sie sehen können , wird das als eine Minute angenommen. So minis ein ansprechendes Design zu erstellen, das Menü, was in der Tablet-Version passiert, ist, dass es nicht passt. Also für diese, was ich getan habe, ist nur zu meinem geliebten Plug-in E Quantifizierung zu kommen und wie ein Menü-Symbol einfügen. Dieser scheint gut zu sein, weil es ein wenig Rundung kostet. Und ja, komm her. Wie wir gesehen haben, heben Sie die Gruppierung wieder auf, ändern Sie die Farbe in Weiß. Und wir wollen wie 32 Pixel sein, wie wir es vorher haben. 32 Pixel hier und da. Und statt einer Skala wollen wir nach rechts positionieren. Und zu adoptieren. Denn denken Sie daran, dass der Raum konsistent ist. Und nun der letzte Teil. Und, nun, denken Sie daran, dass, wenn Sie hier ein anderes Design machen wollen , ich weiß nicht, was damit passiert ist. Dies sollte links und rechts und oben angeheftet werden. Also, wenn Sie das jetzt tun, wieder, ist es voll reaktionsschnell. Und was wir es tun können, wenn wir wollen, es bringt die Tablet-Version und dann machen sie mobile Version. Also, lassen Sie uns sehen, was ich für das Telefon ausgewählt habe. Es war es iPhone acht plus, so ist es diese Breite 414. Also kommen wir wieder hierher. Und was wollen wir das, sagen Sie es einfach so. 114. Und alles wird der Teil sein, der das hat. Seien Sie reaktionsschnell, sie reagieren. Ordnung. Aber denken Sie daran, jetzt haben wir diese Art von seltsamen Layout hier. Also werde ich einfach mit einem anderen minimalen Layout für ja gehen, das ist viel besser. Wie auch immer, da dies keine Facebook-Seite ist, möchte ich nicht, dass es so eng ist. Also werde ich nur ein wenig das Layout für mich ändern. Ich werde diesen Tab lösen und ich werde den Rand auf 32 Pixel belassen. Okay, jetzt haben wir unsere Elemente, die sich an die großartige Sache anpasst, die dies ein bisschen höher stoßen wird , damit Sie wirklich sehen können, was in diesem Teil vor sich geht. Also für diese eine, die ich tun werde, ist nur ich und alles auf die 32 Pixel zustimmen wir haben, um den Rand, sorry. Und dann fangen Sie an, diese Elemente ein wenig kleiner zu machen. Ok? Also und das, ich werde es nur wie super schwach machen, also passen alle Elemente. Ich werde nur diese Elemente entfernen und dieses wieder kopieren, weil es wie ein winziger Text hat. Und jetzt, was wir tun können, ist ja, es größer zu machen. Und duplizieren Sie es noch einmal. Und hier haben wir ein paar Probleme mit dem Schreibtisch ist irgendwie da drüben. Sie setzen das einfach, bringen Sie Ihre n am Asteroiden zu Ihrem Layoutraster und Sie sind gut zu gehen oder vielleicht möchten Sie dies zu einem Tinier ändern, weil es zu groß ist. So kannst du es für dich herumlegen, so etwas. Und diese, Sie können es auf 16 verlassen. So jetzt haben wir unser Responsive Design hier gut geformt. Eine andere Sache, die ich wirklich gerne mache, Es ist Auto-Layout auf alles anwenden, weil ich hier nicht denken muss, was der Abstand ist, wo auch immer. Also, wenn Sie hier ein Outdoor-Layout anwenden, kann ich steuern, dass ich 32 setze und alle Elemente Trennung wird 32 sein. Ok? Also das ist es, so haben Sie ein reaktionsfähiges Design innerhalb von fema gemacht. Und wie man in Kombination Auto-Layout verwendet, um Elemente zu trennen und konsistente Entfernungen zu halten und auch. Wie man diese ansprechenden Elemente zu machen sind. Eine andere Sache, die ich Ihnen zeigen möchte, ist, dass jetzt, da wir diese Elemente nach unten waren, wir können, diese Elemente sind irgendwie ansprechbar, weil wir die Elemente sortieren und alles wird auf sein, an seinem Platz. Also lass mich das etwas kürzer machen. Also denken Sie daran, dass, dass Einschränkungen funktionieren, so funktionieren. Und die andere Sache, die ich dir zeigen wollte, ist es, was passiert ist. Wenn ich einige Einschränkungen mit einer Skala setze, die ist die, die wir nicht gesehen haben. Ok? Denken Sie daran, sagen wir, wir wenden es auf diesen Pfeil anstelle von rechts und unten. Wir bewarben uns wie Flucht. Ok. So können Sie hier sehen, dass seit wir diese gemacht haben, diese Komponente kleiner ist, die Pfeile werden entkommen. Deshalb ist es das, was es für die Skalierungsbeschränkung ist. Aber ich empfehle nicht, es in solchen Elementen zu verwenden. Also das ist der Spin in eine rechte wieder. Und Sie halten den Pfeil ohne Verzerrung in jeder Situation. Das war's also. Ich hoffe, Sie werden feststellen, dass die interessante, Ich empfehle, dass Sie dieses Design oder jede andere Sie im Sinn haben zu replizieren versuchen, Ich werde diese in die Praxis mit den Karten und mit diesem Menü und einem Fehler. Also machen Sie weiter, versuchen Sie weiter Dinge. Okay, ich hoffe, Sie haben die Lektion genossen und sehen Sie zu ihren Glückwünschen, ich bin auf Wiedersehen. Video. Wir sehen uns später. 3. 3 Congratulations: Hey, herzlichen Glückwunsch, du hast es hier geschafft. Ich hoffe, es hat Spaß gemacht, dieses responsive Design zu entwerfen. Ich denke, Sie können Ihre eigenen Entwürfe mit dem, was Sie gelernt haben, erstellen. So können Sie es in Ihrem Portfolio setzen ist ein Schub. Also hoffe ich, zur gleichen Zeit haben Sie die notwendigen Fähigkeiten gelernt, um alle zu machen, all diese Design und lernen Sie über diese Kosten Schulungen und alles. Und manchmal haben wir in diesem Kurs gesehen. Also hoffe ich, es gefällt dir. Und wenn Sie das getan haben, hinterlassen Sie bitte eine Rezension, damit mehr Leute den Kurs finden können. Und wenn Sie an mehr Inhalten wie diesem interessiert sind, dann können Sie mir einfach folgen, so dass Sie aktualisiert werden, wenn ich ein neues Video hochladen und uns Sachen, richtig? Also vielen Dank, dass Sie sich mir angeschlossen haben und Sie in den nächsten Kursen sehen.