Figma UI/UX Design Masterclass: von Grundlagen bis Fortgeschrittene

1. Figma Masterclass Trailer: Hallo, alle zusammen. Also willkommen euch alle in meiner kompletten Master-Serie Zone Pigma UIUX Design In dieser speziellen Master-Serie werde ich Ihnen das Figma-Tool von der Grundstufe bis zur Fortgeschrittenenstufe beibringen der Grundstufe bis zur Fortgeschrittenenstufe Zunächst werde ich Ihnen das grundlegende Layout und die Funktionen der Benutzeroberfläche beibringen grundlegende Layout und die Funktionen der Benutzeroberfläche Danach werden wir einige grundlegende Dinge wie Komponenten, automatisches Layout und Prototyping lernen einige grundlegende Dinge wie Komponenten, automatisches Layout und Prototyping Ich habe diese Vorlesungsreihe sehr systematisch erstellt , sodass jeder sie leicht verstehen kann Also egal, wer welchen Hintergrund hat, auch wenn du in deinem ganzen Leben noch keine Grafikdesign-Software benutzt hast , du kannst Figma mit meiner Vorlesungsreihe trotzdem verstehen Diese Master-Serie beginnt mit dem Anfängerniveau und wird bis zum Profi-Level hochgehen Du solltest also meine Vorlesungsreihe nicht verpassen. Wir sehen uns in der Vorlesung. Okay, tschüss. 2. Figma Basisoberfläche, Layout und Funktionen: Also werde ich jetzt meine Figma-Vorlesungsreihe beginnen. Zuallererst werde ich Ihnen die grundlegende Benutzeroberfläche und die Eigenschaften sowie die Funktionsweise von Figma beibringen grundlegende Benutzeroberfläche und die Eigenschaften sowie die Funktionsweise von Figma Okay, also werden wir alles besprechen. Okay, das ist also eine Leerstelle. Wo du dein Design erstellen musst. Okay. Lassen Sie uns zunächst etwas über das Tool, die Funktionen und das Layout erfahren. Okay. Lassen Sie uns zunächst über einige Tools sprechen. Hier haben wir das Verschiebewerkzeug, Rahmen, das Saps, das Stiftwerkzeug und das Textwerkzeug Okay, wir werden jedes Thema einzeln sehr detailliert behandeln jedes Thema einzeln sehr detailliert Okay. Hier stelle ich zuerst das Layout vor. Okay. Nehmen wir an, Sie erstellen ein Rechteck. Wann immer Sie also etwas auf Ihrer leeren Leinwand erstellen , wird die Ebene auf die linke Seite des Bildschirms projiziert . kannst du sehen. Also habe ich ein Rechteck erstellt und es passt sich dem Ebenentyp an. Okay. 1 Minute. Dies ist ein Ebenenabschnitt, in dem eine rechteckige Schicht zusammengenäht wird. Angenommen, ich erstelle eine Ellipse, dann erscheint ihre Ebene im linken Bereich des Bildschirms Angenommen, ich erstelle einen Pfeil, sodass seine Ebene auf der linken Seite des Bildschirms erscheint Okay. Wann immer Sie also etwas erstellen, erscheint dessen Ebene auf der linken Seite des Bildschirms. Okay, du musst diesen Punkt beachten. Okay. Nun haben wir uns mit den Tools befasst, und wir haben auch über das linke Seitenpanel gesprochen. Okay, lassen Sie uns jetzt über das rechte Seitenpanel sprechen. Wann immer Sie also ein Objekt auswählen, wird seine Eigenschaft auf der rechten Seite des Bildschirms angezeigt. kannst du sehen. Ich habe Rechteck ausgewählt, sodass wir hier sehen können , dass die gesamte Rechteckeigenschaft sichtbar ist. Jetzt können wir alles ändern. Nehmen wir an, ich muss etwas in der Ellipse ändern, dann klicke ich einfach auf Ellipse und ihre Eigenschaft wird auf der rechten Seite des Bildschirms angezeigt auf der rechten Seite des Bildschirms Nehmen wir an, ich muss etwas in Erotap ändern, dann erscheint die zugehörige Eigenschaft auf der rechten Seite Okay. Also lass uns alles klären. Und jetzt werde ich alles wiederholen, was ich erreicht habe. Okay, das ist also ein Tool-Tab. Angenommen, Sie erstellen ein Rechteck, sodass dessen Ebene auf der linken Seite des Bildschirms erscheint . Dies ist eine Ebenen-Registerkarte, auf der alle Ebenen gesammelt werden. Okay. Und wann immer Sie eine Ebene bearbeiten müssen, müssen Sie auf dieses Objekt klicken. Angenommen, ich leere NVAs habe ein Rechteck und einen Kreis erstellt In leeren NVAs habe ich Rechteck und Kreis erstellt. Nehmen wir an, ich muss etwas im Rechteck ändern, also klicke ich von hier aus einfach auf Rechteck Und jetzt kann ich all diese Einstellungen anpassen. Oder statt dessen, was ich tun kann, kann ich auch mein Rechteck aus der Ebene Sexan auswählen Das ist ein Layer-Sexan. Anstatt mein Objekt direkt auszuwählen, kann ich einfach meine rechteckige Ebene im linken Seitenbereich auswählen , und ihre Eigenschaft wird auf der rechten Seite des Bildschirms angezeigt Sie haben also eine Methode mit beiden Methoden. Entweder können Sie Ihr Objekt hier auswählen oder Sie können es aus der Ebene auswählen. Okay. Das ist eine grundlegende Sache. Lassen Sie uns nun diesen Kreis einfärben. Rote Farbe. Okay. Okay, gut. Jetzt, im Ebenenbereich, werden Sie sehen, dass die Ellipse ungefähr dem Rechteck entspricht Bei der Ellipse geht es um das Rechteck. Deshalb sieht es so aus. Aber was passiert, wenn wir unsere Ellipse unter das Rechteck ziehen , was passiert dann? Ziehen wir die Ellipse unter das Rechteck. Ziehen wir jetzt, Sie werden sehen , dass das Rechteck die Ellipse bedeckt hat Dies ist eine sehr grundlegende Grundlage des Designs. Nehmen wir an, Sie haben schon einmal Photosop benutzt, dann kennen Sie sich damit Ich denke, Sie kennen das vielleicht. Okay. Bei der Erstellung Ihres UIUX-Designs werden möglicherweise einige Elemente nicht richtig angezeigt Sie müssen die richtige Anordnung der Layer-Sex-Summen überprüfen In diesem Bildschirm wird also keine Ellipse angezeigt, da es sich bei der Rechteckebene um die Ellipsenebene handelt Außerdem ist die Größe der Rechteckebene viel größer als die der Deshalb erscheint hier keine Ellipse . Also , was müssen wir tun? Wir müssen die Ellipse über die rechteckige Ebene ziehen. Okay? In Ordnung. Du musst alles mit mir üben. Okay. Also, wann immer ich hier etwas erstelle, musst du dieselbe Aktivität auch auf deinem Computer ausführen. Okay? Und mit Hilfe einiger Vorlesungen werde ich deine Figma beherrschen Ich beginne meine Vorlesungsreihe der Anfängerebene Wenn Sie also mit einigen grundlegenden Dingen vertraut sind, können Sie diesen Teil überspringen Aber meiner Meinung nach solltest du dir das ganze Video ansehen, du solltest dir nichts entgehen lassen. Ich werde den Schwierigkeitsgrad in meinem Kurs langsam erhöhen. Es beginnt also mit dem Anfängerlevel und wird bis zum Profi-Level hochgehen. Wir sehen uns in der nächsten Vorlesung. Okay. Tschüss. 3. Immobilien in Figma: Lassen Sie uns nun etwas über das Eigentum Sexon in der Figma erfahren das Eigentum Sexon in der Um also einen Eigenschafts-Sexon zu lernen, müssen wir natürlich irgendwas erschaffen Lassen Sie uns also ein Rechteck erstellen. Okay. Nun, wie ich Ihnen bereits gesagt habe , muss jedes Mal, wenn Sie die Eigenschaft eines Objekts ändern müssen, Ihr Objekt ausgewählt werden. Entweder wählen Sie Ihr Objekt direkt hier aus , oder Sie können stattdessen, was Sie tun können, den Ebenenbereich gehen und dort Ihr Rechteck direkt auswählen. Okay. Also egal, welche Methode Sie verwenden, Sie müssen nur die Objekte auswählen , an denen Sie etwas ändern müssen. Okay, jetzt wurde unser Objekt richtig ausgewählt. Jetzt erscheinen seine Eigenschaften, seine Eigenschaften auf der rechten Seite. Okay, lassen Sie uns zunächst über die Position sprechen. Mit Hilfe der Position können Sie also ihre Position manipulieren indem Sie Ihre Maus so bewegen Du musst nur deine Maus bewegen. Sie müssen Ihre Maus über das X bewegen, und das Symbol ändert sich Lass es uns zoomen. Lassen Sie uns also meinen Mauspfeil über das X bewegen, und das Symbol ändert sich Okay. Was ich nun tun kann, um den Wert zu verringern, dass ich meine Maus nach links ziehen muss. Um den Wert zu erhöhen, muss ich, äh, meine Maus nach rechts bewegen. Lassen Sie uns ihn also verringern, indem wir meine Maus nach links ziehen . Okay. Okay. Und für eine Weile ähnlich. Aber es ist nicht so wichtig, weil Sie die Position Ihres Objekts einfach, einfach ändern können , sodass es keinen Sinn ergibt. Okay. Wählen wir also unser Objekt aus und gehen wir zu den anderen Tools über. Okay. Mit Hilfe von Rotate können Sie Ihr Objekt also einfach drehen. Das ist ein Flip. Okay. Also offensichtlich wirst du es hier nicht bekommen, weil es rechteckig ist. Okay. Mit Hilfe von Flip Opson können Sie also horizontal und vertikal kippen. Okay. Okay. Dies ist eine Registerkarte mit den Dimensionen, die am wichtigsten ist. Okay. Von hier aus können Sie also jede Dimension einstellen. Nehmen wir an, 720 sollte Breite und Höhe 1080 sein. Okay, das ist also eine vertikale Dimension, also können Sie sie manuell eingeben. Okay. Einfach. Füllen wir jetzt die Farbe aus. Füllen wir jetzt die Farbe aus. Füllen wir also die orange Farbe aus. Okay. Nun, hier werden Sie Opacity Opson sehen. Hier sehen Sie Opacity Opson. Du kannst es also auf 70 setzen. Opazität bedeutet also Transparenz. So können Sie seinen Wert verringern. Geben wir 20 ein. Okay. Stattdessen haben wir eine Art Schnitt in unserer Tastatur. Okay, lassen Sie uns zunächst 100 eingeben. Okay. Wenn Sie also die Transparenz Ihres Objekts ändern müssen, haben wir einige Sortierkürzungen in unserer Tastatur. Nehmen wir an, Sie müssen Ihre Opazität auf 70% einstellen und dann müssen Sie auf Ihrer Tastatur 7 drücken Siehst du? Okay. Wenn Sie etwas rückgängig machen müssen, müssen Sie Strg-Z drücken oder rückgängig machen. Strg plus Z. Okay. Angenommen, Sie müssen Ihre Transparenz auf 30% einstellen und dann müssen Sie auf Ihrer Tastatur Drei drücken. Okay. Drücken wir Strg plus R für Rückgängig. Angenommen, Sie müssen Ihre Transparenz auf 60% einstellen und dann auf Sechs drücken. Ähnlich verhält es sich, wenn Sie auf zwei klicken, dann wird die Transparenz auf 20% gesetzt. Wenn Sie drei drücken, wird die Transparenz auf 30% gesetzt. Wir haben also einige Abkürzungen. Okay. Tschüss. Jetzt erhöhen wir es. Das ist also ein Rechteck. Gehen wir nun zu einer anderen Option über. Hier haben wir einen Eckradius. Hier haben wir einen Eckenradius. Also, was bedeutet das? Ihre SAR-Ecke wird radial. Okay, also lassen Sie uns zuerst das aktivieren. Okay. Also entweder kann ich einen beliebigen Wert für den Eckenradius angeben oder ich kann stattdessen meine Maus nach links und rechts, links und rechts bewegen . Geben wir also den Wert von T ein. Sie können sehen, dass sich meine SAP-Kanten in die Krümmung umgewandelt haben. Stattdessen sehen Sie hier einen kleinen Punkt. Sie können die Krümmung auch von hier aus leicht manipulieren . Okay. Und Sie werden eines feststellen , dass sich alle Kanten gleichzeitig ändern. Okay. Aber was ist, wenn Sie den Radius einer bestimmten Ecke ändern den Radius einer bestimmten Ecke Angenommen, Sie müssen den Radius einer bestimmten Ecke ändern. Sie müssen nicht alle Ecken ändern , was Sie dann tun werden. Dafür haben wir hier eine separate Option namens Individuelle Ecke. Das ist also eine Option für eine einzelne Ecke. Okay, also ich werde dir zeigen, wie es funktioniert. Lassen Sie uns also zunächst die Krümmung entfernen. Okay. Jetzt haben wir überall im Rechteck SAP-Kanten . Also lass es uns auswählen. Okay. Angenommen, ich muss die Krümmung nur hier machen. Und die restlichen Teile würden gleich bleiben. Wie werde ich es dann machen? Also wähle ich zuerst ein Rechteck aus und klicke auf eine einzelne Ecke. Also lass uns auf eine einzelne Ecke klicken. Okay. Nun, hier haben wir eine Vier Seiten. Hier haben wir eine vier Seiten. Diese vier Seiten führen also zu vier Ecken. Nehmen wir an, ich muss diese Ecke ändern, damit ich die Einstellung manipulieren kann. Also entweder kann ich den Wert direkt eingeben oder ich kann meine Maus nach links oder rechts ziehen. Okay. Also lass uns meine Maus auf die rechte Seite ziehen. Sie können sehen, dass ich die Krümmung an dem bestimmten Teil erreicht habe und der restliche Teil gleich bleibt. Okay. So können Sie also mit der Option „ Individuelle Ecken“ manipulieren. Okay. Also lass uns jetzt weitermachen. Hier haben wir eine Option, die ich in den nächsten Vorlesungen behandeln werde . Okay, das ist eine erweiterte Option. Mit Hilfe von I können Sie die Farbe ausschalten. Oder mit Hilfe der Minus-Taste können Sie die Farbe entfernen. Oder du kannst die Farbe löschen. Also lass uns Andrew drücken. Okay. Jetzt haben wir hier eine EStroke-Option. Klicken wir also auf Stroke. Lass uns auf Stroke klicken. Und hier werden Sie nach eStrokePosision gefragt. Es sollte drinnen, in der Mitte oder draußen sein. Okay. Also ich denke, es sollte in der Mitte sein. Okay. Und lass uns die Intensität wählen. Drei. Und außerdem haben wir hier die gleiche Möglichkeit meine Maus so zu ziehen Okay. Also so funktioniert ein Schlaganfall. In ähnlicher Weise habe ich einen zweiten Effekt. Mit Hilfe von Effect kann ich also Sadoblur erzeugen Wir haben alle Optionen, die wir in den nächsten Videos behandeln werden, und Sie können sie auch selbst erkunden Es ist sehr einfach. Okay. Sie können Sados hinter dem R-Objekt hinzufügen Sie können den direkten Sohn von Sados angeben. Okay. Sie können einen Unschärfeeffekt hinter dem R-Objekt erzeugen. Sie können alles tun. Das war also alles Eigentum von Rectangle. Aber wenn ich hier einen Kreis erstelle, dann erhalte ich die Eigenschaft entsprechend dem Kreis. Wenn ich einen Pfeil erstelle, erhalte ich Eigenschaften entsprechend den Pfeilen. Eigentum hängt also völlig davon ab , welche Art von Objekt Sie erstellen. Okay? Sie können also jedes Objekt erstellen und je nach Objekt wird die Eigenschaft auf der rechten Seite angezeigt. Okay. Nehmen wir an, ich erschaffe einen Stern. Nehmen wir an, ich erschaffe einen Stern. Hier werde ich also ein neues Opson sehen , das ich weder im Rechteck noch im Kreis sehen werde Okay. Laut SAP werden Sie also unterschiedliche Eigenschaften erhalten. Okay. Das Geschlecht Ihrer Immobilie kann also in Bezug auf Ihre Form oder Objekte variieren Okay. Also so funktioniert Property Secan. Im Moment bringe ich dir einige grundlegende Dinge bei, und ich werde die Schwierigkeitsstufen verbessern, die Schwierigkeitsgrade aus den nächsten Vorlesungen Okay. Also, tschüss. 4. Shortcuts in Figma: In dieser speziellen Vorlesung werde ich Sie nun über einige Sortierschnitte in Figma informieren, denen Sie schneller ein Design erstellen können Okay. Lassen Sie uns zunächst darüber sprechen, wie Sie jedes Objekt in Figma kopieren können Okay. Lassen Sie uns zunächst über den traditionellen Weg sprechen. Okay, auf traditionelle Weise müssen Sie schreiben , klicken Sie mit der Maus und Sie erhalten eine Kopie, und danach drücken Sie Strg plus V-Taste. So machen Sie also die Kopie eines beliebigen Objekts. Das ist also ein sehr traditioneller Weg. Offensichtlich werden wir es hier nicht benutzen. Okay, also lass uns löschen. Also hör auf, auf herkömmliche Weise zu kopieren. Okay. Jetzt haben wir also zwei Methoden. Die erste Methode ist die Alt-Taste. Auf Ihrer Tastatur sollten Sie also die Alt-Taste und die Alt-Taste haben. Sie müssen also die Alt-Taste drücken. Und mit Hilfe der linken Maustaste müssen Sie Ihr Objekt so ziehen, und es wird eine endlose Kopie erstellen . Genau das müssen Sie tun, Sie müssen die Alt-Taste auf Ihrer Tastatur drücken und Ihr Objekt verschieben, das Sie kopieren müssen. Sie können in jede Richtung kopieren. So können Sie mit Hilfe der Alt-Taste eine endlose Kopie erstellen. Lassen Sie uns nun über die zweite Methode sprechen , mit der Sie das Objekt kopieren können. zweite Möglichkeit ist Strg+D . Wählen wir dieses Objekt aus und drücken wir Strg+D. Control DDD, Control DD DD Okay. So können Sie die ALS-Kopie mit Hilfe der Taste Strg plus D erstellen. Okay. Jetzt sieht es so unübersichtlich aus, also zoomen wir raus Lassen Sie uns herauszoomen, ohne die Größe von irgendetwas zu ändern. Sie müssen die Strg-Taste auf Ihrer Tastatur drücken und uns nach unten scrollen lassen. Okay. So können Sie also erhöhen oder verringern. So können Sie Ihre Leinwand vergrößern oder verkleinern. Seine Größe ändert sich in der realen Welt nicht. Okay. Nur wir zoomen mit Hilfe der Steuerung und der Scrolltaste auf der Maus hinein oder heraus Steuerung und der Scrolltaste auf der Maus hinein Mit Hilfe der Steuertaste und der I-Scroll-Taste an Ihrer Maus können Sie also und der I-Scroll-Taste an Ihrer Maus können Sie also hinein- und herauszoomen Und Sie müssen sicherstellen , dass Sie dasselbe üben , während Sie sich meinen Vortrag ansehen. Du musst alles üben. Okay, nehmen wir an, ich bringe dir diese Grundlagen bei. Sie müssen also all diese Aktivitäten gleichzeitig auf Ihrem Computer ausführen diese Aktivitäten gleichzeitig auf Ihrem Computer Andernfalls werden Sie meinen Standpunkt in den nächsten Vorlesungen nicht verstehen. Also bitte, äh, übe ein bisschen mit mir. Okay. Also lass es uns löschen. Okay. Also haben wir gelernt, wie wir kopieren können. Wir haben also zwei Methoden. Die erste Methode ist Alt plus Maus. Während wir die Alt-Taste drücken, müssen wir unser Objekt ziehen, und so können wir eine Endkopie erstellen oder stattdessen einfach Ihr Objekt auswählen und Strg plus B drücken Und schon wird eine endlose Kopie erstellt. Und zum Verkleinern drücken wir die Strg-Taste auf Ihrer Tastatur und scrollen nach unten und dann nach unten. Lassen Sie uns nun lernen, wie Sie in Ihrem Projekt eine Mehrfachauswahl vornehmen können . Angenommen, Sie müssen mehrere Objekte gleichzeitig auswählen , wie Sie das tun können. Okay, mit Hilfe der Umschalttaste können Sie das ganz einfach tun. Drücken wir also die Umschalttaste auf Ihrer Tastatur, Umschalttaste auf Ihrer Tastatur die Umschalttaste auf Ihrer Tastatur und wählen wir das Objekt aus , das Sie auswählen müssen. Lassen Sie uns also alle Objekte auswählen. Jetzt wirst du darüber nachdenken. Wir können es einfach machen, indem ich meine Maus so ziehe, natürlich können Sie es so machen Aber was ist, wenn wir den Stern nicht auswählen müssen? Wenn wir alles so auswählen, werden alle Objekte ausgewählt. Aber was ist, wenn ich den Stern nicht auswählen muss , wie mache ich das dann? Ich drücke einfach die Taste und wähle die Objekte aus, an denen ich etwas ändern muss Und hier wähle ich keinen Stern aus. Lassen Sie uns die Farbe ändern , damit Sie die Änderungen sehen können. So können Sie mit Hilfe der Umschalttaste mehrere Objekte auswählen . Außerdem haben wir eine weitere Verwendung der Shift-Taste in der Figur. Okay. Nehmen wir zum Beispiel an, wenn Sie das Rechteckwerkzeug aktivieren, dann können Sie ganz einfach ein Rechteck erstellen, äh, mit unterschiedlicher Höhe und Breite. Okay. Wenn Sie jedoch gleichzeitig die Umschalttaste verwenden, wird es symmetrisch. Und jetzt, wenn du deine Maus bewegst, wird sich das nicht ändern. Der Grund dafür ist, dass Apetra protokolliert wurde. Okay. Wann immer Sie also die Umschalttaste verwenden, werden Sie aufgefordert, Ihr Objekt symmetrisch zu erstellen. Okay. Also ohne Shift-Taste kann ich ein Rechteck wie dieses erstellen. Wenn ich jedoch die Umschalttaste verwende und ein Rechteck erstelle, wird im gesamten Design ein bestimmtes Seitenverhältnis beibehalten . A, nehmen wir an, ich erstelle eine Linie wie diese. Aber was passiert mit Hilfe der Umschalttaste, wenn ich mit Hilfe der Umschalttaste eine Linie erstelle, dann entsteht entweder eine reine horizontale Linie oder eine reine vertikale Linie. Oder stattdessen kann es eine Linie mit 45 Grad angeben, aber es wird keine zufällige Linie erzeugt. Wenn ich die Umschalttaste verwende, dann ist es entweder rein horizontal oder es wird 45 Grad oder es wird vertikal sein. Aber wenn ich beim Erstellen einer Linie die Umschalttaste nicht verwende , kann ich Linien in jede Richtung erstellen. Und sobald ich die Shift-Taste drücke. Es hat einige Einschränkungen. Okay. Nehmen wir an, Sie müssen Diagramme mit geraden Linien erstellen, ohne Kompromisse bei den Abmessungen sollten Sie die Sift-Taste verwenden Lassen Sie uns nun etwas über die Gruppierung lernen. Angenommen, Sie haben einige Objekte erstellt, Gruppe von Objekten, und Sie müssen sie gruppieren. Dann können Sie es mit Hilfe von Control plus G ganz einfach tun. Angenommen, ich habe ein Rechteck, eine Ellipse und einen Stern erstellt. Auf der linken Seite, Ebene sechs, können Sie also sehen, dass alle Ebenen einzeln erstellt wurden Okay. Aber für die Gruppierung muss ich alle Objekte auswählen Okay, also wählen wir Sift, Shift, Shift. Mit Hilfe der Umschalttaste habe ich alle Ebenen ausgewählt, die Sie hier überprüfen können Alle Ebenen sind ausgewählt. Jetzt muss ich die Strg-Taste und die G-Taste auf meiner Tastatur drücken , um sie zu gruppieren. Drücken wir also Strg+G, sorry, Strg+G . Jetzt wurde die Gruppe erfolgreich erstellt. Wenn ich es nun erweitere, können Sie sehen, dass ich innerhalb der Gruppe, innerhalb der Gruppe, eine Ellipse und ein Rechteck habe So können Sie also jedes Element gruppieren. Okay. Nehmen wir an Sie haben Rechteck erstellt und danach geben Sie hier etwas ein. Okay? Oh, du hast ein Design wie dieses geschaffen. Und wenn Sie sie zusammenführen müssen, wählen Sie beide Objekte aus und drücken Sie Strg plus G, um sie zu gruppieren. Okay. Lassen Sie uns nun über die spezifische Auswahl des Objekts sprechen. Okay. Lassen Sie uns also ein großes Rechteck innerhalb dieses Rechtecks erstellen, lassen Sie uns ein weiteres Rechteck erstellen. Lass uns das ändern. Lassen Sie uns innerhalb dieses Rechtecks ein Polygon erstellen und innerhalb des Polygons den Kreis Okay, gut. Nehmen wir an, Sie müssen etwas im Kreis ändern. Nehmen wir an, Sie müssen etwas im Kreis ändern, dann müssen Sie den Kreis natürlich richtig auswählen. Okay. Derzeit sind alle Ebenen individuell. Sie sind nicht zusammen gruppiert. Okay. So können Sie jederzeit einfach den Kreis auswählen und alles im Kreis ändern. Okay. Aber, aber, aber. Wenn wir es gruppieren, ist das Lob Control plus G. Jetzt wurde die Gruppe erfolgreich erstellt. Die Gruppe wurde erfolgreich erstellt. Wenn Sie nun den Kreis auswählen dann auf Kreis klicken müssen, wird gerade nicht ausgewählt. Sie müssen mit der Maus doppelklicken, dann wird der Kreis ausgewählt, aber es ist nicht notwendig, dass er in allen Situationen funktioniert. Okay. Gehen wir also zum praktischen Design über. Das ist ein Design. Okay. Nehmen wir an, ich muss dieses Jungenbild auswählen, dann wird es nicht richtig ausgewählt. Das ist ein quadratisches Feld, das Sie auswählen. Okay. Für die direkte Auswahl müssen Sie also die Steuertaste drücken und die Maus über das Objekt bewegen. Dann können Sie sehen, dass Sie problemlos jedes Objekt auswählen können. Drücken Sie einfach die Steuertaste. Sie können ein bestimmtes Teil auswählen. Angenommen, Sie müssen Text auswählen. Wenn Sie also die Strg-Taste drücken, fahren Sie einfach mit der Maus über den Text und klicken Sie auf Text, es wurde ausgewählt. Wenn Sie UI UX Designer auswählen müssen. Wenn Sie es also normal auswählen, dann wählt es nicht aus. Sie können sehen, dass ich klicke, aber es wählt nicht aus. Aber mit Hilfe der Steuertaste kann ich es einfach auswählen. Mit Hilfe der Steuertaste können Sie also alles mit der Maus auswählen. Okay. Für eine bestimmte Auswahl sollten Sie also die Steuertaste verwenden. Andernfalls wird alles ausgewählt. Verwenden wir die Steuertaste nicht. Und nehmen wir an, ich muss Mehr anzeigen auswählen. Also klicke ich auf Mehr anzeigen und es wird nicht ausgewählt. Anstelle von Mehr anzeigen habe ich ein quadratisches Feld ausgewählt. Es ist also nicht korrekt, oder? Und es ist zeitaufwändig. Drücken wir nun die Steuerungstaste und bewegen wir die Maus weiter über die Ansicht Lassen Sie uns jetzt klicken. Einfach. Okay. Mit Hilfe der Steuertaste können Sie also ganz einfach ein bestimmtes Teil auswählen. Auf ähnliche Weise müssen Sie, wenn Sie den Kreis auswählen müssen, die Steuertaste drücken, dann können Sie einfach den Kreis auswählen. Angenommen, Sie müssen den Pyramidensaft auswählen. dann, ohne die Steuertaste Versuchen wir dann, ohne die Steuertaste auszuwählen. Es wird nicht richtig ausgewählt. Lassen Sie uns nun die Steuertaste auf der Tastatur drücken und die Maus bewegen Jetzt können Sie den dreieckigen Saft auswählen. Okay. Angenommen, Sie müssen dieses Radarrechteck auswählen. Wenn Sie es dann tun, ohne die Steuertaste zu drücken, funktioniert es nicht richtig. Wenn Sie jedoch die Steuertaste auf Ihrer Tastatur verwenden, können Sie jetzt ganz einfach einen bestimmten Teil auswählen. ein bestimmtes Teil richtig auszuwählen , müssen Sie also die Steuertaste verwenden. Und während Sie die Steuertaste drücken, müssen Sie die Maus über ein beliebiges Objekt Also lass uns sehen, wie es funktionieren wird. Lassen Sie uns die Steuertaste drücken. Und während ich die Strg-Taste drücke, bewege ich den Mauszeiger über alle Objekte und ich werde aufgefordert, ein beliebiges Objekt auszuwählen So können Sie mit Hilfe der Steuerung einen bestimmten Teil auswählen mit Hilfe der Steuerung einen bestimmten Teil Also, wenn Ihnen dieser Vortrag gefällt, dann vergessen Sie nicht, mir eine gute positive Bewertung und einen Kommentar zu geben . Okay, Bee. 5. Ausrichtung in Figma: Hallo an alle in dieser speziellen Vorlesung, ich werde Ihnen beibringen, wie Sie Alignment in Figma verwenden können Okay, also ohne Zeit zu verschwenden, lassen Sie uns unser Video starten Okay. Nehmen wir an, wir haben vier Elemente , eins, zwei, drei und vier. Diese sind jedoch nicht richtig ausgerichtet. Okay. Also, wenn wir es richtig ausrichten müssen, dann müssen wir natürlich alle Elemente auswählen. Okay. Und auf der rechten Seite sehen Sie Alignment Opson. Okay. Also hier haben wir eine andere Art von Ausrichtungsoption. Angenommen, Sie müssen von der linken Referenzlinie aus ausrichten, dann sieht das so aus. Drücken wir Control Plus. Wenn Sie sie von der horizontalen Mitte aus ausrichten müssen, sieht es so aus. In ähnlicher Weise können Sie alle Optionen ausprobieren, aber in der Regel verwenden wir die Option aber in der Regel verwenden wir Horizontale Mitte ausrichten und Vertikale Mitte ausrichten. Horizontale Mitte ausrichten und Vertikale Mitte ausrichten. Okay. Wählen wir also alle Elemente und erstellen wir zunächst ein gemeinsames Zentrum. Klicken wir auf Vertikale Mitte ausrichten. Jetzt werden Sie sehen, dass alle Elemente richtig angeordnet sind und einen gemeinsamen Mittelpunkt haben. Okay. Aber wie Sie hier feststellen werden, ist die Lücke zwischen den einzelnen Elementen inkonsistent Okay. Okay. Um das zu beheben, was wir tun müssen, werden wir hier sehen wann immer Sie alle Elemente auswählen, hier sehen Sie dieses Symbol, Rein. Was bedeutet, dass zwischen allen Elementen Gleichheit besteht . Okay. Wann immer Sie also auf Reline klicken, wird der Abstand zwischen allen Elementen konsistent Okay, du kannst es ganz einfach von hier aus ändern. Ok. Ebenfalls, okay. Also so können Sie ein gemeinsames Zentrum schaffen. Okay. Lassen Sie uns jetzt eine Schaltfläche erstellen. Lassen Sie uns also zunächst ein Rechteck erstellen. Lassen Sie uns jetzt Text verwenden. Herunterladen. Nun, das ist unser Button-Text. Lassen Sie uns die Größe der Schaltfläche erhöhen. Was wir nun tun werden, wir werden beide Elemente zusammenführen. Anstatt es manuell zu tun, anstatt es manuell zu tun, können Sie es auch so machen. Wählen Sie das Element aus. Jetzt müssen wir zuerst ein vertikales Zentrum erstellen. Danach müssen wir ein horizontales Zentrum auswählen. Es wird es automatisch arrangieren. Okay. In ähnlicher Weise einen Home-Tab für ein beliebiges Web erstellen müssen, werden wir, wenn wir einen Home-Tab für ein beliebiges Web erstellen müssen, Home-Funktionen erstellen Der diesbezügliche Kontakt ist nichts anderes als ein Text. Das ist nichts anderes als ein Text. Und hier haben wir ein Rechteck. Okay, also müssen wir sie zusammenführen. Okay. Also, anstatt alles manuell zu machen , genau das, was wir tun werden. Zunächst wählen wir den gesamten Text richten ihn in der gemeinsamen Mitte aus. Okay. Jetzt klicken wir auf eine gleiche Zeile oder einen gleichen Abstand. Okay. Jetzt werden wir alle innerhalb dieses Rechtecks auswählen. Wir werden das Ganze auswählen. Auch hier klicken wir auf Vertikale Mitte ausrichten. Okay. Jetzt können Sie sehen, dass wir sie richtig ausgerichtet haben, sodass Sie keine manuelle Arbeit verrichten müssen wenn Sie wissen, wie man Alignment verwendet. Okay? Zum Beispiel haben Sie ein Rechteck erstellt, Sie haben einen Kreis erstellt. Okay. Sie haben ein weiteres Rechteck erstellt. Sagen wir rote Farbe. Okay. Also, was Sie jetzt tun können, können beide Elemente auswählen, ein gemeinsames Zentrum bilden, okay, machen Sie das so. Machen Sie ein gemeinsames Zentrum. Wählen Sie alle Elemente aus , um ein gemeinsames Zentrum zu bilden. Okay. So kannst du also alles erschaffen. So kannst du mit Alignment spielen. Okay. Also, wenn dir dieser Vortrag gefällt, dann vergiss nicht, mir eine gute positive Bewertung zu geben . Tschüss. 6. Was ist Wireframe, Mockup und Prototype?: Hallo, alle zusammen. Also willkommen euch alle in meiner vollständigen Master-Serie über Pigma UIUX Design In dieser speziellen Vorlesung werde ich Ihnen beibringen, was Wireframe-Mockup Lassen Sie uns also, ohne Zeit zu verschwenden, mit unserem beginnen. Okay. Hier sehen Sie also das Vorbild, das erste, das zweite und das dritte Okay, der erste ist Wireframe-Draht. Rahmen. Wireframe ist also ein grobes Diagramm Ihrer App oder Website. Okay? Was auch immer Sie erstellen werden, Sie müssen ein grobes Diagramm Ihrer App erstellen. Okay? In Ordnung. Da es sich um ein grobes Diagramm handelt , müssen Sie nichts messen. Sogar Sie können es mit Hilfe von Stift und Papier erstellen. Grundsätzlich müssen Sie Ihre Idee anhand eines groben Diagramms vermitteln . Okay. Wann immer Sie also ein Wireframe erstellen, können Ihre anderen Teamkollegen Ihre Idee sehr leicht verstehen Okay. Mithilfe von Wireframe können Sie Ihre Idee mit Stakeholdern teilen, CEO Okay. Man kann also sagen , dass Wireframe die Anfangsphase des Designs ist Lassen Sie uns nun lernen, was Mockup Mk Up ist. Mockup ist also eine bessere Darstellung Ihrer App. Okay. Man kann sagen, dass dies eine erweiterte Version von Wireframe Das ist also ein Beispiel für ein Modell. Dies ist eine realistische Version Ihrer App, und sie sieht tatsächlich besser aus als das Wireframe war das grundlegende Diagramm Ihrer App. Auf der anderen Seite ist Mockup eine realistischere Version Okay. Und auch hier eine Webversion unserer App Okay. Das ist der erste, das ist der zweite. Der Hauptunterschied besteht also darin, dass das Design schlecht ist. Das ist High-End-Design. Okay, also warum es schlecht aussieht und warum es wegen der Treue realistischer aussieht. Hier werden wir den Begriff Fidelity sehen. Das ist also Low-Fidelity. Und dieses Design ist originalgetreu. Treue bedeutet also Realismus. Wenn Ihr Design eher dem Realismus zugeneigt ist, dann werden Sie High Fidelity sagen Wenn Ihr Design weniger realistisch ist, werden Sie Low-Fidelity sagen Dies ist also ein weiteres Beispiel Low-Fidelity und High Fidelity. Es sieht realistischer aus. Deshalb können wir sagen, dass es sich um ein High-Fidelity-Modell handelt. Das ist Low-Fidelity, Mockup. Jetzt haben wir endlich eine letzte Phase, nämlich das , das Prototyping Prototyping oder Prototyp. Wo du dein gesamtes Design abspielen wirst. Wo du dein ganzes Design abspielen wirst. Lass uns also jedes Design spielen. In der Prototypenphase werden Sie also im Grunde viele Seiten miteinander verbinden, so wie hier. Okay. Angenommen, ich klicke auf Chat mit Colin, dann sollte diese Seite erscheinen Wenn ich auf Botschafter klicke, sollte dies erscheinen Okay, Sie können also die Beziehung zwischen allen Seiten zuweisen . Das ist ein zeitaufwändiger Prozess. Okay. Okay. Du kannst also auch deinen Prototyp spielen. Also lass uns spielen und es wird jetzt geladen. Okay, Leute, also in der Prototyp-Phase könnt ihr eure Website tatsächlich in Echtzeit abspielen. Also lasst uns mit Colin auf at klicken. Jetzt wird eine neue Seite angezeigt. Klicken wir auf Konto erstellen, auf Anmeldung klicken, OTP verifizieren und auf Colin-Profil anzeigen klicken Okay, lassen Sie uns den Besprechungsplan planen, gehen wir zum Okay. Hier werden Sie also feststellen, dass ich mich mit einem einzigen Klick auf alle Seiten bewege Dies ist ein Prototyp. Also habe ich alles behandelt, Wireframe, Mockup Also wann immer Sie ein Projekt erstellen. Sie müssen zuerst ein Wireframe erstellen, dem es sich um ein grobes Diagramm handelt Danach müssen Sie eine realistischere Version Ihres Basisdesigns in Software erstellen realistischere Version Ihres Basisdesigns in Danach müssen Sie weitere Seiten erstellen und alle Seiten miteinander verknüpfen , damit Sie sie in Echtzeit ausführen können. Okay, also wenn dir dieser Vortrag gefallen hat, dann vergiss nicht, mir ein gutes positives Bewertungselement zu geben , damit ich mich motivieren kann. Okay. Tschüss. 7. Was ist Komponente in Figma? So erstellen Sie es: Hallo, alle zusammen. Also willkommen euch alle in meiner vollständigen Master-Serie zum Pigma UIUX-Design In dieser speziellen Vorlesung werden wir also lernen, was eine Komponente ist und wie wir sie erstellen können Okay, lassen Sie uns zunächst über ihre Definition sprechen. Pigma-Komponenten sind also wiederverwendbare Benutzeroberflächenelemente wie Schaltflächensymbole und Avigan-Leisten, was bedeutet , dass Sie Ihre Komponente einmalig erstellen und wann immer Sie sie verwenden müssen, ziehen Sie sie einfach in Ihr Design Okay. Angenommen, das ist ein echtes Projekt. Das ist ein echtes Projekt. Und hier können Sie sehen, dass ich dieselbe Taste mehrmals benutzt habe. Ich habe dieselbe Taste mehrmals benutzt. Wann immer Sie also ein Design erstellen, werden Sie auch jedes Mal jede Schaltfläche von Anfang an erstellen, das werden Sie nicht tun. Stattdessen werden Sie Ihre Schaltfläche erstellen. Sie werden Ihre Schaltfläche nur einmal erstellen. Und danach, wann immer Sie es verwenden müssen, ziehen Sie es einfach. Okay, das heißt Komponente. Komponente ist also ein wiederverwendbares Element. Was ist wiederverwendbar? Weil du es für ein einmaliges Mal erstellst und du es für immer verwenden kannst. Okay? Button ist also ein gutes Beispiel für eine Komponente. Das ist eine Komponente. Ich kann diesen Button also viele Male in meinem Design verwenden. Wenn ich es also auf 50 verschiedenen Seiten verwenden muss, kann ich es problemlos verwenden, da es sich um eine Komponente handelt. Das ist eine Schönheit. Okay. Jetzt hier musst du eine Sache verstehen. Was ist Komponente und was ist Instanz. Okay, also du wirst diese Sache verstehen. Okay. Aber davor. Aber vorher erstellen wir eine Komponente. Okay, mach weiter mit den Grundlagen, okay. Jetzt werde ich eine Komponente erstellen. Nehmen wir zunächst ein Rechteck. Lass uns kreieren. Sie können den Eckenradius angeben, Sie können Farbe fühlen. Jetzt können Sie eine Textschaltfläche hinzufügen und die Größe erhöhen. Jetzt sehen Sie auf der linken Seite zwei verschiedene Ebenen. Die erste Ebene ist für Text, zweite Ebene ist für Rechtecke. Okay? Nun, was wir tun werden, wir werden beide Elemente zusammenführen. Wählen wir also zunächst das Element aus, nachdem Sie mit der rechten Maustaste darauf geklickt haben. Und hier sehen Sie die Schaltfläche „Komponente erstellen“. Sie müssen also auf Komponente erstellen klicken. Okay. Jetzt können Sie hier sehen, dass wir ein neues Symbol wie dieses haben. Dies ist ein Symbol einer Komponente. Dies ist ein Symbol einer Komponente. Wann immer Sie eine Komponente erstellen, wird das zugehörige Symbol wie folgt angezeigt. Okay? Also kann ich diese Komponente viele Male in meinem Design verwenden. Okay. Also lass uns ein Bild nehmen. Nehmen wir einen Frame. Okay. Und nehme an, ich muss diesen Knopf hier benutzen. Okay. Dann werden wir viele von Ihnen darüber nachdenken. Wir können kopieren, wir können es kopieren und wir können es hier so einfügen. Aber das ist eine falsche Methode. Das musst du nicht tun. Was musst du stattdessen tun? Wann immer Sie eine Komponente verwenden müssen, müssen Sie auf Asset Sexon Sie müssen auf Asset Sexon setzen. Du musst das nicht kopieren. Du musst das nicht kopieren. Du musst zum Asset-Küster deiner Figma werden. Wenn Sie also auf Assets klicken, werden Sie hier die gesamte Bibliothek sehen Hier sehen Sie die gesamte Bibliothek. Du musst darauf klicken. Und hier sehen Sie alle Komponenten , die Sie kürzlich erstellt haben. Das ist also meine Komponente. Also, was muss ich tun? Ich werde darauf klicken. Und hier sehen Sie die Inset-Instanz Jetzt hören Sie sich einen Begriff Instanz an. Klicken wir also auf Instanz. Okay. Okay. Jetzt musst du sehr genau zuhören. Dies wird als übergeordnete Komponente bezeichnet. Dies wird als übergeordnete Komponente bezeichnet. Und das wird Instanz genannt. Man kann Kind, Eltern-Kind, Eltern-Kind sagen. Okay. Also egal, welche Änderung Sie an der übergeordneten Komponente vornehmen , ihre Spiegelung wird auf der Instanz erscheinen, okay? Okay. Welche Änderung Sie auch immer in der übergeordneten Komponente vornehmen, ihre Auswirkung wird automatisch auf die untergeordnete Komponente, also die Instanz, angewendet. Okay. Also das ist meine übergeordnete Komponente, also wählen wir das aus. Okay. Angenommen, ich ändere seine Farbe. Ich kann das sehen. Welche Farbe ich auch auf die übergeordnete Komponente anwenden werde, dieselbe Farbe gilt auch für die untergeordnete Komponente. Was auch immer ich hier tun werde, Spiegelbild wird auch hier zum Vorschein kommen. Warum hast du irgendeinen Grund, warum das passiert? Weil das Elternteil ist, Elternteil, Vater, Elternteil. Und das ist eine untergeordnete Komponente. In Figma können wir, anstatt ein Kind zu nennen, Instanz sagen Das ist Instanz. Okay. Welche Änderung Sie also auch an der übergeordneten Komponente vornehmen, sie gilt auch für die Instanz oder die untergeordnete Komponente. Okay. Aber wenn du etwas am Kind änderst, dann wird sich das nicht auf die Eltern auswirken Das ist ein Hauptkonzept. Darüber musst du nachdenken. Welche Änderung Sie auch in Bezug auf die Eltern vornehmen werden, sie wird sich auch auf das Kind auswirken. Aber welche Änderung Sie auch am Kind vornehmen werden, wird sich nicht auf die Eltern auswirken Okay. Okay, gut. Kommen wir nun zum Thema Wohnung. Mm. Also hier wirst du sehen. Dies ist eine Hauptkomponente. Dies ist eine Hauptkomponente. Du kannst Elternteil sagen. Übergeordnete Komponente, auch Hauptkomponente genannt . Hauptkomponente. Und mit Hilfe der übergeordneten Komponente erstellen Sie mehrere untergeordnete Elemente. Mit Hilfe von Parent erstellen Sie mehrere Kinder. Und anstatt es Kind zu nennen, können Sie sagen, es ist Instanz. Okay. Lassen Sie uns also zunächst alles klären. Okay. Angenommen, Sie haben eine Komponente erstellt. Angenommen, Sie haben eine Komponente erstellt. Welche Komponente Sie auch immer erstellt haben, Sie werden sie Hauptkomponente nennen. Wann immer Sie also eine Komponente erstellen, werden Sie sagen, dass es sich um eine Hauptkomponente handelt. Die Hauptkomponente wird auch als übergeordnete Komponente bezeichnet , da es sich um eine grundlegende Komponente handelt. Und wann immer Sie diese Hauptkomponente in Ihrem Frame verwenden , wann immer Sie sie verwenden werden. Dann können Sie es Instanz nennen. Okay. Du kannst es Kind nennen. Okay. Also, der schönste Pull-Teil ist. Welche Änderung Sie auch immer an der Hauptkomponente vornehmen werden. Sein Spiegelbild wird auch hier erscheinen. Okay. Aber welche Änderung Sie auch immer auf die Instanz anwenden, sie wird sich nicht auf die Hauptkomponente auswirken. Das ist eine wichtige Sache , die du lernen musst. Okay. Okay, gut. Äh, okay. Also lass uns alles löschen. Und das ist eine Komponente, die wir kürzlich erstellt haben. Wann immer Sie also eine Komponente erstellen , können Sie sie aufrufen. Dies ist eine Hauptkomponente. Dies ist eine Hauptkomponente. Du kannst Elternteil sagen. Sie können Hauptkomponente oder Elternteil sagen, beide Dinge sind identisch. Und wann immer du es in deinem Rahmen verwenden musst, dann musst du auf Asset-Sexan gehen Okay. Also lass uns einen Rahmen erstellen. Lassen Sie uns einen beliebigen Rahmen erstellen. Wenn Sie nun diese Komponente in diesem Frame verwenden müssen, gehen Sie zu Asset Sexan und im Asset sehen Sie Bibliothek und in der Bibliothek sehen Sie Ihre Schaltfläche Wenn Sie also darauf klicken, erhalten Sie eine untergeordnete Komponente oder eine übergeordnete Komponente Sie erhalten eine untergeordnete Komponente. Okay. Und Sie können mehrere Versionen Ihrer untergeordneten Komponente erstellen. Okay. Nehmen wir an, wir benutzen es zu oft. Okay. In ähnlicher Weise könnten wir 50 verschiedene Seiten haben , auf denen ich diesen Button mehrmals benutzt habe. Okay. Okay. Lassen Sie uns mehrere Frames erstellen. Angenommen, ich habe mehrere Frames , für die ich diese Schaltfläche verwendet habe. Okay. Angenommen, ich muss die Farbe der Schaltfläche auf allen Seiten ändern, wie kann ich das dann tun? Ich werde einfach zur Hauptkomponente übergehen. Ich werde einfach zur Hauptkomponente übergehen. Und welche Änderung ich auch immer hier vornehmen werde, ihre Widerspiegelung wird hier, hier, hier erscheinen. Okay. Anstatt also die Farbe jeder Taste einzeln zu ändern, war das natürlich ein zeitaufwändiger Prozess. Anstatt diese Methode anzuwenden, was wir tun werden, werden wir einfach zur Hauptkomponente übergehen. Dies ist die Hauptkomponente. Wenn es sich um untergeordnete Komponenten handelt. Und was auch immer ich hier ändern werde, es ist das Spiegelbild, das auch hier zum Vorschein kommen wird. Lassen Sie uns also die Textfarbe ändern. Lassen Sie uns die Textfarbe ändern. Das kannst du sehen. Lassen Sie uns einen Strich auftragen und die Dicke erhöhen. Lass uns den Farbknopf ändern. Okay. So können Sie die Komponente anwenden. Der Hauptvorteil der Komponente besteht darin, dass Sie nicht jedes Mal jede Schaltfläche erstellen müssen. Sie erstellen jede Komponente auf einmal und können sie verwenden, wann immer Sie sie benötigen. Das ist also ein zeitsparender Prozess. Okay. Angenommen, Sie haben eine Website wie diese , auf der Sie 50 verschiedene Seiten erstellt haben. Angenommen, Ihr Vorgesetzter bittet Sie, die Farbe aller Knöpfe zu ändern. Wenn Sie dann manuell vorgehen, dauert es den ganzen Tag, bis die Farbe geändert ist. Sehen Sie, wenn Sie Farbe jeder Taste einzeln ändern, dann wird es viel Zeit in Anspruch nehmen, vielleicht einen Tag oder zwei Tage. Okay. Aber wenn Sie eine Komponente erstellt haben, okay, was werden Sie dann tun? Sie werden mit der übergeordneten Komponente fortfahren. Okay. Das ist eine untergeordnete Komponente. Dies ist eine untergeordnete Komponente. Offensichtlich sollten wir eine Hauptkomponente haben. Wir sollten eine Hauptkomponente haben. Also müssen wir zur Hauptkomponente übergehen und was auch immer wir hier ändern werden, egal was wir an Farbe, Text oder Größe ändern. Welche Änderung Sie auch an der Hauptkomponente vornehmen werden , sie wird sich überall im Design widerspiegeln, unabhängig davon, ob Sie diese Schaltfläche auf 50 oder 100 Seiten verwendet haben . Mit diesem geringen Aufwand können Sie die Eigenschaften der Schaltfläche auf allen Seiten ändern. Okay? Das ist das Schöne an der Komponente. Und wenn Sie keine Komponente erstellen möchten, müssen Sie für eine sehr einfache Aufgabe jeden Vorgang manuell ausführen. Wenn Sie keine Komponente erstellen, werde ich Sie bitten, die Farbe der Schaltfläche zu ändern Was werden Sie dann tun, Sie werden hierher gehen, dann werden Sie die Farbe ändern und einfach dasselbe auf das gesamte Design auftragen. Das ist ein zeitaufwändiger Prozess. Okay. Anstatt das zu tun, erstellen Sie einfach eine Komponente, gehen Sie zu Asset und verwenden Sie die Komponente, die Sie verwenden möchten. Okay. Und mit Hilfe von Component können Sie Ihr gesamtes Design mit wenigen Klicks bearbeiten. Okay. Also ich hoffe, dir hat dieser Vortrag gefallen. Wenn Sie also Hilfe vom Studio bekommen haben, können Sie mir eine gute positive Bewertung und einen Kommentar geben. 8. Variablen in Figma: Hallo alle zusammen. Also willkommen euch alle in meiner vollständigen Master-Serie zum Figma UIUX-Design In diesem speziellen Vortrag werden wir also lernen, was in Figma variabel ist und wie wir es sehr einfach erstellen können In einer früheren Vorlesung haben wir bereits behandelt , was eine Komponente ist Die Komponente war also ein wiederverwendbares Element wie eine Schaltfläche. Warum ist es wiederverwendbar? Weil wir unsere Zeit und Mühe nur einmal investieren und danach, wann immer es erforderlich ist, können wir es einfach per Dragdrop verwenden . Deshalb wird es als wiederverwendbares Element bezeichnet. Okay? Button ist also ein bestes Beispiel. Button ist das beste Beispiel für eine Komponente, also das ist eine Komponente. Aber was wird variabel sein? Wenn ich eine andere Variante dieser Schaltfläche erstellen werde. Siehst du, das ist meine Komponente. Das ist meine Komponente. Wenn ich etwas kreieren werde, ist es eine unterschiedliche Variante , die sich Farbtext, Form und Größe richtet. Okay. Wenn ich eine andere Variante dieser Schaltfläche erstellen werde, heißt das variabel. Okay, ich glaube, du hast verstanden, was ich meine. Lassen Sie uns jetzt verstehen, wie wir es sehr einfach erstellen können. Zuallererst müssen Sie also auf Leer und War setzen und Sie müssen ein Gewirr erstellen , dem Eckenradius und eine helle Farbe geben und einen Stricheffekt hinzufügen. Fügen wir nun eine Textschaltfläche, eine Schaltfläche hinzu. Okay. Okay, gut. Also habe ich noch keine Komponente erstellt. Text, Text und Schaltfläche, beide sind hier getrennt. Okay? Ich habe es nicht in die Komponente umgewandelt. Okay. Zuallererst, was ich tun werde, werde ich die verschiedenen Varianten kreieren. Also werde ich beide Ebenen richtig auswählen und danach ein Duplikat erstellen. Mit Hilfe der alten Schaltfläche können Sie die Schaltfläche einfach kopieren. Okay. Jetzt muss ich eine andere Variante erstellen. Wir müssen eine andere Variante erstellen. Nehmen wir an, wenn ich eine dunkelrote Farbe habe, dann wären andere Variationen hellrot. Okay. Also das ist mein zweiter Button. Lass es uns leicht machen. Okay. Lassen Sie uns in ähnlicher Weise die Farbe der Schaltfläche auf Grün ändern. Okay? Und ich werde den gleichen Farbcode hier in das Fest kopieren . Lassen Sie uns jetzt eine leichtere Version davon machen. Ich denke, Sie verstehen , was ich meine. Eigentlich erstelle ich gerade die primäre Schaltfläche. Das ist mein primärer Button. Und hier erstelle ich meinen sekundären Button. Die sekundäre Taste ist also mit einer hellen Farbe gekennzeichnet. Die primäre Taste ist mit einem Ziel gekennzeichnet. Okay. Sie können eine andere Variante auf der Grundlage von unterschiedlichem Text, unterschiedlicher Form und unterschiedlicher Größe erstellen. Okay. Also hier erstelle ich verschiedene Varianten von Komponenten nur auf der Grundlage der Farbe. Okay, hier erstelle ich hier Ich erstelle Variationen hier erstelle ich Variationen auf der Basis von Farben Okay. Sie können eine andere Variation der Komponente auch auf der Grundlage von Größe und Form erstellen. Okay. Gehen wir hierher, wählen Sie es aus. Geben Sie blaue Farbe ein, geben Sie blaue Farbe ein, kopieren Sie den Farbcode und fügen Sie ihn in den zweiten ein. Und mach es leicht. Mach es leicht. Okay. Derzeit haben wir also eine dunklere Version, dunklere Person und eine hellere Version Jetzt müssen wir jedes Element in die Komponente konvertieren Okay. Nun, hier musst du aufpassen. Zunächst werden wir uns mit Schaltflächen und Texten wie diesem befassen. Danach werden wir eine Komponente erstellen. Okay. Wann immer Sie also zwei Elemente in eine einzelne Komponente umwandeln, werden Sie dieses Symbol hier sehen. Okay? Jetzt wählen wir die Schaltfläche und den Text des zweiten Elements aus. Jetzt können Sie im linken Bereich sehen, dass das Textelement ausgewählt wurde. Und das Rechteck wurde richtig ausgewählt. Okay. Unabhängig davon, welches Element Sie auswählen, müssen Sie überprüfen, ob Sie die richtige Ebene auswählen. Andernfalls können Sie einen Fehler machen. Okay. Wann immer Sie also ein Element auswählen, müssen Sie es von der linken Seite aus überprüfen. Sie wählen das richtige Element aus oder nicht. Okay? Lassen Sie uns also beide Elemente in die Komponente umwandeln. Ähnliches müssen wir hier tun, Komponente lesen. Komponente erstellen. Komponente erstellen. Okay. Jetzt können Sie sehen, dass wir sechs verschiedene Komponenten haben . Wir haben hier sechs verschiedene Komponenten. Jetzt müssen wir sie auf intelligente Weise umbenennen, okay. Sie müssen also beim Umbenennen eine beliebige Reihenfolge einhalten. Okay. Also zum Beispiel, das ist meine erste Komponente, das ist meine erste Komponente. Also werde ich auf Text doppelklicken und jetzt kann ich ihn umbenennen. Aber bevor Sie umbenennen, müssen Sie das Grundprinzip des Umbenennens verstehen das Grundprinzip des Umbenennens Jetzt werde ich dir beibringen , wie du deinen Computer umbenennen musst Okay. Also sollte es wie ein Knopf sein. Du musst hier aufpassen, okay? Knopf, Schrägstrich. MM-Taste, Schrägstrich, rot, Schrägstrich Okay, du musst es also so umbenennen. Okay. Also lass uns jetzt verstehen, was das ist. Schrägstrich bedeutet also Ordner. Wann immer Sie einen Schrägstrich verwenden, Pigma voraus, dass es sich um eine andere Eigenschaft handelt Okay. Also ist Slash ein Ordner Slash ist ein Ordner. Also zuerst müssen Sie Button eingeben. An zweiter Stelle müssen Sie Farbe eingeben. An dritter Stelle müssen Sie den Status Aktiv oder Inaktiv eingeben. Okay, lassen Sie uns das ganz praktisch untersuchen , damit Sie es sehr leicht verstehen. Okay, wir müssen also der gleichen Reihenfolge folgen. Wir müssen der gleichen Reihenfolge folgen. Taste, dann Rot, was Farbe ist, und danach Status, aktiv oder inaktiv. Okay, wir müssen also der gleichen Reihenfolge folgen. Okay. Lassen Sie uns also zunächst diese Komponente umbenennen. Okay. Lass uns jetzt tippen. Geben wir Button ein. Aktiv. Okay, weil das ein Aktivist ist. Okay. Ebenso muss ich das kopieren, und ich werde auf die zweite Taste klicken und ihr Name sollte Button sein, rot und inaktiv, weil Lichtfarbe für Inaktivist steht Okay. Sie können auch deaktivieren oder aktivieren eingeben. Sie können statt aktiv oder inaktiv auch an oder aus eingeben . Es ist nicht erforderlich , dass Sie oder inaktiven Text verwenden müssen. Anstatt aktiv oder inaktiv, statt aktiv oder inaktiv, was Sie tun können, können Sie aus verwenden, Sie können aktivieren verwenden. Sie können deaktivieren verwenden , sodass Sie hier frei sind. Du kannst alles verwenden. Aber welche Reihenfolge Sie auch immer in der ersten Taste zugewiesen haben, Sie müssen überall auf der Taste dieselbe Reihenfolge einhalten. Andernfalls wird es nicht funktionieren. Okay? Selbst du musst keinen Rechtschreibfehler machen. Okay? Du musst keinen Rechtschreibfehler machen. Andernfalls wird sichergestellt , dass es konsistent ist. Also hier kannst du diesen Button sehen. Rot Aktiv. Okay. Und hier siehst du, dass rote Schrägstrich inaktiv ist. Okay. Ordnung. Das Gleiche musst du mit anderen Tasten machen wenn ich zu Komponente drei übergehe, dann muss ich die Schaltfläche umbenennen, dann grün und dann aktiv. Okay, gut. Lass uns kopieren, das Gleiche. Fahren Sie mit Komponente vier fort, benennen Sie sie um wie Taste, grüne Taste, Schaltfläche, grün und inaktiv inaktiv. Das Gleiche gilt für Komponente fünf Taste, blau und aktiv. Kopieren Sie denselben Text und fügen Sie ihn in Komponente sechs ein. Schaltfläche, blau und inaktiv. In Ordnung. Also habe ich erstellt, ich habe sechs verschiedene Komponenten mit richtiger Umbenennung erstellt Okay. Nun, wenn Sie es sehr richtig gemacht haben, was wird dann passieren? Sie müssen alle Komponenten auswählen, und wenn Sie sie sehr gut ausgeführt haben, werden Sie Opson like sehen, dann werden Sie Opson like sehen Als Variante kombinieren. Als Variante kombinieren. Okay. Du musst also auf Als Variante kombinieren klicken. Fein. Klicken Sie auf Als Variante kombinieren. Jetzt werden alle Komponenten in die einzige große Komponente umgewandelt . Okay. Nun, hier haben wir den besten Teil. Eigentum eins Eigentum zwei. Wenn Sie also alle Aktivitäten ordnungsgemäß ausgeführt haben, erhalten wir schließlich Eigentum eins, Eigentum eins und Eigentum zwei. Haben Sie sich daran erinnert, dass wir beim Umbenennen ein Schrägstrichsymbol hinzugefügt haben beim Umbenennen ein Schrägstrichsymbol hinzugefügt Okay. Also war es für Eigentum. Die erste Eigenschaft steht also für Farbe. Die zweite Eigenschaft steht für aktiv oder inaktiv. Okay. Also, ich nehme an, ich muss die Komponente verwenden. Okay. Dies ist ein neuer Frame , in dem ich eine Komponente verwenden muss , die ich kürzlich erstellt habe. Dann werde ich zunächst auf Asset Sexon eingehen. Zunächst werde ich auf Asset Sexon eingehen. Gehen wir also zur Vermögensverwaltung über. Inside Asset, hier werde ich sehen, hier werde ich alle Komponenten sehen, die ich kürzlich erstellt habe. Das ist also eine Komponente. Lass uns darauf klicken. Innere Instanz. Okay. Also das ist ein Button , den ich kürzlich erstellt habe. Okay. Aber das Schöne daran war, dass ich Eigentum eins und Eigentum zwei bekomme Okay. Also Property One steht für Farbe, also kann ich zu jeder Farbe wechseln, grün, blau. Okay. Und nehmen wir an, ich brauche eine hellere Version der blauen Farbe. Dann werde ich auf blaue Farbe setzen und auf Grundstück zwei werde ich als Aktivist weitermachen. Okay. Also wann immer Sie beim Umbenennen das Schrägstrichsymbol verwenden Okay, es wird in das Eigentum umgewandelt. Okay, nehmen wir an, Sie benennen Ihren Button um wie Button, Button, Slash, Slash, Red, Slash Licht. Okay. Was wird dann passieren? Dies wäre Ihre erste Immobilie und dies wäre Ihre zweite Immobilie. Wenn Sie also das Schrägstrichsymbol verwenden, wird es so betrachtet, als ob es sich um eine andere Eigenschaft handelt Also hier, was wir eigentlich gemacht haben, wir haben diesen Like-Button umbenannt Farbe, aktiv. Okay. Anstelle von aktiv oder inaktiv können Sie also Wörter wie aktivieren oder deaktivieren, an oder für okay, hell oder dunkel verwenden . Sie können also alles verwenden. Okay. Anstelle der Schaltfläche können Sie alles eingeben. Statt Button können Sie Component Card eingeben. Sie können alles eingeben. Das war also unsere Reihenfolge, Taste, Farbe und aktiv. Also hier, was passiert eigentlich. Farbe ist eine erste Eigenschaft und der aktive oder inaktive Zustand ist die zweite Eigenschaft. Auf der rechten Seite des Bildschirms werden Sie also beide Dinge sehen. Angenommen, Sie haben eine Reihe von Komponenten erstellt , denen Sie mehrere Eigenschaften zugewiesen haben, dann sehen Sie hier mehrere Eigenschaften Sonne. Da wir nur in die beiden Teile Farbe und aktiven oder inaktiven Zustand unterteilt haben , haben wir hier eine Eigenschaft eins und eine Eigenschaft zwei. Und wenn Sie Ihren Button so gestalten wollen : Button, Schrägstrich andere Größe, anderer Text Okay. Also, was wird passieren? Im Button-Ordner erhalten Sie die erste Information über den dunkleren Modus oder den helleren Modus. Die zweite Eigenschaft bezieht sich auf die unterschiedliche Größe. Dritte Eigenschaft über den unterschiedlichen Text. Okay. Das ist also eine Schönheit der Variation. Jetzt kann ich jede Variante wie diese verwenden. Okay, gut. Also das war ein Varion In ähnlicher Weise können Sie Variationen für verschiedene Sets erstellen. Zum Beispiel, ähm, wenn Sie aus dieser roten Taste vier verschiedene Sonnenfarben erstellen möchten , also 100% rot und hundertprozentig rot, 80% rot. 60% d. Tatsächlich spreche ich von den verschiedenen Gruppen bestimmter Schaltflächen. Okay. Sie können es also einfach mit Hilfe von Variablen tun. Ich hoffe, Ihnen hat dieser Vortrag gefallen. Und wenn Sie Hilfe vom Studio bekommen haben, können Sie mir eine gute positive Bewertung geben. Okay. Und wenn du Figma persönlich mit mir lernen willst, eins zu eins live, dann was du tun kannst, du kannst mich auf Instagram, UX über einen Sir UX Professor kontaktieren UX über einen Sir UX Professor So können wir alles über Figma eins zu eins besprechen. Wenn Sie daran interessiert sind zu lernen, können Sie mich kontaktieren Okay. Also ich hoffe, dir hat dieser Vortrag gefallen. Hallo Bob. 9. Was ist Designsystem?: Hallo, alle zusammen. Also willkommen euch alle in meiner vollständigen Master-Serie zum Figma UIUX-Design In dieser speziellen Vorlesung werden wir also lernen, was ein Designsystem ist und wie Sie es in Figma verwenden können Okay. Lassen Sie uns also, ohne Zeit zu verschwenden, zur Hauptdefinition springen Okay? Das ist eine Definition. Design System ist eine umfassende Sammlung wiederverwendbarer Komponenten. Okay. Es ist eine wiederverwendbare Komponente. Es ist eine Sammlung wiederverwendbarer Komponenten. In früheren Vorlesungen habe ich bereits behandelt, was eine Komponente ist, wie man sie verwenden kann und welche Bedeutung eine Komponente hat. Ich habe in früheren Vorlesungen alles behandelt. Mit Hilfe der Designsystemdefinition können Sie also eines verstehen Komponente ist auch Teil des Designsystems. Wenn ein großer Kreis ein Designsystem ist, dann ist ein kleiner Kreis eine Komponente. Die Komponente ist auch Teil des Designsystems, was bedeutet, dass die Schaltfläche, die Sie in früheren Vorlesungen erstellt haben , auch Teil des Designsystems ist. Okay. Und es ist ein wiederverwendbares Element. Es ist ein wiederverwendbares Element. Wiederverwendbar. Warum? Weil Sie Ihre Mühe und Zeit nur zum ersten Mal investieren werden. Und danach können Sie jedes Element oder jede Komponente einfach ziehen, wann immer es benötigt wird. Sie müssen es nicht mehrmals erstellen. Sie müssen es nicht von Anfang an erstellen. Sie können einfach eine Sammlung wiederverwendbarer Elemente erstellen eine Sammlung wiederverwendbarer Elemente und sie bei Bedarf einfach per Drag-and-Drop verschieben. Okay. Also das ist ein Designsystem. Okay? Warum ist das Designsystem also wichtig? Das Designsystem ist wichtig für die Konsistenz. Nehmen wir an, Sie haben eine Marke, nehmen wir als Beispiel an, eine Website handelt. Jetzt frage ich Sie, was ist die Markenfarbe? Was ist die Primärfarbe der Website? Was ist die Markenidentität? Sie werden also sagen, diese blaue Farbe ist Markenidentität. Du wirst das sagen. Diese blaue Farbe ist Markenidentität. Okay. Wenn ich dich frage was die Grundfarbe von Instagram ist, dann wirst du sagen, dass es ein bisschen wie Rosa ist und wenn ich dich frage, was die Grundfarbe von YouTube ist, dann wirst du Rot und Schwarz sagen. Okay? Wenn ich dich fragen darf, was die Grundfarbe weiter ist. Du wirst also Blau und Weiß sagen. Okay. Mit Hilfe von Farbe können Sie also ein einheitliches Design erstellen. Okay? Aus Gründen der Konsistenz werden wir also das Designsystem verwenden. Okay? Also erstellen wir ein Designsystem auf der Grundlage von Farbe, Text, Größe, Layout, Richtlinie und Komponente. Okay. Und wie ich Ihnen bereits gesagt habe, ist das Designsystem für das Branding am wichtigsten. Okay? Weil jede Marke ihre eigene Farbe hat, die als Markenfarbe bezeichnet wird. Okay. Für ein korrektes Branding sollten wir also das Designsystem im gesamten Design verwenden. Okay. Wenn Sie diese Website sehen, werden Sie überall auf der Seite diese blaue Farbe sehen. Überall auf der Seite werden Sie dieselbe Farbe sehen. Okay. Mit Hilfe dieser Farbe sorgen wir für Konsistenz, und Konsistenz ist bei der Erstellung von UIUX am wichtigsten Okay? Dies ist ein Kernprinzip von UIUX Konsistenz ist ein Schlüssel. Okay. Design System ist eine vordefinierte Vorlage, vordefiniertes Temp, in dem Sie es einmal erstellt haben. Sie können es verwenden, wann immer es erforderlich ist. Okay. Okay, gut. Nun stellt sich die Frage, warum das Designsystem so wichtig ist Angenommen, ich bin CO, CEO eines Unternehmens. Angenommen, ich bin CEO eines Unternehmens und habe meinen Mitarbeitern die Aufgabe übertragen , dass Sie das Design einer Hotel-App erstellen müssen. Sie müssen eine App für ein Hotel erstellen. Okay. Dann habe ich mehreren UIUX-Designern eine Aufgabe zugewiesen. Okay. Nehmen wir an, ich habe Mm zugewiesen , sie ist Katy, nehme Sie ist Katie. Okay. Also habe ich Katie Arbeit zugewiesen, dass sie eine Anmeldeseite erstellen In ähnlicher Weise habe ich Rahul eine Aufgabe zugewiesen , für die Sie den Startbildschirm erstellen müssen Okay, ich habe also zwei verschiedene UIUX-Designer engagiert und beide Designer arbeiten an demselben Projekt Beide Designer arbeiten an demselben Projekt. Okay. Dann hat Katty diese Anmeldeseite erstellt. Okay. Und Rahul hat diese Homepage erstellt Aber wenn Sie feststellen werden, dass es keine Konsistenz gibt. In Bezug auf Farbe, Symbol und Typografie gibt es keine Konsistenz Also, wie sich das Design auf dasselbe Projekt beziehen wird, wie es sich auf dasselbe Projekt beziehen wird Wenn Sie die Konsistenz in Bezug auf Farbe, Text und Ikonographie nicht wahren die Konsistenz in Bezug auf Farbe, Text , dann wird jede Seite, egal welche Seite Sie erstellen, alle Seiten anders aussehen als die vorherige Okay. Das ist ein falscher Prozess. Aus diesem Grund werden wir hier Designsystem verwenden, um die richtige Konsistenz zu gewährleisten. Okay. Also so sieht das Designsystem aus. Sie werden eine Textmenge in unterschiedlicher Größe erstellen. Wenn Sie eine Farbe erstellen , die Sie häufig in Ihrem Design verwenden werden. Okay. Du wirst ein Muster wie dieses erstellen. Okay. Also so sieht das Designsystem aus. nun, ohne Zeit zu verschwenden, Lassen Sie uns nun, ohne Zeit zu verschwenden, ein Designsystem erstellen Lassen Sie uns also zunächst einen Frame nehmen. Okay. Lassen Sie uns also zunächst ein Designsystem für Farbe erstellen. Was ich tun werde, ich werde ein Rechteck wie dieses erstellen. Ich werde eine Kopie machen. Okay. Geben wir also die Farbe ein. Dunkelgrün. Okay, also lass uns schwarze Farbe eingeben. Lass uns dieselbe Farbe kopieren. Kopiere dieselbe Farbe und füge sie in die zweite ein. Mach es ein bisschen heller. Mach es ein bisschen heller. Okay. Jetzt kopiere ich denselben Code. Füge es hier ein. Reduzieren Sie die Transparenz. Also habe ich hier mehrere Sets erstellt. Okay? So können Sie also ein Designsystem erstellen. Das ist meine Grundfarbe. Angenommen, das ist meine Grundfarbe. Okay. Ebenso kann ich Sekundärfarben erzeugen. Okay. Lass uns noch eine Farbe schälen, Rot. Und lassen Sie uns den Farbcode kopieren. Okay. Also habe ich mehrere rote Sätze erstellt. Okay. Also das ist meine Primärfarbe, das ist meine Sekundärfarbe. Okay. Also habe ich dir in früheren Vorlesungen erklärt, wie du deine Komponente umbenennen kannst . Ebenso müssen Sie hier den gleichen Vorgang ausführen. Okay. Also lasst uns zuerst auf F eins klicken. Okay. Und hier wirst du vier Punkte sehen. Wenden Sie Stil und Variablen an, klicken Sie darauf und klicken Sie auf die Plus-Schaltfläche. Okay. Jetzt können Sie umbenennen, wie wir es bereits in der Komponentenvorlesung getan haben . Okay. Also lass uns eins eingeben. Geben wir Black One ein. Okay. Also tippe ich hier Black Slash One ein Wann immer ich diesen Schrägstrich verwende, wird er in den Ordner aufgeteilt. Okay. Also ähnlich werde ich Schwarz, eins, schwarz, zwei, schwarz, drei, schwarz, vier umbenennen . Also, wenn ich kein Schrägstrichsymbol zwischen X und Zahl verwende , was passiert dann? Die gesamte Farbe wird einzeln sichtbar sein. Aber wenn ich einen Schrägstrich wie diesen hinzufüge , was passiert dann? Ich nehme Schwarz und drinnen Schwarz, ich nehme alle Variesens Das wäre also sehr systematisch. Also mach dir darüber keine Sorgen, wenn du es nicht verstehst. Ich werde es dir praktisch zeigen. Okay. Also lassen Sie uns zuerst die erste Schaltfläche in Schwarze umbenennen . Ich habe das umbenannt. Okay. Klicken Sie auf Creative Style. Der erste Stil wurde also erfolgreich erstellt , wie Sie hier sehen können. Okay. Klicken Sie jetzt auf die zweite Taste und dann auf die Vierpunkttaste. Klicken Sie auf die Plus-Schaltfläche. Neuer Stil in der Variablen und beim Einfügen des Namens fehlt der zweite Schrägstrich Kreativer Stil. Okay. Jetzt geh zum dritten. Plus-Schaltfläche hinzufügen. fehlt Schrägstrich drei. Gehen Sie auf vier Punkt plus x vier Okay. In Ordnung. In ähnlicher Weise müssen Sie auch vier rote Farben verwenden. Okay, klicken Sie auf die rote Farbe und dann auf das Symbol mit vier. Okay. Und sieh mal, ich habe bereits Rot Eins, Rot Zwei, Rot Drei kreiert . Okay. Also lass uns zuerst die letzte Taste drücken. Ein roter. Rot weniger als eins. F-Punkt plus Symbol, rote zwei, Stil kreieren. Rot drei. Preise weniger als vier. Okay. Nehmen wir an, Sie müssen diese Farbe verwenden. Okay. Was wirst du dann tun? Angenommen, ich habe diesen Rahmen erstellt und in diesem Rahmen habe ich einen Kreis erstellt. Okay. Also nehme ich an, ich muss diese Farbe auftragen. Okay. Also werde ich keine Pille nehmen. Ich werde die Fülloption nicht verwenden, um Farbe zu fühlen. Das ist falsch. Wann immer Sie also ein Designsystem erstellen, müssen Sie Farben wie diese verwenden. Zuallererst werden Sie die Objekte auswählen, bei denen Sie Farbe fühlen müssen Ich habe den Kreis ausgewählt. Jetzt werde ich mit vier Punkten weitermachen, und hier werden Sie sehen was auch immer Sie geschaffen haben. Punkt. Hier sehen Sie die systematische Reihenfolge. Da ich dir das bereits gesagt habe, benenne ich es so um Rot eins, rot plus zwei, rot plus drei. Es wird also so aussehen, als ob es einen Ordner gibt, rot, und darin rot, eins, zwei, drei. Ähnlich werde ich für Schwarz Schwarz bekommen, eins, zwei, drei. Dies ist ein systematischer Prozess. Nehmen wir an, ich muss den roten Kreis mit Farbe füllen. Also werde ich auf den Kreis klicken und dann Stil und Variablen anwenden. Scrollen Sie nach unten. Und hier siehst du einen schwarzen Ordner, einen roten Ordner. Okay, also lass uns eine schwarze Zwei setzen. Also so kannst du dich fühlen. Und wenn du es löschen willst, kannst du es hier löschen. Okay. Angenommen, ich habe hier einen weiteren Kreis geschaffen. Ich muss Farbe auf diesem Kreis spüren, also werde ich auf vier Punkte setzen. Angenommen , ich muss die rote Farbe Rot auch füllen. Das ist also ein Hauptordner, rot, und in Rot haben wir eins, zwei, drei, vier. Okay. Wann immer Sie also das Schrägstrichsymbol bei Ihrer Umbenennung verwenden, wird es als Eigenschaft aufgeteilt So können Sie es also verwenden. Okay. Was kannst du stattdessen tun? Sie können so umbenennen. Sie können so umbenennen. Primärmangel ein Primärmangel und so weiter. Du kannst so einen Namen machen. Wann immer Sie also diesen Schrägstrich verwenden, wird er als zwei verschiedene Eigenschaften betrachtet Die erste Eigenschaft steht für Schwarz und die zweite Eigenschaft für Zahl. Okay. Außerdem kannst du so einen Namen machen. Primär primär, Schwarz dunkel. Sie können also auch so umbenennen. Okay, dunkel, dunkelste, hellste, hellste. Okay. Wann immer Sie also ein Symbol oder einen Schrägstrich verwenden, wird es in die verschiedenen Eigenschaften aufgeteilt Sie können Primärfarben wie Rot und Sekundärfarben Schwarz umbenennen . Okay. Es steht Ihnen also frei, umzubenennen. Okay. Also musst du einfach darüber nachdenken , egal welche Art von Sequenz du verwendest, aber sie sollte im gesamten Designsystem konsistent sein . Also habe ich ein Designsystem für Farben erstellt. Okay. Ebenso müssen Sie das Designsystem für Text und Typografie verwenden das Designsystem für Text und Typografie Okay, lassen Sie uns den Rahmen erweitern. Okay. Lassen Sie uns nun ein Designsystem für Text erstellen. Lassen Sie uns also zunächst die Überschrift hier eingeben. Überschrift. Okay. Also hier kannst du sehen, dass Quanti Style momentan Pop-ins ist, regulär 36. Okay. Jetzt kannst du das kopieren und du kannst es auf 32 reduzieren, dann diese 24 kopieren. 20. Okay, oder du kannst Absatz eingeben. Okay. Also das ist deine Typografie. Okay. Und in einem einzigen Design müssen Sie nicht mehr als zwei verschiedene Fontistyles verwenden Ich sage, dass Sie in jedem Design nicht mehr als zwei Funtistyle verwenden müssen mehr als zwei Funtistyle In jedem Design müssen Sie maximal zwei verschiedene Arten von Schriftarten verwenden maximal zwei verschiedene Arten von Schriftarten In Ihrem einzigen Design sollte es nicht mehr als zwei verschiedene Schriftarten enthalten. Dies ist ein grundlegendes Designelement. Also habe ich vier verschiedene Größen kreiert. Okay. Außerdem können Sie die Dicke ändern. Okay? Also habe ich ganz zufällig vier verschiedene Versionen erstellt. Sie können also festlegen, wie Sie es zuweisen können. Auch hier gehst du auf vier Punkte. Lassen Sie uns zunächst diesen Text auswählen, auf vier Punkte klicken und den kreativen Stil des Plussymbols hinzufügen. Hier kannst du alles eingeben. Sagen wir also Überschrift eins. Nehmen wir an, Überschrift eins ist unser erster Text. Dann mach weiter, Edding zwei. Drei hinzufügen. Vier hinzufügen. Ich nehme an, ich muss das benutzen. Okay, ich habe also vier verschiedene Typografien erstellt. Okay. Also nehme ich an, ich muss es benutzen. Also werde ich mit diesem Bild weitermachen. Hier, ich nehme es mit. Okay. Nun, wenn ich eines dieser Designsysteme anwenden muss, wie kann ich das dann tun? Zunächst doppelklicke ich auf meinen Namen und danach kann ich von hier aus jeden auswählen. Überschrift eins, Überschrift zwei, Überschrift drei, Überschrift vier, Absatz. Okay, so können Sie das Designsystem verwenden. Okay. Also, wann du das erstellen wirst, wann wirst du das erstellen. Angenommen, Sie erstellen eine solche Website. Sie erstellen eine Website wie diese. Dann werden Sie zuerst Ihr Designsystem für Farbe erstellen. Sie werden ein Rechteck oder einen Kreis erstellen. Dies dient nur als Referenz. Okay. Und was du tun wirst, du wirst diese Farbe kopieren. Okay. Also das ist mein Designsystem. Okay. Also habe ich ein Designsystem für diese Website erstellt. Okay. Also wann immer ich diese Farbe auftragen muss, klicke ich einfach auf Element und ich kann von hier aus Farbe füllen. Okay. Also das ist ein wunderbares Designsystem. Ähnliches kannst du mit Text machen. Im Grunde handelt es sich also um eine vordefinierte Vorlage. Es ist ein vordefinierter Tempel. Hier können Sie sehen , dass ich diese spezielle Farbe überall im Design verwendet habe, im gesamten Design. Aus diesem Grund habe ich als Referenz ein Designsystem erstellt, und um Konsistenz zu gewährleisten, werde ich dieselbe Farbe verwenden. Okay. So können Sie also Ihr eigenes Designsystem erstellen. Okay. Ich hoffe, dir hat dieser Vortrag gefallen. Tschüss. 10. Autolayout in Figma ( Teil 1 ): Hallo, alle zusammen. Ich begrüße Sie alle in meiner vollständigen Master-Serie über IGMAUiUX-Design In dieser speziellen Vorlesung werden wir also lernen, was automatisches Layout ist Okay. Also, ohne Zeit zu verschwenden, lassen Sie uns unser Video starten Okay, lassen Sie uns zunächst über seine Definition sprechen Okay, das automatische Layout ist also eine Designfunktion , die ein Element innerhalb eines Rahmens automatisch anpasst. Es gibt also einen Rahmen, der aus vielen Elementen besteht. Wenn Sie also die Größe des Rahmens verringern oder vergrößern, die Elemente, die sich in diesem Rahmen befinden passen die Elemente, die sich in diesem Rahmen befinden, automatisch seine Position an. Okay, nehmen wir als Beispiel ein praktisches Projekt Okay. Das ist ein Rahmen. Okay. Das ist ein Rahmen, der aus vielen Elementen besteht. Okay, das ist also ein Rahmen. Dieser ganze Körper ist ein Rahmen. Und in diesem Rahmen haben wir viele Elemente wie dieses, dieses, dieses. Der Rahmen besteht also aus vielen Elementen. Okay. Wenn Sie also die Größe eines Frames vergrößern oder verkleinern, passt sein Element automatisch seine Position an. Wenn ich zum Beispiel die Breite des Rahmens verringere, können Sie sehen, dass das Bild seine Größe automatisch an die Rahmenbreite anpasst . Das heißt also Autoyout. Also in Autoout in Autoaout haben wir einen Frame. Otoeut ist eine Designfunktion , die sich automatisch an Elemente innerhalb eines Rahmens anpasst und ausrichtet Okay, nehmen wir als Beispiel einen Container Nehmen wir einen Container. Okay. Also dieser Container ist ein Rahmen. Nehmen wir an, dieser Behälter ist ein Rahmen und der Behälter besteht aus Wasser. Es besteht aus Wasser. Es ist ein Behälter. Okay, nehmen wir an, der Behälter ist dein Rahmen und Wasser ist dein Element. Okay. Also stell dir eine Sache vor. Das ist dein Container. Das ist dein Behälter, der aus Wasser besteht. Okay. Was passiert also, wenn ich die Breite des Containers erhöhe? Was wird passieren? Wenn ich die Breite des Behälters vergrößere, passt sich das Wasser natürlich überall im Raum an. Okay, hier habe ich vier Referenzpunkte erwähnt, einen, zwei, drei, vier, was nichts anderes als ein Medium ist Ihnen zu zeigen, wie das automatische Layout funktioniert. Okay. Also, wenn Sie zusätzlichen Platz haben, werden Sie ihn natürlich belegen. Okay? Angenommen, Sie reisen mit Ihren vier Freunden im Bus. Okay, nehmen wir an, Sie reisen mit vier Freunden im Bus. Nehmen wir an, Sie haben nur einen begrenzten Sitzplatz, dann werden Sie sich an einem sehr kleinen Ort anpassen. Okay. Aber wann immer du zusätzlichen Platz bekommst, nimmst du den ganzen Platz ein, okay? Okay. Also das ist ein Rahmen. Wenn ich die Breite des Rahmens erhöhe, passt sich das Element an die Rahmengröße an. Okay. Nehmen wir ein anderes Beispiel. Das ist ein Button. Das ist ein Knopf. Okay. Das ist ein Rahmen. Das ist ein Rahmen, und in diesem Rahmen haben wir ein Element, richtig? Wir haben einen Rahmen und in diesem Rahmen haben wir ein Element. Nun, was passiert wenn ich die Größe des Frames vergrößere oder verkleinere Sein Element passt sich automatisch an die Rahmengröße an. Okay. Jetzt werden Sie eines feststellen , dass es seine Position beibehält. Wenn ich also noch einmal den Bekanntheitsgrad erhöhen würde, behält Element seine Position bei. Das nennt man Autolayout. automatische Layout ist also eine der besten Funktionen von GMA, mit der das Element seine Position an die Framegröße anpassen Immer wenn sich die Rahmengröße ändert, ändert das Element automatisch seine Position Okay? Also, wann immer wir eine App entwerfen müssen. Okay, dann werden wir kein separates Design für Mobilgeräte, separates Design für Desktop, separates Design für Tablets erstellen separates Design für Desktop, . Okay? Wie du weißt, haben wir mehrere Frames. Wenn Sie auf den Rahmen klicken, werden Sie hier sehen. Wir haben einen Rahmen für Tablet, Desktop, Tablet, Desktop und Telefon. Okay. Mit Hilfe von Autoayout können Sie also Ihr Design erstellen und es für verschiedene Größen optimieren Sie können das Design der Desktop-App für die Tablet-Ansicht für die Telefonansicht optimieren für die Tablet-Ansicht für die Telefonansicht Okay. Das ist also eine Schönheit von Autoeyout Lassen Sie uns nun lernen, wie wir das machen können. Okay. Also zuerst werde ich dir erklären, dass es Eigentum ist. Okay. Danach werden wir den automatischen Layouteffekt anwenden. Aber vorher sollten wir seine Eigenschaft verstehen. Okay. Also hier haben wir zwei Dinge. Kannst du diese blaue Linie dieses blaue Rechteck sehen? Das wird Frame genannt. Und darin haben wir ein Element. Okay. Also, wann immer ich die Größe eines Rahmens vergrößere oder verringere, passt sein Element auch seine Position und Größe an. Okay. Erhöhen wir also den und Sie können sehen, dass er seine Position beibehält. Es behält seine Mittelposition bei. Okay. Jetzt musst du auf diese Seite schauen. Hier bekommst du ein solches Symbol. Kannst du das sehen? Das ist ein anderes Gift von Elementen innerhalb eines Frames. Okay. Also hier wirst du sehen, hier wirst du eine kleine Kiste sehen. Hier siehst du eine kleine Kiste. Kannst du das sehen? Okay. Und mein Englisch ist ein bisschen schlecht, weil Englisch nicht die Sprache ist. Okay. Aber du solltest dich auf mein Wissen konzentrieren. Okay? Du musst meine Englischkenntnisse nicht beurteilen, weil Englisch das nicht ist. Okay. Hier können Sie also sehen , dass der schwarze Punkt das Element und das rote Feld den Rahmen darstellt. Okay. In Ordnung. Wann immer Sie also Ihren Rahmen auswählen, wann immer Sie Ihren Rahmen auswählen, wird die Ausrichtungsoption angezeigt. Wenn ich also auf die obere Ecke klicke, wirst du feststellen , dass sich die Position geändert hat. Okay. Mit Hilfe der Ausrichtung können Sie also die Position ändern. Okay. Also das war eine Ausrichtungsoption. Das war eine Ausrichtung. Wenn Sie es also in der Mitte platzieren, was passiert dann, wenn Sie den Rahmen vergrößern oder verkleinern Es wird also trotzdem seine Position in der Mitte einnehmen. Okay. Wenn du es zum linken Pogison schaffst, dann wird es auch nach links nach Wenn du nach rechts klickst, bleibt der rechte Pogison erhalten Okay. Also, wann immer du einen Button erstellst, musst du ihn in der Mitte platzieren, okay? Ähnlich ist es, wir haben einen Rahmen für das Schülersymbol. Okay. Wenn ich also oben links klicke, bewegen sich die Elemente in Richtung der oberen linken Ecke, oben in der Mitte, oben rechts, Mitte, Mitte rechts, Mitte, Mitte links. Okay. So können Sie also sein Zentrum zuweisen. Okay. Okay, gut. Nun, wann immer Sie das automatische Layout auf mehr als zwei Elemente anwenden das automatische Layout auf , was passiert dann? Hier wirst du eine Lücke sehen. Hier wirst du eine Lücke sehen. Okay. Wenn ich mit der Maus darüber fahre, tut mir leid, dann wirst du diese Lücke sehen Kannst du diese lila Linie sehen? Kannst du diese lila Linie sehen? Das nennt man Lücke. Dies ist eine Lücke zwischen den einzelnen Elementen. Okay. Also wo du es finden wirst, das ist eine Lücke. Das ist eine Lücke. Okay. Nehmen wir an, Sie erhöhen es von hier aus, dann werden Sie auch sehen, dass die gleiche Änderung auch hier erscheint. Okay. Sie haben also beide Optionen. Entweder können Sie den Wert von hier aus ändern oder stattdessen können Sie den Wert von hier aus ändern. Beide Dinge sind gleich. Okay. Und äh, du musst hier aufpassen, denn ich nehme an, ich tippe hier 50. Das heißt, wann immer ich die Größe des Rahmens vergrößere oder verringere, ändert sich der Abstand nicht. Okay, der Abstand wird 50 sein, egal was passiert, ich vergrößere oder verringere die Breite des Rahmens. Okay, Gap ist kein Okay. Also wenn ich es zu stark verringere, dann funktioniert es nicht. Aber wenn ich auf Hit klicke und Auto eintippe und die Enter-Taste drücke. Was wird jetzt passieren? Sein Element passt sich der Rahmengröße an. Stimmt das? Sein Element passt sich der Filmgröße an. Fein. Sie haben also beide Optionen. Wenn Sie also den Wert der Lücke zwischen den einzelnen Elementen angeben, haben Sie beide Optionen. Entweder können Sie einen beliebigen Wert eingeben. Wenn Sie also einen Wert wie 50 eingeben, ergibt sich ein gleichbleibender Abstand von 50, unabhängig davon, ob Sie die Framegröße gleichbleibender Abstand von 50, unabhängig davon, ob Sie die vergrößern oder verkleinern. Es wird Abstand 50 beibehalten. Okay. Und Sie haben noch eine andere Option , nämlich den Abstand zum Auto einzustellen. Okay. Wenn Sie also den Abstand auf das Auto einstellen, passt es automatisch den Abstand zwischen anderen Elementen an. Okay. Also lassen Sie uns dasselbe wiederholen. Also zuerst, was Sie tun müssen, Sie müssen einen Rahmen auswählen. Und wenn Sie danach zwischen dieser Lücke schweben, werden Sie diese lila Schraffurlinien sehen, die die Lücke zwischen den einzelnen Elementen darstellen Dies ist eine Lücke zwischen den einzelnen Elementen. Jetzt haben Sie beide Optionen. Entweder Sie können einen festen Wert eingeben oder Sie können ihn auf Auto setzen. Derzeit ist es in Auto. Derzeit ist unser Abstand automatisch eingestellt. Das heißt , wenn ich die Breite meines Rahmens vergrößere, vergrößert sich auch der Abstand. Wenn ich die Breite des Rahmens verringere, verringert sich auch der Abstand. Wenn ich einen festen Wert wie 40 eingebe. Dann werden Sie aufgefordert, sie richtig auszurichten. Ich richte es in der Mitte aus. Wenn ich jetzt die Breite verringere oder vergrößere, ist AP konsistent Hier ist AP konsistent, 40, 40. Sie haben also beide Optionen. Entweder können Sie einen beliebigen festen Wert angeben oder Sie können ihn auf Auto setzen. Deshalb habe ich diese beiden Szenarien erklärt. 11. Autolayout in Figma ( Teil 2 ): Also Leute, ähm, das ist ein Frame, und hier haben wir die Lücke dem Auto zugewiesen, was bedeutet, dass Gap sich automatisch anpasst, wann immer wir die Rahmengröße vergrößern oder verkleinern und hier haben wir die Lücke dem Auto zugewiesen, was bedeutet, dass Gap sich automatisch anpasst, wann immer wir die Rahmengröße vergrößern oder verkleinern. Okay, je nach Rahmengröße. Wenn ich also die Rahmengröße erhöhe, vergrößert sich auch der Abstand. Wenn ich die Rahmengröße verringere, verringert sich auch der Abstand. Okay. Aber es sollte ein Limit geben, oder? Wenn ich zum Beispiel die Rahmenbreite zu stark erhöhe, werden Sie eine Sache feststellen Alle Elemente wurden zusammengefügt und es sieht hässlich aus. Das wird dein ganzes Design verderben. Okay, du musst dich also bewerben. Sie müssen die Mindestbreite und die maximale Breite anwenden. Sie müssen Ihre Designdimension einschränken. Sie müssen Ihre Entwurfsdimension wie Maximum und Minimum einschränken . Okay. Im Grunde genommen schränken Sie Ihre Designflexibilität ein. Okay? Das ist die Höchstgrenze, und das ist die Mindestgrenze. Ich denke, Sie verstehen , was ich meine. Okay, also wenn ich die Rahmenbreite verringere. Okay. Jetzt muss ich hier eine Mindestbreitenbegrenzung anwenden. Was ich dann tun werde, ist derzeit unsere Breite 1508. Also werde ich dieses Limit kopieren. Okay. Und da wir eine Breitenbegrenzung anwenden müssen , werde ich mich für die Breite entscheiden. Angenommen, ich muss eine Höhenbeschränkung anwenden, dann nehme ich die Höhe. Hier müssen wir eine Breitenbegrenzung anwenden. Deshalb werde ich auf Breite gehen, lass uns nach unten gehen. Und hier haben wir eine zusätzliche Mindestbreite, fügen Sie hier einen Wert für die Mindestbreite hinzu. Okay. Hier können Sie also sehen , dass ich die Mindestbreite des Rahmens hinzugefügt habe. Also von der Nu, was wird passieren. Wann immer ich die Rahmenbreite verringere, verringert sie sich um 1508. Okay. Danach kann ich die Breite des Rahmens nicht mehr verringern, weil ich es eingeschränkt habe, okay? Und das Gleiche musst du für das Maximum beantragen. Okay, ich werde es verringern, tut mir leid, wenn ich die Breite des Rahmens erhöhen werde, dann gibt es kein Limit, ich kann es nach Bedarf erweitern. Aber es ist notwendig , dass ich dem eine maximale Grenze zuweisen sollte. Okay? Wenn ich eine Mindestbreite zugewiesen habe, sollte ich auch eine maximale Breite zuweisen. Okay. Nehmen wir an, das ist mein Höchstlimit. Dann mache ich mit unserer aktuellen Breite 1961. Ich werde dieses Drop-down-Menü kopieren. Und hier werden Sie sehen, wie Sie die maximale Breite hinzufügen. Okay, geben Sie den Wert ein. Okay. Was wird jetzt passieren? Es wird innerhalb einer Höchst- und Mindestgrenze zunehmen oder abnehmen . Kannst du verstehen, was ich versuche? Ich habe eine Höchstgrenze und eine Mindestgrenze festgelegt, die nicht überschritten werden dürfen. Okay, ich habe ein Mindestlimit zugewiesen. Ich habe ein maximales Limit zugewiesen, es sollte nicht überschritten werden. Okay. In Ordnung. Voll. Okay. Ich denke, du hast meinen Standpunkt verstanden, oder? Also lass uns die Lücke verringern. Okay. Machen wir es in der Mitte. Also habe ich Lücke 55 zugewiesen. Da habe ich eine Pause von 1 Minute eingeräumt , okay Seitdem habe ich eine Lücke von 55 zugewiesen, was bedeutet, dass diese Lücke 55 was bedeutet, dass diese Ich habe das unabhängig davon zugewiesen, was auch immer ich den Frame vergrößern oder verkleinern Okay, es wird weiterhin ein Abstand von 55 beibehalten. Okay. Von hier aus kannst du dich auch ändern. Okay, gut. Jetzt sehen Sie hier die Option der Polsterung. kannst du sehen. Diese blaue Linie ist eine Polsterung Polsterung ist ein Abstand zwischen deinem Rahmen und deinem Element Zum Beispiel C. Dies wird als Polsterung bezeichnet Dies wird als Polsterung bezeichnet. Das ist horizontale Polsterung. In ähnlicher Weise hätten wir eine vertikale Polsterung. Okay, das ist also eine horizontale Polsterung. Also das ist dein Element. Und das ist dein Rahmen. Polsterung ist also ein Abstand zwischen Polsterung ist ein Abstand zwischen Element und Rahmen. Okay. In ähnlicher Weise können Sie eine Polsterung wie folgt zuweisen. Okay. Lassen Sie uns jetzt etwas anderes untersuchen. Hier haben wir verschiedene Layouts wie horizontales Layout vertikales Layout, sodass Sie Ihr Layout so ändern können. Okay? Ordnung. Okay. Jetzt haben wir hier einen anderen Rahmen. Wir haben einen anderen Rahmen. Wie ich Ihnen bereits gesagt habe , besteht der Rahmen aus Elementen. Okay. Der Rahmen besteht aus einem Element. Dieser blauen Linie habe ich einen Stricheffekt hinzugefügt , sodass Sie den Rahmen sehen können. Diese blaue Linie steht für den Rahmen. Diese blaue Linie steht für den Rahmen, und innerhalb dieses Rahmens haben wir zwei Elemente. erste Element ist Bild, das zweite Element ist Text. Lassen Sie uns nun die Eigenschaften des Elements verstehen. Wir haben die Eigenschaft von Frame bereits gelernt. Jetzt lernen wir die Eigenschaft des Elements kennen. Lassen Sie uns also zunächst das Bild auswählen. Lassen Sie uns das Bild auswählen. Okay? Also, ich breite, bis du den Behälter für die Pille siehst Also, was bedeutet das? Der Pillenbehälter wirkt wie Wasser. Pillenbehälter, wirkt wie Wasser. Dies ist das beste Beispiel für einen Füllbehälter. Das ist ein Rahmen, der aus Wasser besteht. Das ist ein Rahmen, der aus Wasser besteht. Wenn ich also die Breite des Rahmens vergrößere, verteilt sich das Wasser überall im Rahmen. Okay. Wenn Sie zusätzlichen Platz geben, wird er belegt. Okay. Hier kannst du sehen. Ich vergrößere die Breite des Rahmens. Die Elemente passen sich also der Größe an. Also gilt hier das Gleiche. Wenn ich auf dieses Bild klicke und auf Breite und Innenbreite gehe, wenn ich auf den Feldcontainer klicke, was passiert dann? Und sehen Sie, Sie müssen sich an eine Sache erinnern Der Peel-Container ist eine Eigenschaft eines Elements. Okay, und das Element wird sich entsprechend dem Frame verhalten. Du musst dich an dieses Ding erinnern. Nun, Container ist eine Eigenschaft von Element. Dieses Bild, dieses Bild ist ein Element. Hier haben wir einen Pillenbehälter aufgetragen. Fühl dich wie ein Behälter. Der Schweißbehälter wirkt wie Wasser. Okay. Der Feldcontainer ist also eine Eigenschaft von Element. Anstelle eines Elements könnte es alles Mögliche sein. Es könnte ein Bild oder Text sein. Alles, was sich in einem Rahmen befindet, der Element genannt wird. Sie werden also den Feldcontainer im Element sehen, nicht im Frame. Okay, der Radcontainer ist also eine Eigenschaft des Elements, oder? Und das Element verhält sich entsprechend dem Frame. Okay. Also habe ich den Feldcontainer-Effekt auf dieses Bild angewendet. Ich habe den Feldcontainer-Effekt auf dieses Bild angewendet. Okay. Also wann wird es sich benehmen? Wenn ich etwas am Frame ändern werde. Okay. Wenn ich also die Größe des Frames verringere oder vergrößere, passt sein Element seine Größe und Position automatisch an. Okay. Das ist ein wunderschöner Füllbehälter. Also lassen Sie uns dasselbe wiederholen. Okay. Lass uns dasselbe wiederholen. Sie müssen sich diesen speziellen Vortrag mehr als dreimal, drei bis fünf Mal ansehen , weil das ein bisschen verwirrend ist. Diese blaue Linie steht also für den Rahmen. Okay. Und ich habe dem Rahmen einen blauen Stricheffekt hinzugefügt , um es Ihnen zu zeigen. Okay? Andernfalls sieht der Rahmen nicht so aus. Okay. In diesem Rahmen haben wir zwei Elemente. erste Element ist Bild und das zweite Element ist Text. Okay. Zuallererst sprechen wir über dieses Bild. Okay. Wenn wir also auf dieses Bild und dann im Bereich Breite klicken, wenden wir den Feldcontainer-Effekt an. Okay. Der Feldcontainer ist also eine Eigenschaft eines Elements, die sich an die Framegröße anpasst. Wenn Sie die Größe des Frames verringern, verringert sich auch die Elementgröße. Wenn Sie die Größe des Rahmens erhöhen, nimmt auch die Elementgröße zu. Feldcontainer ist eine Eigenschaft eines Elements, die vollständig vom Frame abhängt. Also wird der Rahmen größer, das Element wird größer. Wenn die Rahmengröße abnimmt, nimmt Elementgröße ab. Lassen Sie uns das demonstrieren, wenn ich den Frame verkleinern werde. Sie können also sehen, dass sich seine Größe jetzt ändert. Okay? In Ordnung. Das Gleiche kannst du auch auf die Körpergröße anwenden. Lass uns auf das Bild klicken. Und wenn ich den Feldcontainer auf die Höhe auftrage , was passiert dann? Wenn ich die Höhe erhöhe, sich das Bild automatisch passt sich das Bild automatisch an den freien Speicherplatz an. Wenn ich die Höhe verringere, können Sie sehen, dass auch die Bildhöhe reduziert wird. Wenn ich die Höhe des Rahmens erhöhe, können Sie sehen, dass auch die Höhe der Elemente mit der Rahmenhöhe zunimmt. Okay. Also hier haben Sie eine Testament-Container-Option. Wenn du also auf das Bild klickst und hierher gehst, hast du hier eine feste Breite. Hier haben Sie also zwei verschiedene Optionen Feldcontainer und feste Breite. Angenommen, wir haben den Feldcontainer erkundet, oder? Klicken wir also auf feste Breite. Und lass uns die Breite anpassen. Okay. Eine feste Breite bedeutet also, dass sie sich natürlich nicht ändert. Sie wird sich nicht ändern. Wenn ich die Größe des Rahmens verringere oder vergrößere, ändert sich die Breite nicht, oder? Die Breite ändert sich nicht. Wenn ich die Höhe erhöhe, passt sich das Bild von selbst denn wenn Sie auf das Bild klicken und auf Höhe Sexton klicken, ist es derzeit im Feldcontainer ausgewählt, was bedeutet, dass es seine Höhe entsprechend der Rahmenhöhe anpasst Wenn Sie also die Höhe so festlegen, ändert sich ihre Höhe nicht, egal was Sie vergrößern oder verringern nicht Sie haben also zwei Möglichkeiten. Sie haben zwei Möglichkeiten. Wir sprechen über Element. Wir sprechen von der Elementgröße. Okay. Also, wenn Sie auf ein beliebiges Element klicken, egal auf was Sie klicken, auf Bild, Symbol, Text. Okay. Wann immer Sie auf ein Element klicken, haben Sie zwei Optionen für Breite und Höhe, Breite und Höhe. Sie werden diese Option sowohl in der Breite als auch in der Höhe sehen. Okay. Welche Option wirst du sehen? Wird Behälter. Fühle den Behälter und repariere ihn. wenn Sie einem Feld eine Container-Eigenschaft zuweisen Was passiert dann, wenn Sie einem Feld eine Container-Eigenschaft zuweisen? Wenn Sie die Größe des Rahmens erhöhen, nimmt auch die Elementgröße zu. Wenn Sie die Größe des Rahmens verringern, auch die Elementgröße. Wenn Sie jedoch eine feste Breite oder Höhe wählen, werden Höhe und Breite nicht entsprechend dem Rahmen geändert. Okay. Ich denke, du hast verstanden, was ich meine. Okay. Also habe ich die grundlegenden Dinge über das automatische Layout behandelt. Im Grunde habe ich die Eigenschaft des automatischen Layouts erklärt. Okay. Und außerdem haben wir eine Sache, die ich dir beibringen sollte , nämlich 1 Minute. Okay, also wenn ich auf Text klicke, wenn ich auf Text klicke, wähle ich ein anderes Element aus. Hier haben wir also eine Feldcontainer-Option, und Hug Content ist eine neue Option Also habe ich den Feldcontainer bereits erklärt. Ich habe die feste Breite bereits erklärt. Hier haben wir viel Inhalt. Was wird also passieren? Lassen Sie uns zunächst die Breite anpassen. Okay. Also habe ich den Umarmungscontainer zugewiesen. Wenn Sie also einen HGA-Container zuweisen, wird er seine Position sperren Wenn Sie nun die Breite Ihres Rahmens vergrößern, vergrößern oder verkleinern vergrößern oder verkleinern , wird er sich nicht bewegen Im Grunde wird es heißen, ich werde nicht von hier wegziehen. Okay, ich werde seine Position sperren. Also das nennt man Umarmung. Okay. Das nennt man Hug-Content , der auf Text angewendet werden kann Okay. Okay, gut. Lass uns den Text auswählen. Wählen wir den Inhalt der Umarmung aus. Lassen Sie uns die Breite verringern. Okay. Nun, ob ich die Breite verringern oder vergrößern werde. Die Textposition wurde protokolliert. Okay, es ändert sich nicht entsprechend Okay. Also habe ich alles abgedeckt. Zunächst habe ich alles behandelt, was mit dem Rahmen zu tun hat. Der Rahmen besteht aus vielen Elementen. Okay, der Rahmen besteht aus vielen Elementen. Und wann immer Sie etwas an der Ausrichtung ändern müssen , müssen Sie auf den Rahmen klicken. Okay. Danach habe ich dir alle Eigenschaften von Elementen erklärt. In Elements haben wir also einen Feldcontainer zur Korrektur von Eigenschaften. Und ein Bug. Okay. Wenn du also auf „Reparieren“ klickst, dann wird alles repariert, egal was du an deinem Rahmen, deiner Breite oder Höhe änderst . Wenn Sie einen Feldcontainer verwenden, passt er seine Größe automatisch an die Rahmengröße an. Wenn Sie auf Inhalt umarmen klicken, fixiert das Element seine Position und es bewegt sich nicht, unabhängig davon, ob Sie die Framegröße vergrößern oder verkleinern Okay. Also habe ich alles abgedeckt. Und in der nächsten Vorlesung werde ich Ihnen beibringen, wie man Autolayout anwendet Okay? Ich habe die grundlegenden Eigenschaften des automatischen Layouts behandelt und im nächsten Video werde ich Ihnen beibringen, wie Sie Autolayout in Ihrem Design anwenden Okay? Falls dir dieses Video weitergeholfen hat, dann kannst du mir eine positive Bewertung und einen Kommentar geben , damit ich mich motivieren kann. 12. How to Create Responsive UI/UX website Design in Figma ?: Hallo, alle zusammen. Also willkommen euch alle in meiner vollständigen Master-Serie zum Figma UIUX-Design In diesem speziellen Vortrag werden wir also lernen, wie wir mit Hilfe von Figma ein vollständig responsives Design erstellen können, während wir AutoEOutFeature Figma ein vollständig responsives Design erstellen können, während Okay. Also, ohne Zeit zu verschwenden, lassen Sie uns unser Video starten Zuerst werden wir diese Website replizieren, okay? Wir verwenden diese Seite als Referenz und werden versuchen, diese Seite zu replizieren Okay, lassen Sie uns zunächst einen DextoFrame nehmen, in dem wir unser Design replizieren werden Okay. Lassen Sie uns also zunächst einen Tab erstellen. Okay. Lass uns einen Tab erstellen. Nehmen wir also zunächst ein Textwerkzeug und geben Home ein. Danach kannst du es mit Hilfe der Taste Strg plus D duplizieren und an Kursen, Community-Kontakten und über uns teilnehmen . Jetzt musst du alle auswählen und von hier aus kannst du ihre Eigenschaften ändern. Du kannst es richtig ausrichten, okay? Richten Sie sie richtig aus. Und mit Hilfe dieser drei Zeilen können Sie eine gleichmäßige Lücke zwischen den einzelnen Texten herstellen. Stellen Sie also sicher, dass Sie darauf klicken. Jetzt haben wir endlich eine gleiche Lücke. Endlich haben wir ein gleiches Gefälle. Jetzt klicken wir darauf. Und hier haben wir die Option Autoayout. Also klicke darauf. Mit Hilfe des automatischen Layouts können Sie es reaktionsschnell machen. Okay? Jetzt, auf der rechten Seite, finden Sie sein Eigentum. Okay? Und das heißt Frame. Das ist also ein Frame, und du kannst ihn wie einen Tab umbenennen . Okay? Zur einfacheren Navigation können Sie es umbenennen. Auf der linken Seite können Sie sehen, dass wir eine neue Ebene namens Tab haben. Okay. Jetzt haben wir auf der rechten Seite des Bildschirms eine Immobilie. Mit Hilfe der Ausrichtung können Sie also Ihr Element in Bezug auf Ihren Rahmen ausrichten. So können Sie sie richtig in der Mitte ausrichten. Okay. Jetzt lass uns die Höhe Okay. Also hier hast du eine Ausrichtung. Wenn Sie also auf die obere linke Ecke klicken, bewegt sie sich in Richtung der oberen linken Ecke. Wenn Sie auf die obere rechte Ecke klicken, bewegt es sich in Richtung der oberen rechten Ecke. So können Sie sie also ausrichten. Wenn Sie auf die obere, untere, sorry, untere rechte Ecke klicken , dann bewegt es sich in Richtung der unteren rechten Ecke. Also, wenn du einen Tab erstellen willst, dann sollte er in der Mitte sein, okay? Nun, hier haben wir einen horizontalen und einen vertikalen Abstand, also das ist eine Lücke zwischen Ihrem Rahmen und dem Textelement also das ist eine Lücke zwischen Ihrem Rahmen und dem Textelement Okay? Also musst du sie richtig zuordnen. Das ist eine Lücke zwischen deinem Rahmen und dem Element. Okay, lass uns jetzt die Größe verringern, okay? Lassen Sie uns jetzt über die Lücke sprechen. Von hier aus können Sie die Einstellung der Lücke manipulieren. Sie können entweder einen festen Wert oder Auto eingeben. Wählen wir also Auto. wenn Sie Auto statt Festwert wählen Was passiert dann, wenn Sie Auto statt Festwert wählen? Der Abstand variiert je nach Rahmengröße. Wenn Sie Ihre Rahmengröße erhöhen, sich auch der Abstand. Wenn Sie die Rahmengröße verringern, sich auch der Abstand. Okay. Also ähnlich, wenn Sie einen festen Wert eingeben , anstatt ihn automatisch zu setzen, wenn Sie einen festen Wert eingeben, dann wird der gleiche Abstand zwischen den einzelnen Texten beibehalten. Okay? So können Sie beide Dinge nach Ihren Bedürfnissen verwenden. Nehmen wir an, Sie können 50, 40 eingeben , dann wird dieselbe Lücke beibehalten. Um nun Farbe zu füllen, müssen Sie weitermachen. Zunächst müssen Sie Ihren Rahmen auswählen und weiter fühlen. Und von hier aus können Sie Ihre Grundfarbe wählen. Also werde ich blaue Farbe als Primärfarbe verwenden. Lassen Sie uns jetzt den Text ändern. Für eine bestimmte Auswahl müssen Sie also die Steuertaste verwenden, und für die Mehrfachauswahl müssen Sie die Sift-Taste verwenden, was bedeutet, dass Sie beide Tasten zusammen verwenden müssen Okay, Sift-Steuerung und Mausklick. Mit Hilfe dieser Kombination können Sie den gesamten Text auswählen Wählen Sie nun ganze Elemente aus und machen Sie sie zu Komponenten. Das wird also als übergeordnete Komponente bezeichnet. Und wann immer wir es verwenden, ruft es untergeordnete Komponenten auf. Also gehe ich zum Asset-Bereich und hier werde ich meine übergeordnete Instanz abrufen . Instanz bedeutet untergeordnete Komponente. Jetzt werde ich seine Größe anpassen, okay. Lass es uns hier anpassen. Das ist meine übergeordnete Komponente. Das ist meine übergeordnete Komponente und das ist meine untergeordnete Komponente. Was auch immer ich in der übergeordneten Komponente tun werde, ihre Widerspiegelung wird in der untergeordneten Komponente erscheinen. Wenn ich die Farbe des Elternteils ändere, wird sich das auch auf das Kind auswirken. Lassen Sie uns nun das Logo der Website erstellen. Nehmen wir also einen Namen I School Hub. Sie können die Eigenschaft von Text ändern. Sie können die Größe erhöhen. Sie können die Dicke jedes Textes ändern. Sie können die Textfarbe ändern. Wählen wir also die Schule aus und wenden unsere Themenfarbe an. Um das anzuwenden, musst du also auf vier Punkte setzen und du kannst dich so bewerben. Jetzt werde ich ein Logo herunterladen, das ich mit meinem Logo anhängen werde. Im Grunde muss ich dieses Logo mit Ikolhub anhängen. Sie können so Ihr eigenes Logo erstellen, sodass wir beide Elemente zusammenführen Lassen Sie uns sie richtig ausrichten. Lassen Sie uns sie jetzt richtig ausrichten. Wählen Sie nun das gesamte Element aus und wenden Sie das automatische Layout an. Mit Hilfe von Autoayout können Sie also ganz einfach die Position Ihrer beiden Elemente ändern Auf diese Weise können Sie Ihre Position ändern. Lassen Sie uns nun dieses Logo umbenennen. Und wenn Sie eine Komponente erstellen möchten, können Sie auch eine Komponente Ihres Logos erstellen , sodass Sie sie verwenden können, wann immer sie benötigt wird. Platzieren wir also unser Logo. Jetzt ist es an der Zeit, ein Banner für unsere Website zu erstellen. Also erstelle ich ein Banner mit dem Alpha-Rechteck. Laden wir jetzt das Bild von hier hoch. Wählen wir ein beliebiges Bild aus. Ich denke, ich sollte dieses Bild verwenden. Okay. Sieht gut aus. Lassen Sie uns nun die Höhe unseres Rahmens erhöhen , damit die Leute ihn scrollen können. Jetzt müssen wir auch andere Elemente erstellen. Als ob wir dieses Bildrechteck erstellen müssten. Ich muss dieses erstellen, für Herbst und Frühling bewerben. Okay. Versuchen wir also, diese Website zu replizieren Also habe ich viele Rechtecke erstellt, großes Rechteck, ein kleines Rechteck und ein superkleines Rechteck, und ich füge diese beiden Elemente zu einer Gruppe zusammen, sodass sie sich zusammenfügen einer Gruppe zusammen, sodass sie sich Okay. Passen wir die Position an, richten sie richtig aus und wir müssen einen Text schreiben, zum Beispiel für Herbst und Frühling bewerben. Also werde ich etwas anderes eingeben. Geben wir Entdecker ein. Sie können die Texteinstellung ändern. Sie können die Textstärke verringern oder erhöhen Lassen Sie uns sie ausrichten und ihre Position anpassen. Aber vorher sollten wir das automatische Layout anwenden. Passen wir nun seine Position an. Jetzt wählen wir beide Elemente aus und erstellen sie als Gruppe. Okay? Jetzt können wir hier ein Bild hochladen, aber vorher können wir es duplizieren, weil wir dieses Element dreimal benötigen. Was ich nun tun werde, ist, den automatischen Layouteffekt zwischen diesen drei Elementen anzuwenden , aber vorher sollten wir sie richtig ausrichten und eine konsistente Lücke schaffen. Okay? Und du kannst um deine Ecke gehen. Da wir alle drei Komponenten ausgewählt haben , ändert sich der Eckenradius daher gleichzeitig, wenn wir ihn ändern. Wählen Sie nun alle Elemente aus. Und wieder werden wir das automatische Layout anwenden. Wenn Sie hier nun einen festen Wert eingeben, wird dieser behoben. Lassen Sie uns nun eine Überschrift erstellen. Beginnen Sie Ihre UX-Reise mit uns. Und jetzt werden wir es richtig anordnen, und ich werde alle Elemente auswählen und den Autoeu-Effekt zwischen all diesen Elementen anwenden Autoeu-Effekt zwischen all diesen Elementen Sie müssen sicherstellen, dass das Autolaout korrekt angewendet wird. Jetzt können Sie die Entfernung manipulieren . Ordnung. Ich habe diesen Rahmen erstellt. Okay? Jetzt ziehen wir das Bild und platzieren es so. Auch hier werden wir das automatische Layout anwenden. Im Grunde verwende ich hier das automatische Layout in einem kleinen Element. Danach führen wir es mit einem anderen Element zusammen, okay? Okay, jetzt ziehen wir es in unseren Rahmen. Jetzt müssen wir das Bild hochladen. Ich gehe im Rechteckwerkzeug auf Bild und Video und wähle mit der Steuertaste mehrere Bilder aus. Mit Hilfe der Steuertaste können Sie mehrere Bilder auswählen und Ihr Bild mit Hilfe des linken Mausklicks löschen. Es ist super einfach. Geben wir nun Connect with our current students ein. Passen wir es an und erstellen wir einen Absatz. Hier überspringe ich dieses Video weil es sich um einen sich wiederholenden Vorgang handelt Okay? Wenn ich nicht einen Bereich überspringen würde, wäre dieses Video sehr lang. Wenden Sie jetzt Autoayout an. Im Grunde müssen Sie Ihre Website in mehrere Teile unterteilen und danach alle Teile zum großen automatischen Layout zusammenführen Im Grunde müssen Sie Ihre Website also in kleine Gruppen aufteilen. Sie müssen Autolyou in diesen kleinen Gruppen anwenden und danach müssen Sie alle kleinen Gruppen mit Hilfe von auteut zusammenführen alle kleinen Gruppen mit Hilfe von Okay. Wählen wir nun „ Mit unserem aktuellen Schüler verbinden und im Bereich „Breite“ müssen wir einen Feldcontainer auswählen. Mit Hilfe eines Feldcontainers können Sie das also tun, er wird sich wie ein Wasser verhalten. Wir haben also einen Rahmen und in diesem Rahmen haben wir Wasser. Wenn Sie also die Breite des Rahmens vergrößern, dann wird auch die Wasserbreite in Bezug auf die Breite des Containers zunehmen. Ähnliches funktioniert auch mit unserer Website. Connect with our students ist also ein Textelement, und es befindet sich derzeit im Frame. Also habe ich die Feldcontainer-Eigenschaft im Text ausgewählt. Okay, es wird also wie Wasser funktionieren. Wenn ich die Breite des Rahmens verringere, wird sie auch abnehmen. Ebenso müssen Sie Ihren Absatz auswählen und erneut den Feldcontainer anwenden. Jetzt passt es seine Position an die Rahmengröße an. Wenn Sie Ihre Rahmengröße verringern, wird sie auch abnehmen. Und von hier aus können Sie den Abstand anpassen. Sie können den Wert von hier aus ändern. Okay. Jetzt ist es an der Zeit, ein anderes Sexon auf unserer Website wie Profile Sexon zu erstellen ein anderes Sexon auf unserer Website wie Profile Sexon Okay. Versuchen wir also, das zu replizieren Lassen Sie uns ein Rechteck erstellen, ein größeres Rechteck. Erstelle einen Eckenradius. Wählen Sie nun eine weiße Farbe. Erstellen Sie ein kleines quadratisches Feld für das Profil, erstellen Sie eine glatte Ecke und richten Sie sie richtig aus. Lassen Sie uns jetzt hier ein weiteres Rechteck erstellen. Und wir werden Primärfarbe verwenden , um dieses Rechteck zu füllen. Blau war also unsere Primärfarbe. Jetzt werde ich das so anpassen. Okay? Wählen Sie also ein quadratisches Feld und stellen Sie es vor unseren Rahmen. Wählen, nach vorne bringen. Wenn du also auf „Nach vorne bringen“ klickst, wäre es die oberste Ebene. Geben wir nun einen Namen für das Textprofil ein. Also gebe ich meinen Namen Ankit ein. Jetzt habe ich ein Profilsymbol heruntergeladen Für das Symbol können Sie auch das Plugin verwenden. Sie können es anpassen. Jetzt werde ich den Autoayout-Effekt zwischen diesen beiden Dingen, Ankit und diesem Symbol, anwenden und den Autoeout-Effekt anwenden Im Grunde müssen Sie Autoayout auf ein kleines Element anwenden Autoayout auf ein kleines Element und danach müssen Sie es mit großen Elementen zusammenführen Lassen Sie uns auf ähnliche Weise einen UIUX-Designertext erstellen. Ich werde sie richtig ausrichten. Geben wir in ähnlicher Weise online ein, um sie richtig auszurichten. Jetzt können wir den automatischen Layouteffekt zwischen diesen Elementen anwenden . Wählen Sie also alle Elemente aus und wenden Sie Autoyout an. Wählen Sie alle Elemente aus und wenden Sie Autoayout an. Also habe ich einen Online-Text gelöscht , weil er hässlich aussah Jetzt erstelle ich mit Ankit den Button Hat. Also lade ich das PNG-Bild des Chats herunter. Sie können auch das Plugin verwenden. Lass uns die Größe verringern. Wählen Sie den Text und das Symbol aus, richten Sie sie richtig aus und wenden Sie das automatische Layout an. Erhöhen Sie nun die Rahmengröße, und Sie können sie in die Schaltfläche umwandeln. Sie benötigen hier kein Rechteck. Sie können Ihren Rahmen so in die Schaltfläche umwandeln. Wenn Sie Farbe auf Ihrem Rahmen spüren, wird sie auf der Schaltfläche konvertiert. Lassen Sie uns nun die Textfarbe ändern. Passen Sie es richtig an. Jetzt wähle ich das gesamte Element und wende Autoout an, aber es sieht hässlich Also was ich tun werde, ich werde Autoot entfernen und danach werde ich diese beiden Elemente zu einer Gruppe zusammenführen Jetzt werde ich Autoout anwenden. Okay. Wenn Sie also irgendwann Probleme haben, müssen Sie versuchen, zwei beliebige Elemente als Gruppe zu konvertieren, und danach können Sie Autoout anwenden Okay. Also lassen Sie uns sie replizieren. Wenn Sie also bei der Erstellung von Autoeout auf Schwierigkeiten stoßen, müssen Sie zwei beliebige Elemente intelligent gruppieren und danach anwenden Laden wir jetzt alle Bilder hoch. Mit Hilfe der Steuertaste können Sie mehrere Bilder auswählen und sie einfach so ablegen. Wählen Sie nun Ihren Rahmen aus und wenden Sie Autoaout an. Sie können jedoch sehen, dass es nicht unseren Bedürfnissen entspricht Was wir dann tun werden, wir werden unsere gesamte Komponente so ziehen . Da es auf unsere Bedürfnisse reagiert , brauchen wir keinen weißen Rahmen mehr. Wir können diesen Rahmen in den weißen Rahmen umwandeln. Wählen Sie einfach Ihren Rahmen aus und Sie können Ihre Farbe so fühlen. Sie können die weiße Farbe spüren. Du brauchst keinen weißen Rahmen. Okay? Passen wir den Text an. Ziehen wir nun unser Logo in unseren neuen Rahmen. Lass es uns anpassen. Also, Leute, ihr könnt sehen, dass es gut funktioniert. Endlich haben wir eine responsive Seite erstellt. Okay, Leute, wenn euch dieser Vortrag gefällt, dann vergesst nicht, mir gute positive Bewertungen und Kommentare zu geben , damit ich mich motivieren kann. Okay, tschüss.