Figma Webdesign – Erstellen Sie wie ein Entwickler, generieren Sie Code mit KI

1. Einführung: Hallo und willkommen zu diesem Kurs über Figma Web Design für Webentwickler. Ich bin Christopher Dodd Ich bin ein freiberuflicher Webentwickler und Top-Lehrer hier auf skillshare.com, der alles abdeckt, was mit Webentwicklung und Online-Freelancing und Im heutigen Kurs werden wir Figma nicht wie traditionelle Designer angehen , sondern aus der Sicht eines Wenn Sie ein Entwickler sind, der Design lernen möchte, aber auch Wert auf eine saubere Struktur, Reaktionsfähigkeit und die Fähigkeit legt , nutzbaren Code zu generieren, ist dieser Kurs genau das Richtige für Wir behandeln die Grundlagen der Arbeit mit Figma, die Einrichtung responsiver Layouts mithilfe Auto-Layout-Komponenten und die richtige Benennung Dann gehen wir noch einen Schritt weiter und verwenden KI-gestützte Tools wie Locofy und Cursor, verwenden KI-gestützte Tools wie Locofy und um unsere Designs direkt in Code umzuwandeln Am Ende dieses Kurses werden Sie sich nicht nur wohl bei der Erstellung von Figma-Designs fühlen, sondern Sie werden auch über einen Workflow verfügen der die Lücke zwischen Design und Entwicklung überbrückt und Sie zu einem effizienteren und vielseitigeren Webentwickler macht Wenn Sie also bereit sind zu lernen, wie man Designs wie ein Entwickler Figma erstellt , klicken Sie auf das nächste Video, und ich werde Sie im Detail sehen 2. Demonstration: Ordnung, also hier habe ich die Webversion des Programms Figma Figma ist ein Programm, das Sie auf Ihrem Computer ausführen können, oder Sie können es direkt in Ihrem Browser ausführen Ich bin derzeit bei Google Chrome und dies ist die Webversion Aber später im Unterricht werden wir das Desktop-Programm herunterladen, weil wir den MCP-Server verwenden Im nächsten Video zeige ich Ihnen die Grundlagen von FGMA und führe Sie ein bisschen besser durch das Programm Zunächst möchte ich den Kurs mit einer Demonstration beginnen, die die Prämisse dieser ganzen Klasse demonstriert Okay? Also genau hier haben wir ein Design für eine E-Commerce-Website. Es heißt Dog Box. Ich habe das durch eine Stellenausschreibung bei Upwork gefunden. Wie Sie hier sehen können, handelt es sich um eine Art Abo-Box für Hunde Sieht ziemlich cool aus. Wir schauen uns die Figma-Datei an. Auch wenn du Figma noch nie benutzt hast, möchte ich, dass du auf diesen Rahmen klickst oder mir zuschaust, wie ich auf diesen Rahmen klicke und dann hier im Ebenen-Panel nachschaust Hier siehst du eine ganze Reihe von Gruppen mit zufälligen Zahlen dahinter. Und dann haben wir innerhalb dieser Gruppen andere Gruppen mit Zufallszahlen darunter, und wir haben verschiedene Frames, Vektoren, alles Mögliche. Es ist ein riesiges Durcheinander, okay? Nun, einige Designer werden ihre Designs so einrichten , weil es optisch großartig aussieht. Und solange es visuell gut aussieht und sie das Design den Leuten präsentieren können, muss es nicht unbedingt so eingerichtet sein, dass es Sinn macht, es im Ebenenbedienfeld zu betrachten. Aber der Grund, warum wir es in diesem Kurs anders machen werden, ist zweierlei Erstens können wir die Größe nicht so ändern, wie wir es bei einer echten Webseite tun würden, wie Sie hier sehen können. Einiges davon ist zwar responsiv, aber nicht wirklich Größe nicht so ändern, wie wir es bei einer echten Webseite tun würden, wie Sie hier sehen können. Einiges davon ist zwar responsiv, aber nicht Ich breche wirklich zusammen wenn wir expandieren und das nicht so große Geschäft abschließen, weil es ein Designprogramm ist Es ist eigentlich kein Webentwicklungsprogramm. Der Hauptgrund, warum ich vorschlage, dass wir unsere Figma-Dateien anders einrichten , ist, dass wir unseren Code mithilfe von KI genauer und zuverlässiger automatisch generieren können KI genauer und Um Ihnen einen genaueren Einblick in dieses Design zu geben , wie Sie sehen können, wenn ich einfach irgendwo in diesem Abschnitt anklicke, haben wir eine riesige Gruppe, die sich über den Rahmen hinaus erstreckt Wir haben hier eine weitere Gruppe, die sich über den Rahmen hinaus erstreckt. Dieser scheint ziemlich gut zu nisten. Was ich damit meine, ist, dass die Elemente, die sich visuell innerhalb der Gruppe befinden, tatsächlich innerhalb der Ebene verschachtelt Ist eine gute Idee, wie Sie hier sehen können. Aber es gibt keine Kennzeichnung und das automatische Layout nützt nichts oder nur sehr wenig . Okay? Lass mich dir jetzt das Gegenteil zeigen. Lassen Sie mich Ihnen die gebrochene Version zeigen, die ich erstellt habe. Es ist nicht genau dasselbe, aber es ist tatsächlich so eingerichtet die Abschnitte richtig beschriftet Es ist in seine einzelnen Abschnitte unterteilt, die übereinander gestapelt werden. Wenn das automatische Layout überall verwendet wird, ist es sinnvoll. Hier können Sie also die Kopfzeile direkt hier in der Kopfzeile sehen , wir haben die linke Seite der Kopfzeile, das Menü der Kopfzeile und die rechte Seite, und dann haben wir die verschiedenen Dinge darin wir haben die linke Seite der Kopfzeile, das Menü der Kopfzeile und die rechte Seite, und dann haben wir verschachtelt Und was Sie hier auch sehen können, ist dieses Symbol, das auf automatisches Layout hinweist Jetzt werde ich nicht auf das automatische Layout und all die verschiedenen Dinge über Figma eingehen Das ist das Thema des Kurses, mit dem wir uns befassen werden. Aber wie Sie hier sehen können, hat es viel mehr Struktur in den Schichten als, sagen wir, hier drüben, das ursprüngliche Design. Und wenn ich die Größe eines dieser Abschnitte ändere, werden Sie feststellen, dass er am Ende viel responsiver ist, weil er das automatische Layout verwendet, was im Wesentlichen Flexbox in CSS entspricht Zwar gibt es hier eine Option für Grid, die fast dem Grid entspricht Nun, wie bereits erwähnt, die gebrochene Version, wenn ich alle Ebenen so einrichte, dass mithilfe von Komponenten eine angemessene, reaktionsfähige Containerstruktur verwenden, was wir etwas später lernen werden Elemente, die mehrfach dupliziert werden, sind also im Grunde Wenn ich richtig verschachtele und das automatische Layout verwende, sollten wir mit KI-Tools wie, wie Sie hier sehen können, Locifi ein viel besseres Ergebnis erzielen KI-Tools wie, wie Sie hier sehen können, Locifi Okay? Mir ist also aufgefallen, dass wir jedes Mal, wenn wir Locifi aufrufen, sehr widersprüchliche Ergebnisse erhalten jedes Mal, wenn wir Locifi aufrufen, sehr widersprüchliche Ergebnisse Mal, wenn wir Locifi Also werde ich dir später im Kurs eine andere Lösung zeigen , die meiner Meinung nach Aber schauen wir uns zunächst die Ergebnisse eines früheren Tests an, den ich mit Locifi Wenn wir also hier zu dieser Grafik wechseln, können Sie die Ergebnisse eines früheren Tests sehen, den ich mit diesem Hundebox-Design durchgeführt habe Wenn wir also rübergehen und uns das Originaldesign ansehen, sieht das natürlich großartig aus. Das ist das ursprüngliche Design. Das sieht toll aus mit Infigma Ich habe den Look einfach kopiert und direkt in diese Grafik eingefügt Look einfach kopiert und direkt in Dann habe ich mit Locifi eine KI-generierte Webseite mit diesem Design Figma erstellt diesem Design Figma erstellt und das ist das Ergebnis, das Wie Sie sehen können, fängt es wirklich an, auf den Karten kaputt zu gehen Sie können hier sehen, dass es das einfach komplett durcheinander gebracht hat und die Karten hier auch Und an bestimmten Stellen wurde es okay, aber ja, nicht das beste Ergebnis Ich habe die Webseite überarbeitet und sie dann über Loci fi AI laufen lassen Ich habe ein viel besseres Ergebnis erzielt, besonders bei Offensichtlich ist das nicht perfekt, Eva, aber was die HTML-Ausgabe angeht, die ich bekommen habe, war sie viel besser. Und solange wir solides HTML haben, mit dem wir arbeiten können, ist es nicht schlecht, kleine Aktualisierungen im CSS vorzunehmen. Aber wenn das KI-Programm den HTML-Code völlig falsch versteht , entsteht im Grunde ein Projekt das ich sowieso komplett umgestalten muss, also hätte ich genauso gut KI nicht verwenden können, um zu beginnen Dies ist die Inspiration für den Kurs, eine Methode vorgestellt wird, wie wir unsere Figma-Designs wie ein Webentwickler erstellen können, mit richtigen Struktur, sodass sie reaktionsschnell sind, einfacher innerhalb des FigMA-Programms selbst zu navigieren der richtigen Struktur, sodass sie reaktionsschnell sind, einfacher innerhalb des FigMA-Programms selbst zu navigieren sind und mithilfe von KI-Codegeneratoren wie Locifi AI, die wir etwas später in der Klasse sehen werden, besser in tatsächlichen Code übersetzt mithilfe von KI-Codegeneratoren wie Locifi AI, die wir etwas später in der Klasse sehen werden, besser in tatsächlichen werden können. Lassen Sie uns zunächst einen Schritt zurücktreten und uns die Grundlagen der tatsächlichen Verwendung von FigMa ansehen die Grundlagen der tatsächlichen Verwendung von 3. Figma-Grundlagen: Ordnung, jetzt können Sie sehen, dass wir wieder in Figma sind, aber wir haben ein völlig Es hat noch nicht einmal einen Namen. Klicken wir also auf Untitled und geben ihm einen Namen, sagen wir, Testdesign, wie auch immer Sie es nennen möchten Und ohne auf die extremen Details von Figma einzugehen, möchte ich hier die extremen Details von Figma einzugehen, nur die absoluten Grundlagen behandeln Es ist eigentlich ein ziemlich einfaches Programm. Sobald Sie sich mit einigen wichtigen Funktionen und den fortgeschritteneren Funktionen vertraut gemacht haben, gibt es viele andere Tutorials online. Es ist einfach, diese fortgeschrittenen Fähigkeiten etwas später zu erlernen . Aber im Grunde haben wir hier unsere Figma-Datei, und wir können gleich hier mehrere Seiten erstellen Wir können keinen Unterschied erkennen, aber wenn ich auf Seite eins ein Rechteck zeichnen würde, würde ich zu Seite zwei wechseln Wir können dieses Rechteck nirgends sehen, selbst wenn wir es auf 50% verkleinert oder vergrößert haben, Sie werden sehen, dass es sich auf einer anderen Okay, ziemlich selbsterklärend, aber normalerweise trennen Webdesigner Webseiten in Figma nicht auf verschiedene Seiten auf In der Regel wird hier alles auf einer Seite zusammengefasst, sodass, glaube ich, die Designkonsistenz auf mehreren Seiten sichtbar glaube ich, die Designkonsistenz auf mehreren Anstatt also eine Seite zu entwerfen, beginnen Designer in der Regel mit einem Rahmen. Wenn ich also auf diese Schaltfläche hier unten für den Rahmen klicke , kann ich hier sehen , dass wir bereits einige vordefinierte Rahmen für den Desktop haben , falls wir Desktop machen wollen. Also lass uns Desktop machen. Ich werde hier einfach auf Desktop klicken und wir erhalten ein Bild von 14 x 40 x 1024. Das ist der Standardrahmen, den Figma für uns auf dem Desktop ausgewählt hat Und dann sehen Sie normalerweise einen mobilen Rahmen daneben. Wenn wir also zum Telefon gehen und die typische Größe, die ich am häufigsten sehe, 390 ist, können Sie hier einen 390-Bildschirm platzieren. Dann können Sie Ihr mobiles Layout hier und Ihr Desktop-Layout hier entwerfen . Okay, also werde ich den mobilen Rahmen loswerden . Das brauchen wir nicht wirklich gut. Konzentrieren wir uns einfach auf das eine Bild. Der Rahmen ist das Elternteil von allem. Eigentlich stimmt das nicht unbedingt. Wir können einen Abschnitt erstellen, und das ist nur etwas, das es uns ermöglicht, bestimmte Frames grundsätzlich zu gruppieren. Aber nochmal, wenn ich das Beispiel der Erstellung eines Frames für das iPhone-Design hier verwende , könnten wir vielleicht sagen, dass dies die Startseite ist, die Beschreibung der Seite als Abschnitt und dann können wir hier unsere verschiedenen Frames basierend auf der Bildschirmbreite dieser Seite haben , okay? Vielleicht lasse ich das einfach da drin. Womit müssen wir dann noch arbeiten? Also haben wir hier unten Formen, die wir hinzufügen können Wenn wir bestimmte Formen hinzufügen wollen, dann können wir diese Formen zeichnen. Das sind also gute Designtools, wenn Sie ein bisschen ein Grafikdesigner sind und Symbole und so erstellen möchten. Offensichtlich wird unsere Website wahrscheinlich Text enthalten. Also könnten wir hier etwas Text einfügen. Also auf der rechten Seite können Sie sehen, wir haben eine ganze Reihe von Einstellungen, und wenn ich nach unten scrolle, können wir Typografie sehen Also werde ich die Schriftgröße dieses Textes erhöhen und dann tippen, ich weiß nicht Sagen wir einfach Überschrift, oder? Nun, ein Designer platziert das normalerweise einfach in der Mitte, indem er diese Hilfslinien verwendet, wie Sie hier sehen können. Und weil wir hier eine feste Leinwand haben, können wir bestätigen, dass diese immer in der Mitte sein wird Wir könnten ein paar Bilder reinbringen. In der Regel sehen Sie auf einer Website möglicherweise ein Hintergrundbild als Banner Bringen wir also ein Bild ein. Wie Sie hier sehen können, habe ich hier einen Ordner, den wir etwas später verwenden werden. Wir werden es so einrichten , wie ich es Ihnen empfehle. Aber für den Moment werfen wir einfach das Bild hinein und platzieren es und klicken einfach drauf und ziehen es, du weißt schon, wir selbst, um den Platz im Container zu füllen. Im Grunde funktioniert die visuelle Reihenfolge so, dass das Hero-Bild über der Überschrift angezeigt wird, weil es sich im Ebenenbedienfeld über der Überschrift befindet über der Überschrift angezeigt wird, weil es . Wir müssen sie also nur austauschen und Sie werden sehen, dass die Überschrift durchkommt. Vielleicht möchten wir natürlich die Farbe der Überschrift ändern , weil sie auf einem etwas dunklen Hintergrund steht, also könnten wir hier klicken, ihr einen weißen Hintergrund geben und sie vergrößern. Nochmals, positionieren Sie das und stellen Sie sicher, dass es sich an der Position dort befindet. Geben wir einfach etwas Realistischeres ein. Die führende Sportbekleidung. Sie können hier sehen, dass wir, wenn wir keine flexiblen Layouts verwenden, die Größe ändern und entscheiden müssen, wo wir unsere Zeilenumbrüche Größe ändern und entscheiden müssen haben wollen Ich werde die Ausrichtung so einstellen , dass sie in der Mitte liegt, und lassen Sie es uns einfach so ausdrücken Auch hier werden wir dieses Design später richtig machen. Ich zeige dir nur die absoluten Grundlagen. Wir können ein Bild einbringen, wir können Text reinbringen. Und natürlich werde ich in diesem Kurs stark auf das automatische Layout setzen Aber wie ich bereits erwähnt habe, verwenden die meisten Designer nicht viel davon Es gibt einen Bereich, in dem sie es häufig verwenden, und das ist für Schaltflächen. Deshalb werde ich den Button benutzen, um das zu demonstrieren. Also geben wir hier den Button ein. Und wenn wir dieser Schaltfläche eine Hintergrundfarbe geben wollten, könnten wir versucht sein, hier ein Rechteck einzufügen. Nun müssen wir hier natürlich die vertikale Positionierung ändern und dann müssen wir dafür sorgen, dass sie in der Mitte sitzt Okay? Da haben wir's. Damit es eher wie eine Schaltfläche aussieht, können wir ihm einen größeren Eckradius geben, r. Aber das Problem dabei ist, wenn wir den Schaltflächentext auf diese Weise ändern, werden Sie feststellen, dass zwei verschiedene Elemente handelt, die nicht miteinander verknüpft sind, und dass es außerhalb der Grenzen dieses Rechtecks Dann müssten wir, Sie wissen schon, Größe erneut ändern und es dann so positionieren Ordnung? Die meisten Designer, die ich finde, verwenden also das automatische Layout mit Schaltflächen Dieses Konzept gilt überall in Ihrem Figma-Design, aber aus irgendeinem Grund wird es nur für Schaltflächen verwendet Anstatt dieses Rechteck hier als separates Element zu platzieren , können wir das automatische Layout hinzufügen Wir können automatisches Layout hinzufügen. Auf verschiedene Arten können wir mit der rechten Maustaste darauf klicken und auf Automatisches Layout hinzufügen klicken Oder wir können diese Tastenkombination verwenden. Ich verwende gerne die Tastenkombination, also drücke ich Shift A, und wenn wir jetzt hier drüben nachschauen, wird sie innerhalb dieses Rahmens verschachtelt sein Deshalb werde ich diese Frame-Schaltfläche umbenennen , weil ich gerne die richtige Benennung verwende Und wenn wir dann auf das automatische Layout klicken, das dem Text übergeordnet ist, kann ich diesem automatischen Layout eine Füllung hinzufügen Also gehen wir hier runter und machen es, sagen wir, rot. Okay. Nun, da es sich um ein automatisches Layoutelement handelt, wenn ich den Schaltflächentext vergrößere, werden Sie sehen, dass das Feld erweitert wird, um den Hintergrund abzudecken Dann kann ich den Viertelradius natürlich wieder hinzufügen . Was hatte ich für fünf Pixel, und ich kann den Abstand auch hier erhöhen Das ist also keine wirklich realistische Farbe. Lass mich die Farbe ändern, damit wir das machen können, vielleicht ein Grau hier. Ordnung? Und dann dieser Text, wenn ich den Text tatsächlich ändern möchte, muss ich in den Text selbst klicken und dann machen wir 36. Und dann kann ich mir das automatisch angelegte Schaltflächenelement hier schnappen das automatisch angelegte Schaltflächenelement hier und es dann hier positionieren, richtig? Für das mobile Design kann ich etwas Ähnliches tun. Ich kann Hero Image für Mobilgeräte hinzufügen und dann einfach manuell ziehen. Hier stimmen die Abmessungen offensichtlich nicht überein. Ich könnte also darauf doppelklicken und es auf Zuschneiden einstellen. Dann kann ich einfach bis an die Grenzen meines mobilen Designs zuschneiden , was ich jetzt tun werde. Und dann lassen Sie uns diesen Text einfach kopieren und hier einfügen. Offensichtlich ist meine Verschachtelung hier aus dem Ruder gelaufen. Ich habe den Text und das Bild über dem Rahmen, nicht wirklich drin Also können wir tatsächlich mit dieser Figma durchkommen. Natürlich empfehle ich das in diesem Kurs nicht, aber Figma ermöglicht es Ihnen, visuell das gewünschte Ergebnis zu erzielen , ohne Ihr Projekt wirklich zu gut zu organisieren Also werde ich das einfach nach oben bringen und es dann verschachteln, indem ich einfach nach oben bringen und es dann verschachteln, es so hineinziehe, den Text und das Bild, den Text und das Bild Also ist es zumindest da drin verschachtelt. Wenn ich den Text etwas kleiner machen möchte, füge ihn dort ein etwas kleiner machen möchte, füge ihn dort Dann kann ich eine Kopie meines Buttons mitbringen. Ich kann die Optionstaste auf dem Mac gedrückt halten. bin mir nicht sicher, was es unter Windows ist, und dann kann ich klicken, um eine Version davon rüberzubringen. Aber offensichtlich ist die Textgröße für die mobile Version viel zu groß, also werden wir sie auf 12 reduzieren. Eigentlich denke ich, dass wir hier mindestens 16 brauchen. Okay. Okay. Also, wie ich schon sagte, ziemlich einfaches Programm. Natürlich gibt es einige erweiterte Funktionen, aber Sie können Dinge einfach anklicken und an eine beliebige Stelle auf der Seite ziehen . die Grundlagen von Figma nicht Meiner Meinung nach sind die Grundlagen von Figma nicht so schwer zu verstehen Die größere Fähigkeit besteht darin , die richtigen Schriftarten, die richtigen Schriftgrößen und die richtigen Bilder herauszufinden Schriftgrößen und die richtigen Bilder Es ist nicht das Design-Tool selbst, das kompliziert ist, sondern das Design an sich, okay? Dieses Tool, Figma, vereinfacht es so weit wie möglich, und deshalb ist dieses Tool heute das beliebteste Webdesign-Tool auf dem Markt Wir können unsere Projekte einfach weiter so gestalten, aber wie ich Ihnen gezeigt habe, reagieren sie überhaupt nicht Wenn wir also wirklich wollen, dass es benutzerfreundlich ist, aber was noch wichtiger ist, dass es ins Internet übersetzt werden kann, müssen wir einen etwas strukturierteren Ansatz wählen Und darauf werden wir im nächsten Video eingehen 4. Erstellen wie ein Entwickler – Teil 1: In Ordnung, nur um noch einmal zusammenzufassen, wo wir uns bis jetzt befinden: Wir haben mit einer Demonstration begonnen, Wir haben mit einer Demonstration begonnen wie Webdesigns normalerweise in dieser Struktur von zufälligen Gruppen ohne Label und ohne großen Einsatz von automatischem ohne Label und ohne großen Einsatz von automatischem Und ich habe Ihnen die Alternative gezeigt, die darin besteht, unsere Abschnitte so zu strukturieren, als ob wir eine Webseite mit richtiger Benennung und viel automatischem Layout verwenden würden eine Webseite mit richtiger Benennung und viel automatischem Layout verwenden Dann habe ich dir die Grundlagen von Figma gezeigt, und wir haben gerade einen wirklich einfachen Heldenbereich auf einer E-Commerce-Website zusammengestellt einen wirklich einfachen Heldenbereich auf einer E-Commerce-Website Ich bin auf E-Commerce spezialisiert, daher ist im Grunde jede Website, die ich erstelle, eine E-Commerce-Website Also werde ich bei diesem Beispiel bleiben und lassen Sie uns tatsächlich so aufbauen, wie ich es Ihnen in diesem ersten Beispiel mit der überarbeiteten Version gezeigt habe Ihnen in diesem ersten Beispiel mit , okay? Also werden wir genau auf die gleiche Weise beginnen. Wir werden einen Abschnitt erstellen. Dieser Abschnitt ist optional. Aber ich werde einen Abschnitt erstellen und den Abschnitt Homepage nennen . Okay. Und dann werde ich meine beiden Rahmen da reinlegen. Also werde ich einen Frame für den Desktop machen. Wie Sie hier sehen können, kann ich aus diesen vordefinierten Peitschen und Höhen wählen diesen vordefinierten Peitschen und Höhen Und natürlich ist unser Bereich nicht groß genug um dieses Desktop-Design unterzubringen Also klicke ich darauf und ziehe es rüber, und dann füge ich auch ein mobiles Design ein. Ich mag 430 nicht. Ich nehme 390, also gehe ich hierher. Und ich werde diese Frames einfach umbenennen. Dieser wird ein Desktop-Computer sein und dieser wird ein Mobilgerät sein. Okay. Also hier kannst du sehen, sowohl visuell als auch in unserem Ebenen-Panel hier drüben, wir bisher ein ziemlich gut organisiertes Projekt haben. Lassen Sie uns sicherstellen, dass es organisiert bleibt , während wir dieses Design ausarbeiten. Wie ich im ersten Video gezeigt habe, basiert die Art und Weise, wie ich meine Designs in Figma erstelle wie Websites tatsächlich in der realen Welt erstellt werden, und sie werden mit responsiven Containern erstellt Um Figma für eine Sekunde zu verlassen und einen Blick auf ein sehr einfaches Beispiel im Internet zu werfen oder einfach nur eine Seite mit HTML und CSS, die einfach nur eine Seite mit HTML und ich kurz vor diesem Video erstellt habe, können Sie hier sehen, dass ich einen responsiven Container habe Offensichtlich sind die Farben und alles andere nicht ideal, aber nur um Ihnen die Grenzen unserer verschiedenen Container zu zeigen unserer verschiedenen Container . Wenn ich Option Command I drücken und damit die Größe meines Bildschirms ändern würde, kann ich hier sehen, dass bei einer größeren Bildschirmgröße gleiche Rand ist links und rechts von diesem Container der gleiche Rand ist. Und wenn wir dann zu kleineren Bildschirmgrößen übergehen, schrumpft dieser Raum, bis der Container den gesamten Bildschirm einnimmt Und wenn ich zu kleineren Bildschirmgrößen übergehe, werden diese Boxen in neue Zeilen aufgeteilt, weil sie verbogen sind und sie Flexbox verwenden In der Regel haben wir also in der Webentwicklung Container Max-Whips und darin sind Flex-Elemente enthalten Darauf werde ich mich also konzentrieren, wenn ich mein Figma-Design entwerfe Und wie ich bereits erwähnt habe, können wir mithilfe des automatischen Layouts etwas Ähnliches wie CSS Flexbox erstellen mithilfe des automatischen Layouts etwas Ähnliches wie CSS Flexbox Und wir können auch innerhalb eines beliebigen Elements oder Frames ein Max mit definieren Wenn ich also hier zum Layout auf meinem Desktop-Layout gehe, kann ich tatsächlich auf diese Schaltfläche klicken, um gesamten Rahmen in ein automatisches Layout umzuwandeln Und jetzt habe ich all diese Optionen, die CSS Flex sehr ähnlich sind So können Sie die Flex-Richtung sehen. Sie können die Ausrichtung hier sehen. Sie können die Lücke sehen, die in CSS genau dieselbe ist. Sie können diese Chevrons auch auf WIP und Height sehen. Ich kann also auf diese Chevrons klicken und eine Mi Whip und eine Max Whip hinzufügen, und ich kann auch den Rahmen wählen, der sich an den In diesem Fall ergibt das keinen Sinn. Normalerweise verwenden Sie Hug on Height. Aber was Sie tun können, ist, wenn ich einen weiteren Frame erstelle und ihn hier in den Desktop einfüge, und dann mache ich diesen Frame auch zu einem Auto-Layout-Frame Ich kann wieder auf diesen Chevron klicken und Sie können sehen, dass ich klicken kann, um den Container zu füllen, was bedeutet, dass das WIP den verfügbaren Speicherplatz seines übergeordneten Elements ausfüllt, das ist dieser Desktop-Frame Wenn ich hier einen weiteren Rahmen hinzufüge, werden sie nebeneinander angeordnet, und das liegt daran, dass ich hier die Flex-Richtung festgelegt habe oder sie wird in Figma nicht Flex-Richtung genannt, aber der Fluss, wie er im Figma-Autolayout genannt wird, ist immer noch horizontal. Also für die Seite selbst möchte ich das auf vertikal setzen, und dann können Sie sehen, dass wir Abschnitte auf der Seite überlagern können Und wenn ich einfach duplizieren würde, indem ich Befehl D drücke , um einen dritten Frame zu erstellen können Sie sehen, dass dieser einfach dem anderen gestapelt wird, und wenn ich einen weiteren erstelle, werden Sie hier sehen, dass er von den Abmessungen unseres Rahmens hier abweicht über dem anderen gestapelt wird, und wenn ich einen weiteren erstelle, werden Sie hier sehen, dass er von den Abmessungen unseres Rahmens hier abweicht. Ich möchte hier in die Höhe gehen und das ändern, um den Inhalt zu umarmen. Jetzt wird unser Desktop-Design also so groß sein wie der Inhalt darin Wenn ich also den letzten Frame lösche, werden Sie sehen, dass jetzt dieser zusätzliche Speicherplatz entfernt wird, okay? Also die Struktur, die ich verwenden werde, ist , dass wir hier unsere gesamte Seite haben und dann sind wir darin verschachtelt, Abschnitte, okay? Also werde ich diesen Abschnitt nennen. Lassen Sie uns den anderen löschen, und dann duplizieren wir ihn, sobald wir unsere Struktur aufgebaut haben. Ich möchte, dass meine Sektion die gesamte Peitsche ausdehnt, sodass sie, wie Sie hier sehen können, den Behälter füllt Jetzt möchte ich meinen Peitschencontainer hineinlegen. In diesem Fall ist es also ziemlich eng, weil ich diesen Kurs auf einer kleineren Fensterpeitsche aufnehme auf einer kleineren Fensterpeitsche Dieser Container ist also 1.000 Pixel breit, was ziemlich eng ist Normalerweise hätten Sie einen Container , der mindestens 1.200 groß ist Lassen Sie uns hier drinnen einen weiteren Rahmen einfügen, und ich werde diesen Container nennen, richtig In diesem Container können wir dann auch das automatische Layout einstellen Sie werden sehen, dass ich fast alles auf automatisches Layout einstellen fast alles auf automatisches Und dann werde ich das so einstellen, dass der Behälter gefüllt wird. Jetzt wird es den verfügbaren Speicherplatz füllen, lassen Sie uns ein wenig vergrößern. Ich werde dann auch wieder auf den Chevron klicken und eine maximale Breite hinzufügen Also werde ich das auf 1.200 setzen. In Ordnung. Aber jetzt können Sie sehen, dass unser Container auf der linken Seite ist. Sie möchten also einfach zum Abschnitt gehen und die Ausrichtung so aktualisieren, dass sie mittig ist. Also machen wir das und kehren dann zu unserem Container zurück, und Sie können sehen, dass sich unser Container jetzt in der Mitte befindet. Ich kann das tatsächlich in einer anderen Farbe machen , um es euch ein bisschen besser zu demonstrieren . Also mache ich den Abschnitt rot und den Container blau. Natürlich werden wir das nicht beibehalten, sondern nur, um es wirklich zur Geltung zu und Sie können hier auch die Polsterung sehen Es kommt also ein bisschen Rot über und unter dem blauen Bereich, und in dem Bereich schaut etwas Weiß durch Wir wollen mit der Polsterung sehr bewusst umgehen. Wir wollen nicht, dass die Polsterung einfach die Standardeinstellung ist. Also werde ich auf der Seite selbst, dem Desktop-Layout, die Polsterung auf beiden Seiten entfernen Die Idee ist, dass sich der Abschnitt über die gesamte Breite erstreckt und die Seite einer ganzen Reihe von übereinander gestapelten Abschnitten besteht, sodass wir keine Polsterung um die Seite selbst herum wollen Und wenn ich dann zum Abschnitt gehe , möchte ich keine Polsterung oben und unten haben, also werde ich das Und was ich jetzt sehen sollte, ist, wenn ich die Größe meines Rahmens ändere, können wir einen ähnlichen Effekt sehen wie in unserem HTML-Code Wie Sie sehen können, ist mein Inhalt, der in meinem Container enthalten sein wird, immer noch 1.200 Pixel groß, wenn ich eine größere Bildschirmgröße wie 1.500 mein Inhalt, der in meinem Container enthalten sein wird, immer noch 1.200 Pixel groß, erreiche, oder Aber wenn ich unter 1.200 oder näher herankomme, können Sie sehen, dass der Container jetzt so groß ist wie der Rahmen selbst, abzüglich der Polsterung des Abschnitts Wir wollen also ein gewisses Maß an Polsterung auf beiden Seiten, und das wollen wir auch standardisieren Also werde ich Ihnen etwas zeigen, das Sie in der Webentwicklung verwenden sollten und das Sie auch in Figma verwenden können, und das Ich werde hier aus meinem Frame klicken und Sie können hier Variablen sehen. In Ordnung. Also klicke ich darauf, um eine neue Variable zu erstellen, und wir geben hier einige Maße ein, also wählen wir Zahl aus. Und wie Sie sehen können, können wir unsere Variablen in verschiedenen Sammlungen anordnen . Der Standardname für unsere erste Sammlung ist Sammlung eins. Also werde ich das in Größe umbenennen . Wir können später auch eine weitere Kollektion für Farben erstellen. Alles andere, was uns einfällt , können wir in einer Variablen speichern. Und ich werde eine Variable für Page With oder Container Whip erstellen , wie auch immer Sie es nennen möchten, und lassen Sie uns unsere Containerbreite von 1.200 einstellen das jetzt abschließe, kann ich, sobald ich zu meinem Container hier zurückgekehrt bin, zurück zum Max WIP gehen Klicken Sie darauf, klicken Sie auf den Chevron neben dem Max Whip und klicken Sie auf Jetzt können Sie sehen, dass ich Page Whip auswählen kann. Und wenn ich jetzt zu einem anderen Zeitpunkt zurückgehe und meine Variable ändere, sagen wir, ändere sie auf 1.000 Achten Sie darauf, dass das überall rüberkommt , wo wir diesen Wert verwenden. Also versteckt es ihn immer wieder, aber Sie können hier jetzt sehen , dass der Wert 1.000 ist. Im Moment verwenden wir es also nur an einem Ort, was bedeutet, dass es zu diesem Zeitpunkt überflüssig ist. Aber sobald wir anfangen, viele Container zu bauen , ist das sehr praktisch, weil es uns die Möglichkeit gibt , den Container später zu ändern. Um Ihnen zum Beispiel zu zeigen , wie Sie dieses Haus bohren können, wenn wir einen weiteren Abschnitt mit einem anderen Container erstellen würden , möchten wir natürlich, dass diese Containergrößen konsistent sind. Ich bin hier reingegangen und habe es einmal für diesen speziellen Container geändert , und ich habe es gemacht, wie schalte ich die Option Lassen Sie mich einfach entfernen, einen neuen hinzufügen aus, und ich habe das auf 1.000 gesetzt. Jetzt haben Sie eine inkonsistente Containerbreite. Stattdessen sollten Sie die Containerbreite konsistent halten und sie hier oben ändern Jetzt wirkt sich das auf alle Container auf der Seite Okay. Also lassen Sie uns das noch einmal überprüfen. Wir haben hier immer noch unsere Containerbreite, und auch unser Container-Padding ist eine weitere Variable, die wir vielleicht später ändern möchten Also gehe ich hier runter, erstelle einen weiteren Seitenabstand Nummer eins, nennen wir ihn, und vielleicht machen wir daraus 16 Pixel Okay? Dann gehe ich hier runter, und in unseren Abschnitten stellen wir den linken und rechten Seitenabstand auf Seitenabstand Okay? Also machen wir das in diesem Abschnitt. Eigentlich werden wir erst dann einen zweiten Abschnitt erstellen , wenn wir uns für diesen entschieden Wenn ich also die Größe ändere, werden Sie feststellen, dass wir nur 16 Pixel Abstand auf beiden Seiten haben , bis wir zu den größeren Bildschirmgrößen kommen zu den größeren Bildschirmgrößen denen der Container bei 1.200 endet, und wir tatsächlich mehr und wir tatsächlich Okay? Ich habe damals das Wort Rand verwendet, was bei der Webentwicklung unbedingt beachtet Wir haben Padding und Margin Aber in Figma haben wir nur Polsterung. Wenn Sie es also gewohnt sind, sowohl Ränder als auch Polsterungen zu haben, ist es etwas schwieriger, dies in die Figma-Welt zu übertragen Aber im Wesentlichen umgehen wir das so, dass wir, wenn wir beispielsweise für diesen Container einen Rand festlegen wollen , ihn als Polsterung zum übergeordneten Container hinzufügen würden als Polsterung Okay? Das ist der beste Weg, es zu umgehen. Okay, also werde ich die Seitenbreite wieder auf 14 40 Pixel setzen . Wir haben bereits bewiesen, dass der Container responsiv ist. Und dann werden wir den gewünschten Inhalt in den Container legen . Also werde ich dem eine andere Füllung geben . Lassen Sie uns wieder einfach gelb machen, und vielleicht wird das zumindest für den Heldenbereich Text in der Mitte sein , den wir nicht über die gesamte Breite des Containers erweitern wollen . Also können wir diesen Container Inner nennen. Vielleicht hat er eine maximale Breite von 800. Wir möchten, dass es den verfügbaren Platz ausfüllt. Es hängt alles davon ab, was wir in diesem Container machen, okay? Also werde ich diese Struktur speichern. Ich werde natürlich die Farben entfernen. Also gehe ich zu dem Abschnitt hier. Verwenden Sie hier diese Minus-Taste, um das Rot zu entfernen, in den Behälter zu gehen, das Blau und dann das Innere des Behälters zu entfernen und das Gelbe zu entfernen. Ich werde dieses Innere umbenennen, und das wird im Wesentlichen unsere Struktur für den Aufbau unserer Webseite sein. Das ist also offensichtlich ganz anders als das, was wir im letzten Video gemacht haben , wo wir einfach Sachen auf die Seite geworfen haben und wir sofort ein visuelles Ergebnis gesehen haben. Bei diesem Ansatz konzentrieren wir uns stärker auf die Struktur und stellen sicher , dass unser Projekt mit automatischem Layout eingerichtet ist , bevor wir Elemente hinzufügen Und wo wir gerade davon sprechen, lassen Sie uns diese Struktur tatsächlich verwenden und ab dem nächsten Video einige echte Elemente einfügen 5. Erstellen wie ein Entwickler – Teil 2: Okay, jetzt , wo wir darüber gesprochen haben , wie wir unsere responsive Gesamtstruktur für unser Projekt aufbauen werden, wollen wir nun unseren ersten Abschnitt erstellen Also was ich tun werde, ist , das zu speichern. Ich werde es ausschalten, aber ich werde es speichern, damit wir darauf verweisen und es für alle unsere Abschnitte duplizieren können . Und dann drücke ich Befehl D, um es zu duplizieren, und ich werde den zweiten einschalten. Und ich werde diesen Abschnitt d nennen . Also, was wir in diesem Projekt tun werden, werden wir vier Abschnitte erstellen, eine Kopfzeile, einen Helden, einen Abschnitt mit ausgewählten Sammlungen und eine Fußzeile Auch dies ist ein typisches E-Commerce-Beispiel, weil ich hauptsächlich mit der Webentwicklung von E-Commerce-Websites arbeite Deshalb mache ich eher ein E-Commerce-Beispiel. Und was ich hier gerne für den inneren Bereich mache, nenne ich ihn gerne Header Inner. Ich wiederverwende gerne den Namen des Abschnitts. Natürlich gibt es eine gewisse Flexibilität bei der Benennung. Es liegt an dir. Das wird also im Grunde unser Header sein. Also werde ich das maximale WIP loswerden. Und ich werde das wieder zu einem automatischen Layoutrahmen machen einem automatischen Layoutrahmen Und jedes Mal, wenn wir einen automatischen Layoutrahmen erstellen, werden Sie feststellen, dass er oben und unten links und rechts eine automatische Polsterung hinzufügt oben und unten links und rechts Drüben in unserem Container haben wir bereits automatisches Padding, also brauchen wir das vielleicht nicht, aber lassen wir das vorerst einfach drin Möglicherweise müssen wir das in Zukunft ändern. Und was ich tun werde, ist, das erste Element einzufügen , das in diesen Header aufgenommen wird . Das ist unser falsches Logo. Also werde ich schwarze Logo-Verzierungen hinzufügen, und ich kann sie einfach anklicken und direkt in unseren Container hier ziehen direkt in unseren Container hier Und offensichtlich ist dieses Logo viel zu groß. Ich werde es auf 113 wählen, was es viel kleiner machen wird. Und da hast du's. Wir haben unser Logo drin. Das Logo befindet sich auf der linken Seite unseres Headers. Jetzt werde ich die rechte Seite erstellen. Unsere rechte Seite wird also ein paar Elemente haben. Es wird ein Symbol für das Konto, ein Symbol für CRT und die Flagge des aktuellen Marktes haben ein Symbol für CRT und die Flagge des aktuellen Marktes Auf einer E-Commerce-Website können Sie also auf das CRT-Symbol klicken, um die Seitenkarte zu öffnen Sie können auf die Schaltfläche Konto klicken um Ihre Kontoseite zu öffnen, und Sie können auf die Flagge Ihres Landes klicken, Ihren aktuellen Markt, um zu einem anderen Markt zu wechseln Die Symbole werden in Form von SVGs vorliegen, sodass ich sie nicht auf meinem Computer gespeichert habe Was ich habe, ist Zugriff auf eine Bibliothek, sodass ich sie hier in einem anderen Tab öffnen kann Dieser wird U-Symbole von Flat Icon genannt. Wie Sie sehen können, erlaubt Ihnen die Lizenz , den Inhalt für kommerzielle und persönliche Projekte zu verwenden , sodass wir die Symbole hier vollständig für unsere Zwecke verwenden können, um hier unser falsches kleines Design zu erstellen. Die Startseite. Wir werden hier auf diese Seite wechseln, und ich sollte in der Lage sein, nach Konten zu suchen, wenn sie richtig beschriftet sind . Vielleicht Benutzer. Okay, los geht's. Also lass uns einen Blick darauf werfen. Das ist Benutzeranzeige, Benutzer entfernen. Wir wollen nur Standardbenutzer. Okay, drücken Sie Befehl C, um das zu kopieren, fügen Sie es hier ein. Es wird es wahrscheinlich nicht an der richtigen Stelle einfügen , aber das ist alles gut. Wir können es uns im Ebenenbedienfeld schnappen und es in unser Header-Innere einfügen. Sehen Sie hier, dass es, sobald wir es eingefügt haben, direkt neben unserem Logo hier platziert wird. Und wenn ich versuche, es durch Klicken und Ziehen neu zu positionieren, bewegt es sich nicht, weil wir das automatische Layout verwenden Das ist ganz anders als im vorherigen Beispiel , in dem Sie Elemente einfach absolut auf der Seite positionieren Das lässt sich nicht gut ins Web übertragen, aber das tut es, und das ist der große Unterschied. Also, mit Autoayout, was wir tun werden, anstatt Dinge anzuklicken und an die richtige Position zu ziehen, werden wir unsere Einstellungen für das automatische Layout aktualisieren, was, wie bereits erwähnt, unseren CSS-Flexbox-Einstellungen ähnelt Also, was wir hier machen werden ist, auf Aline Center zu klicken und dann erneut zu klicken, um im Grunde das Äquivalent von Justify Content Space Dazwischen zu erhalten Äquivalent von Justify Content Space Dazwischen Jetzt können Sie sehen, dass wir unser Logo auf der einen Seite und unser Symbol auf der anderen Seite haben. Jetzt wollte ich auch ein Warenkorbsymbol. Also lass mich den Einkaufswagen nachschlagen. Also gut. Dieser ist der generische Einkaufswagen. Also drücke ich Befehl C, oder ich kann natürlich auch einfach mit der rechten Maustaste klicken und auf Kopieren klicken und es dann hier einfügen. Auch das wird nicht die richtige Position sein. Ziehen wir es in das Innere der Kopfzeile. Jetzt können Sie sehen, dass wir diese beiden Symbole bekommen, aber sie sind nicht auf der rechten Seite gruppiert , oder? Das sollte also erwartet werden. Wir haben hier unseren flexiblen Abschnitt mit im Wesentlichen berechtigtem inhaltlichen Abstand dazwischen Was wir also tun müssen, ist, diese Symbole zu gruppieren, und ich werde das in, Sie haben diese Symbole zu gruppieren, es erraten, einem automatischen Layoutrahmen machen es erraten, einem automatischen Layoutrahmen Also werde ich Shift A drücken, um daraus einen automatischen Layoutrahmen zu machen, und dann werde ich ihn umbenennen, sodass es Ihnen überlassen bleibt, ob es sich um Kopfschrift- oder Kopfzeilensymbole handelt Ich werde das WIP so einstellen, dass es den Inhalt umarmt. Und wie Sie hier sehen können, hat es uns ein WIP gegeben, das darauf basiert , wie diese beiden zuvor visuell aussahen Ich werde also zu WIP übergehen und Hug Contents verwenden, was im Grunde wie Fit Content Max WIP in CSS ist Aber jetzt können Sie sehen , dass es darum geht, den Abstand zwischen ihnen beizubehalten , eine riesige Lücke zu setzen Also wollen wir das entfernen, oder wir wollen es eigentlich nicht komplett entfernen, sondern eine viel kleinere Lücke setzen. Also vielleicht zehn, lass mich ein bisschen heranzoomen, mal schauen. Okay, sagen wir, vielleicht 16 Pixel dazwischen, okay? Jetzt haben wir also unser Logo auf der linken Seite und unsere Icons auf der rechten Seite. Das Letzte, was ich hinzufügen wollte, ist die Flagge. Ich werde hier die australische Flagge einsetzen, was auf unseren Market-Selector hinweisen wird Und wenn wir die Größe dieser Flagge mit unseren Symbolen hier vergleichen , sind es 24. Um sie also gleich zu machen, werde ich die Höhe hier auf 24 ändern, und wir wollen nur sicherstellen, dass das Seitenverhältnis festgelegt ist, damit sich das Symbol nicht dehnt. Und dann werden wir das hier in die Kopfzeile verschieben . wir das noch ein bisschen überarbeiten müssen, können Sie sehen, dass wir dort eine Reihe von drei Symbolen haben , und wir können den Abstand zwischen ihnen so vergrößern, oder wir können mit diesen Parametern herumspielen, so dass wir den Abstand zwischen ihnen aktualisieren möchten, im Wesentlichen das visuelle Aussehen unseres rechten Abschnitts Okay. Jetzt, zwischen unserem Logo und unseren Symbolen auf der rechten Seite, möchte ich ein Menü in der Mitte haben. Also was ich tun werde, ist, dass ich das machen kann. Zwei Möglichkeiten, wie ich zuerst den Text erstellen und ihn dann zu einem automatischen Layout zusammenfassen kann , oder ich kann zuerst das automatische Layout erstellen. Lass uns mit der Leiter weitermachen. Also werde ich hier einen Frame einfügen und dieses Header-Menü aufrufen. Und ich werde das sofort auf automatisches Layout einstellen , ohne dass Inhalt drin Ich werde die Peitschen so einstellen, dass sie den Inhalt umarmen. Ja, alles zum Umarmen, damit es zum Inhalt passt Und dann nehme ich mein Texttool hierher, schreibe meinen ersten Menüpunkt hier und ich werde einfach zwei Links in unserem Menü haben Sehr einfach. Herren, klicken Sie da raus. Drücken Sie Befehl D, um das zu duplizieren und es in das für Frauen zu ändern. Wie Sie sehen können, sind sie übereinander gestapelt, also müssen wir unseren Flow in unserem automatischen Layout hier auf horizontal umstellen unserem automatischen Layout hier auf horizontal Wenn wir das wollen, wird der Abstand zwischen ihnen zehn sein Wir können die Ausrichtung ändern. Im Moment macht das nicht wirklich Sinn, wenn man bedenkt, dass sich alles umarmen wird Wir haben links und rechts etwas Polsterung . Vielleicht behalten wir das Ich will die Polsterung nicht oben und unten , weil wir die schon in unserem Behälter haben Wenn wir dann hier rauszoomen, können Sie sehen, dass unsere Menüelemente in der Mitte zentriert sind, okay? Also, wie ich es dir im vorherigen Video gezeigt habe, weil wir hier unsere responsive Struktur haben, wenn ich die Größe jetzt ändere, wirst du sehen, dass es responsiv ist, als wäre es ein echter Webprojektor, oder? Und das ist mehr als das, was für die meisten Webdesigns gesagt werden kann , die auf Ihrem Schoß landen , weil die Designer, wie ich bereits sagte, normalerweise nur die absolute Positionierung verwenden Okay. Was ich auch hier machen möchte, weil das natürlich zusammenbrechen wird , wenn wir, du weißt schon, ziemlich niedrige Bildschirmgrößen haben, aber das ist das Desktop-Design. Wir wollen hier eigentlich nicht zeigen, wie es bei 4:16 auf unserem Desktop-Frame aussieht hier eigentlich nicht zeigen, wie es bei 4:16 auf unserem Desktop-Frame Wir wollen das auf Mobilgeräten präsentieren. Ich werde also tatsächlich eine Mnwidth für den Gesamtrahmen selbst festlegen, und ich werde sie auf 769 setzen Alles unter 769, und du schaust auf Tablet und Handy Jetzt werden Sie sehen, dass ich die Größe nicht auf weniger als 769 ändern kann Größe nicht auf weniger als 769 Also werde ich meine Seite wieder auf 14 40 setzen, und ich werde mich um eine weitere Sache kümmern , bevor wir zum nächsten Abschnitt übergehen, nämlich einige neue Variablen rund um Schriften zu erstellen , okay Wie Sie hier sehen können, wurde dieser Text bei der Erstellung einfach mit der Standardschrift Inter eingerichtet. Das ist nur die Standardeinstellung. Es wird die Standardschriftgröße verwendet, und alles ist natürlich Standard. Dinge wie Markenfarben und Markenschriften würden wir normalerweise in eine Variable einfügen wollen. Also werde ich hier aus meinem Frame herausklicken und unsere Schriften einrichten. Hier können Sie also sehen, dass wir eine Sammlung von Größen haben. Ich werde eine neue Sammlung erstellen und diese Fonts nennen, und ich werde zwei Schriften erstellen. Das wird eine Zeichenfolge sein, und die erste wird eine Schriftart für die Überschrift sein, zweite eine weitere Zeichenfolge, es wird eine Schriftart für den Hauptteil sein. Ich bin vorerst mit der Fließschrift von Inter zufrieden, die wir hatten, also werde ich Inter dort platzieren. Aber wenn wir unsere Überschriften erstellen, möchte ich eine andere Schrift Ich will die Schrift von Oswald. Also werden wir unsere erste Überschrift im nächsten Abschnitt erstellen, aber wir haben bereits Text in unserem Kopfzeilenbereich, also möchte ich hier runter gehen, und statt Inter werde ich hier klicken, um eine Variable zu verlinken, die ich in die Fließschrift einfügen werde Es wird also nichts ändern , weil die Schriftart des Hauptteils bereits Inter ist. Aber wenn wir die Fließschrift später ändern würden, wie ich Ihnen bereits bei der Größenänderung gezeigt habe, wie ich Ihnen bereits bei der Größenänderung gezeigt habe, würde sich das auf alle Bereiche unseres Designs auswirken. Und wenn wir schon mal hier sind, könnte ich genauso gut unsere Markenfarben wählen. Also erstelle ich eine neue Kollektion, nenne das Farben und klicke dann auf Erstellen, und Sie können sehen, dass wir unseren dritten Variablentyp verwenden werden, und das ist Farbe. Falls Sie sich also fragen, wie ich diese Farbpalette gekommen bin, bin ich mir ziemlich sicher, dass ich HachPT gebeten habe, mir eine Farbpalette zu erstellen, die auf dieser falschen Marke basiert Auf diese Weise habe ich auch das Logo und die Bilder, die Sie hier sehen, mithilfe von KI generiert Bilder, die Sie hier sehen, mithilfe KI ist großartig, wenn Sie zu Demonstrationszwecken etwas Generisches produzieren möchten . Also werde ich meine erste Farbe Core Black nennen, und die Namen dafür wurden ebenfalls von Chat GBT erstellt Deshalb lobe ich auch diese Namen mit offenen Augen. Als nächstes reines Weiß, das, wie der Name schon sagt, einfach reinweiß sein wird. Als nächstes wird es Holzkohle sein, als nächstes Graphit. Ich werde am Ende nicht all diese Farben verwenden, um ehrlich zu sein, aber sie wurden mir von Chat GBT gegeben , also werfe ich sie einfach hier rein. Der nächste war aschgrau. Nochmals, wenn ihr mitmacht, Leute, müsst ihr hier nicht dieselben Farbvariablen eingeben , sondern nur demonstrieren, wie wir Farbvariablen verwenden können, Silber, eine Farbe namens Rauchweiß. Und schließlich das supercool klingende Stahlblau, das nicht allzu sehr nach Blau aussieht, aber ziemlich cool aussieht Okay. Nun, da wir unsere Farbvariablen aktiviert haben, gehen wir einfach hier rüber und stellen sicher, dass unsere Schrift die Variable anstelle eines beliebigen Werts hier verwendet die Variable anstelle eines beliebigen Werts hier Also werde ich auf die Füllung klicken, und hier drüben haben wir nicht dieselbe Schaltfläche, die wir zuvor für die anderen Bereiche gesehen haben, in denen wir die Variable hinzufügen Stattdessen müssen wir hier auf Bibliotheken klicken, und dann können Sie unsere Farben hier sehen. Also werden wir die Menüelemente auf Core Black setzen. Und wie ich in diesem Kurs immer wieder Wenn wir den schwarzen Grundton auf der Variablenebene ändern, wird das überall dort übernommen, wo Kernschwarz in unserem Design verwendet wird. Okay, damit ist unser erster Abschnitt fertig, unser Header-Bereich Wie Sie sehen können, reagiert er von 769 an, was unser Breakpoint sein wird bis hin zu 14 40 und Es ist also richtig eingerichtet. Es sieht gut aus mit einem einfachen Design. Lassen Sie uns nun unseren nächsten Abschnitt im nächsten Video erstellen. 6. Erstellen wie ein Entwickler – Teil 3: Im letzten Video haben wir unseren ersten Abschnitt, unseren Header-Bereich, erstellt . Wenn wir jetzt einen neuen Abschnitt erstellen, werde ich hier von unserer kleinen Vorlage duplizieren und ihn dann einschalten und hierher ziehen. Sie werden sehen, dass es die Höhe des Rahmens verlängert. Das liegt daran, dass Sie, wenn wir uns den Rahmen ansehen, sehen, dass wir das automatische Layout aktiviert haben und die Höhe so eingestellt ist, dass sie sich an den Inhalt anpasst. Es wird also so groß sein wie es für den Inhalt erforderlich Was der tatsächlichen Funktionsweise des Webs entspricht: Eine Webseite wird so lang sein, wie sie sein muss, um den gesamten Inhalt darin zu enthalten. Natürlich gibt es einige Ausnahmen, bei denen die Benutzererfahrung eher durch horizontales Scrollen erfolgt, aber das ist sehr ungewöhnlich Wenn wir im Internet surfen, scrollen wir meistens vertikal, scrollen wir meistens vertikal, und unser Bildschirm und unser Browser-Whip bestimmen unsere Variable bestimmen unsere Wie bei allem, was nachahmt, wie das Internet tatsächlich funktioniert, gefällt mir Und jetzt werde ich diesen Abschnitt in Hero umbenennen , okay? kenne mich mit einem Heldenbereich nicht Das ist im Grunde das, was wir zuvor erstellt haben, genau wie ein Banner mit einem Hintergrundbild. Das ist normalerweise das, was eine Helden-Sektion ist. Ich bin mir nicht sicher, was die eigentliche Definition ist, aber es ist etwas, das sich von der Masse abhebt. Also oben auf der Seite, im Grunde der erste große Abschnitt , den Sie auf einer Seite sehen. Und falls Sie sich an einen früheren Teil des Unterrichts in der Figma-Grundlagenstunde erinnern , habe ich unser Bild für den Heldenhintergrund mitgebracht Also werde ich das noch einmal einbringen, so wie ich es zuvor gemacht habe. Also habe ich es im Finder geöffnet und es einfach angeklickt und direkt hineingezogen Und jetzt können Sie sehen, dass es sich im Container befindet . Das ist nicht das, was wir wollen. Vielleicht ziehen wir es hierher, aber das ist nicht gerade das, was wir wollen, Eva. Tatsächlich gibt es einen viel besseren Weg, das zu tun, und das ist, überhaupt kein Bild zu verwenden. Stellen Sie das Bild in die Füllung ein. Da ich nun ein Bild in voller Breite haben möchte , das sich über den gesamten Abschnitt erstreckt, wähle ich den Abschnitt aus. Dann gehe ich nach unten, um Füllung hinzuzufügen, klicke auf diese Plus-Schaltfläche, um Füllung hinzuzufügen, und was Sie vielleicht nicht bemerkt haben, ist , dass wir neben dem Hinzufügen einer Farbfüllung auch eine Bildfüllung hinzufügen können. Ich klicke auf Vom Computer hochladen und wähle dann erneut das Heldenbild aus. Jetzt können Sie sehen, dass sich das Heldenbild über die gesamte Breite des Abschnitts erstreckt. Die volle Höhe, aber die Höhe ist derzeit auf 120 begrenzt. Sie hier die Option „Füllen“ festlegen, ist das im Wesentlichen so das Titelbild eines Hintergrundbilds in CSS oder das Objekt einpassen, und wenn Sie es dann auf „Einpassen“ setzen, ist das im Wesentlichen so, als ob „ Objekt anpassen“ enthalten. Aber natürlich wollen wir nicht, dass es hier enthalten ist. Wir wollen, dass es sich füllt. Es gibt natürlich die Option zum Zuschneiden , wie wir bereits gesehen haben. Aber es ist viel besser, es voll zu haben. Und wie Sie hier sehen können, ist dieser Abschnitt einfach zu kurz. Wir wollen sichergehen, dass wir genug von dem Bild sehen können. Also werde ich diesem Abschnitt eine Mindesthöhe geben. Also klicke ich drüber auf den Chevron, klicke auf Mindesthöhe hinzufügen und füge 750 Pixel Nun, es gibt eine Einschränkung innerhalb von Figma, die wir in CSS haben, und das ist, dass wir den Ankerpunkt wählen können , von dem das Bild stammt Wir können es also so einstellen, von oben oder unten oder von links oder rechts kommt Scheint nicht diese Option in BigMA zu sein, ich bin mir nicht sicher, warum das Bild hier erscheinen soll, aber wie Sie sehen können, gibt es hier keine Option dafür Das könnte also eine Änderung sein , die wir einfach in CSS vornehmen müssen, sobald wir sie in Code exportiert Im Moment werde ich nur eine Mindesthöhe festlegen, damit wir beide Modelle deutlich sehen können. Ich werde diese Höhe vielleicht später reduzieren , wenn wir in den Code exportieren, aber da können Sie sehen, dass wir bei einer Mindesthöhe von 900 beide Modelle sehen werden, okay? Jetzt haben wir unseren Container hier und es sieht so aus, als ob er die gleiche Höhe wie unser vorheriger Abschnitt annimmt . Also werde ich das einfach ändern. Ich werde bei beiden die Höhe einstellen, um den Behälter zu füllen. Und jetzt, wenn ich hier zum Beispiel einen Text schreiben würde, sagen wir einfach Überschrift. Das ist sehr klein, also werde ich hier drüben gehen. Zuallererst werde ich die Schriftart der Überschriften auf unsere Schriftart für Überschriften setzen die Schriftart der Überschriften auf unsere Schriftart , die wir vor Oswald festgelegt haben Und dann muss ich das natürlich viel größer machen damit wir die Überschrift so sehen können Und dann, genau jetzt, da dieser Rahmen nicht automatisch angeordnet ist, kann ich auf diese Überschrift klicken und sie an eine beliebige Stelle ziehen. Das ist dieselbe absolute Positionierung, die wir zuvor hatten. Das wollen wir nicht, also werde ich die innere Taste Shift A drücken, um daraus ein automatisches Layout Und du kannst standardmäßig sehen, dass es einfach in den Bang Metal geht, okay? Natürlich können wir unsere Ausrichtung wählen. Und wenn wir oben links auf „ Ausrichten“ klicken und die Polsterung entfernen würden , die Figma eingefügt hat, um diese Position beizubehalten, können Sie sehen, dass unsere Überschrift gut zum Logo hier passt, okay? Das ist es also, was wir für den Rest der Seite wollen Aber für diesen speziellen Heldenbereich wollen wir, dass der Inhalt genau in der Mitte ist. Also, was ich tun werde, ist das wieder hierher zurückzubringen. Und dann wähle ich den Text aus, dupliziere ihn und du wirst sehen, dass er nach rechts verschoben wird. Also werde ich die Flexrichtung ändern , oder beim automatischen Layout wird das wohl Fließrichtung genannt Ich ändere das auf Vertikal und dann ändere ich den zweiten Textteil Fließtext und dann ändere ich die Schriftart der Überschrift in Fließschrift Das hat nicht funktioniert. Lassen Sie mich das erneut auswählen, und dann lassen Sie uns die Einstellung verringern. Okay? Also das wird in der Mitte liegen, weil wir unsere Alignment-Einstellungen so eingerichtet haben. Und es wird eine Lücke von zehn Pixeln zwischen der Überschrift und dem Haupttext geben. Der beste Texter, also habe ich ChaHPT gebeten , sich eine bessere Überschrift als diese Also werde ich es hier reinschreiben, deine Achse neu definieren. Und offensichtlich, oder zumindest offensichtlich, für mich sieht der Text mit Großbuchstaben besser aus Und dann das zweite Exemplar für den Körper, leistungsorientierte Kleidung für diejenigen, die sich zielgerichtet bewegen, minimalistisches Design, maximale Wirkung Das ist ein bisschen klein und ich möchte, dass es in der Mitte ausgerichtet Also werde ich die Ausrichtung auf Mitte ändern. Ich bin mir nicht sicher, ob die Variable für die Schrift angewendet wurde, also werde ich sicherstellen, dass es die Fließschrift ist, und ich werde sie um erhöhen , okay? Wie Sie sehen können, überlappt es den Container, wenn ich es immer größer mache Und selbst bei dieser Größe ist es, wenn es den Behälter nicht überlappt, immer noch ein bisschen zu breit Also werde ich hier in diesen inneren Behälter gehen und diesem Container einige Zeilenumbrüche mit einem maximalen Hauch erzwingen mit einem maximalen Hauch erzwingen Also werde ich einen maximalen Hauch von „Lass uns mit etwa 600 experimentieren“ hinzufügen von „Lass uns mit etwa 600 experimentieren Wie Sie sehen können, handelt es sich um einen Ausschnitt. Also wollen wir das ändern, um eine Breite des Füllbehälters zu haben Und dann können Sie sehen, dass wir einige Zeilenumbrüche haben. Lassen Sie uns also mit der Schriftgröße und der Containergröße herumspielen der Schriftgröße und , damit das ein bisschen besser aussieht. Ich denke, das ist wahrscheinlich eine bessere Balance. In dieser Situation ist es schön, es in der Mitte zu haben, aber ich möchte, dass es in diesem verfügbaren Raum direkt darüber steht. Also werde ich das ein bisschen hacken , um es in Position zu bringen. Ich kann die Ausrichtung hier verwenden, um es vertikal oben zu platzieren, aber es ist zu nahe an der Kopfzeile. Im Idealfall würde ich es irgendwo dazwischen haben wollen. In HTML und CSS kann ich einen bestimmten Prozentsatz hinzufügen, kann ich einen bestimmten Prozentsatz hinzufügen damit es irgendwo hier steht, aber wir haben keinen Zugriff auf diese Figma Also werde ich etwas vertikale Polsterung hinzufügen, um es in die richtige Position zu bringen Fangen wir mit 50 an und arbeiten uns von dort aus nach oben, 100, Lass uns 165 machen. Irgendwie dort, aber der Text ist ein bisschen nah am Gesicht der Dame. Also werde ich den Container ein bisschen reinbringen, die maximale Breite hier finden, daraus 550 machen. Okay. Vielleicht ist der Zeilenumbruch im eigentlichen Text selbst. Da haben wir's. In Ordnung, der Zeilenumbruch war also im eigentlichen Text selbst Also ja, wenn wir diesen Container mit maximal 550 Pixeln erstellen und mit der Polsterung herumspielen, können wir ihn in eine ziemlich gute Position bringen Um das zu testen, um zu sehen, ob es immer noch reagiert, klicke ich auf den Desktop-Frame und ändere die Größe Wie Sie sehen können, füllt unser Bild den verfügbaren Platz und unsere Überschrift im Text bleibt in der Mitte Perfekt. Aber es gibt noch eine andere Sache, die ich hier tun möchte, und das ist, einen Button einzubauen, einen CTA-Button Also habe ich dir in den Figma-Grundlagen natürlich einen Button gezeigt. Wir werden dafür wieder das automatische Layout verwenden. Also können wir hier einfach in unser Design klicken und dann den Button Jetzt einkaufen aufrufen Ich werde aus dem Textwerkzeug herausklicken. Andernfalls wird ein aktuelles A hinzugefügt . Ich drücke Shift A, und jetzt wurde das automatische Layout hinzugefügt Ich nenne diesen Button. Gehen wir runter und geben dem etwas Fülle und verwenden wir eine unserer Farbvariablen. Vielleicht mache ich das rauchweiß und dann innerhalb der Schaltfläche im eigentlichen Text ändere ich die Füllung in etwas, das im Kontrast dazu steht. Also vielleicht Graphit. Lassen Sie uns das jetzt vergrößern, schauen wir uns das an. Offensichtlich brauchen wir etwas mehr Polsterung, also werde ich links und rechts etwas Polsterung hinzufügen, etwas Polsterung oben und unten Ein gewisser Grenzradius, der hier in Figma Eckenradius genannt wird hier in Figma Eckenradius genannt Fangen wir mit zehn an, okay? Eigentlich macht mir zehn nichts aus. Ich denke, zehn ist okay, so. Und um das Ganze abzurunden, ich bin kein großer Fan von Raumunterschieden. Wie Sie sehen, sieht es so aus, als ob zwischen der Überschrift und dem Haupttext mehr Platz vorhanden ist zwischen der Überschrift und dem Haupttext als zwischen dem Haupttext und der Schaltfläche. Schauen wir uns an, warum das so ist. Gehen wir hier zu unserer Überschriftenebene und Sie werden sehen , dass das Feld etwas größer ist als der eigentliche Text selbst. Vielleicht möchtest du die Zeilenhöhe runtergehen das gleich der Textgröße setzen, also 60, und das ändert das. Und jetzt können Sie sehen, dass alles irgendwie gleicher ist. Das behebt das also fast. Ich werde hier dasselbe für den Haupttext tun , obwohl zwischen den Zeilen diese Zeilenhöhe benötigt wird. Also werde ich diese Änderung rückgängig machen. Und lassen Sie uns hier einfach die Lücke vergrößern. Sagen wir also 20 Pixel. Okay. Nun, was wir tun könnten, wenn wir unterschiedliche Lücken dazwischen haben wollten, könnten wir den Text gruppieren, automatisches Layout hinzufügen, das vielleicht den Hero-Text nennen, wenn wir wollten, und dann den unteren Teil etwas auffüllen Wir können tatsächlich hier nach unten klicken, und das ermöglicht es uns, den linken und den rechten Abstand sowie den oberen und unteren Abstand voneinander zu trennen den linken und den rechten , und wir können zusätzliche Polsterungen und wir können zusätzliche Polsterungen hinzufügen, um die Schaltfläche vom Text zu trennen Vielleicht verwende ich hier also nur fünf Pixel. Eigentlich habe ich das nur an der falschen Stelle eingestellt. Also vielleicht verwende ich hier nur zehn oder fünf Pixel, und das sieht ganz nett aus. Okay, also nochmal, die Größe unseres Designs von 769 auf über 14 40 Offensichtlich verlieren wir hier die Gesichter des Models. Und lassen Sie mich einfach den Desktop über das Handy stellen , damit es uns angezeigt wird. Aber mit CSS können wir das leicht beheben, indem wir die Positionierung des Hintergrundbilds ändern. Okay, also werde ich das wieder auf 14 40 setzen. Bevor wir zum nächsten Video übergehen, zeige ich Ihnen die Komponenten. Um meine Komponenten zu speichern, werde ich hier einfach einen weiteren Abschnitt erstellen. Ich nenne das Elemente. Du kannst es nennen, wie du willst. Sie müssen nicht einmal einen Abschnitt verwenden. Die meisten Leute verwenden nicht einmal einen Abschnitt, und ich werde mir diese Schaltfläche hier schnappen und sie auf Elemente ziehen. Nun, warum ich ihn von hier entfernt und hierher gestellt habe, ist, weil ich unseren allgemeinen Button-Stil definieren möchte unseren allgemeinen Button-Stil definieren möchte , den wir in unserem gesamten Design verwenden werden. Alle Änderungen, die wir an diesem zentralisierten Button-Stil vornehmen, wirken sich auf alle unsere Buttons aus. Das heißt nicht, dass wir keine spezifischen Änderungen an einzelnen Schaltflächen vornehmen können spezifischen Änderungen an einzelnen Schaltflächen Wenn wir sie also hier platzieren und sie dann vielleicht auf einem weißen Hintergrund stehen, müssen wir die Farben invertieren. Das können wir tun Wir können auch zwei Versionen des Master-Buttons erstellen, aber um einen zentralen Button-Stil zu haben, können wir eine sogenannte Komponente erstellen . Wir können das also tun, indem wir mit der rechten Maustaste auf das Element klicken und dann auf Komponente erstellen klicken. Jetzt können Sie sehen, dass es lila wird. Dieses Symbol zeigt an , dass es sich jetzt um eine Komponente handelt. Wenn ich nun klicken und, entschuldigen Sie, Option anklicken und eine Schaltfläche von der Komponente hierher ziehen würde, erhalte ich eine Instanz dieser Komponente. Und Sie können hier sehen, dass es Instanz heißt, und wir haben hier den ausgehöhlten Diamanten nicht den viereckigen Diamanten hier drüben. Und wie Sie sehen können, heißt es Komponente. Sie können hier also sehen, dass wir jetzt eine Instanz unserer Button-Komponente haben. Wir können den Text natürlich immer noch ändern, und das wird die ursprüngliche Komponente nicht ändern. Aber wenn ich die ursprüngliche Komponente hier in Text ändere, werden Sie sehen, dass sich das tatsächlich auf die Instanzen überträgt Auf Instanzebene können wir also Anpassungen vornehmen, oder auf Komponentenebene können wir Anpassungen vornehmen, sich jedoch auf alle Instanzen dieser alle Instanzen dieser Alles klar? Also ich denke, Komponenten sind eine sehr gute Idee, und wir werden sie in diesem Kurs verwenden. Und Sie werden im nächsten Video sehen, dass wir, wenn wir eine Sammlung mit mehreren Produktkarten erstellen , dieselbe Karte immer wieder verwenden wollen , und das ist ein perfekter Anwendungsfall für Komponenten. 7. Erstellen wie ein Entwickler – Teil 4: Ordnung, also im letzten Video haben wir unsere Helden-Sektion erweitert Lassen Sie uns nun am nächsten Abschnitt arbeiten, bei dem es sich um einen Abschnitt mit ausgewählten Sammlungen handeln wird , der im E-Commerce sehr verbreitet ist Da wir also eine E-Commerce-Website erstellen, ist es sinnvoll, einen speziellen Sammlungsbereich einzurichten. Also werde ich die Abschnittsvorlage, die wir hatten, duplizieren und sie einschalten, und dann nenne ich diese vorgestellte Sammlung. Die Hauptkomplexität dieser vorgestellten Sammlung werden einige Kartenbestandteile , die ich hineinwerfen werde. Okay. Also zuerst wollen wir hier eine Überschrift haben. Also gebe ich dem die Überschrift, sagen wir einfach, besonders, tut mir leid, das ist sehr klein. Ich zoome ein bisschen hinein, aber wir werden es vergrößern. Ausgewählte Sammlung. Die Großschreibung ist viel besser, und wir werden die Schrift in unsere Schriftart für Überschriften hier von Oswald ändern , sie vielleicht auf Fett erhöhen Das sieht ein bisschen netter aus. Dann werde ich es viel größer machen, also werde ich es 60 Pixel groß machen Okay. Wie Sie sehen können, können wir es mit unserem Cursor bewegen. Das muss bedeuten, dass wir uns derzeit nicht in einem Auto-Layout-Frame befinden Also drücke ich auf das Innere des Rahmens und drücke Shift A, um daraus ein automatisches Layout zu machen Innere des Rahmens und drücke Shift A, um daraus ein automatisches Layout zu Und wie Sie hier mit unserer Ausrichtung sehen können, wird es in der Mitte sein Also werde ich das nach links verschieben. Und wie Sie sehen können, wurde diese Polsterung beibehalten, also wollen wir nur diese Polsterung entfernen, und dann sollten wir sehen, dass dieser Titel mit dem Rest unserer Container übereinstimmt Als Nächstes werde ich an der Kartenkomponente arbeiten. Ich gehe hier zu meinen Elementen und lass uns sie separat erstellen, sie in eine Komponente umwandeln, und dann können wir einige Instanzen dieser Komponente in unseren Abschnitt hier kopieren . Ich werde hier unten klicken, um einen Rahmen zu erstellen, und ich möchte diesen Rahmen etwa 280 Pixel breit machen. Und dann wird sich die Höhe erhöhen, sobald wir die darin enthaltenen Elemente hinzugefügt haben Also werde ich das unsere Produktkarte nennen. Und das wahre Kind auf unserer Produktkarte wird das Bild der Produktkarte sein und dann alle Details. Okay? Also was das Bild angeht, ich habe nicht wirklich eine ganze Reihe von Produktbildern , die ich hier einfügen könnte. Also werde ich einen Platzhalter einfügen und dafür einfach ein Rechteck verwenden Mir gefällt die Farbe für dieses Platzhalter-Rechteck irgendwie, und dann werde ich die Größe so anpassen, dass sie der vollen Breite der Produktkarte entspricht, und für die Höhe vielleicht 320 Eigentlich wähle ich es einfach hier ein. 320. Und für die WIP möchte ich, dass es den Container füllt Aber dafür benötigen wir ein gewisses automatisches Layout. Also gehe ich zur Produktkarte, klicke dort auf Automatisches Layout, klicke dort auf Automatisches Layout, gehe zurück zu unserem Rechteck, stelle dort ein, dass der Behälter gefüllt wird, und dann werde ich die Produktkarte erweitern Hier können Sie sehen, dass die Ausrichtung deaktiviert ist. Es stellt es in die Mitte. Also werden wir es nach oben verschieben und dann werden wir hier einen weiteren Rahmen für unsere Details einfügen . Sie müssen nur auf der Produktkarte auf Zurück klicken und die Ausrichtung auf vertikal ändern und diese dann nach unten verschieben. Okay? Dieser Rahmen wird den Behälter füllen und die Höhe wird sich an den Inhalt anpassen, aber es ist noch kein Inhalt drin Fangen wir also an, das einzufügen. Wir werden den Produkttitel eingeben wollen. Wie Sie sehen können, wurde unsere Schriftgröße von zuvor gespeichert. Vielleicht reduziere ich das auf 24 und schreibe dann ein Produkt. Lassen Sie uns wieder Großbuchstaben schreiben, Produkttitel, richtig? Und im Moment befindet sich das nicht in einem Rahmen mit automatischem Layout. Also gehen wir hier hoch und fügen dem Frame ein automatisches Layout hinzu Und jetzt können Sie sehen, dass es eine gewisse Anpassung an unseren Produkttitel geben wird Wir werden die Produktkartendetails des Frames umbenennen, und ich möchte diesen Produkttitel auf der linken Seite platzieren diese Leerzeichen vorerst entfernen Und wie Sie hier oben sehen können, gibt es auch eine Lücke, die ich vorerst ebenfalls entfernen werde, und wir können das etwas später ändern, ohne dass Figma das für uns entscheidet Und was ich tun werde , ist , auf den Produkttitel zu klicken und erneut Shift A zu drücken, um einen weiteren Rahmen zu erstellen, und das sind unsere Produktkartendetails oder ich nenne es einfach Produktkarte links Weil ich hier einen anderen Text eingeben werde. Wir fügen einen weiteren Text ein, und wir möchten, dass diese vertikal angeordnet sind. Also werde ich den Textfluss auf vertikal umstellen. Ich fange jetzt an, etwas schneller zu werden, weil wir bereits viel über das automatische Layout gesprochen Und dann wird diese nicht unsere Schriftart für Überschriften sein. Es wird unsere Hauptschrift sein, und ich werde diese Variante einfach Titel nennen. Wir wollen nicht, dass das fett ist. Vielleicht wollen wir sogar, dass es leicht ist, okay? Und dann ist die Textgröße viel zu groß. Ich werde es etwa 14 machen. Okay. Die Ausrichtung ist in der Mitte. Also musst du das nur nach links bewegen. Selbst wenn es das tut , ist es immer noch in der Mitte, und das liegt daran, dass wir unsere Ausrichtung hier wählen müssen und dann Befehl D drücken müssen, um noch einmal zu duplizieren, und das wird unser Preis sein. Also werde ich das auf vielleicht 10$ mit den nachfolgenden Nullen setzen 10$ mit den nachfolgenden Nullen Und dafür möchte ich, dass es mutig und vielleicht ein bisschen Ich werde einen Rahmen auf der rechten Seite platzieren und innerhalb dieses Rahmens werde ich die Anzahl der Bewertungen festlegen. Also nenne ich diesen Rahmen einfach Produktkarte richtig. Und um die Anzahl der Bewertungen anzuzeigen, verwende ich ein Sternsymbol. Also gehe ich zurück zu unserer U-Symbolbibliothek mit flachen Symbolen hier und suche nach einem Stern. Das ist der Stern, nach dem wir suchen. Nun, lass mich sehen, was das ist. Ich will den abgerundeten. Also kopiere ich das, füge es in diesen Rahmen ein und dann einen Text innerhalb dieses Rahmens, und dann einen Text auch für die Anzahl der Sterne. Sagen wir also 4.5. Okay. Ich werde sie neu bestellen und dann automatisches Layout zur Produktkarte hinzufügen , richtig Und dann klicke ich auf die Produktkartendetails und aktualisiere hier unsere Ausrichtung Ich werde hier ein Leerzeichen dazwischen einstellen Das ist der Begriff in CSS Flex, aber im Grunde habe ich nur hier doppelt geklickt, um ihm den automatischen Abstand zu geben, und dann wieder hier auf der Produktkarte rechts Ich werde die Höhe einstellen, um den Behälter zu füllen. Ich werde die obere und untere Polsterung entfernen , sodass es in der Mitte sitzt, und dann werde ich die Ausrichtung festlegen Das hat es für uns eigentlich nicht behoben. Wir wollen, dass es oben rechts steht. Also müssen wir vielleicht hier klicken. Da haben wir's. Sie müssen erneut klicken, um die automatische Lücke zu erhalten. Und dann gehen wir hier zur Produktkarte über. Wir möchten eigentlich, dass das in diesem automatischen Layout angezeigt wird und aneinander ausgerichtet Vielleicht gibt es stattdessen einen Abstand von fünf Pixeln. Und jetzt können Sie sehen, dass das ein bisschen falsch ist. Gehen wir runter und ändern die Zeilenhöhe auf 24. Und jetzt solltest du anfangen zu sehen, dass alles ganz gut zusammenpasst. Okay? Jetzt, wo die gesamte Polsterung im Grunde genommen entfernt wurde, werde ich meine eigene Polsterung nach meinem Also werde ich natürlich eine gewisse Lücke zwischen diesen Abschnitten haben wollen gewisse Lücke zwischen diesen Abschnitten haben wollen Also 20 sind wahrscheinlich zu viel. Lass uns zehn machen. Und dann brauche ich für die Produktkartendetails etwas Platz auf beiden Seiten. Lass uns vielleicht 12 einwählen. Das ist nett. Das lässt es atmen. Dann gehe ich zur Produktkartenkomponente selbst, gehe zur Produktkartenkomponente selbst, Höhe und klicke auf Inhalt umarmen, sodass er nicht größer ist als der Inhalt darin Und dann können wir hier sehen , dass die Unterseite der Produktkartendetails etwas aufgepolstert werden muss Unterseite der Produktkartendetails etwas aufgepolstert Anstatt hier also eine Lücke zu haben, könnten wir diese Lücke entfernen und dann bei den Details oben und unten etwas Polsterung hinzufügen, etwa so Und eigentlich bin ich jetzt ziemlich zufrieden mit meiner Produktkarte. Okay, also wir können diesen Platzhalter so hier lassen oder wir können die Füllung auf unser eigentliches Produktbild ändern Ich habe nur ein Produktbild. Also werde ich hier rübergehen und ein Beispiel einbringen. Also hier können wir das Produktbild sehen. Und wie Sie sehen können, ist es irgendwie auf ihrem Kopf zu Es gibt also ein paar Optionen, die wir anpassen könnten, was keine gute Option ist, weil wir jetzt diesen weißen Raum auf der Eva-Seite haben Wenn wir immer noch wollten, dass es gefüllt und einfach von oben verankert wird, können wir das später in unserem CSS machen. In Figma geht das leider nicht. Aber in diesem Fall werde ich einfach ernten. Also werde ich das Bild einfach so anordnen und vielleicht ist das Produkt nur dieser Sport-BH hier. Es geht nicht um das Unterteil, in diesem Fall würde das gut funktionieren. Okay? Also könnten wir statt Produkttitel Sport-BH sagen. Okay? Wir können das drin lassen, oder wir können das Bild loswerden, oder wir könnten zurück zum Platzhalter gehen, wenn ich Z einfach aus dem heraus kontrolliere Aber hier können wir unser richtig strukturiertes Produktkarten-Setup sehen richtig strukturiertes Produktkarten-Setup Okay. Dann werde ich rechten Maustaste auf diese Produktkarte klicken und dann auf Komponente erstellen klicken. Jetzt können wir Instanzen dieser Produktkarte erstellen, und alle Änderungen, die wir an dieser zentralen Komponente vornehmen , werden auf jede Instanz übertragen, genau wie bei Schaltflächen. Okay? Also, was ich tun werde, ist zurück zu unserer Sektion hier drüben zu gehen. Ich werde diese Sammlung, in der es tatsächlich vorkommt, in den Inhalt umbenennen . Und dann werde ich darin einen neuen Rahmen erstellen. Natürlich wollen wir nicht, dass es rechts neben der Überschrift steht. Wir wollen, dass es darunter steht, also werde ich hier meinen Flow ändern. Das wird unsere Liste von Produktkarten sein. Okay. Und dann kann ich das so erweitern, dass es den gesamten Behälter füllt, und dann kann ich anfangen, eines davon optional auf meine Produktkarten zu ziehen , so wie es ist. Eigentlich ist es zur Seite gefallen, aber dann kann ich es hier in meinen Produktkarten verschachteln. Und dann noch einmal, wie wir überall gesehen haben, werde ich das automatische Layout hinzufügen, und jetzt können Sie sehen, dass wir unsere Produktkarte perfekt in der Mitte haben unsere Produktkarte perfekt in der Mitte Ich werde diese Produktkarten duplizieren Lassen Sie uns vier davon machen, glaube ich. Und Sie können sehen, dass Figma links und rechts etwas Polsterung angebracht hat Lassen Sie uns das loswerden. Wir wollen offensichtlich eine gewisse Lücke zwischen all diesen. Ich könnte diesen Abstand auf 15 erhöhen. Und wie Sie hier auf unseren Produktkarten sehen können, passt der Inhalt zum Umarmen, was gut ist Das heißt, es wird so groß sein wie die Karten darin, und unser WIP wird den Behälter füllen Perfekt. Wie Sie an unserem Titel hier oben sehen können, ist die Zeilenhöhe größer als die Höhe des eigentlichen Textes. Also machen wir das auf 60 , sodass es nur den Platz für den Text einnimmt. Und in diesem Fall benötigen wir einen gewissen Abstand zwischen diesem Text und den Produktkarten. Also können wir diesem Text entweder hier ein automatisches Layout hinzufügen und dann im Rahmen für das automatische Layout etwas Polsterung am unteren Rand hinzufügen oder wir können einfach die Lücke im inneren Bereich verwenden Okay? Also ich denke, ich werde das einfach tun und die Lücke vergrößern. Eigentlich haben wir hier schon eine Lücke, aber lassen Sie uns etwas mehr davon schaffen, vielleicht 30 Pixel Abstand. In Ordnung. Also, wenn wir uns unseren Container hier ansehen, gibt es oben und unten etwas Polster , das nicht existieren sollte Außerdem scheinen diese Abschnitte nicht perfekt aufeinander abgestimmt zu sein. Lassen Sie uns herausfinden, warum das so ist. Scheint hier eine kleine Lücke zu sein. Gehen wir hier zu unserem übergeordneten Frame, dem Desktop-Frame, und Sie können sehen, dass dort eine Lücke besteht. Also wollen wir das einfach entfernen. Und jetzt können Sie sehen , dass der obere Teil des Abschnitts und der untere Teil des Abschnitts bündig an dem Abschnitt anliegen Natürlich wollen wir hier etwas Platz schaffen, aber ich möchte das als Variable erstellen, denn wenn wir einen weiteren Abschnitt wie diesen mit Text und einigen Bildern erstellen , wollen wir die Abschnittsabstände konsistent halten die Abschnittsabstände konsistent Ich werde hier aus unserem Rahmen herausklicken, zu Variablen wechseln, zu unserer Größenkollektion wechseln und eine neue Zahlenvariable für den Abschnittsabstand erstellen für den Abschnittsabstand Und mit den Modi können wir das tatsächlich so ändern, es je nach Handy oder Desktop unterschiedlich Aber nur, wenn du im Entwicklerteam bist, worauf wir später noch eingehen werden. Gehen wir also mit 75 Pixeln vor. Ordnung? Und dann gehe ich zu meiner vorgestellten Sammlung und füge sie dann hier zu unserer Rubrik Polsterung Okay, lassen Sie uns den Abschnitt nach unten erweitern , damit Sie sehen können, dass er ziemlich gut aussieht Okay, also wie wird es mit der Reaktionsfähigkeit aussehen? Wie Sie hier sehen können, könnte es sich möglicherweise um einen Überlaufbehälter Es könnte also tatsächlich so aussehen, und dann könnte der Benutzer nach links und rechts scrollen, oder wir könnten es so einrichten, dass die Produktkarten umhüllt Also hier ist der Button für Rap, und dann schauen wir mal, was passiert, wenn wir runterfahren. Sie können sehen, wie sie anfangen, sich zu wickeln, aber wir möchten vielleicht, dass sie sich auch etwas dehnen. Ich freue mich, dass sie in diesem Fall nur ein Überlaufcontainer Und wenn wir etwas anderes wollen, können wir das ganz einfach in unserem HTML-NCSS beheben Okay. Also setze ich das zurück auf 14 40, die ursprüngliche Peitsche In dieser Lektion haben wir hauptsächlich behandelt, wie man diese einzelne Komponente erstellt Aber Sie können sehen, dass wir hier mehrere Instanzen dieser einzelnen Komponente haben . Und wenn ich zurückgehe und einen dieser Platzhalter in einer tatsächlichen Instanz gegen dieses Bild ändere dieser Platzhalter in einer tatsächlichen Instanz gegen dieses Bild Wenn ich also rübergehe, wo die Füllung ist, da ist sie, und ich lade vom Computer hoch und füge das Produktbild dort Lassen Sie uns es noch einmal zuschneiden , um es an die richtige Position zu bringen. So wie ein solcher. Eigentlich habe ich das Oberteil etwas abgeschnitten, also lass mich das nach hinten verschieben. Zum Anfassen, okay? Das sieht ziemlich gut aus. Wie Sie sehen können , wird das keine unserer anderen Instanzen ändern. Aber wenn ich hier rübergehen und den Preis für die eigentliche Komponente auf 20 ändern den Preis für die eigentliche Komponente auf 20 und wir dann hier drüben nachschauen, würden Sie feststellen, dass alle unsere Instanzen jetzt 20 kosten. Okay? Ich kontrolliere einfach Z, setze das wieder auf zehn und dann entferne ich dieses spezielle Produktbild hier weil ich die anderen nicht habe, um die anderen Felder zu füllen. Ich muss die D 9d9d9-Füllung wieder einsetzen. Okay. Im nächsten Video werden wir also den letzten Abschnitt machen, den Fußzeilenbereich , den Fußzeilenbereich , und dann werden wir mit der Migration dieses Desktop-Designs auf unsere kleinere Bildschirmbreite 390 für 8. Erstellen wie ein Entwickler – Teil 5: Okay, jetzt zum letzten Abschnitt unseres Builds hier, und das ist die Fußzeile Also noch einmal, ich werde diese Abschnittsvorlage duplizieren und einschalten und dann den Abschnitt in Fußzeile umbenennen Und diese Fußzeile wird eine separate Hintergrundfarbe haben, um eine separate Hintergrundfarbe anzuzeigen, dass es sich um eine Fußzeile handelt Also werde ich das jetzt einfach hinzufügen. Ich werde eine unserer Farbvariablen in unserem Farbschema verwenden . Ich werde Silber verwenden. Okay. Das sieht ziemlich nett aus. Benennen Sie „inner“ in „footer inner“ um, und damit dieser Abschnitt eine einheitliche Polsterung hat wie der letzte Abschnitt und alle anderen Abschnitte, die wir in Zukunft erstellen , gehe ich zum Abschnitt und füge den oberen und unteren Bereich der Abschnittspolsterung hinzu . Okay? Großartig. Jetzt können wir in unserer Fußzeile hinzufügen, was wir wollen. Also werde ich das Logo wieder einfügen, offensichtlich viel zu groß, also werde ich es auf 113 reduzieren, genau wie die Kopfzeile, und aus irgendeinem Grund ist es hier an der Seite Unsere innere Fußzeile ist noch nicht auf automatisches Layout eingestellt, also werde ich das einstellen und dann bringt es unser Logo zurück Okay. Was ich dann machen werde, ist eine ziemlich einfache Fußzeile weil es eine ziemlich einfache Website ist, wie Sie sehen können Ich werde eine Reihe von Menüs auf der rechten Seite haben Dafür können wir also unten beginnen oder uns nach oben vorarbeiten , oder wir können oben beginnen und uns nach unten vorarbeiten Also fange ich oben an. Ich werde hier einen weiteren Frame hinzufügen. Das werden Fußzeilenmenüs sein. Dann gehe ich zu meiner inneren Fußzeile und stelle den Fluss auf horizontal um und stelle den Abstand hier auf automatisch. Dann drüben in meinen Fußzeilenmenüs, die nach rechts verschoben werden, weiterer Rahmen für ein einzelnes Fußzeilenmenü Also werde ich dieses eine Fußzeilenmenü nennen und diese auf Auto Layout umstellen Und dann werde ich im FDA-Menü etwas Text hinzufügen Das wird also die Überschrift unseres FDA-Menüs sein. Also werde ich es als Laden einbauen. Ich mag es fett. Anstatt Inter zu verwenden, obwohl es dieselbe Schriftart ist, werde ich die Variable verwenden, die es uns ermöglicht, sie später zu ändern, wenn wir dies wünschen. Und dann drücke ich Befehl D, um das zu duplizieren und zu einer weniger fetten Schrift zu wechseln, und wir werden hier keine Großbuchstaben verwenden, und ich werde Command D wieder für Frauen und für Männer Da haben wir es also, unser erstes Menü. Wir können den Abstand zwischen den Artikeln ändern, aber ich bin mit zehn zufrieden. Und was wir jetzt tun können, weil wir bereits alles in automatischen Layouts eingerichtet haben bereits alles in automatischen Layouts eingerichtet , ist, dass ich auf das Fußzeilenmenü klicken, es duplizieren kann und dann ein weiteres Menü auf der rechten Seite Okay? Also das wird unser Hilfemenü sein, erstes, FAQ, zweitens Informationen zur Linklieferung. Und wie Sie sehen können, wird sich alles automatisch an die richtige Position bewegen, weil wir das flexibel gestaltet haben . Als Nächstes wird es eine Rückkehr geben. Falls Sie sich fragen, wo ich auf diese gekommen bin, habe ich mich im Grunde genommen von anderen Websites inspirieren lassen, anderen E-Commerce-Websites, die ähnliche Produkte verkaufen, und einfach einige ihrer Links kopiert. Okay? Also hier kannst du sehen, dass wir ein kleines Problem haben. Dies ist auf eine Linie in der Mitte eingestellt. Das wollen wir nicht, also ändern wir die Ausrichtung. Da haben wir es, sodass unsere Überschriften in einer Reihe angeordnet sind. Dann werden wir hier ein weiteres Menü erstellen, indem wir es duplizieren, und ich nenne das legal Das werden unsere Richtlinien und Allgemeinen Geschäftsbedingungen, Datenschutz, Richtlinien und Geschäftsbedingungen sein, und dann entfernen wir diese einfach Ordnung. Also da haben wir es Unsere Menüs werden erweitert, um den Inhalt zu füllen, aber mir gefällt nicht, dass einige viel größer sind als die anderen. Also nehme ich die Breite von diesem Bild, die 172 ist, und mache aus all diesen Mindestbreiten 172. Also füge ich hier 172 hinzu und auf der anderen Seite hier drüben die Mindestbreite 172. Diese werden also mindestens so groß sein wie das Hilfemenü. Okay? Also da kannst du sehen, wir haben hier eine nette kleine Fußzeile. Und weil wir für alles das automatische Layout verwendet haben, lassen Sie mich hier einfach die Grenzen unseres Frames nehmen, Größe ändern, und Sie werden sehen, dass es von 769, dem Minimum, bis hin zu wirklich großen Bildschirmgrößen funktioniert dem Minimum, bis hin zu wirklich großen Dort können Sie sehen, wie unsere Fußzeile funktioniert. Ich werde unseren Abschnitt nur erweitern, um das abzudecken. Und eine weitere Sache, die ich aus dem letzten Video vergessen habe , ist , dass wir unsere Produktkartenkomponenten auf Auto Loud eingestellt haben . Wir haben die Reaktionsfähigkeit also nicht wirklich getestet. kannst du hier sehen. Ja, wenn wir es extra breit machen, ist es sehr unwahrscheinlich , dass es so breit ist, also müssen wir uns keine Sorgen machen, obwohl wir vielleicht ein Maximum dafür setzen wollen, vielleicht 450, vielleicht mehr als 450, und es sieht langsam komisch Wir würden nicht wollen, dass es mehr als das ist. Wir werden nicht in der Lage sein, es größer zu machen. Und wenn wir dann hier nach unten gehen, etwa 250, etwa 250, dann bekommen wir eine gewisse Überschneidung mit der Sternebewertung Also wollen wir das auch zu einer Mindestbreite von 250 machen, und dann können Sie sehen, dass wir dieses Kartendesign nicht wirklich kaputt machen können die minimale Breite und die maximale Breite und das automatische Layout angewendet werden. Nun, da unsere Desktop-Ansicht gut aussieht und responsiv ist, gehen wir im nächsten Video zum Thema Mobilgeräte über. Und hoffentlich können wir all das in einer einzigen Lektion auf Mobilgeräte migrieren . Also werde ich dich in der nächsten sehen. 9. Erstellen wie ein Entwickler – Teil 6: Dieses hoffentlich letzte Video in diesem Abschnitt dem es darum geht, wie ein Entwickler an unserem Design zu arbeiten. Wir werden dieses Design auf Mobilgeräte übertragen. Jetzt haben wir im Internet natürlich nicht mehr zwei verschiedene Frames. Was wir haben, ist ein Breakpoint. Und leider ist es praktisch unmöglich, diesen Frame bis auf , sagen wir, 320 Pixel bis 768 zum Laufen zu bringen sagen wir, 320 Pixel bis 768 zum Laufen zu Okay? Also werden wir immer noch einen mobilen Rahmen benötigen. Und für den mobilen Rahmen werde ich dasselbe tun, wie wir es hier getan haben. Ich möchte nicht, dass dieser mobile Rahmen größer als 768 ist, weil wir dann zu unserem Desktop-Design übergehen wollen. Also werde ich ein Max WIP einrichten, aber ich muss das zuerst in ein Flex-Layout umwandeln Also werde ich dafür einfach A umschalten. Und dann stelle ich das M WIP auf, ich glaube, das kleinste Telefon auf dem Markt ist 320 Telefone unter 320 werden wir nicht unterstützen, und wir geben ihm, wie wir es besprochen haben, einen maximalen WIP-Wert von 768 Ordnung, also ich habe tatsächlich den tatsächlichen Wert mit eingestellt, nicht die Min- und Max-Werte. Also, was war es? Es waren 32768 Also haben wir beide da. Also hier kannst du sehen, wie mobiles Design von 320 bis 768 funktionieren sollte , okay? Aber ich werde das wieder auf 390 setzen. Das ist die Leinwandgröße, an der ich normalerweise gerne arbeite. Und lassen Sie uns zuerst unseren Header rüberbringen. Okay? Also, ich werde auf die Kopfzeile klicken, auf Befehl C klicken, um zu kopieren, zu unserem mobilen Frame hier drüben gehen und auf Einfügen klicken, und Sie können es hier sehen. Wir haben eine allgemeine Polsterung auf dem Rahmen, also wollen wir das loswerden Ordnung. Wir brauchen Container auf Mobilgeräten nicht wirklich, aber lassen Sie uns sie behalten, denn das wird es für die KI wahrscheinlich einfacher machen, sie zu verstehen Und wir wollen, dass das Logo zuallererst kleiner ist. Wählen wir etwa die Hälfte der 75 Pixel ein. Sieht aus, als hätten wir hier ein bisschen zu viel Polsterung. Sie können also sehen, dass wir an der Innenseite des Headers und am Container etwas Polsterung haben Innenseite des Headers und am Container Also können wir uns für das Böse entscheiden. Also werde ich es für den inneren Header und vielleicht auch für den Container entfernen . Nutze so viel Platz wie möglich. Unser übliches Muster in der Webentwicklung ist es dieses Menü genau hier zu nehmen, das ziemlich breit ist, besonders wenn Sie andere Menüelemente haben , und es in ein Hamburger-Symbol umzuwandeln Also werde ich das komplett löschen und dann gehe ich wieder zu unserer Symbolbibliothek und sage Burger Ich glaube, es heißt nicht Hamburger, sondern Burger, aber wir werden es bald herausfinden Da ist also das Hamburger-Menü. Ich sehe tatsächlich aus wie ein Hamburger, und das ist der Menü-Burger, okay Welche haben wir auch? Ja. Also im Grunde das Gleiche, gerade oder abgerundet. Mach es geradeaus, glaube ich. Ja. Und dann fügen wir das Symbol ein. Wir müssen es nur an die richtige Position ziehen. Also werde ich es vor das Logo setzen , wie Sie hier sehen können. Und weil wir einen inneren Header mit einer automatischen Lücke haben , entsteht unerwünschter Leerraum zwischen dem Hamburger-Symbol und dem Logo Also werde ich sie zusammenfassen. Nun, das wird zu einer Inkonsistenz mit der Desktop-Version führen Also werde ich dasselbe in der Desktop-Version tun , um diese für KI konsistent zu halten Also gehe ich hier zu unserer Desktop-Version und lass uns diese auch gruppieren, automatische Layout einschalten und dann diesen Header links aufrufen Und dann möchte ich vielleicht sogar, dass diese Elemente weiter links stehen Für die linke Kopfzeile mache ich also keinen automatischen Rand. Ich mache einfach eine Linie nach links. Sieht so aus , als ob hier irgendwo eine automatische Polsterung angewendet wurde, oder zumindest eine feste mit Also werde ich das Mit hier so einstellen, dass es den Inhalt umarmt Das Menü bleibt immer noch an Position. Um herauszufinden, warum das so ist. Sieht so aus, als ob wir statt einer automatischen Polsterung eine automatische Lücke bekommen Also setzen wir den Abstand auf nicht automatisch, aber erweitern wir ihn selbst, vielleicht um zehn Pixel, okay Jetzt sind wir also Kopf an links mit unserem Header-Menü und unserem Logo auf der linken Seite auf dem Desktop, und wir haben auch hier das Gleiche, und wir müssen nur den automatischen Abstand hier loswerden automatischen Abstand hier Wie Sie hier sehen können, wird der freie Formfluss verwendet. Ich setze das auf horizontal und dann stelle ich die Lücke so , dass wir mit zehn beginnen. Okay. Ich glaube, ich brauche etwas mehr als zehn. 20, sagen wir, wo fahren wir in der linken Kopfzeile hin. Okay, es ist ein umwerfender Inhalt. Es ist in der Mitte ausgerichtet. Es hat eine Lücke von zehn Pixeln. Vielleicht erhöhen wir das auf 15 Pixel. Okay, cool. Okay, das ist also im Grunde unser Header. Also das nächste, was wir rüberbringen werden, ist unser Held. Also schnappe ich mir den Helden, indem ich zum Kopieren auf Befehl C drücke. Und dann drüben in unseren mobilen Layouts, genau hier, drücke ich auf Einfügen, und Sie können es im selben Inhalt wieder sehen. Das Hero-Image für Mobilgeräte wird anders sein. Und in der Webentwicklung ist es ziemlich üblich, unterschiedliche Bannerbilder zu verwenden, die auf dem Unterschied zwischen Desktop und Handy basieren . Also gehe ich hier rein und habe eine alternative Version, Hero Image für Handys. Also werde ich das hochladen und auch die Größe dieses Helden verringern. Sieht so aus, als ob da ein Minimum drauf ist, was wahrscheinlich vom Desktop-Design übernommen wurde. Also lass mich sehen, was hier vor sich geht. Füllung eingestellte Höhe. Okay, ja. Also lass mich mal hier drüben nachschauen. Ja, wir haben eine Mindesthöhe von 900. Wir wollen das auf jeden Fall für Mobilgeräte ändern. Nehmen wir an, vielleicht die Mindesthöhe 500, und dann werden wir die Höhe auf 500 reduzieren. Und jetzt können Sie sehen, dass wir unsere Modelle besser im Bild haben . Also vielleicht sage ich Mindesthöhe 450, dreh das Ganze noch weiter runter. Okay, das ist ein bisschen netter. Und dann schreib mir gleich hier. Wir wollen natürlich nicht so groß sein, also können wir 36 für die Schriftgröße der Überschrift angeben, vielleicht lassen wir es einfach bei 16, nur damit es besser lesbar ist. Und dann werde ich hier die Lücke verkleinern, vielleicht einfach die Lücke komplett entfernen und dann dasselbe zwischen dem Heldentext und der Schaltfläche. Also mache ich vielleicht fünf Pixel draus. Wir bekommen oben und unten etwas Polsterung von 165. Lassen Sie uns das entfernen und sehen, was passiert. Okay, wir bekommen unseren Text ganz oben. Lassen Sie uns einfach mittig ausrichten , damit es in der Mitte ausgerichtet ist, und damit bin ich ziemlich zufrieden Ordnung, also der nächste Abschnitt, der Abschnitt mit den ausgewählten Sammlungen Ich werde das, was in unser mobiles Design kommt, kopieren. Bevor ich das mache, werde ich die Höhe unseres mobilen Rahmens so einstellen , dass er sich an den Inhalt anpasst Es wird also den Rahmen so groß machen wie der Inhalt darin, aber nicht mehr. Da kannst du hin. Und dann füge ich über unser Handy unsere vorgestellte Sammlung ein, wodurch unser Handyrahmen unweigerlich größer wird. Ordnung? Jetzt können Sie sehen, dass wir unser Abschnittspadding haben, aber es ist mit 75 Pixeln ziemlich schwer Wir können also auf Mobilgeräten einen anderen Abschnittsabstand festlegen einen anderen Abschnittsabstand festlegen Also werde ich das entfernen und lassen Sie uns zunächst mit einigen Zahlen herumspielen, bevor wir die Variable setzen Wie sieht 25 aus? Okay. Ich glaube, ich möchte 35 machen, nur um ein bisschen mehr Luft zum Atmen zu haben, okay? Und dann in Variablen hier drüben kann ich, wenn du die kostenlose Version von Figma benutzt, musst du eine weitere Variable erstellen, damit du diesen Abschnitt Padding Mobile nennen kannst, richtig? Stellen Sie das auf 35 oder was auch immer Ihre gewünschte Polsterung ist. Und dann, wie wir es im ganzen Kurs gesehen haben , füge das hier Richtig. Aber wenn Sie auf einem Deb-Sitz sind, was wir etwas später sehen werden wenn wir über den MCP-Server sprechen, können Sie tatsächlich verschiedene Modi für Ihr Abschnitts-Padding erstellen verschiedene Modi für Ihr Abschnitts-Padding Ich werde das jetzt nicht demonstrieren, aber später werden wir tatsächlich einen separaten Modus erstellen, okay Ich werde das in einer späteren Lektion behandeln. Lassen Sie uns das vorerst einfach so machen , wie es bei Figma kostenlos verfügbar ist Für diesen Ansatz ist kein kostenpflichtiges Abonnement von Figma erforderlich. Wir müssen nur das Abschnittspadding in zwei verschiedene Variablen für Desktop und Okay. Jetzt haben wir hier ein bisschen Leerraum , den wir aussortieren müssen. Lass mich sehen, was dort vor sich geht. Ich denke, das könnte vom Gesamtrahmen herrühren. Sie können hier sehen , dass es eine Lücke gibt. Wir wollen keine Lücke zwischen den Abschnitten, also werde ich sie entfernen. Da haben wir's. Offensichtlich muss diese Überschrift viel kleiner sein. Also wählen wir, sagen wir, 32 ein, okay? Abstand zwischen diesen beiden ist jetzt etwas zu groß, also werde ich als Nächstes daran arbeiten. Vielleicht zehn. Okay, cool. Und wenn wir mit einem horizontal überlaufenden Behälter zufrieden sind , könnten wir ihn einfach so stehen lassen, okay? So kann der Benutzer zu den anderen Produktkarten in der Sammlung blättern den anderen Produktkarten in der Sammlung Alles klar? Schauen wir uns an, wie schnell das bisher reagiert hat. Alles verwendet automatisches Layout, also sollte es ziemlich gut sein Alles klar, es sieht ziemlich gut aus, außer wenn wir hier anfangen , Platz zu verlieren Also ich habe wirklich kleine Bildschirmgrößen. Also können wir entweder einen anderen Rahmen erstellen oder einfach, um das flexibler zu machen, die Schrift darauf schreiben. Ich weiß, ich habe gesagt, dass ich es mit 16 will, aber machen wir es 14. Und tatsächlich könnte unser Button-Text auch etwas kleiner sein . Also werde ich daraus 14 machen. Jetzt sollte unser Held viel besser funktionieren, egal welche Bildschirmgröße 768-320 Es gibt einige Bildschirmgrößen , bei denen es ein kleines UX-Problem gibt, da der Benutzer möglicherweise nicht weiß , dass Sie scrollen können Hier können Sie sehen, dass, Sie wissen schon, eine Produktkarte abgeschnitten wird, sodass der Benutzer darauf hinweisen sollte , dass er nach links und rechts scrollen kann. Aber hier drüben, nicht so sehr, und die Featuresammlung ist etwas beschnitten Ich werde nicht versuchen, dieses Infigma zu reparieren, denn das ist eine geringfügige Verbesserung , die wir vornehmen können, sobald wir den Also werde ich das vorerst so lassen , wie es ist. Aber insgesamt reagiert es ziemlich schnell. Und dann werde ich endlich unsere Fußzeile hier einfügen. Also klicken Sie auf Befehl C, gehen Sie zu unserem mobilen Frame, drücken Sie Befehl V. Und was wir hier machen wollen , ist das natürlich ein bisschen zu überarbeiten Wir wollen die Polsterung des Desktop-Bereichs nicht verwenden. Wir möchten hier die Polsterung für mobile Bereiche verwenden Wie tief haben wir das Logo platziert? Es waren 75 Pixel. Also lass uns das auch hier machen. Wo ist es Axis Whip 75 Pixel. Okay. Lassen Sie uns hier mit einigen dieser Flow-Optionen herumspielen. Vielleicht stellen wir es auf Vertikal. Eines der Probleme, mit denen wir wahrscheinlich konfrontiert sind , ist, dass diese Fußmenüs eine Mindestpeitsche haben, also wollen wir diese Mindestpeitschen einfach entfernen, okay? Ich glaube nicht, dass der letzte es hatte. Aber es scheint nicht wirklich genug horizontaler Platz für all diese Fuß- und Menüpunkte zu geben genug horizontaler Platz für all . Horizontal ausrichten. Also gehe ich hier rüber und stelle die Fließrichtung auf vertikal und die Ausrichtung auf links ein. Und ja, ich glaube, damit bin ich zufrieden . Sieht nicht schlecht aus. Mal sehen, wie schnell das reagiert. Ja, funktioniert von 320 bis 768. Also das ist ziemlich gut. Damit bin ich ziemlich zufrieden. Und das ist genug Hinweis, ich würde mir wünschen, wie wir die Elemente auf unserer Seite für Mobilgeräte ändern wollen auf unserer Seite für Mobilgeräte ändern Okay. Nun, da wir unser Design wie ein Entwickler fertig erstellt haben, schauen wir uns an, wie wir es tatsächlich in echten HTML- und CSS-Code umwandeln können . 10. Figma zum Programmieren mit Locofy AI: Ordnung, in den letzten Videos haben wir uns mit der Entwicklung dieses responsiven Designs in Figma Und in den nächsten beiden Videos werden wir zwei Methoden behandeln, um HTML- und CSS-Code direkt aus dieser FIGMA-Datei zu generieren HTML- und CSS-Code direkt aus dieser FIGMA-Datei Ich ermutige Sie nun, Ihr eigenes Figma-Design zu erstellen und dann diesen Prozess zu durchlaufen , den ich Ihnen in diesem und dem nächsten Video zeigen werde Ihnen in diesem und dem nächsten Video zeigen Aber wenn du mein Design kopieren möchtest, kann ich das einfach hier auf Skillshare mit dir teilen, damit du es testen kannst, ohne unbedingt dein eigenes Design zu erstellen Aber ich ermutige dich, dein eigenes Design zu entwerfen. Es ist wichtig, diese Fähigkeiten in die Praxis umzusetzen, wenn Sie wirklich lernen möchten Ich ermutige Sie, Ihr eigenes Design zu entwerfen. Und da wir über Leader in the Class sprechen werden, ermutige ich dich , das als Klassenprojekt hier auf Skillshare hochzuladen als Klassenprojekt hier auf Skillshare Okay, also lasst uns ohne weitere Umschweife mit dem Prozess beginnen, in diesem Video unser Figma-Design mit einem Figma-Plugin namens Locofy in HTML und CSS umzuwandeln mit einem Figma-Plugin namens Locofy in HTML und CSS Sie können es hier sehen, weil ich es schon einmal in meiner Plugin-Liste verwendet habe . Ich habe Locofy Ich habe Aber für den Rest von euch könnt ihr hier auf Aktionen klicken und nach Locofy suchen Du kannst nach Plugins und Widgets filtern. Wie du sehen kannst, wird es dort bereits angezeigt , weil es ein neues Plug-In für mich ist. Aber wenn nicht, kannst du einfach Locofy suchen und dann auf das Plug-In klicken Bevor ich weitermache , sollte ich beachten , dass ich zwischen den Videos den Namen meines Frames aktualisiert habe, sodass er am Anfang einen Homepage-Dash, einen Homepage-Desktop und eine mobile Homepage hat Homepage-Desktop und eine mobile Homepage soll Locofy AI helfen, zu erkennen, dass diese beiden Frames dieselbe Seite, aber unterschiedliche Breakpoints darstellen dieselbe Seite, aber unterschiedliche Schauen wir uns also an, wie gut Locofy das jetzt macht. Bevor wir weitermachen, ist es wichtig zu beachten, dass die Ergebnisse bei der Verwendung dieser KI-Tools wirklich variieren, egal ob es sich um Locofy oder den MCP-Server handelt, was wir etwas egal ob es sich um Locofy oder den MCP-Server handelt, später sehen werden Selbst die Verwendung desselben Figma-Projekts mit derselben Aufforderung kann zu inkonsistenten Denken Sie also daran, dass die Ausgabe inkonsistent sein kann. Wenn Sie also Ihr Ergebnis mit meinem Ergebnis vergleichen, ist es aufgrund zufälliger Variabilität oft einfach nicht dasselbe Okay. Also, wie Sie hier sehen können, habe ich zwei Möglichkeiten. Ich kann den Klassiker oder den Lightning verwenden. Dies sind die beiden Optionen zum Zeitpunkt der Aufnahme. Und wenn Sie sich noch nicht bei Locofy angemeldet haben, müssen Sie sich natürlich für ein kostenloses oder ein kostenpflichtiges Konto anmelden , was auch immer Sie damit machen möchten Ich habe das offensichtlich im Voraus gemacht. Aber jetzt, wo ich ein Konto bei Locofy habe, muss ich diese Schritte beim Einsteigen natürlich nicht noch einmal Aber nur zur Erinnerung: Wenn es dein erstes Mal ist, musst du das Konto einrichten, okay? Sollte für die Zwecke dieses Figma-Kurses völlig kostenlos die Zwecke dieses Figma-Kurses Sie benötigen nicht wirklich mehr Token als das, was sie im kostenlosen Tarif enthalten Also werde ich hier klicken, um in Code zu konvertieren, und ich werde unsere beiden Homepage-Frames auswählen, und hoffentlich erkennt Locofy AI automatisch , dass sie zu derselben Seite gehören Also werde ich auf In Frames konvertieren klicken, und wie Sie sehen können, hat das funktioniert Jetzt ist es schwierig, den Tablet-Rahmen genau hier zu finden. Offensichtlich gibt es keinen Tablet-Rahmen. Was ich also tun könnte, um es einfacher zu machen, wir wollen es der KI so einfach wie möglich machen , ihr Ding zu machen. So werden wir die besten Ergebnisse daraus machen. Ich möchte nicht, dass es denkt, dass der mobile Breakpoint 390 ist Also werde ich hier einfach unser mobiles Design duplizieren und das Duplikat in Tablet umbenennen Also ziehe ich das bis zum Maximum von 768 raus und beschrifte es als Tablet. Okay. Es sind dieselben Elemente und der gleiche Inhalt wie das mobile Design, aber wir geben hier nur an, um zu verdeutlichen, dass alles gleich sein sollte Offensichtlich responsiv. Wir wollen das gleiche Design an diesen beiden Breakpoints. Im Grunde gibt es nur einen Breakpoint, und das ist 768. Okay? Gehen wir also zurück zu Locofy und klicken auf In Code konvertieren Dann wählen wir die drei Frames aus, die auf die Homepage beziehen Und jetzt sollten Sie sehen, dass die verschiedenen Breakpoints korrekt identifiziert werden Alles klar? Also werde ich auf Bestätigen klicken und jetzt erledigt Locofy das Natürlich wird das einige Zeit dauern, also werde ich Teile davon schnell durchgehen also werde ich Teile davon schnell durchgehen Ordnung. Und jetzt können wir eine Vorschau in der Locofy-App sehen eine Vorschau in der Locofy-App Also werde ich das einfach ein bisschen größer machen, wenn ich kann Es sieht so aus, als ob ich das nicht vergrößern kann es sei denn, ich gehe zum Vollbildmodus und das ist nur für den Code. Wie dem auch sei, schauen wir uns das an. Scrollen wir nach unten. Sieht für mich ziemlich gut aus, okay? Es wurde nicht festgestellt, dass Links handelt, aber das ist richtig. Das können wir uns selbst hinzufügen. Gehen wir runter auf 960 und schauen, was passiert. Okay, es gibt etwas Leerraum auf der rechten Seite und wir verlieren irgendwie unseren Header. Sobald wir 768 erreicht haben, sehen wir das Tablet-Design, und ob wir zu 420 oder 390 gehen. Interessanterweise funktioniert es bei 390, aber es wurde nicht herausgefunden, dass wir bei 4:20 immer noch dieses mobile Design wollen dieses Aber das ist nicht unbedingt eine große Sache. Das größte Problem ist, dass der HTML-Code korrekt erstellt wurde, weil wir das CSS ein wenig finalisieren und Kleinigkeiten korrigieren können das CSS ein wenig finalisieren und Kleinigkeiten korrigieren Aber wenn das HTML ein Chaos ist, dann müssen wir das ganze Projekt umgestalten Also werde ich mir hier unseren Code ansehen oder zumindest den Code , den Locofy Es werden einige externe Stylesheets aus der Font-API von Google importiert, aber diese werden wahrscheinlich kaputt gehen, wenn sie ankommen , weil family auf object object gesetzt ist Das ist ein Fehler, den ich in Locofy bemerkt habe. Schauen wir uns unseren Körperteil an. Wie Sie hier sehen können, haben wir den gesamten Homepage-Desktop in einem Div und dann haben wir unseren Header. Wir haben unseren Container, wir haben einen inneren Header. Okay, das ist gut. Header links. Okay, gut, Kopfzeile rechts. Und dann sind wir mit diesem Header fertig . Wir gehen weiter zum Helden. Wir haben den Helden. Homepage-Container. Ich bin mir nicht sicher, warum es hier ein Container und ein Homepage-Container ist. Ich möchte, dass diese konsistent sind. Und hier habe ich normalerweise Probleme mit Locofy gesehen , wie Sie hier sehen können Sie haben zwei verschiedene Versionen des Hero-HTML. Sie haben eine für den Desktop und eine für Mobilgeräte. Aber wie Sie hier sehen können, ist der Inhalt dupliziert. Die Klassennamen sind auch ein bisschen komisch. Sie können hier also sehen, dass wir hier oben einen Container haben. Dann haben wir den Homepage-Container und dann Container zwei. Diese sollten alle den gleichen Namen haben, nur Container. Und dann ist das ein ziemlich seltsamer Klassenname. Wir wollen unsere Klassen nicht wirklich so benennen. Und wenn wir hier runter gehen, Container drei, war die Idee, einfach eine zentralisierte Container-Klasse zu haben. Wir könnten reingehen und die Klassen reparieren, diese Inhaltsduplizierung Aber im nächsten Video werde ich dir zeigen, was normalerweise zu einem besseren Ergebnis für mich führt, okay? Wie Sie sehen können, verwenden wir hier ein Abschnittselement für die Produktkarte. Ich würde nicht unbedingt ein Abschnittselement für die Produktkarte wählen , aber wie Sie sehen können, ist die Struktur zwischen den Karten einheitlich, was bedeutet, dass wir dann zu unserer FOOTA übergehen Wir haben FOOTA-Container 4, was ich lieber als Container bezeichnen würde weil wir auf der gesamten Website denselben Container verwenden und ihn dann mit unseren Bild-FODA-Menüs Ich würde kein B-Element verwenden. Das ist in HTML und CSS ziemlich veraltet. Aber ehrlich gesagt nimmt uns das zunächst viel Arbeit ab. Ich denke, wir können das verbessern und ein ziemlich gutes Ergebnis erzielen. Davon abgesehen habe ich ein besseres Tool für den Job gefunden, das ich im nächsten Video behandeln werde. Bevor wir zur nächsten Methode übergehen, möchte ich nur darauf hinweisen, dass die nächste Option eine kostenpflichtige Option sein wird . Wir benötigen einen Entwicklersitz bei Figma, um ihn nutzen zu falls Sie überhaupt kein Budget haben. Probieren Sie Locofy aus und arbeiten Sie daran, den Code von Locofy zu korrigieren, oder schauen Sie sich einige andere Plugins an den Code von Locofy zu korrigieren, oder schauen Aber für diejenigen unter Ihnen, die mindestens 15 Dollar haben, denke ich, dass es eine Mutter ist, denke ich, dass es eine Mutter ist Schauen wir uns im nächsten Video die Verwendung des MCP-Servers an 11. Figma zum Programmieren mit dem Cursor und dem Figma MCP Server: Okay, wir sind wieder in unserem Projekt in Figma, aber Sie werden vielleicht feststellen, dass die Oberfläche ein bisschen anders ist, und das liegt daran, dass wir derzeit die Desktop-Version der Figma-App ausführen Desktop-Version der Figma-App Jetzt funktionieren beide Apps unglaublich gut. Die Desktop-App und die Web-App fühlen sich für mich genauso an. Aber der Grund, warum ich das Projekt in der Desktop-App geöffnet habe der Desktop-App geöffnet ist, dass dies für den Betrieb eines lokalen MCP-Servers erforderlich ist Okay, ich werde in einer Sekunde darauf eingehen, was das bedeutet. Aber zuerst müssen wir zwei Dinge herunterladen, falls Sie sie noch nicht haben. Erstens benötigen Sie die Desktop-Version von Figma Das finden Sie also in den Figma-Downloads. Ich benutze einen Max, also werde ich auf diesen klicken. Wenn Sie Windows verwenden, klicken Sie natürlich auf dieses. Und dann möchte ich auch, dass du Cursor herunterlädst. Sie können einen anderen Browser verwenden wenn Sie Cursor nicht verwenden möchten, aber die Installationsanweisungen für den MCP werden etwas anders Wenn Sie also genau mitmachen möchten , müssen Sie Cursor verwenden Andernfalls können Sie, wenn Sie mit der Installation von MCPs vertraut sind oder herausfinden möchten , wie das in einem anderen Code-Editor funktioniert, gerne einen anderen Code-Editor verwenden Schließlich, wie ich am Ende des letzten Videos erwähnt habe, nur um Sie darüber zu informieren, dass Sie einen Entwicklersitz benötigen, wenn Sie den MCP-Server verwenden möchten Sie Wenn wir uns die verschiedenen Tarife hier ansehen, wenn Sie ein Jahr als Entwickler arbeiten, werden das 12 Dollar pro Monat sein Monatlich sind es 15 Dollar pro Monat, und wie Sie hier unten sehen können, benötigen wir das, um den MCP-Server nutzen zu können, okay? Wenn Sie also nicht bereit sind dies mindestens einen Monat lang auszuprobieren, Sie dieses Video gerne überspringen Aber ich habe festgestellt, dass ich mit Cursor und dem Figma MCP Server bessere Ergebnisse Cursor und dem Figma MCP Okay, was ich tun werde , ist natürlich, dass ich mein Figma-Programm hier geöffnet habe Aber was ich noch nicht habe, ist ein Ordner zum Einfügen des generierten Codes Also öffne ich meinen Skillshare-Ordner und rufe diese Access-Website auf Okay. Dann gehe ich zu Cursor und öffne diesen Ordner. Das ist Cursor, es sieht sehr nach Visual Studio-Code aus, dem üblichen Code-Editor, den ich verwende. Und um Cursor über den MCP-Server mit Figma zu verbinden , gehen wir auf dem Mac zu dem Menüpunkt , auf dem Cursor steht Es wird leicht von Ihrem Bildschirm abweichen, aber sobald ich darauf klicke, werden Sie sehen, dass dieses Menü angezeigt wird. Dann gehen wir zu den Einstellungen. Dann gehen wir zu den Cursor-Einstellungen. Dann werden wir hier links nach MCP suchen , und Sie können sehen, ich bereits zwei MCP-Server eingerichtet habe, also werde ich sie schnell entfernen und mit Figma neu einrichten Okay, also ich habe sie entfernt, und jetzt können Sie mit einem leeren MCPT-JCNFle sehen , Sie können hier klicken, um ein benutzerdefiniertes MCP hinzuzufügen, und dann werden wir innerhalb dieses Objekts hinzufügen, lassen Sie mich hier einfach hineinzoomen , etwas mehr Platz schaffen. Wir können das also deutlich sehen. Ich gebe das Wort Figma mit einem F ein. Und dann können Sie hier den Vorschlag, die URL und dann die Adresse des lokalen MCP-Servers sehen und dann die Adresse des lokalen MCP-Servers Ich werde dafür auf Speichern klicken. Nun, es ist wahrscheinlich, dass Cursor das bereits vorgeschlagen hat, weil ich das zuvor getan hatte. Wenn Sie sich also fragen, was die URL speziell in Ihrem Fall ist, denke ich, dass sie unabhängig vom Benutzer genau dieselbe ist, aber wenn Sie den MCP-Server auf Figma einschalten, erhalten Sie die Gehen wir also zurück zu Figma. Wir werden hier auf das sogenannte Figma-Menü klicken. Wir gehen runter zu den Einstellungen. Und dann werden wir sicherstellen , dass die Lokalen MCP-Server aktivieren aktiviert ist Offensichtlich habe ich das bereits aktiviert, also schalten wir es aus und gehen dann zurück zum Menü, und ich zeige Ihnen, wie das und ich zeige Ihnen, wie das funktioniert, falls Sie es noch nicht aktiviert Ich klicke auf Lokalen MCP-Server aktivieren. Es gibt Ihnen hier tatsächlich die Anweisungen, damit Sie sie hier sehen können, wir können es Figma oder Figma Desktop nennen und das gibt Ihnen die Vielleicht kopiere ich das einfach. Das hat sich tatsächlich geändert, seit ich das das letzte Mal gemacht habe. Beim letzten Mal wurde die URL tatsächlich in einem kleinen Tooltip hier angezeigt, und dann habe ich sie einfach hierher kopiert. Aber wie gesagt, ich glaube nicht, dass sich diese URL jemals ändert. Es ist eine lokale URL. Wenn Sie also den MCP-Server auf Ihrem Desktop für Figma aktiviert haben , ist dies wahrscheinlich die URL Okay? Wenn wir mcp dot JCN herausklicken, sollten wir jetzt sehen können, ob ich herauszoome Figma-Desktop ist mit diesem grünen Symbol hier aktiviert Okay. Jetzt können wir den Code tatsächlich aus unserer Figma-Datei generieren Also werde ich hier eine Eingabeaufforderung erstellen Ich werde sagen, dass ich in meiner Figma-Datei einen Abschnitt mit meinen Frames für die Homepage habe Und was ich tun werde, ist, dass ich nur eine dritte Version erstellt habe, um Locify zu helfen, also werde ich das loswerden Und ich werde es einfach umbenennen. Anstatt mobil werde ich sagen, ich werde es tatsächlich mobil halten und dann sage ich Cursor einfach , dass ich das an einem bestimmten Breakpoint haben möchte. Okay? Also lass mich das in meiner Figma-Datei vergrößern In meinem Figma-File Aber-Bereich mit meinen Frames für die Homepage hat der Frame-Homepage-Desktop das vorgesehene Aussehen und Layout ab 769 Pixeln und höher, und der Homepage-Punkt Mobile steht für Design und Layout Okay? Bitte generiere mir den HTML-Code und das CSS für diese Homepage, wobei dupliziertes HTML auf ein absolutes Minimum beschränkt wird. Bevor ich an dieser Eingabeaufforderung die Eingabetaste drücke, habe ich mit demselben Projekt etwas Ähnliches in Cursor geschrieben und ein bestimmtes Ergebnis erzielt. Aber wie gesagt, die Ergebnisse können variieren. Ich habe bestimmte Dinge in die Eingabeaufforderung geschrieben, zum Beispiel die Reduzierung von doppeltem HTML auf ein absolutes Minimum , weil wir im vorherigen Video auf Locofy AI mit dem doppelten HTML für den Heldenbereich gesehen haben vorherigen Video auf Locofy AI mit dem doppelten HTML für den Heldenbereich Sofern es nicht unbedingt erforderlich ist, wollen wir kein doppeltes HTML Und alles andere, was Ihnen einfällt, um der KI mehr Kontext zu geben oder ihr zu helfen die Anforderungen besser zu verstehen, können Sie hier eingeben. Aber die Hauptsache ist, dass Cursor versteht, dass die beiden Frames dieselbe Seite repräsentieren, aber an unterschiedlichen Haltepunkten Und was ich an Cursor übrigens mag , ist, dass ich tatsächlich genau den Breakpoint eingeben kann , den ich möchte, was kein Feature von Locofy AI ist Okay? Also werde ich diesen Knopf drücken, um das an den Agenten zu schicken und zu sehen, womit es zurückkommt. Möglicherweise müssen wir hier ein paar Mal auf Ausführen klicken. Ich zoome ein wenig heraus und ziehe das Ganze rüber. Klicken Sie weiter auf Ausführen. Dies sind Methoden auf dem MCP-Server selbst. Also werde ich diese einfach weiter genehmigen. Und da die App dafür etwas Zeit benötigt, werde ich natürlich App dafür etwas Zeit benötigt, einen Großteil dieses Prozesses zu schnell durcharbeiten. Mm. Okay, es sieht also so aus, als ob es fertig ist. Es gibt uns auch viele Informationen darüber, was es getan hat. Sie können also ein responsives Design sehen. Es hat eine einzige HTML-Struktur mit Breakpoint, die sowohl für Desktops als auch für Mobilgeräte funktioniert . Das ist es, was wir wollen CSS-Klassen zum Ein - und Ausblenden von Elementen je nach Bildschirmgröße, wiederverwendbare Komponenten für Produktkarten und Navigationsmenü. Perfekt. Okay. Also nach dem, was wir hier lesen, scheint es ziemlich gut zu sein. Also werde ich Keyball drücken. Ich habe kein Feedback. Natürlich habe ich mir den Code nicht angesehen, aber Sie können natürlich Feedback zu dem Code geben , den er generiert. Stattdessen möchte ich nur diesen Code in unserem Browser ausführen und das Ergebnis sehen. Lass uns das zuerst machen. Um das zu tun , werde ich hier unten klicken, um Live Server zu starten. Das ist ein Plug-In, also wenn Sie es derzeit nicht haben, müssen Sie sich nur die Erweiterungen ansehen, und wenn ich in meine Erweiterungen hier schaue, Live-Server genau hier, das ist die von RIT WIC Day Lassen Sie mich die Ansicht verkleinern, damit Sie die gesamte Liste oder den Großteil davon sehen können die gesamte Liste oder den Großteil davon Live-Server von RIT Wi Day. Mit dieser Karte können Sie hier unten auf Go Live klicken und jetzt haben wir unsere Website in unserem Browser Lassen Sie uns den Mauszeiger über unsere Menüelemente bewegen, und wie Sie sehen können, befindet sich dort ein Cursorzeiger, was korrekt ist Das hatten wir in Locofy AI nicht, und die Schaltfläche hat einen schönen kleinen Die Produktkarten sehen ziemlich gut aus, aber sie haben eine abgerundete Kante, was nicht das ist, was ich festgelegt habe, und sie haben ein bisschen Schatten Der abgebildete Kollektionstext befindet sich in der Mitte, nicht links, aber vielleicht würden wir stattdessen dieses Design verwenden wollen . Es sieht ziemlich gut aus. Also auf diesem Bildschirm, Whip, das sieht verdammt gut Ich bin ziemlich zufrieden damit. Schauen wir uns die Webseite an, wie sie auf verschiedene Bildschirmpeitschen reagiert Okay, ziemlich gut. Wie du hier auf etwa 958 sehen kannst, sind die Karten ein bisschen gequetscht Wir würden das ein bisschen reparieren wollen. Sobald wir unter 768 sind, bekommen wir das Hamburger-Menü und die Menüpunkte hier. Das wollen wir nicht wirklich, und die Karten stapeln sich ein bisschen komisch, aber das lässt sich leicht beheben Gehen wir runter auf 390. Okay. Und mit Ausnahme dieses Menüs hier und der Position des Hamburger-Menüs, nicht links vom Logo, sieht das ziemlich okay aus, und Sie können sehen, dass wir beschlossen haben, unsere Produktkarten zu stapeln , anstatt sie horizontal überlaufen In Ordnung? Also ich bin ziemlich beeindruckt von dem Zeug, das falsch gemacht wurde, wir können es wahrscheinlich leicht reparieren Lassen Sie uns einfach überprüfen, ob der HTML-Code gut geschrieben wurde. Also gehe ich zu Indexpunkt-HTML und dann werde ich das vielleicht schließen oder versuchen, hier etwas mehr Platz zu schaffen, den Chat schließen. Wie Sie hier sehen können, haben wir einen Link zur Google-Schrift-API, die im Gegensatz zum Locofy-Beispiel tatsächlich funktioniert im Gegensatz zum Locofy-Beispiel Und wenn wir uns den Header ansehen, haben wir Ebenen, die die Namen nachahmen, die wir in unserer Figma eingerichtet haben. Und genau das wollte ich erreichen Also führe unseren zentralen Container an, Header innen, Kopf links, Header rechts. Das sieht ziemlich gut aus. Sie können sehen, dass wir hier einen Abschnitt haben, einen HTML-Satz für den Helden. Es verwendet hier dieselbe Containerklasse, was genau das ist, was wir wollen. Es verwendet diese Containerklasse auf unserer gesamten Webseite. Perfekt. Es wird kein Abschnitt für die Produktkarte verwendet, was ein kleines Detail ist, aber ich denke, es ist trotzdem viel intelligenter. Scrollen Sie nach unten, um die Fußzeile zu sehen. Nochmals, diese Containerklasse haben wir für die gesamte Seite, und ich bin ziemlich zufrieden mit diesem HTML Okay? Das Einzige , was wir korrigieren müssen, ist, dass diese Bilder derzeit über Figma Wir müssen die Bilder also nur entweder in den Ordner hier oder in eine andere Adresse als unsere lokale Adresse hier verschieben entweder in den Ordner hier oder in eine andere Adresse als unsere lokale Adresse hier da wir sie nicht im Internet veröffentlichen konnten, da es sich um eine lokale Figma-Serverversion handelt Internet veröffentlichen konnten, da es sich um eine lokale Figma-Serverversion Okay. Aber alles in allem bin ich mit diesem Ergebnis sehr zufrieden. Und dann das nächste Video, lassen Sie uns unseren Code ein wenig bereinigen, was nicht zu viel Arbeit sein sollte, wenn man bedenkt, dass die KI bei der automatischen Generierung des Codes ziemlich gute Arbeit geleistet hat . Ich zeige dir, dass Figma in variablen Modi verfügbar ist, und dann beenden wir den Kurs Ich sehe dich also in der nächsten. 12. Letzte Codebereinigung: Okay, also im letzten Video konnten wir mithilfe des MCP-Servers Figma und des KI-fähigen Co-Generators Cursor des KI-fähigen Co-Generators Cursor unsere Webseite mit der richtigen HTML-Struktur und den richtigen Klassennamen sowie dem CSS erstellen , damit sie auf jeder Bildschirmgröße funktioniert, ich meine, um responsiv zu sein, aber es ist nicht zu 100% geschafft Wir können dieses Ergebnis nicht einfach nehmen und es direkt versenden. Wir müssen einige Änderungen vornehmen. Aber ich denke, Sie werden mir zustimmen, dass KI einen ziemlich guten Job gemacht hat. Wir müssen nur die letzten, sagen wir, 10% der Verfeinerung vornehmen, um dieses Design zu reparieren Okay. Also, wenn wir uns das ansehen, ist das der größte Bildschirm mit, aber wenn ich das vielleicht auf einem viel größeren Bildschirm simuliere , frage ich mich, ob wir das hochschalten können , um zu sehen, wie es auf 4.000 aussieht. Okay, cool. Also da können Sie sehen, dass das ein unwahrscheinlicher Bildschirm ist, aber trotzdem etwas , das möglich ist. Und das einzige Problem, das ich bei dieser Bildschirmpeitsche sehe , sind die Gesichter der Models. Ich erinnere mich, dass ich vorhin gesagt habe als wir die Hintergrundfüllung hinzugefügt haben, dass es schön wäre, die Positionierung, den Ankerpunkt des Hintergrundbilds, zu kontrollieren Ankerpunkt des Hintergrundbilds Das können wir also in HTML und CSS tun. Lass uns hier in unseren Heldenbereich klicken. Schauen wir uns an, wie sie das Bild aufgenommen haben. Ja, also haben sie es einfach über das CSS als Hintergrundbild auf das Element gelegt . Und was ich tun werde, damit wir uns nicht auf die Figma MCP-Server verlassen, ich werde diese Asset-Dateien verschieben und das umgestalten Aber zuerst möchte ich die Position des Hintergrunds ändern Es tut mir leid. Hier ist alles ein bisschen eng. Und wie Sie sehen können, füllt es den ganzen Raum aus, wenn ich mit der Maus darüber füllt es den ganzen Raum aus, wenn ich mit der Aber im Grunde suchen wir hier nach der Position im Hintergrund Und statt in der Mitte möchte ich, dass es oben ist. Also, das sieht ein bisschen komisch , weil ihr Kinn ein bisschen abgeschnitten ist. Also vielleicht wollen wir einen weiteren Grenzwert setzen und bei sehr großen Bildschirmen vielleicht die Höhe des Abschnitts noch größer machen. Also werde ich hier meine Entwicklungstools verwenden , um eine größere Höhe einzustellen, vielleicht nicht 12. Hundert, aber 1.000 Pixel vielleicht schaue ich mir den Header an , der 98 Pixel hoch ist, und ich lasse ihn bis zum unteren Rand der Falte ausdehnen, also kann ich das tun, indem ich Cuk auf 100% Viewport-Höhe minus dem, was es wieder war, 98 Pixel, setze Okay. Okay. Gehe ich zurück zu Cursor. Ich gehe hier zum Ende unserer CSS-Datei, gebe die Mindestbreite der Medien ein und sagen wir, 1.500, um damit zu beginnen. Der Selektor ist Hero, und wir setzen die Höhe auf Calk 100 Viewport Height Okay? Und dann ändern wir die oberste Position im Hintergrund, nicht in einer Medienabfrage, sondern generell. Also werden wir nach einem Helden suchen. Anstatt die Position im Hintergrund in der Mitte zu ändern, ändern Sie sie nach oben. Okay. Das sieht ein bisschen besser aus. Aber statt oben können wir etwas noch gezielteres wählen , und das heißt, in die Hintergrundposition zu bringen , wir haben hier unser Attribut verloren. Lass es mich einfach direkt im Code hier machen. Anstatt oben mache ich die Hintergrundposition Y. Und dann gebe ich etwa 5% ein. In Ordnung. Lassen Sie uns damit herumspielen, sodass wir etwa 5% machen können, was es im Vergleich zu oben ein wenig nach oben bewegt , wie Sie hier sehen können. 5% reduzieren den Raum über dem Kopf des Typen ein wenig. Okay, also lass uns unsere Bildschirmbreite verringern. Denken Sie daran, wir haben das auf 1.500 festgelegt. Wenn wir also auf 1.500 runterkommen, sollte das alles für uns funktionieren. Eigentlich müssen wir auch unsere Hintergrundposition X festlegen , denn wie Sie hier sehen können, ist sie nicht zentriert. Also bringen wir unsere Mittelpositionierung auf der horizontalen Achse zurück , so. Okay, großartig. Und wenn es dann unter 1.500 fällt, wirst du sehen, dass die Höhe nicht mehr so hoch ist, oder? Und bis zu 1.200, ich denke, alles sieht gut aus. Ich komme damit klar Wenn wir wollten, dass unsere Karten mehr wie das Originaldesign ohne den Randradius aussehen , wenn wir den Zustand der Hufe und die Schatten entfernen wollten, könnten wir das tun Aber ich bin ziemlich okay damit. Das einzige, womit ich ein Problem habe ist, dass sie ziemlich groß sind, also weiß ich nicht, ob ich das will. Lassen Sie mich einfach den responsiven Modus entfernen und entschuldigen dafür, dass das hier sehr eng Und mal sehen, was das so macht. Wenn Sie sich unseren Container ansehen, ist er nur 847 Pixel breit, weil er eine massive Polsterung hat. Okay. Also in der Container-Klasse wurde ein riesiges Polster gesetzt, was nicht das ist, wonach wir suchen Ich glaube an die Figma, wir haben die Container-Polsterung auf 16 gesetzt Also aus irgendeinem Grund lässt es mich das nicht ändern. Aber lassen Sie uns hier zu unserem Code zurückkehren und den Container finden. Und dann denke ich, wenn wir noch einmal danach suchen, können Sie sehen, dass es einen Abstand von 16 Pixeln hat , aber hier nur bis zu 480 Pixel Also können wir das einfach komplett entfernen. Von den Desktop-Stilen hier und dann von denen, die unter 480 liegen, können wir das auch entfernen, weil das einfach überflüssig ist und wir bleiben einfach bei einer Polsterung von 16 Pixeln auf beiden Seiten Nun, wenn wir uns das ansehen, sind sie nicht so zerquetscht, ziemlich einfach zu beheben. In Ordnung. Also lasst uns nochmal unsere Super-Breitbildgrößen überprüfen , wie sieht das aus? Lassen Sie uns 4.000 einwählen. Cool. Damit bin ich zufrieden. Wenn wir auf 1.200 sinken, bin ich damit ziemlich zufrieden. Gehen wir runter auf 1.000. Cool, cool. In Ordnung. Also sind wir wahrscheinlich da, wo wir jetzt sind. Also das ist 1030. Bringen wir es runter, runter, runter, runter, runter Ich glaube, es wird ein bisschen eng hier. Wir sollten vielleicht einen Breakpoint von vielleicht 10.000 bis zum mobilen Breakpoint setzen vielleicht 10.000 bis zum mobilen Breakpoint Vielleicht möchten wir das in ein anderes Raster aufteilen, vielleicht ein solches Zwei-mal-Zwei-Raster Und dann ändern die Produktkarten die maximale Breite auf ihnen, also sieht es ein bisschen so aus. Und ich mache das. Lassen Sie uns hier einen Breakpoint am Ende unserer CSS-Datei erstellen . Min mit 769 Pixeln und Max mit 10.000. Und was haben wir dann Wir werden die maximale Breite der Produktkarte entfernen , Max mit, sagen wir, 100%, und das, was war das, Produktraster. Eigentlich werde ich das einfach kopieren. Spart mir etwas Zeit, das aufzuschreiben, setze das auf zwei, die gleiche Lücke wie zuvor. Dann können Sie jetzt sehen, wenn wir von tatsächlich kommen, habe ich das vielleicht auf zu viele Nullen gesetzt. Da haben wir's. Sobald wir über 10.000 sind, werden wir horizontal vier haben. Aber sobald wir hier unten sind, werden Sie sehen, dass wir ein Viererraster haben. Das sollte also für alle unsere Desktop-Bildschirmgrößen gut sein . Also 769, viel zu groß, wir haben bis zu 4.000 getestet Schauen wir uns jetzt die Zahl 769 an. Und wie Sie sehen können, haben wir hier noch einiges zu tun. Wir wollen also nicht mehr, dass dieses Menü angezeigt wird. Es heißt also nur Desktop, was interessant ist. Und es gibt eine Klasse , die so eingestellt ist, dass sie keine anzeigt. Aber dann wird es hier natürlich von dieser anderen Klasse überschrieben hier natürlich von dieser anderen Klasse Es gibt ein paar Dinge, die wir tun können. Wir könnten uns hier auf Wichtiges konzentrieren. Wir könnten die Reihenfolge ändern. Da nur Desktop steht, bin ich damit einverstanden, diese beiden richtig einzustellen, weil es ein ziemlich spezifischer Klassenname ist. Normalerweise muss man bei der Wichtigkeit vorsichtig sein, aber wenn ich die Klasse Desktop nur auf etwas setze, ist es ziemlich sicher, dass ich nicht möchte, dass das angezeigt wird. Okay. Nun, die andere Sache in der Kopfzeile ist, dass das mobile Menü auf der rechten Seite ist . Ich weiß nicht, wie die KI das falsch verstanden hat. Das war überhaupt nicht Teil des Designs, aber wir können hier einfach in unsere Indexdatei gehen und diese direkt von Header of Right nach Header links verschieben . Okay? Ups, erschaffe den Raum dort, lege ihn da rein und du wirst sehen, dass er im Kopf oder links ist Die Ausrichtung sieht ein bisschen komisch aus. Sie sind so eingestellt, dass sie Elemente mittig ausrichten, aber manchmal haben Symbole eine etwas seltsame Höhe. Wie Sie hier sehen können, ist die Schaltfläche etwas größer als das darin enthaltene SVG. Es gibt ein paar Möglichkeiten, wie wir das beheben können. Eine davon ist, das Ganze mit Display-Flex auszustatten. Ich verstehe. Nur auf dem Handy, Block Important blockiert uns. Also ja, ich verwende „ Wichtig“ nur , wenn wir von „Keine anzeigen“ sprechen, und dann setze ich hier Display-Flex ein, wobei Elemente so ausgerichtet werden, dass sie auf der eigentlichen Schaltfläche selbst zentriert sind, und Sie können sehen, dass, wenn das aktiviert ist, sie quasi an die richtige Position bewegt wird. Also gehe ich hier auf Menu Toggle und dann auf Menu Toggle. Und wie Sie hier sehen können, anstatt zu versuchen, das ganze HTML und CSS aus dem Design zu erstellen , verwende ich KI, um etwa 80% der Arbeit herauszuschneiden, und dann kann ich das mit ein bisschen Code-Bereinigung verfeinern das mit ein bisschen Code-Bereinigung Diese stapeln sich also bereits übereinander, was meiner Meinung nach nicht der richtige Schritt ist Finden wir also hier unsere Produkt-Grid-Klasse. Und da steht unter 768, wir wollen, dass es eine Spalte ist. Lass uns das nicht tun. Geben wir ihm zwei Spalten. Aber wenn wir zu noch kleineren Bildschirmgrößen kommen, wollen wir wahrscheinlich, dass sie als eine Spalte gestapelt werden, okay? Und dann die Produktkarte Max WIP, wir können die maximale Breite wahrscheinlich bei jeder Bildschirmgröße einfach komplett entfernen bei jeder Bildschirmgröße einfach komplett Sorry, lass mich das nochmal suchen, denn das Maximum mit sollte sowieso durch den Container mit begrenzt werden , den verfügbaren Speicherplatz auf wirklich großen Bildschirmgrößen Also überprüfe das einfach noch einmal. Gehen wir zurück zu 4.000, und Sie werden sehen, dass die Karten sowieso nicht wirklich über 280 WIP hinaus wachsen, weil es vier davon in einer Reihe gibt und sie sich in einem Max WIP-Container befinden In Ordnung. Also zurück zu, sagen wir einfach 650. Das sieht ziemlich gut aus. Okay. Und dann kommen wir zu dem Punkt, ich verwende hier den Responsive-Modus, um einzuwählen. Telefon 12 Pro. Und wie Sie hier sehen können, sind diese Produktkarten etwas zu groß. Ich denke also, bei dieser Breite wollen wir eine einzelne Spalte. Wie Sie hier sehen können, gibt es bereits einen Breakpoint für 480. Ich werde also vor der Produktkarte hier einen Selektor für das Produktraster einfügen und Spalten der Rastervorlage auf einen FR setzen Cool. Ich mag das auf dem Handy. Okay. Also los geht's, Leute. Es ist jetzt praktisch ungebrochen, aber nicht besonders funktionstüchtig und diese Knöpfe machen eigentlich nichts Also müssten wir das natürlich entwerfen und bauen Vielleicht möchten wir den Cursor so einstellen , dass er auf diese Karten zeigt. Das werde ich tun. Also setze den Cursor auf den Zeiger. Und jetzt zeigt es an, dass ich zum jeweiligen Produkt gehe, wenn ich auf diese Karten klicke . Wenn wir noch einen Schritt weitergehen wollen, dann können wir KI immer noch mit Cursor verwenden, nur ohne ein Figma-Design oder mit einem Figma-Design, wenn wir hier reingehen und unser Seitenleistenmenü und unseren Einkaufswagen erstellen würden hier reingehen und unser Seitenleistenmenü und unseren Einkaufswagen erstellen Wir könnten das mit Figma machen und dann in einer Aufforderung darauf verweisen. Aber sagen wir einfach, wir bauen das Design nicht. Wir können Cursor trotzdem bitten, es für uns zu erstellen. Also müssen wir unseren Cursor-Agenten zurückbringen. drücke ich Command I und schon öffnet sich wieder ein Chat. Und was ich tun werde, ich werde nur sicherstellen, dass ich die genaue Klasse des Menüschalters kenne die genaue Klasse des Menüschalters Ich kopiere das und sage, auf dem Handy habe ich weniger als 769 Pixel Wenn der Benutzer darauf klickt, möchte ich, dass von links eine Seitenleistenschublade mit den gleichen Menüelementen erscheint von links eine Seitenleistenschublade mit den , da es am besten ist, wirklich spezifisch zu sein Wenn Sie tatsächliche Klassen aus dem HTML verwenden , erhalten Sie das beste Ergebnis Also werde ich das Header-Menü als Punkt-Header-Menü finden. Okay? Wenn der Benutzer auf Mobilgeräten auf diese Klasse klickt, möchte ich, dass von links eine Seitenleistenschublade mit den gleichen Menüelementen wie dieses bestimmte Element Okay? Wenn Sie andere Anforderungen haben, wenn Sie wirklich gut darin sind, zu beschreiben, was Sie wollen , können Sie weitere Details hinzufügen, aber ich werde einfach die Eingabetaste drücken und sehen, was sich Cursor einfallen lässt. Wie Sie sehen können, durchläuft er Liste von ein bis zwei und aktualisiert unseren Code. Wenn wir ein Figma-Design für die Schublade hätten, würde ich diese Aufforderung aktualisieren und sagen: Infigma, wir haben die Bitte folgen Sie diesem Design. In diesem Fall tun wir das nicht, wir lassen Cursor das Design für uns entscheiden. Und ich werde einfach auf Keep A klicken und jetzt schauen wir uns das an. Wenn wir uns unser Design auf dem Handy ansehen und ich hier auf den Menüpunkt klicke. Es hat tatsächlich einen ziemlich guten Job gemacht. Ich bin beeindruckt. Da hast du's. Wir haben also dieselben Menüelemente wie auf dem Desktop. Oh, und jetzt haben wir sie verloren. Also lasst uns herausfinden, wo sie hingegangen sind. Nur Desktop nicht wichtig. Nur der Desktop befand sich nicht einmal in einem Breakpoint. Anstatt es so zu haben, würde ich es lieber andersherum haben Also nur Desktop bis Media Max WIP, dafür haben wir wahrscheinlich schon eine Medienabfrage Suchen Sie stattdessen nach der Medienabfrage für Max WIP 768 und fügen Sie dort nur die neun wichtigen Desktop-Displays Okay. Jetzt können Sie sehen, dass wir unser Desktop-Menü haben, und auf dem Handy wird es zu diesem Hamburger-Symbol zusammengeschrumpft Wir klicken darauf und wir haben hier die gleichen Menüpunkte. Okay? Auf ähnliche Weise können wir mit KI auch eine Schublade für den Einkaufswagen erstellen. Aber damit das funktioniert, müssen wir natürlich eine Menge JavaScript-Funktionen erstellen . Und viel mehr Logik hängt von der Plattform ab, die Sie verwenden. Aber ja, ich bin mit diesem Ergebnis ziemlich zufrieden. Ich habe dieses Video vielleicht 15 bis 20 Minuten lang aufgenommen , und wir sind in der Lage, das von der KI generierte Ergebnis so aussehen zu lassen, dass es vollständig auf Mobilgeräte reagiert und vollständig auf Mobilgeräte reagiert eine Seitenleistenschublade für das mobile Menü verfügt Ich ermutige Sie daher, sobald Sie den Code für Ihr eigenes Projekt generiert haben, den HTML- und CSS-Code zu bereinigen und uns das Ergebnis im Abschnitt Klassenprojekt dieser Klasse mitzuteilen Abschnitt Klassenprojekt dieser Klasse 13. Figma-Variable Modi: Okay, in diesem letzten Video, bevor wir mit dem Fazit abschließen, bin ich wieder bei Figma, und der Grund dafür ist, dass ich Ihnen ein cooles Feature zeigen möchte , Figma, das für das, was wir gemacht haben, relevant ist und das ich Ihnen empfehle, zu verwenden, aber dafür ist Figma als Entwickler oder höher erforderlich, was bedeutet, dass es sich um ein kostenpflichtiges Feature handelt Deshalb habe ich es dir nicht früher gezeigt. Aber jetzt, wo wir das MCP durchgegangen sind und gezeigt haben , was das Dev-Set oder höher erfordert , dachte ich, wenn du dich entschieden hast, zu einem kostenpflichtigen Plan mit Figma zu wechseln , dann wirst du Modi verwenden wollen Okay? Also habe ich vorhin darauf angespielt, als wir unsere Variablen eingerichtet haben Aber wenn wir hier zu unseren Variablen zurückkehren und ich zur Größenbestimmung übergehe , können Sie sehen, dass ich Abschnittspolsterungen und Abschnittspolsterungen mobil habe und Abschnittspolsterungen mobil Das ist der perfekte Anwendungsfall für einen Modus. Macht es Sinn, zwei verschiedene zu haben, wenn sich nur der Modus ändert Okay? Also werde ich hier auf diese Schaltfläche klicken, um einen neuen Variablenmodus zu erstellen. Und mal sehen, ob ich das erweitern kann. Da haben wir's. So können wir beide Modi gleichzeitig sehen. Und statt Modus eins und Modus zwei sage ich Desktop-Standard und dann erstelle ich einen für Mobilgeräte. Okay? Für Seitenbreite und Seitenabstand haben wir dieselben Werte, unabhängig davon, ob es sich um Desktop- oder Mobilgeräte Wir können dies jederzeit ändern, wenn wir wollen, aber hier können Sie sehen , dass wir beim Abschnittsabstand offensichtlich einen Unterschied haben Also werde ich hier die Abschnittspolsterung im mobilen Modus auf 35 setzen, sodass ich diese Variable gleich hier löschen kann, okay Damit kann ich dieselbe Variable auf dem Desktop und auf dem Handy verwenden , dann aber den Gesamtmodus des übergeordneten Frames ändern , um diese Variable zu ändern. Okay? Mal sehen, wie das funktioniert, wenn ich jetzt zu meinem mobilen Design übergehe . Wir sollten den festen Seitenabstand von 35 sehen. Sie sehen hier, dass das etwas ausgegraut und nicht verknüpft ist, weil wir diese Variable entfernt haben Wenn ich hier reingehe und es einfach auf Abschnittspadding setze, entspricht das dem größeren Abschnittspadding auf dem Desktop, aber das größeren Abschnittspadding auf dem Desktop, werden wir in nur einer Sekunde beheben Also werde ich das auf Abschnittspolsterung einstellen. Damit es nun auf einen anderen Modus reagiert, müssen wir angeben, in welchem Modus dieser Frame betrieben werden soll Wenn ich also auf den mobilen Frame auf meiner Homepage klicke und hier zum Erscheinungsbild gehe, siehst du dieses Symbol hier. Verwende den variablen Modus. Also klicken wir darauf, gehen zur Größenbestimmung und klicken auf Mobil. Jetzt können Sie sehen, ob ich hier rübergehe und wir hier in unseren Bereich Polsterung gehen, dort sind es 35, aber hier drüben sind es 75. Offensichtlich mussten wir in der Desktop-Version keinen Modus einstellen, aber machen wir das der Vollständigkeit halber, weil es automatisch zur ersten Option Wenn wir möchten, dass es spezifisch ist, könnten wir den Modus dieses Frames auf den Desktop-Standard setzen , und Sie können den Modus tatsächlich hier sehen. Und das ist nur ein einfaches Beispiel für die Verwendung von Modi. Lass mich dir jetzt etwas Cooles zeigen. Ich weiß nicht, wie ich das beschreiben soll, also werde ich es nur zeigen , aber wir könnten zum Beispiel die Textgröße der Schaltfläche auf Desktop und Handy als Variable festlegen die Textgröße der Schaltfläche auf Desktop und und sie dann je nach Modus ändern. Wie Sie sehen können, sind es 20 auf dem Desktop und 14 auf dem Handy. Anstatt es als zwei verschiedene Werte zu verwenden, was ich tun kann, um das Ganze automatisierter zu machen, und auch das ist optional. Wir haben immer noch ein gutes Ergebnis mit der KI-Codegenerierung ohne diesen Code erzielt. Aber wenn Sie das Ganze noch einen Schritt weiter gehen möchten, wenn ich hier näher darauf eingehen und Textgröße für die Schaltflächen erstellen würde. Und dann war der erste auf dem Desktop 20, nicht wahr? 20, glaube ich, und der andere war 14. Was wir jetzt tun können, ist, dass ich hier drüben gehen und das ändern kann, um stattdessen eine Variable zu verwenden. Also scrolle ich einfach nach unten, klicke auf dieses Symbol für Variable wähle die Textgröße der Schaltfläche. Dadurch wird es automatisch auf 20 gesetzt, da der Modus des übergeordneten Frames Desktop ist. Und wenn ich hierher gehe und dasselbe auf der mobilen Version mache, die Textgröße der Schaltfläche ändere, wird es 14 sein. Und das Coolste ist, wenn ich diese Komponente duplizieren würde , würden wir wahrscheinlich den Button-Text auf der übergeordneten Komponente selbst platzieren wollen den Button-Text auf der übergeordneten Komponente selbst Also werde ich jetzt die Textgröße der Schaltfläche ändern, richtig? Also, wenn wir diese Schaltfläche duplizieren würden, und das ist hoffentlich visuell offensichtlich, wenn ich es mache. Aber wenn ich dieses Element von hier nach hier ziehe, können wir einen sofortigen Wechsel von einer Bildschirmgröße zur anderen sehen . Okay? Also das ist nur ein bisschen was mit den Modi. Wir könnten tatsächlich unseren gesamten Header nehmen und einen Großteil dieses Inhalts in Variablen umgestalten, einen separaten Modus für diese Variablen einrichten und dann den Abschnitt in den anderen Frame ziehen, und er wird automatisch in das mobile Design umgewandelt Dies ist jedoch nicht unbedingt erforderlich, um mit unserer KI-Codegenerierung ein hervorragendes Ergebnis zu erzielen mit unserer KI-Codegenerierung Modes ist nicht etwas, das in HMLCSS nativ ist, sondern nur etwas, das unsere Variablen ein bisschen übersichtlicher macht unsere Variablen ein bisschen übersichtlicher Zum Beispiel ist es aus Sicht des FIGMA-Projekts etwas sauberer, zwei Abschnittsabstände zu haben, die im Wesentlichen dasselbe sind , aber für unterschiedliche Bildschirmgrößen denselben Namen für beide Modi haben, aber nur den Wert basierend auf dem Modus zu ändern aber nur den Wert basierend auf dem Okay. Nachdem dieser kleine Tipp geklärt ist, lassen Sie uns im nächsten Video zum Schluss kommen und über Ihr Klassenprojekt sprechen. 14. Schlussbemerkung und Kursprojekt: Damit ist dieser Kurs über Figma-Webdesign für Webentwickler Für Ihr Klassenprojekt empfehle ich Ihnen, Ihr erstes Webdesign-Figma mit den Techniken zu erstellen Ihr erstes Webdesign-Figma , die wir in diesem Kurs behandelt haben Richten Sie Ihr Layout mit automatischem Layout und Komponenten ein, benennen Sie Ihre Ebenen richtig und bereiten Sie Ihre Designs so vor, dass sie mit einem der KI-Tools, die wir in dem Kurs untersucht haben , in Code umgewandelt werden können mit einem der KI-Tools, die wir in dem Kurs untersucht haben , in Code wir in dem Kurs untersucht haben , in Wenn du dein Design fertiggestellt hast, lade es in den Bereich Klassenprojekte hoch, um deine Arbeit mit anderen Schülern zu teilen oder um Feedback von mir persönlich zu erhalten Wenn dir dieser Kurs gefallen hat, hinterlasse eine positive Bewertung und sieh dir auch meine anderen Kurse hier auf skillshare.com an, wo ich mich eingehender mit Webentwicklung, Shopify und anderen modernen Tools beschäftige Danke wie immer fürs Zuschauen und wir sehen uns beim nächsten