Figma Sites: Erstellen und Starten einer Website

1. Intro zu Figma-Sites: Mit Figma Sites können Sie Ihre gesamte Website von Figma aus entwerfen und veröffentlichen Ihre gesamte Website von Figma aus Kein Code, keine Entwicklung, kein komplizierter Stack. Einfach per Drag-Drop ziehen, entwerfen und live schalten. Du kannst sogar gemeinsam genutzte Bibliotheken einrichten, sodass dein Team dieselben Blöcke, Farben und Stile verwendet , alles konsistent und markengerecht bleibt. In diesem Kurs führe ich Sie von den Grundlagen über fortgeschrittenere Themen bis hin zum Start Ihrer Website. Wir fangen bei Null an und verwenden die vorgefertigten Figma-Blöcke. Perfekt für Anfänger. Ich zeige dir, wie du Unterseiten verbindest, benutzerdefinierte Elemente hinzufügst und deine Seite mit einfachen Interaktionen sowie flüssigen Animationen zum Leben sowie flüssigen Animationen N. Sie werden lernen, wie Komponenten wiederverwendbare Elemente wie NAFBAs und Futers erstellen NAFBAs und Futers Wir werden Videos und Karten einbetten und mithilfe von Figma Make sogar benutzerdefinierte Codeblöcke mit KI erstellen Dann veröffentlichen wir entweder mit einer kostenlosen Figma-URL oder mit deiner eigenen Domain Ich zeige Ihnen, wie Sie alles für Barrierefreiheit und Suchmaschinenoptimierung einrichten Barrierefreiheit und Suchmaschinenoptimierung Ihre Seite ist also ausgefeilt und bereit, live zu gehen. Sie noch einen Schritt weiter gehen möchten, zeige ich Ihnen, wie Sie Ihre eigene Designbibliothek mit flexiblen Farben, Typografie und responsiven Blöcken erstellen Ihre eigene Designbibliothek mit flexiblen Farben, Typografie und responsiven Blöcken Sie können sie in all Ihren Projekten wiederverwenden. Figma Sites eignet sich perfekt für Portfolios, Produkteinführungen und persönliche Seiten kleiner Unternehmen Eine schnelle und einfache Möglichkeit, Ihre Idee online zu stellen und sich wieder auf Ihr Produkt zu konzentrieren Dies ist ein Fall von moonlearning dot IO. 2. Kursmaterial: Sie Ihr Kursmaterial abrufen möchten, wechseln Sie zu Projekt und Ressourcen. Dort wird ein Link mit dem Titel Kursmaterial herunterladen angezeigt . Klicken Sie darauf. Sie gelangen zur Download-Seite und hier sehen Sie das Vorschaubild des Kurses, den Sie gerade belegen Klicken Sie einfach auf Herunterladen. Es gibt also zwei Dateien zum Herunterladen, also eine, die mit Punkt Site endet, das ist die Seite ich dir alles zeige , was ich während des Kurses baue Du kannst sie dir einfach nach Belieben ansehen und damit spielen Du brauchst es nicht, aber es könnte sehr praktisch sein. Und dann die hier oben, das ist im späteren Teil des Kurses, wo wir unsere eigene Bibliothek bauen werden. Das ist also eine Bibliothek , die Sie verbinden können. Sie können beide bereits jetzt herunterladen. Um auf diese Dateien zuzugreifen, können Sie sie nicht einfach per Doppelklick öffnen. Sie müssen sie in FIGMA importieren. Und ich werde die Figma-Oberfläche in einer Sekunde genauer durchgehen die Figma-Oberfläche in einer Sekunde genauer Also, wenn Sie neu in diesem Bereich sind, dann machen Sie sich keine Sorgen. Wir werden es ausführlicher behandeln. Im Allgemeinen müssen Sie in Ihr Konto gehen und dann in Ihre Projekte gehen und dann ein Projekt auswählen. Und im Inneren sollten Sie eine Art Importschaltfläche finden. Es ändert sich gerade ein bisschen. Wenn Sie unter Erstellen gehen, finden Sie hier Ihre Importschaltfläche und Sie können dann einfach die heruntergeladenen Dateien importieren. Es spielt keine Rolle, ob es sich Sites-Dateien oder Figma-Designdateien handelt, Sie können sie alle im selben Projekt speichern 3. GRUNDLAGEN: Figma-Dateibrowser: Der FigmaFle-Browser. Bevor wir eintauchen, wir zunächst einen Blick auf die Figma-Arbeitsstruktur Dies ist besonders wichtig, wenn Sie neu bei Figma sind. Wenn du dein Konto eröffnest, könnte es ungefähr so aussehen Es kann geringfügige Unterschiede geben, zum Beispiel, wenn Sie in einem Browser arbeiten oder wenn Sie an einer anderen Version oder einem Update arbeiten, dann ändern sich die Dinge manchmal leicht. Im Kern sollten Sie jedoch dieselben Elemente finden. Was Sie also brauchen, ist Ihr Team zu finden, und dann haben Sie innerhalb Ihres Teams etwas, das Projekte genannt wird. Sie können mehr als ein Team in Figma haben, sodass Sie möglicherweise zu einigen Teams eingeladen werden Möglicherweise haben Sie einige bezahlte Teams für sich selbst oder einige kostenlose Teams Wenn du auf einen kleinen Fehler klickst, kannst du alle deine Teams sehen und zwischen ihnen wechseln . Das Team, in dem ich gerade bin, ist ein professionelles Team. Um beispielsweise die Websites und Bibliotheken von Figma nutzen zu können, benötigen Sie derzeit ein Pro-Konto oder höher In Ihrem Team sehen Sie also die Projekte, und dieser Begriff ist etwas verwirrend Das ist also ein Name, den Figma von Anfang an gab, und sie haben ihn beibehalten Das bedeutet also, dass es sich um unterschiedliche Projekte handelt. Sie könnten das jedoch wirklich für absolut alles verwenden . Betrachte es wirklich als eine Organisationsebene. Sie können hier sehen, dass ich zwei Projekte habe und was wir tun wollen, wir wollen ein neues für dieses neue Projekt erstellen, für das wir jetzt unsere Sites-Seite erstellen werden. Im Moment haben wir in der App die kleine Plus-Projektschaltfläche hier oben. Und wie gesagt, das ändert sich ständig. Um ehrlich zu sein, würde ich hier etwas erwarten, aber wir haben hier keinen Plus-Button. Also lass uns hier klicken, auf Projekt klicken und jetzt kannst du deinem Projekt einfach einen Namen geben. Also werde ich die Sites Demo nennen. Und dann werden Sie gefragt, ob Sie andere Leute einladen möchten. Das brauchen wir vorerst nicht, also springen Sie einfach, damit Sie später jederzeit einladen können. Und jetzt kannst du sehen, dass du deine neuen Projekte hast. Wenn wir auf Alle Projekte klicken, können Sie sehen, dass das dritte erstellt wurde Übrigens gibt es eine kleine Sternschaltfläche. Das ist also wirklich praktisch. Sie können sehen, ob Sie ein Projekt mit einem Stern markieren, dann wird es am Rande angezeigt , sodass Sie schneller darauf zugreifen können Doppelklicken Sie entweder hier, wo Sie angefangen haben , oder direkt auf das Projekt, und dann gelangen Sie hinein, wo Sie Dateien erstellen können Wenn Sie also eine Datei erstellen, verwenden wir dieselbe Schaltfläche und Sie können jetzt eine Änderung sehen. Wenn wir hier also auf Plus oder auf den kleinen Fehler nach unten klicken , können Sie sehen, dass Sie die Wahl zwischen Designdateien, FIG Jam usw. haben zwischen Designdateien, FIG Jam usw. Jetzt wollen wir uns für eine Sits-Datei entscheiden. Klicken Sie also darauf und Sie werden direkt in Ihre Seitendatei springen. Sie werden gefragt, ob Sie Vorlagen verwenden möchten. Lassen Sie uns vorerst auf Nein klicken. Und wenn Sie zu Ihrer Übersicht zurückkehren möchten, klicken Sie auf die kleine House-Schaltfläche. Auch dies könnte etwas anders aussehen, wenn Sie sich im Browser und dann wieder auf Ihrem Hauptbildschirm sind. Und denken Sie daran, dass Sie darauf zugreifen können indem Sie in all Ihre Projekte gehen, die Projekte suchen, in Sie sich befinden, und dann direkt darin die Datei sehen , die Sie gerade erstellt haben. Sie können Ihre Datei entweder von hier aus oder direkt von hier aus umbenennen oder direkt von hier aus mit der rechten Maustaste darauf klicken und dann auf Umbenennen klicken. 4. GRUNDLAGEN: Überblick über die Site-Oberfläche: Die Benutzeroberfläche von Figma Sites. Das sehen Sie also mehr oder weniger, wenn Sie Ihre Datei öffnen Lassen Sie uns nun ein wenig herauszoomen. Sie können Command und Minus und Command und Plus verwenden , um zu zoomen, oder Sie können einfach Ihre Maustasten verwenden. Das sind also unsere Leinwände, das ist also unser Zuhause, und du wirst immer mit einem Zuhause beginnen das im Grunde die Homepage ist , die später geöffnet wird Und normalerweise zeigt es dir einen Desktop und ein Handy Dies könnte sich im Laufe der Zeit auch ändern. Und ich empfehle Ihnen, hier oben auf die kleine Plus-Schaltfläche zu klicken hier oben auf die kleine Plus-Schaltfläche zu und auch ein Tablet hinzuzufügen. Und wenn Sie Shift und zwei drücken, erhalten Sie eine wirklich schöne Gesamtansicht. Bevor wir uns also mit dem Design befassen, schauen wir uns an, was hier passiert, Beispiel die Optionen, die wir in dieser Ansicht haben. Auf der linken Seite haben Sie also Ihr Ebenen-Panel. Das heißt, Sie sehen alles , was auf der Leinwand vor sich geht. Im Moment können Sie also sehen, dass wir eine Webseite haben. Sie können weitere hinzufügen. Das werden wir später machen. Und Sie können hier das Haus und dann die Details sehen. Wir haben also diese drei Haltepunkte, und Sie können auch sehen, was auf ihnen steht Im Moment haben wir keine Inhalte. Lass uns einfach nach dem Zufallsprinzip etwas hinzufügen. Lassen Sie uns hier zum Beispiel einfach nur einen Kreis hinzufügen . Und jetzt können Sie sehen, dass dies zu allen hinzugefügt wurde. Also wurde es dem Desktop, dem Tablet hinzugefügt und, sagen wir, auf dem Handy, wir könnten es einzeln verschieben. Und nehmen wir an, wir wollen dieses Element nicht auf dem Handy haben, wir wollen es nur auf dem Desktop und dem Tablet haben. Wenn wir nun auf Löschen klicken, können Sie sehen, dass dies nur ausgeblendet wird , da dies derselbe Bildschirm ist. Dinge wären also immer überall präsent, aber Sie können sie nach Ihren Wünschen ein- und ausblenden Wenn Sie es auf dem Desktop entfernen, wird es an jedem anderen Haltepunkt Später werden Sie hier also auch die Schaltfläche „Veröffentlichen“ finden hier also auch die Schaltfläche „Veröffentlichen“ Wir werden im Detail lernen, wie wir unsere Seite veröffentlichen. Es ist super einfach. Dann haben Sie hier diesen, wo Sie mit Insert Blöcke und Bibliotheken haben. Also Blöcke, das sind quasi vorgefertigte Elemente von Figma Also schnappen wir uns einfach einen Helden. Und wenn Sie es auf Ihrem Desktop-Element ablegen, können Sie sehen, dass es auch für all Ihre anderen Bildschirmgrößen bereits eingerichtet ist. Das ist also wirklich praktisch, und Sie können es natürlich nach Ihren Wünschen ändern Habe auch Bibliotheken. Wir werden lernen, wie wir unsere eigenen Bibliotheken verbinden können. Das wird also wie diese Blöcke hier aussehen, aber wir werden einfach unsere eigenen erstellen, und ich werde dir zeigen, wie man Breakpoints erstellt und so. Dann haben Sie hier eine Suche, sodass Sie nach jedem Element suchen können Dann haben wir unsere Marke. Also das ist wirklich aufregend. Hier können wir Codeelemente hinzufügen. Nochmals, ich werde Ihnen all das im Detail zeigen. Dann bekommst du hier schon eine Vorschau. Figma bringt gerade zum Zeitpunkt der Aufnahme ein CMS Das ist noch in Bearbeitung, aber ich werde es hinzufügen, sobald es fertig ist Und dann haben wir hier ein paar Einstellungen. Hier werden Sie also zum Beispiel Favicon und Vorschau und Informationen zu Ihrer Seite einstellen Favicon und Vorschau und Informationen zu Ihrer Seite Nochmals, wir werden das alles durchgehen. Halten Sie Ihre Datei also standardmäßig immer geöffnet. Hier unten haben Sie also Ihre Tools, Sie können also entweder „Gefällt mir“ markieren, lassen Sie uns einfach einen Text auswählen, sodass Sie den Text hier einfach nach Ihren Wünschen hinzufügen können Und sobald du dir ein Element schnappst, also das könnte Text sein oder lass uns einfach unseren Kreis hier wieder hinzufügen Wenn du es greifst, kannst du auf der rechten Seite die Immobilie sehen. Sie könnten also zum Beispiel die Textgröße ändern, Sie könnten die Schriftart und all das und die Farben und alle Eigenschaften eines beliebigen Elements ändern Farben und alle Eigenschaften eines beliebigen , das Sie hier auswählen. Der beste Weg ist also , einfach hier durchzugehen. Also hast du verschiedene Formen. Sie haben Zeichenwerkzeuge, Sie haben Bilder, Sie haben Text. Und du bist auch hier, du kannst neue Seiten hinzufügen. Auch hier werden wir das getrennt machen und machen. Wir werden das in einem separaten Video untersuchen. Auf der rechten Seite finden Sie nicht nur die Eigenschaften. Wie direkt neben den Eigenschaften sehen Sie auch die Interaktionen. Das heißt, du kannst Ha-Effekte hinzufügen, Seiten verbinden. Und noch einmal, wir werden das alles genauer durchgehen . 5. GRUNDLAGEN: Erstellen Sie Ihre erste Seite: Beginnen wir also mit der Einrichtung unserer ersten Seite mit Pigmacytes Der einfachste Weg, um loszulegen und trotzdem viel Kontrolle über Ihr Layout zu haben, ist wahrscheinlich die Verwendung von Kontrolle über Ihr Layout zu haben, ist wahrscheinlich die Verwendung Klicken Sie auf ein kleines Pluszeichen und dann werden Sie die voreingestellten Figma-Blöcke sehen Es gibt also voreingestellte Seiten, aber wir haben eine bessere Kontrolle über das Layout, wenn wir die eigentlichen Blöcke verwenden Sie können sehen, dass es Navigation, Helden und Funktionen gibt. Fangen wir mit einer Navigation an. Nehmen wir einfach eine beliebige Navigation und ziehen sie dann einfach rüber und der wichtige Teil ist, dass Sie sie nur auf die Desktop-Version ziehen müssen , und dann werden alle Haltepunkte automatisch für Sie erstellt alle Haltepunkte automatisch für Sie Das ist in diese Blöcke eingebrannt . Lassen Sie uns das in ein kleines Portfolio umwandeln, also gehe ich zu Helden und ziehe einfach mit der Maus über einen Heldenbereich Und dann füge ich aus den Features etwas Text hinzu, etwa diesen, der meine Fähigkeiten beschreibt, vielleicht ein Bild wie etwas über. Und was ich am Ende auch will, ist eine Art Fußzeile, das sollte also eine Navigation sein Ich werde hier nur diese sehr einfache Fußzeile verwenden. Nun, was Sie sehen können, ist, dass sie nicht in der exakten Reihenfolge sind. Ich möchte zum Beispiel, dass der Fuß weiter nach unten zeigt, sodass Sie ihn einfach ziehen können oder Sie können auch Ihre A-Tasten verwenden, und dann können Sie die ganzen Blöcke nach Ihren Wünschen verschieben ganzen Blöcke nach Ihren Wünschen Und beachten Sie, dass ich es nur auf dem Desktop ändern muss, und dann werden alle anderen Breakpoints folgen Nun, alles, was ich auf meinem Desktop löschen würde, zum Beispiel, wenn ich den ganzen Block loswerden würde , der mit allen Breakpoints passieren würde Beachten Sie jedoch eine Kleinigkeit. Nehmen wir an, ich bin hier, ich habe diese Knöpfe, also nehmen wir einfach das Sekundäre. Nehmen wir an, wir nehmen die Sekundärseite ab. Nun, hier können Sie sehen, dass dies der Desktop ist und schauen Sie sich an, was hier passiert. Wenn ich die Sekundärseite abnehme, wird das komplett verschwinden. Hier können Sie also wirklich wählen ob ein Element vollständig verschwinden soll. Man könnte aber auch sagen, ich möchte diesen Button nur auf meiner Desktop-Hauptversion haben. Aber zum Beispiel möchte ich das auf meinem Tablet aus irgendeinem Grund nicht haben. Wenn Sie dann auf Löschen klicken würden, würde es einfach ausgeblendet. Und das ist völlig in Ordnung, sei dir dessen nur bewusst. Sie könnten auch den gesamten Abschnitt ausblenden. Nehmen wir an, Sie möchten diesen Abschnitt nicht auf dem Desktop haben, er würde am Ende so aussehen, als wäre er weg, aber beachten Sie, dass er immer hier in Ihrem Ebenenbedienfeld sein wird. Bevor wir also den Inhalt ändern, schauen wir wie unsere Seite in einem dynamischen Setup aussieht, also wie sie im Browser aussehen wird. Es gibt verschiedene Möglichkeiten , eine Vorschau zu erhalten. Sie können entweder hier auf diese Play-Schaltfläche klicken oder Sie haben die Play-Schaltfläche hier. Bei diesem kleinen Fehler können Sie wählen, ob Sie Inline-Vorschau oder eine ganze Seite wünschen. Also lass uns einfach darauf klicken und dann bekommst du eine eigene Vorschau. Und sehen Sie, es ist wirklich nett. Hier sind schon einige Animationen eingebaut. Sie können also die Größe ändern, dann können Sie das unterschiedliche Verhalten sehen, und Sie können auch sehr gut darin blättern Wenn wir hierher zurückkehren, können Sie auch die Tastenkombination verwenden und Sie erhalten sie, wenn Sie sie hier vergessen Also verschiebe dich im Raum. Und wenn ich Shift und Space drücke, dann ist das praktisch in der Dateivorschau, es ist also ein bisschen schöner, schnell daran zu arbeiten Wenn man die voreingestellten Blöcke benutzt, dann ist Figma wirklich schlau Wenn wir also hier klicken, können Sie sehen, dass das sogenannte automatische Layout bereits für Sie eingerichtet Also haben sie ein vertikales Layout hinzugefügt. Sie können sehen, dass wir die ganze Seite sehen. Wenn du mal nicht die ganze Seite siehst, dann musst du hier in die Höhe gehen und sicherstellen, dass diese Seite auf Umarmung eingestellt ist Und all unsere Blöcke sind bereits so eingerichtet, dass sie bei der Größenänderung den Container füllen Also, um anzufangen, das ist großartig. Also ist alles vorbereitet und von da an werden wir weitermachen. Seien Sie sich jedoch bewusst, dass wir später, wenn wir Elemente hinzufügen oder Dinge ändern, verstehen müssen diesen Layout-Abschnitt etwas besser verstehen müssen, um die volle Kontrolle über unser Layout zu haben. Aber in unserem ersten einfachen Beispiel funktioniert alles so, wie wir es wollen, sodass wir jetzt unseren Inhalt hinzufügen können. Und das ist wirklich ganz einfach. Sie wählen einfach den Inhalt auf dem Desktop aus und ändern ihn dann nach Ihren Wünschen Dies wird sich auf allen Breakpoints widerspiegeln Sie können also einfach Stück für Stück vorgehen und dann den Text nach Ihren Wünschen hinzufügen Und zum Beispiel möchte ich diese Knöpfe loswerden. Eigentlich brauche ich sie nicht, also lass uns das loswerden. Wenn wir nun unsere Bilder hinzufügen möchten, können wir einfach einen beliebigen Rahmen oder eine beliebige Form auswählen und dann über das Füllmenü auf Vom Computer hochladen klicken und dann ein beliebiges Bild auswählen. In Figma gibt es eine Massenimportfunktion, sodass Sie Shift Command und K drücken können Dann können Sie die Bilder buchstäblich einfach auswählen und sie dann einfach dort ablegen, wo Sie möchten Das einzige Problem im Moment ist , dass es einen kleinen Fehler gibt, sodass sie derzeit nicht zu den Breakpoints hinzugefügt Ich hoffe, das wird gelöst sein, wenn du es benutzt. Im Moment werde ich das einfach manuell machen. Ich werde das nur für dich beschleunigen . Wenn du die Elemente ein wenig verschieben willst, kannst du das auch tun, indem du einfach das Bild auswählst und sie dann mit der Pfeiltaste auf deiner Tastatur verschiebst Auch hier können Sie sehen, dass sich dies überall widerspiegelt. Ich habe einfach im Hintergrund weitergemacht und ganzen Text hier bereits aktualisiert. Das kannst du ganz nach deinem Geschmack machen. Eine weitere Kleinigkeit , die Sie vielleicht tatsächlich tun möchten, ist, dass es ganz in Weiß etwas flach aussieht Sie können also einfach bestimmte Blöcke auswählen und dann einfach auf die Füllschaltfläche klicken falls Sie keine Füllfarbe sehen, und ich gebe ihr nur einen leichten Hellgrauton, nur um ein bisschen Tiefe zu erzielen Und wenn wir einfach auf die Play-Taste drücken, können Sie sehen, dass Sie im Handumdrehen ein wirklich schönes und funktionierendes erstes Webdesign fertig haben schönes und funktionierendes erstes Webdesign im Handumdrehen ein wirklich schönes und funktionierendes erstes Webdesign fertig Übrigens, all diese schönen Bilder ich verwende, stammen von lomi.ai. Sie können viele kostenlose Bilder finden sowie ein Upgrade auf einen Pro-Plan durchführen und fantastische KI-generierte Bilder für Ihre Designs erhalten . 6. GRUNDLAGEN: Verbindung zu Unterseiten: Lassen Sie uns jetzt eine Unterseite hinzufügen. Ich möchte also auf eines dieser Portfolio-Bilder klicken und dann weitere Informationen auf einer separaten Seite erhalten . Ich muss also diese Seite hinzufügen, also klicken wir auf Webseite hinzufügen. Du kannst es auch hier oben machen. Und dann bekommst du diese Art von Seite. Wir haben also nur den Desktop, aber wir brauchen dieselben Breakpoints Wir werden also auf die Plus-Schaltfläche klicken und ein Tablet hinzufügen, und wir wollen ein Handy zur Sturzkontrolle hinzufügen Sie können die Seite umbenennen. Also werde ich das einfach Café nennen. Ich werde wieder mit meinen Blöcken beginnen. Und dieses Mal will ich einige Funktionen. Also ich möchte etwas , das aus vielen Bildern besteht oder so. Also ziehe ich das nochmal rüber, lege es auf den Desktop und dann dupliziert es einfach an all deinen Breakpoints Und ich möchte auch eine Navigation, aber ich habe den Text in dieser Navigation hier schon ein wenig geändert , damit ich Kontakt aufnehmen Also werde ich dasselbe verwenden, also werde ich es einfach kopieren und ich werde es auf dem Desktop einfügen, es hier unten einfügen, also werde ich es mit meinen A-Tasten nach oben verschieben, und jetzt habe ich dieselbe Navigation auf allen. Und dann wollen wir vielleicht einfach, ich weiß nicht, ein bisschen Text oder so etwas hinzufügen ich weiß nicht, ein bisschen . Also hier unten können Sie sehen, dass es einige Textfelder gibt . Ich bin mir nicht sicher. Ich denke, das hier ist richtig, sodass wir weitere Informationen hinzufügen können, wenn wir möchten. Und natürlich unser Begriff „Essen“, hier wird derselbe verwendet, und die Kopie ist ganz gut unten. Bevor wir uns nun dem Inhalt zuwenden, wollen wir ihn direkt verbinden. Im Eigenschaftenbereich auf der rechten Seite haben Sie also Design und Interaktionen. Klicken Sie auf Interaktionen und wählen Sie nun das Element aus. In diesem Fall müssen Sie also auf unser Bild, das Sie verbinden möchten, tief klicken, bis Sie das Bild wirklich verstanden haben, und dann sehen Sie, wie diese kleinen Blasen erscheinen. Jede Blase, halte sie einfach mit der Maus gedrückt und verbinde sie dann einfach. Und du wirst sehen, dass es von all den verschiedenen Haltepunkten aus eine Verbindung herstellt . Das ist so ziemlich alles Jetzt wollen wir uns wieder verbinden. In diesem Fall hätte ich gerne einen Breadcrumb, aber in meinem Block gibt es keinen, also werde ich hier das Hauptlogo verwenden, um wieder eine Verbindung herzustellen Also das ist vielleicht etwas , das ich später reparieren werde. Ich werde beide hier verbinden und ich werde dies auswählen und einfach wieder eine Verbindung herstellen. Okay, schauen wir uns an, ob das funktioniert. Also werde ich meine Tastenkombination Shift und Leertaste verwenden. Und jetzt können Sie hier sehen , dass das wirklich gut funktioniert. Es reagiert immer noch und alles funktioniert. Wenn wir jetzt mit der Maus darüber fahren, können wir sehen, dass wir darauf klicken können, und dann gelangen wir zu unserer neuen Seite Und wenn wir auf das Logo klicken, sind wir okay, großartig. Alles, was ich jetzt tun werde , meine Inhalte hier hinzuzufügen, zurück zum Design zu springen und das Ganze im Hintergrund für Sie zu beschleunigen . Fügen wir also einfach den Text hinzu. Ich habe schon geschrieben und ich füge hier auch schon etwas erfundenen Subtext etwas erfundenen Subtext hinzu, den ich kopieren werde Denken Sie auch hier daran, dass wir immer nur auf dem Desktop kopieren und jetzt nur noch unsere Bilder hinzufügen müssen Ich werde das für dich hier im Hintergrund nur ein bisschen beschleunigen . Und los geht's, also haben wir unsere Seite mit Unterseiten fertig. Lass uns einfach das Ganze abspielen damit du Lovely All Responsive sehen kannst Wir springen zu unserer Unterseite, die ebenfalls responsiv ist, und wir können jederzeit zurückkehren 7. GRUNDLAGEN: Einfügen benutzerdefinierter Elemente: Lassen Sie uns also unser Design ein wenig anpassen und einige unserer eigenen Elemente hinzufügen. Ihr könnt also hier drüben sehen, ich habe ein großes Bild, das ich hinzufügen möchte, denn wenn ich mir das jetzt und die Funktionen ansehe, erhalte ich nicht wirklich nur ein großes Heldenbild. Also, ich werde das einfach rüberziehen. Ich werde es hier ablegen und Sie können sehen, dass ich es hinzufügen kann, aber es verhält sich nicht so wie meine voreingestellten Blöcke. Wenn Sie nun benutzerdefinierte Elemente hinzufügen möchten, müssen Sie ein wenig über das Layout wissen. Ich werde Ihnen nur die Grundlagen zeigen, aber ich empfehle Ihnen dringend, dass Sie, wenn Sie mit der automatischen Layoutfunktion von Figma nicht vertraut sind, in einen meiner anderen Kurse springen, während ich mich eingehend mit dem automatischen Layout von Figma beschäftige Es ist wirklich eine Funktion , die sehr wissenswert ist. Wenn du nur ein bisschen mit Websites herumspielst, kommst du vielleicht sogar mit ein paar Tricks davon , die ich dir zeige. Also als Erstes, was wir tun müssen, wenn du diesen Block auswählst, kannst du hier sehen, dass er in der Breite automatisch so eingestellt ist, dass er so etwas wie „Container füllen“ genannt wird. Das bedeutet also, dass er den gesamten verfügbaren Speicherplatz beansprucht. Wenn wir derzeit unser Bild auswählen, ist es nicht so eingerichtet, dass es den Container füllt. Sie können hier im Layout sehen, wenn wir das herunterklappen, können Sie sehen, dass es eine feste Breite hat. Also springe einfach, um den Behälter zu füllen. Sie können auch hier sehen, dass wir dieses eine Set haben, was bedeutet, dass wir das Seitenverhältnis dieses Bildes beibehalten . Jetzt kannst du sehen, dass das den Behälter überall füllt. Also tu das nicht. Gehen wir einfach zurück zu dem, was wir zuvor hatten. Sie könnten versucht sein , einfach die Größe zu ändern. Aber was dann passiert ist, es sieht in deiner Stata-Ansicht gut aus , aber wenn du dann eine Vorschau hast, kannst du sehen, dass sich das tatsächlich nicht mehr mit deinem Design verhalten wird Wenn Sie ein festes Element wollen, ist das in Ordnung. Stellen Sie andernfalls sicher, dass Sie dies so einstellen , dass der Behälter gefüllt wird. Jetzt können wir das noch etwas weiter anpassen. Sie können hier sehen, dass wir einen Eckenradius von 16 haben, sodass wir einfach unser Hauptbild aufnehmen können, und wir könnten es auch auf einen Eckenradius von 16 einstellen. Jetzt habe ich ein weiteres Element hinzugefügt. Das ist ein kleiner Brotkrumen, denn denken Sie daran, es ist ein bisschen seltsam , dass ich auf das Logo klicken muss, um zurückzugehen Ich möchte, dass es klarer wird, wie man sich darin zurechtfindet. Die Sache ist also, im Moment ist das nur ein Rahmen und ich habe etwas Text hinzugefügt. In Figma sollte jedes Element, das wir haben, und in Blöcken, die es für Sie eingerichtet im automatischen Layout eingerichtet sein, damit es funktioniert Nochmals, wenn Sie ein absoluter Anfänger sind, könnte dies überwältigend sein, und ich empfehle Ihnen dringend, sich mit dem automatischen Layout vertraut Ich werde Ihnen das nur kurz zeigen und davon ausgehen, dass Sie ein bisschen mit dem automatischen Layout vertraut sind. Also wähle ich das aus und drücke Shift und A. Dadurch wurde ein automatisches Layout erstellt, und Sie können sehen, dass das hier passiert. Das geht also in diese Richtung. Ich kann die Entfernung hier sehen. Ich mache dieses Vielfache von acht. Ich kann etwas Polsterung hinzufügen und so weiter. Und jetzt werde ich auch den äußeren Rahmen erstellen. Ich werde das auswählen. Und Sie können hier sehen, dass das ein Rahmen ist, also kann ich ihn auch hier auswählen, oder ich kann Shift und A drücken. Das ist meine Tastenkombination, und dann erstelle ich dieses automatische Layout. Also werde ich das jetzt einfach herausziehen. Also das ist die Größe meines übergeordneten Rahmens, 1.280. Und ich kann jetzt zum Beispiel hier oben und unten etwas Polsterung hinzufügen Also nehme ich einfach die untere, 24, die obere, glaube ich, auch 24. Und jetzt die Seiten, ich werde tatsächlich überprüfen, was hier in meiner Navigation passiert. Meine Navigation sagt mir also 64, also werde ich auch 64 für links und rechts verwenden. Wenn das ein bisschen überwältigend ist, wenn Sie neu bei Figma sind, könnten Sie auch einfach mit einfachen Elementen wie diesem davonkommen , sie einfach auslegen und dort hineinlegen Also, was wir jetzt tun werden, wir werden das hier rüber ziehen und ich werde es einfach hier ablegen Man kann sehen, dass es überall hingefallen ist. Auch hier sehen Sie, dass die Größe nicht richtig geändert wird, denn was wir tun müssen , genau wie bei den anderen, müssen wir das gesamte Element auswählen und es dann in der Breite einstellen, um den Container zu füllen Nun, es gibt einen strukturierteren Weg, dies einzurichten, aber im Moment machen wir das nur ein bisschen manuell, um es einmalig Sie können hier also sehen, dass wir unterschiedliche Polsterungen haben. Also hier haben wir eine Polsterung von 32. Also werde ich das auch bei diesem Element hier machen auch bei diesem Element hier Und für das Handy haben wir 24, und ich werde das auch 24 einrichten. Also los geht's. Also, was ich nicht mag, ist diese riesige Entfernung hier. Eigentlich möchte ich diesen schönen kleinen grauen Hintergrund auch hier haben. Also werde ich das auswählen, du kannst auf die Füllfarbe klicken. Ich werde diese kleine Auswahl treffen. Ich werde einfach die Hintergrundfarbe auswählen, die ich hier habe, damit ich einen besseren Überblick habe Also das ist nett, aber das ist wirklich groß hier, diese Entfernung Also ich kann das hier auch ändern und ich kann einfach ein bisschen runter gehen und es etwas kleiner machen. Und wenn ich möchte, kann ich das auch verwenden und hier vielleicht ein bisschen hinzufügen , damit ich mehr Platz habe , wenn ich möchte, dass das angeklickt wird Jetzt muss ich nur dieses Haus hier auswählen. Ich werde wieder zur Interaktion springen und nur sicherstellen, und nur sicherstellen dass, wenn ich darauf klicke, es zurück nach Hause springt. Also lass uns das ausprobieren. Also hier haben wir unser Design. Wir gehen auf die Unterseite. Das sieht toll aus. Mal sehen, ob die Größe unseres Bildes geändert wird. Ja. Und wenn ich dann auf Home klicke, gehe ich zurück nach Hause. 8. GRUNDLAGEN: Hinzufügen von Links und Mailto: Lassen Sie uns einige externe Links zu unserem Design hinzufügen. Also ein Mail-Link und verbinde zum Beispiel unsere sozialen Medien. Was wir hier haben, ist, dass wir eine Schaltfläche haben, also wollen wir auf diese Schaltfläche klicken und dann eine E-Mail öffnen. Und dann haben wir hier unten einige soziale Medien. Also lasst uns beides machen. Fangen wir mit unserem Button an. Also werde ich die Schaltfläche auswählen, und das funktioniert wirklich für jedes Element. Und dann sehen Sie rechts im Eigenschaftenbereich etwas namens Link. Sie sehen es im Design und auch in der Interaktion. Manchmal bewegt es sich ein bisschen. Klicken Sie auf die Plus-Schaltfläche, und Sie erhalten ein Feld zum Hinzufügen einer URL. Sie können es beispielsweise auch mit einer beliebigen Unterseite verbinden , die Sie erstellt haben. Wenn Sie also eine Seite mit einem Formular haben , das die Leute gerade ausfüllen sollen, was wir wollen, wollen wir nur, dass es angeklickt wird und dann eine E-Mail geöffnet Und das können Sie mit mailto machen. Sie fügen also keine URL hinzu. Sie könnten eine URL hinzufügen, zum Beispiel, wenn Sie einen externen Blog haben oder etwas, zu dem Sie Leute schicken möchten, aber wir werden Mail Two verwenden. Jetzt könnten Sie dies in einem neuen Tab öffnen. In diesem Fall spielt es keine Rolle, da es sowieso in einem neuen geöffnet Also lass uns das ausprobieren. Lassen Sie uns also unsere Vorschau öffnen. Klicken wir auf unsere Schaltfläche und Sie können sehen, dass mein E-Mail-Programm geöffnet wurde und es an die von mir angegebene E-Mail-Adresse gesendet wird. Es wird hier dieselbe verwendet, da dies meine Adresse ist, die ich für die Demo verwende. Sie finden also die Adresse des Benutzers, von dem aus es gesendet wurde, in diesem Feld. Wenn Sie so etwas hinzufügen, Sie einfach sicher, dass Ihre E-Mail-Adresse auch im Foor oder an anderen Stelle im Klartext steht. So kann jeder, der kein E-Mail-Programm auf seinem Gerät installiert hat, trotzdem deine Kontaktdaten finden. Eine kleine Randnotiz, du kannst Mailto auch erweitern Anstatt E-Mails einfach zu öffnen , können Sie also einige Informationen hinzufügen Es gibt also verschiedene Generatoren. Sie können zum Beispiel mailto linkgenerator.com verwenden oder einfach nach einem anderen suchen Hier fügen Sie also die Adresse hinzu , die Sie öffnen möchten, an die die E-Mail gesendet werden soll Sie können CC, BCC hinzufügen, Sie können einen Titel hinzufügen. So wissen Sie beispielsweise, dass dies eine Anfrage ist , die von Ihrer Website kommt, wenn sie von jemandem gesendet wird Dann können Sie einen Text hinzufügen, sodass Sie eine voreingestellte E-Mail hinzufügen können. Das ist sehr praktisch, wenn Sie zum Beispiel eine Art Anfrage haben , dass die Leute ausgefüllt werden sollen, zum Beispiel, wie hoch Ihr Budget ist? Was ist Ihre Firma? Was ist Ihre Position? Dann klicken Sie einfach auf Generieren und Sie erhalten den Mailto-Link oder den HTML-Code Wir benötigen den Mailto-Link, da wir mit Links arbeiten. Und dann werde ich statt dem, was wir gerade hatten, einfach das ändern und die E-Mail einfügen, die ich gerade kopiert Schauen wir uns jetzt an , was passiert. Wenn ich also auf Kontakt M klicke, kannst du sehen, dass diese gesamte Seite hier hinzugefügt wurde. Sie können also sehen, dass wir jetzt ein Thema haben, wir haben ein CC und wir haben das als Gremium. Es ist also nicht notwendig, aber es könnte sehr praktisch sein. Lassen Sie uns jetzt auch unsere sozialen Medien verbinden. Also hier unten in der Foota habe ich meine sozialen Medien. Also werde ich LinkedIn als Beispiel verwenden. Also werde ich diesen ganzen Frame hier auswählen, also den für den LinkedIn-Frame. Und dann werde ich den gleichen Weg gehen. Ich werde auf Verlinkt klicken und jetzt füge ich tatsächlich einen externen Link hinzu. Also hier nehme ich einfach den Link für meine LinkedIn-Seite und füge ihn einfach in dieses Feld ein. Wenn wir jetzt eine Vorschau aufrufen und darauf klicken, wird meine LinkedIn-Seite geöffnet. 9. GRUNDLAGEN: Komponenten: Arbeiten mit Komponenten. Komponenten sind also ein großes Thema, Figma. Und noch einmal, falls Sie noch sehr neu in diesem Bereich sind, springen Sie zu meinem Anfängerkurs, und ich habe einen Abschnitt, in dem ich das alles ausführlich erkläre Im Moment möchte ich Ihnen nur einige grundlegende Verwendungsmöglichkeiten von Komponenten mit Websites zeigen . Hier haben wir zum Beispiel unsere Schaltfläche, und wir verwenden sie überall, und wir haben auch unsere Navigation und wir haben unsere Puta und wir haben auch ein gewisses Verhalten darin eingebaut, das wir jetzt überall in all diese Schaltflächen kopieren müssten überall in all diese Schaltflächen Was wir also tun können, ist, daraus eine Komponente zu machen, und eine Komponente bedeutet im Grunde, dass Sie quasi eine Form haben, die Sie dann wiederverwenden Nehmen wir also diese Schaltfläche von hier weg und Sie können sehen, dass sie alle kopiert hat. Ich brauche nur einen. Und das nennt man Primärtaste. Das klingt großartig. Und ich werde es einfach in eine Komponente umwandeln indem ich auf das kleine Komponentenschild hier drüben klicke. Deshalb sollte unsere Komponente immer außerhalb unseres Designs liegen, und wir werden sie später auch etwas besser organisieren . Aber was ich jetzt machen möchte, ich möchte einfach kopieren, und all diese Kopien werden Instanzen genannt, und ich füge sie in mein Design ein. Also ziehe ich einfach eine Instanz heraus Alt- und Wahltaste gedrückt. Sie können übrigens Kopieren und Einfügen verwenden. Ich finde das nur etwas chaotischer. Also was ich mache, ich halte die Wahltaste oder die Alt-Taste gedrückt und dann erhalte ich eine Instanz davon Und jetzt werde ich diese ursprüngliche Taste loswerden und sie einfach ersetzen. Mit dem Knopf, den ich gerade gemacht habe. Lass uns einfach sprechen. Wenn Sie es nicht schaffen, es hier gut zu positionieren , verwenden Sie Ihr Ebenen-Panel. Wir haben hier eine kleine Schaltflächengruppe, also werde ich sie dort hinzufügen. Lass mich es einfach auf der anderen Seite positionieren. Jetzt habe ich dieselbe Schaltfläche in meiner Navigation wie hier. Wenn ich also etwas ändere, zum Beispiel dieses Linkverhalten, oder lassen Sie uns die Farbe einfach zufällig ändern, können Sie sehen, dass sich dies jetzt überall in unserem Design widerspiegelt . Ich verwende diese Navigation jedoch auch an mehreren Stellen. Also benutze ich es hier und ich benutze es dort drüben. So kann ich auch diese gesamte Navigation mit dem verschachtelten Weihrauch des Buttons zu einer Komponente machen dem verschachtelten Weihrauch des Buttons zu einer Also lass uns das rausziehen. Und dann werde ich dasselbe tun. Ich werde daraus eine Komponente machen. Es heißt Header Two. Das werde ich jetzt lassen. Und ich kann jetzt eine Instanz erstellen und diese dann ersetzen. Also lass uns das loswerden. Und jetzt erstelle ich, also habe ich schon einen erstellt. Ich verwende diese Instanz hier und werde sie einfach dorthin ziehen. Was jetzt jedoch passiert ist, ist, dass Sie bei dieser Instanz sehen können, dass ich dort dieselbe verwende, sodass ich das manuell ändern kann. Ich könnte es überschreiben, aber das wäre nicht sauber, weil ich es überschreiben würde und dann alle Informationen verlieren würde, und dann alle Informationen verlieren würde die ich hier eingegeben habe Es wird also ein bisschen unrein. Aber wie Sie sehen können, ist das, was ursprünglich schon passiert ist, als ich das herausgeholt habe, Sie konnten sehen, dass es mir tatsächlich alle diese drei gegeben hat, oder ich könnte sie von Hand erstellen Und jetzt können wir damit etwas erstellen als Komponentensatz bezeichnet wird. Geben wir einfach ein bisschen Hintergrundfarbe an , damit wir besser damit arbeiten können. Wir können das später abnehmen. Sie können also sehen, dass ich bereits alle drei Versionen habe , die ich benötige, oder Sie könnten sie von Hand einrichten, zum Beispiel mit einem Breadcrumb oder einfach allem, was Sie hier hinzufügen, Sie könnten das auch manuell einrichten, aber ich werde das verwenden, was Figma mir bereits Und dann werde ich all diese in eine Komponente umwandeln diese in Und jetzt werde ich nur die Benennung ein wenig ändern. Also werde ich sie einfach alle Header nennen oder ich werde sie alle Navigation nennen. Jetzt wähle ich alle drei aus und dann kannst du hier drüben sehen, dass es dir sagt, du kombinierst als Varianten. Klicken Sie darauf und dann sehen Sie einen kleinen lila Umriss , dass Figma sie umdrehen wird Also, was Sie jetzt sehen, lassen Sie uns einfach ein Exemplar davon herausholen Und jetzt können Sie sehen, dass ich die Instanz habe, aber sie sagt mir , dass ein Fehler vorliegt. Es heißt, es gibt eine Immobilie , aber sie haben alle den gleichen Namen. Also müssen wir jeden von ihnen auswählen, und dann nenne ich diesen einen Desktop. Und das ist wichtig. Es wird wirklich gut funktionieren, wenn Sie Desktop, Tablet und Handy verwenden . Ansonsten können Sie die Eigenschaften von Figma Design beliebig benennen. Aber hier bleiben wir bei dieser Benennung. Dann nehme ich die Tablette. Ich nenne es Tablet. Und das Handy. Jetzt könnte es auch den Namen der Immobilie ändern. Das müssen Sie nicht. Es würde sowieso funktionieren, aber ich könnte das Breakpoint nennen. Okay, großartig Und wenn ich jetzt die Instanz auswähle, gebacken hat können Sie sehen, dass sie jetzt all diese verschiedenen Versionen Und was ich jetzt tun kann, ich werde das einfach loswerden, und ich werde es hierher ziehen, und es wird jetzt wissen, wo es welches positionieren muss Einfach dadurch, dass ich diesen Namen benutzt habe. Dies ist etwas, das Figma im Hintergrund für Sie eingerichtet Und das Tolle ist, dass ich jetzt einfach dieselbe Navigation hier verwenden kann , also werde ich eine Instanz herausziehen und sie hier hinzufügen Und jetzt habe ich auch meine Navigation. Also alles, was ich jetzt mit der Schaltfläche ändere, mit der Einrichtung, sagen wir, wir drehen die Reihenfolge um, sagen wir, dass wir diese Schaltfläche auswählen und verschieben, Sie können sehen, dass sich das überall widerspiegelt, und jetzt nur auf dem Desktop. So kann ich auch bewusste Entscheidungen treffen, wie die Polsterung oder die Ränder an diesen verschiedenen Breakpoints Im Hintergrund sind all diese Blöcke, die Sie sehen und die magische Weise über die Breakpoints hinweg funktioniert haben, wie im Hintergrund in Figma, alle auf diese Weise eingerichtet Deshalb funktioniert es, was auch bedeutet, dass wir unsere eigene Blockbibliothek einrichten können , und das werden wir etwas später tun Im Moment lassen wir unsere Komponenten einfach hier. Wenn Sie mit Figma Design gearbeitet haben, wissen Sie, dass Sie Ihre Komponenten normalerweise nicht auf derselben Seite wie Ihr Design haben möchten Ihre Komponenten normalerweise nicht auf derselben Seite wie Ihr Design Aber im Moment bietet uns Figma in dieser Beta-Version, mit der ich arbeite, nicht wirklich viele Optionen dieser Beta-Version, mit der ich arbeite, Was Sie tun können, um ein wenig Ordnung hinzuzufügen , ist, hier unten nach Abschnitten zu suchen, oder Sie können Shift und S verwenden, und dann können Sie hier einen Abschnitt zeichnen und diese Komponente einfach aufrufen Organisieren Sie dies auch weiter sodass Sie Navigationselemente usw. haben können. Aber später werde ich Ihnen zeigen, wie Sie eine Bibliothek besser einrichten und alles übersichtlich gestalten können. Wenn Sie hier und da nur ein paar Kleinigkeiten haben, dann ist das alles in Ordnung, um Ihnen den Einstieg zu Und nur um den Dreh raus zu bekommen, machen wir dasselbe mit unserer Navigation Ich werde das herausziehen. Ich werde es jetzt hier drauflegen. Ich werde ihm ein bisschen Hintergrundfarbe geben. Nochmals, du kannst das später abnehmen, wenn es dich stört, nur damit wir es besser sehen Lass uns das ganz schnell machen. Es gibt tatsächlich auch eine Abkürzung dafür. Ich wähle also alle aus. Ich könnte entweder Komponenten für jede von ihnen erstellen und sie dann kombinieren, oder Sie können eine Abkürzung verwenden. Es gibt also einen kleinen Pfeil neben Ihrem Komponentenschild, und dann können Sie von hier aus den Befehl Komponentensatz erstellen sehen . Sie können das also auch verwenden. Auch hier wird es Ihnen sagen, es einen Fehler bei der Benennung gibt, also korrigieren wir die Benennung. Ich werde das nur beschleunigen , aber denken Sie daran, es ist Desktop, Tablet und Handy. Und wenn Sie möchten, können Sie auf den gesamten Komponentennamen klicken und die Eigenschaft auch umbenennen, z. B. in Breakpoint Und jetzt können wir einfach eine Instanz herausziehen und sie wieder zu unserem Design hinzufügen Sie können es an einer beliebigen Stelle hinzufügen und sich dann daran erinnern, dass Sie es einfach mit den Pfeiltasten verschieben können . Ich bin ein bisschen festgefahren. Offenbar nicht. Fügen wir es dem Ende hinzu. Und Sie können es auch einfach von einem beliebigen Design in ein anderes kopieren, also könnten wir es einfach hier loswerden und dann dieses wieder hineinkopieren also könnten wir es einfach hier loswerden und dann dieses wieder hineinkopieren. Sie müssen sicherstellen , dass Sie es so positionieren, wie in diesem kleinen Bereich, wo es Ihnen diese kleine Linie zeigt, und dann können Sie es weiter verschieben. Und los geht's. Also, alles, was Sie hier hinzufügen, müssen Sie zum Beispiel nur einmal Ihre Social-Media-Links hinzufügen, oder Sie können diese primäre Schaltfläche auch ändern. Seien Sie also vorsichtig mit einer Sache. Ich habe jetzt eine allgemeine Schaltfläche, und ich verwende nur diese Kontakt-Schaltfläche, aber Sie könnten eine Schaltfläche für verschiedene Dinge verwenden. In diesem Fall müssen Sie möglicherweise eine separate Schaltfläche erstellen. Wenn Sie also eine Schaltfläche für die Kontaktschaltfläche und dann nur eine allgemeine Schaltfläche haben, die Sie innerhalb des Dokuments verlinken, sollten Sie sich Kontaktschaltfläche und dann nur eine allgemeine Schaltfläche haben, die Sie innerhalb des Dokuments verlinken, dessen bewusst sein 10. Schau dir meinen Figma Anfängerkurs für die Grundlagen an!: In diesem Kurs möchte ich nun auf viele FIGMA-Funktionen wie Komponenten, auch Layout und Wenn Sie T FIGMA verwenden, wird Ihnen das alles ganz natürlich vorkommen Wenn Sie FIGMA jedoch noch nicht kennen, könnte dies etwas überwältigend sein Ich werde diese Konzepte in diesem Kurs nicht behandeln. Mit Ihrer Skillshare-Mitgliedschaft können Sie jedoch an meinem Figma-Anfängerkurs Unter Projekte und Ressourcen habe ich einen direkten Link hinzugefügt Du kannst einfach darauf klicken. Dies führt Sie direkt zu diesem Kurs. Der Kurs dauert 4 Stunden und beginnt mit allen Grundlagen, die Sie vielleicht lernen möchten oder auch nicht. Wenn Sie sich nur mit bestimmten Konzepten wie Komponenten oder Variablen befassen möchten , zum Beispiel dem Unterschied zwischen Variablen und Stilen, was für die Typografie sehr wichtig ist, können Sie einfach zu diesen Abschnitten springen und das alles von Anfang an erklären Auch oder zum Layout, wie Sie hier sehen können. Wenn Sie sich ins Zeug legen möchten, finden Sie in diesem Kurs weitere Dinge, z. B. wie man mit FIGMA Prototypen erstellt, wie man zusammenarbeitet, und es gibt sogar ein Kursprojekt für Ihr Portfolio Dies ist auch mit Abstand mein beliebtester Kurs auf Skillshare, und wie Sie in den Bewertungen sehen können, haben sich die Leute sehr darüber gefreut Also springen Sie ein und erfahren Sie mehr über Figma. 11. GRUNDLAGEN: Feste Navigation: Lassen Sie uns eine feste Navigationsleiste einrichten. In unserem Design hier haben wir also eine Vorschau, wir können sehen, dass wir eine Navigationsleiste haben, aber wenn wir scrollen, verschwindet sie. Vielleicht möchten Sie das, aber wahrscheinlich möchten Sie in vielen Fällen einfach, dass es ganz oben steht. Das ist also wirklich einfach. Sie müssen lediglich Ihre Navigation auswählen, und dies könnte eine Instanz einer Komponente sein. Das könnte aus Blöcken stammen. Das könnte alles sein, was du selbst entwirfst . Das spielt keine Rolle. Der wichtige Teil ist, dass Sie darauf achten, dass es ein direktes Kind Ihres Hauptrahmens ist. Manchmal haben Sie es also versehentlich hier drin verpackt. Und das sieht genauso aus, aber es könnte blockieren, sodass Sie es reparieren können. Sie also einfach in Ihrem Ebenen-Panel sicher, dass sich dies auf einer eigenen Ebene befindet , und wählen Sie es dann auf der rechten Seite an der richtigen Position aus. Das war früher in Interaktionen so, jetzt haben sie es an der richtigen Position, sodass es sich leicht bewegen kann. Suchen Sie also nach etwas, das „Position“ oder „ Scrollen“ genannt wird , und wählen Sie dann „ Festes Verhalten“. Sie werden also diesen kleinen Überblick hier sehen. Das bedeutet also, dass es aus dem Standardverhalten herausgenommen wurde, sodass es nicht mit dem Flow geht, weshalb Ihr Inhalt auch nach oben verschoben wurde? Weil Ihr Inhalt nach oben verschoben wird, wenn es um automatisches Layout geht. Schauen wir uns das einfach an , um es zu verstehen. Also das ist hier oben angeordnet. Also wird es einfach von ganz oben beginnen. Wenn Sie also diese natürliche kleine Lücke wollen, also zum Beispiel hier, werden Sie sehen, dass sie sehr notwendig ist . Dann schauen Sie mal rein. Das ist also etwa 95 m hoch, dein Navi. Das kannst du hier in deinen Höheneinstellungen sehen. Und was Sie tun, ist einfach den Desktop zu nehmen, also wird er das zu allem hinzufügen. Und dann können Sie in Ihren Einstellungen für das automatische Layout hier die Polsterung sehen, und dann können Sie diese Polsterung einfach wieder nach oben hinzufügen Und auf diese Weise wird das einfach nach unten gedrückt. Sie könnten das auch ein wenig nach Ihren Wünschen ändern, und vielleicht finden Sie auch Lösungen, bei denen hier tatsächlich ein gefälschter Hintergrund verwendet wird Manchmal machen die Leute einfach einen kleinen Rahmen und legen ihn darauf Es funktioniert auch, aber ich denke, das ist die sauberere Lösung. Schauen wir uns das an und schauen wir uns eine Vorschau an. Und wenn wir es durchblättern, dann sieht das ganz gut aus. Wenn wir jedoch die Größe ändern, beachten Sie eines: Das ist ein Springen Also müssen wir zurückgehen und ein kleines Detail korrigieren. Wählen Sie also den Header aus, denn denken Sie daran, dass wir das alles immer auf Füllen setzen, und plötzlich haben wir das nicht mehr zur Verfügung, weil wir den Container füllen. Das ist eine automatische Layouteinstellung. Und weil wir das aus dem automatischen Layout genommen und auf „Fest“ gesetzt haben, haben wir die Regeln für das automatische Layout nicht mehr. Aber was wir verwenden können, ist das hier oben. Wir können die Einschränkungen nutzen. also in Ihrem Einschränkungsfenster nach etwas, Suchen Sie also in Ihrem Einschränkungsfenster nach etwas, das links und rechts heißt. Das wird es also einfach so halten. Wenn wir jetzt noch einmal auf die Vorschau klicken und ihre Größe ändern, können Sie sehen, dass sie jetzt den Abstand gut einhält 12. GRUNDLAGEN: Grundlagen der Animation: Lassen Sie uns unserem Design einige Animationen hinzufügen. Wenn wir also zur Vorschau gehen, können wir sehen, dass diese kleinen Vorschaubilder bereits von selbst animiert sind, und das ist quasi in diesen Block integriert Gehen wir also zurück und lassen Sie uns verstehen, wie das tatsächlich funktioniert Für Animationen springen Sie also zum Interaktionsfenster. Direkt neben dem Design finden Sie also Interaktionen. Wir haben bereits Interaktion hinzugefügt. Das heißt also, wenn wir von einer Seite zur anderen oder zu einem externen Link wechseln. Wenn wir jedoch Elemente auf unserer Leinwand auswählen, erhalten wir in diesem Menü mehr Optionen. Lassen Sie uns zum Beispiel diese Kartengruppe auswählen, für die wir bereits etwas festgelegt haben, sodass es sich um eine nette kleine zirkulierende Animation Und ihr könnt in Interaktionen sehen , dass das hier eingerichtet wurde in Interaktionen sehen , dass das hier eingerichtet Es gibt also eine Animation, die eingebaut ist und Marquee heißt Ich könnte einfach auf Minus klicken um die Interaktion zu beenden, und dann habe ich hier einfach ein statisches Bild. Für jedes Element, das wir auswählen, könnten wir einige Interaktionen hinzufügen. Nun, es ist schön, sie hinzuzufügen, wenn sie Sinn machen, aber lieber weniger als mehr zu verwenden. Bitte habt diese Dinge nicht da, wo Dinge rein- und rausfliegen. Das ist immer eine potenzielle Fehlerquelle und es ist immer ein bisschen verwirrend. Also benutze es, aber sei vorsichtig damit. Aber lass es uns versuchen. Also wir haben Herotex hier und dann haben wir Interaktionen Klicken wir also auf das Plus und dann sehen wir unser voreingestelltes Interaktionsmenü Sie können hier also sehen, dass wir Dinge wie das Scrollverhalten haben, aber der wichtige Teil, den wir dafür mögen, ist eigentlich dieser hier. Wenn ich zum Beispiel möchte, dass diese Typografie irgendwie erscheint, dann könnte ich diese verwenden Ich könnte diese Schreibmaschine benutzen und dann könnte ich die Geschwindigkeit einstellen Ich lasse das auf moderat und ich könnte es wiederholen Eigentlich will ich das nicht und ich habe einen kleinen Cursor. Schauen wir uns also an, wie das aussieht. Und du kannst sehen, dass das wirklich nett ist. Das wird also quasi anfangen zu tippen, sobald ich darauf klicke, sobald ich diese Seite öffne. Lassen Sie uns hier ein bisschen mehr hinzufügen und auch verstehen, dass es von der Ebene abhängt, die ich auswähle, was passiert. Fügen wir also einen weiteren Effekt hinzu, denn Sie können tatsächlich, obwohl wir den Marquee-Effekt bereits haben, mehr hinzufügen Nehmen wir also an, wir wollen einen kleinen Hover-Effekt. Und es ist tatsächlich klasse. Und das liegt daran, dass ich bereits einen Hover-Effekt hinzugefügt habe. Sie können also mehrere Effekte haben, aber nicht zweimal denselben Effekt Also lass mich das abnehmen, damit ich es dir von Grund auf zeigen kann, und ich werde es einfach wieder auswählen. Jetzt habe ich also einen Hover-Effekt, und Sie können sehen, dass ich das hier habe und ich es einstellen kann Also werde ich das auf die Skala 1,2 einstellen . Also das heißt, wenn ich mit der Maus drüber fahre, dann wird es quasi ein bisschen auftauchen Schauen wir uns das an und notieren wir, wie ich das für die gesamte Kartengruppe eingestellt habe . Schauen wir uns das mal an. Also kann ich scrollen und sobald ich drüber drüber gehe, wird es größer. Also vielleicht möchte ich das, aber eigentlich möchte ich einfach Maus über eine Karte fahren und das auf der einzelnen Karte haben Also stell sicher, dass du es von hier wegbringst. Und jetzt wähle ich die Kartengruppe aus. Ich drücke Enter. Dies ist eine schnelle Möglichkeit, auf alle untergeordneten Elemente zuzugreifen. Sie können sie auch einfach einzeln auswählen. Und dann füge ich eine Interaktion hinzu und ich füge den Hover-Effekt hinzu, und ich mache jetzt dasselbe, 1.2 oder vielleicht sogar 1.1, um es ein wenig subtil zu halten Und schauen wir uns das jetzt an. Also spiele ich das. Und wenn ich schwebe, kannst du sehen, dass ich diesen schönen kleinen Schwebeeffekt bekomme diesen schönen kleinen Schwebeeffekt Vielleicht möchte ich den Abstand ein wenig anpassen, sodass ich jetzt einfach diesen auswählen und zum Design zurückkehren kann Und hier habe ich tatsächlich die Lücke, also könnte ich diese Lücke ein wenig vergrößern und ihr etwas mehr Platz zum Wachsen geben Ziemlich nett und sehr subtil, es ist auch aufschlussreich. Nehmen wir an, wir möchten diese Elemente beim Scrollen enthüllen. Ich werde das tatsächlich so lassen, wie es ist. Und dann werde ich diese beiden auswählen. Und so werde ich Interaktion und Enthüllung hinzufügen. Sobald es sichtbar ist, können Sie auch die Seite laden, aber ich werde es tun, sobald ich darauf scrolle, wird es ausgeblendet. Das ist also wirklich subtil. Lass uns einen Blick darauf werfen. Wenn ich also scrolle, merke ich, wie das leicht sichtbar wird. Es ist also fast so, dass du es fast nicht merkst. Lass mich dir tatsächlich diesen geben. Und anstatt zu verblassen, nehmen wir an, dieser kommt von links und dann lassen wir diesen von rechts kommen Also sehen wir es ein bisschen besser. Und jetzt schauen wir es uns noch einmal an. Lassen Sie uns die Vollansicht verwenden. Und du kannst sehen, dass es wirklich langsam einfach reinrutscht. Du hast hier auch ein paar verrückte. Wählen wir sie einfach so aus Spaß aus. Also hier, wenn wir zum Beispiel weiterspielen und dann haben wir Drager Ball und wir sagen einfach, du kannst überall hinziehen, und dann kannst du sehen, jetzt können wir diese Elemente einfach herumziehen Ich bin mir nicht sicher, wie nützlich das ist, aber spielen Sie einfach mit ihnen und sehen Sie, was für Sie nützlich sein könnte Seien Sie vorsichtig mit Animationen, aber verwenden Sie sie dort, wo sie Sinn machen 13. GRUNDLAGEN: Karten und Videos einbetten: Einbettet. Also ein Teil unseres Blocks Wenn du also auf eine Plus-Schaltfläche klickst, siehst du die Blöcke, genau hier am Ende habe ich gerade die Einbettungen Ich nehme dieses Wort also noch in der Betaphase auf, es könnte also etwas eingeschränkt sein, und ich hoffe, dass Sie eine bessere Anpassungsfähigkeit sehen Aber ich möchte dir nur zeigen, was vorerst möglich ist. Also haben wir momentan drei URLs, YouTube und Google Maps. Also URL, wenn ich das hinzufüge, kannst du sehen, dass nur du eine URL oder einen HGML-Code hinzufügen kannst Diejenigen, an denen Sie wahrscheinlich mehr interessiert sind, sind unsere YouTube-Videos Fügen wir also diesen und einen von Google Maps hinzu. Wenn Sie sie also auswählen, sehen Sie bereits, dass sie im Eigenschaftenbereich weniger Eigenschaften haben . Aber was Sie tun können, ist, sie jetzt nicht einfach zu löschen, sondern zu kopieren. Und dann kannst du zum Beispiel diesen Helden auswählen und ihn hier hinzufügen. Sie könnten es also auch als Element in einem Ihrer anderen Blöcke oder Layouts haben . Es hat also vielleicht weniger Optionen, aber Sie können es trotzdem relativ gut positionieren. Jetzt wollen wir hier ein Video hinzufügen und wir wollen hier eine Karte hinzufügen. Was wir also brauchen, wenn wir das auswählen, das kannst du hier oben sehen, wir brauchen eine URL oder etwas HTML. Bei YouTube können wir also einfach unsere YouTube-URL hier einfügen. Also werde ich mir einfach eines aus meinen Videos holen. Also das ist auf meinem YouTube-Kanal. Wenn du also deine eigenen Videos verwenden möchtest, musst du sie zuerst auf deinen eigenen Kanal hochladen. Wir könnten auch einfach jedes andere YouTube-Video einbetten. Suchen Sie nach der Schaltfläche „Teilen“ und kopieren Sie dann über die Schaltfläche „Teilen“ einfach den Link zum Teilen. Und jetzt fügen wir es einfach hier ein. Und du kannst jetzt sehen, dass dein Vorschaubild schon da ist. Sie können wählen, ob Sie Autoplay möchten. Sie möchten den Vollbildmodus aktivieren, damit die Benutzer ihn vergrößern können. Und im Moment muss ich tatsächlich sagen, dass es eine kleine Sache gibt, von der ich hoffe, dass sie bald gelöst wird, nämlich das Vorschaubild, die Abmessungen sind nicht korrekt für YouTube Du kannst also auf das Seitenverhältnis-Protokoll klicken und es dann einfach auf die richtigen Abmessungen einstellen auf die richtigen Du kannst sie auch einfach von YouTube herunterladen. Wenn du willst, mache ich das vorerst einfach manuell, damit es gut aussieht. Hier haben wir unsere Karte und du kannst sehen, dass wir eine URL oder etwas HGML haben , wir können eine URL bekommen oder eigentlich nur einen Iframe Ich werde hier dasselbe tun. Ich werde zu Google Maps wechseln. Also habe ich jetzt einfach nach Berlin gesucht und alles, was ich tue, ist , den gemeinsamen Standort für Berlin zu finden. Sie können auch eine bestimmte Straße mit einer Hausnummer hinzufügen, und ich kopiere einfach den Link. Eigentlich nein, ich will die Karte einbetten. Also klicke ich auf Einbetten und du kannst hier sehen, dass das ein Iframe ist, und ich werde diesen Iframe kopieren Lassen Sie uns jetzt zu unserer Figma-Datei zurückkehren, und ich werde sie hier einfügen Und wenn wir jetzt auf unsere Vorschau klicken, können Sie sehen, dass wir dieses Video haben, sodass wir es hier abspielen können Blogs und Größen***. Und Sie können auch nach unten scrollen, und dann haben Sie Ihre Karte, die Sie genauso verwenden können, wie Sie es bei Google Maps tun würden. Sie also in Ihren Feature-Blöcken Wenn Sie also in Ihren Feature-Blöcken diese Karte mit einer Adresse verwenden möchten, finden Sie hier auch eine. Sie können diesen Block also einfach ersetzen. Im Grunde können Sie einfach diesen verwenden, und Sie könnten jetzt einfach all diese Informationen hinzufügen, so wie wir es zuvor getan haben. Eigentlich sollten wir es trotzdem speichern, damit du hier sehen kannst , ob ich das jetzt hier einfüge, und lass uns das nochmal abspielen. Du siehst jetzt also, wenn du den Block scrollst, kannst du die Informationen hinzufügen und du siehst die integrierte Karte. 14. GRUNDLAGEN: Code-Ebenen mit Figma Make: Figma Make- und Codeebenen. Es gibt also eine großartige Funktion, die wir noch nicht erforscht haben, und das ist Figma Make, das Code in unsere Seite integriert Und wir können diese kleinen Blöcke buchstäblich mit Code erstellen kleinen Blöcke buchstäblich mit Code Also es gibt derzeit bei dieser Version, ist immer noch die Beta-Version, zwei Stellen, wo man sie findet. Du findest es also hier in der Leiste, und hier kannst du sehen, dass es eine komplette Seite öffnet, sodass du auch einfach eine eigene Seite mit Figma Make erstellen kannst Was ich Ihnen zeigen möchte, ist dieser Teil hier, wo wir ihn als Codeebenen verwenden Sie können also sehen, dass es sich in diesem kleinen Embed- oder Make-Feld befindet, das wir derzeit haben. Also klicken Sie einfach darauf und es öffnet sich das Interface. Sie sehen also diese kleine Codeebene hier, und wir können sie auf unserem Design platzieren. Und dann bekommen wir dieses Fenster mit der Codeebene. Und jetzt ist es ziemlich einfach. Alles, was Sie tun müssen, ist ein KI-Tool, und Sie beschreiben die Idee , die Sie entwickeln möchten. Das könnte also wirklich alles sein, und Sie können sehen, dass es uns hier einige Ideen gibt, wie zum Beispiel ein Hintergrund mit Farbverlauf, eine Digitaluhr. Lassen Sie uns also einfach die Digitaluhr nehmen , und dann können Sie eine Eingabeaufforderung sehen aussehen würde, sodass Sie es hier sehen können. Wenn wir jetzt auf diese Schaltfläche klicken, wird dieser Code für uns generiert. Das könnte also eine Weile dauern, also werde ich das im Hintergrund für Sie beschleunigen. Und jetzt können Sie sehen, dass die Codeebene generiert wurde. Beachten Sie, dass wir unsere Ebene sehen können, sodass sie für jeden Breakpoint generiert wurde Sieht so aus. Es gibt uns einige Optionen, mit denen wir diese Art der wichtigsten Parameter ändern können. Sie können Ihren Code hier sehen. Und du kannst es normalerweise auch nebeneinander sehen, und dann kannst du deinen Chat hier führen, sodass du auch sagen kannst, dass er Änderungen vornehmen soll. Aber lass es uns vorerst einfach benutzen. Wenn wir das schließen, können wir es hier sehen, also können wir es verschieben und Sie können sehen, wie üblich, müssen wir das wahrscheinlich einrichten und das automatisch anordnen und ein wenig positionieren. Aber im Grunde haben wir hier diesen kleinen Block. Wenn wir also Pu-Ansicht drücken, dann sieht man, dass das eine funktionierende Uhr ist, die wir jetzt wie jedes andere Element hier positionieren und in unser Design integrieren können jedes andere Element hier positionieren . Sie können also hier oben sehen, dass wir den Code auch bearbeiten können, sodass Sie hier wieder einsteigen können. Und was mir dann wirklich gefällt, ist dieser kleine Teil hier, nämlich Point and Edit. So kann ich das zum Beispiel verwenden, und jetzt kann ich auf verschiedene Bereiche in meinem Design zeigen. Also kann ich das auswählen, damit ich die Farbe hier ändern kann. Also das sind alles mögliche Design-Dinge, aber du kannst auch über deine Code-Ebene sprechen oder mit ihr chatten und ihr dann sagen, was zu tun ist. Lassen Sie uns das also ausprobieren und versuchen, ob es uns eine AM- und PM-Version anstelle dieser Art von Uhr geben könnte . Und normalerweise ist es ein KI-Tool, sodass man nie wirklich weiß, was passieren wird, also muss man vielleicht ein bisschen herumspielen. Also nochmal, das wird im Hintergrund eine Weile dauern. Ich werde das für dich beschleunigen. Sie können also sehen, dass es das für uns geändert hat. Lass uns jetzt etwas anderes versuchen. Die Seite, die wir erstellen, ist also für Freelancer. Also, was ich tun möchte, ich möchte diesen Rechner haben , damit ich meine Preise hinzufügen kann, und dann können die Leute quasi eine erste Schätzung berechnen , wie hoch meine Dienstleistungen sein würden, und sich dann an mich wenden Im Moment beschreibe ich immer noch gerne beschreibe in JGBT oder Claude, was mir gefällt, und bitte es dann, eine entsprechende Aufforderung für mich zu schreiben Das macht deine Aufforderung also nur etwas klarer. Also habe ich es vage vorgestellt. Ich möchte einen Kostenvoranschlag für Sie . Ich entwerfe die Website So können potenzielle Kunden zwischen einem Standard - und einem Premium-Grundpreis wählen . Und dann möchte ich etwas für das Logo, die Typografie, das Bild und eine Landingpage machen, und dann sehen sie die Summe Also wollte ich eine Eingabeaufforderung erstellen, und dann benutzen wir einfach diese Aufforderung Normalerweise arbeite ich ein bisschen und passe das erste an, aber ich werde es einfach so kopieren, und jetzt springen wir zu Make und fügen es dort ein. Das musst du nicht tun. Du kannst es auch einfach hier reinschreiben und dann damit spielen. Aber ich finde einfach, dass es mir bessere Ergebnisse bringt. Aber auch hier ist es absolut nicht nötig, die Aufforderung vorab zu berücksichtigen wenn Sie es einfach vorziehen, sie selbst zu schreiben. Also nochmal, ich werde das im Hintergrund für Sie beschleunigen . Das sieht ganz nett aus, also schließen wir es und schauen wir uns unsere richtige Seite an. Ich werde einfach wie gewohnt das automatische Layout einrichten. Drücken Sie die Eingabetaste. Sie können das wirklich wie alle anderen Ebenen verwenden. Füllen Sie also den Behälter und lassen Sie uns ihn jetzt in Aktion sehen. Wir können also sehen, dass wir jetzt jeden anderen Preis wählen können. Sehr reizend. Und dann hier unten müssen wir tatsächlich zurückspringen, weil wir diesen einstellen müssen, denken Sie daran, den Inhalt zu umarmen, damit wir den vollen Inhalt sehen, es funktioniert nicht Stellen Sie also einfach die Erstellungsebene so ein , dass sie auch den Inhalt umarmt. Und jetzt solltest du es sehen können. Also lass uns zurückgehen. Jetzt können wir nach unten scrollen. Und dann können Sie sehen, dass während ich das ändere, mein Inhalt automatisch aktualisiert wird . Also wirklich, wirklich reizend. Und das reagiert natürlich sofort voll und ganz. Jetzt kannst du immer zurückkehren. Sie können die Codeebene auswählen und zurück zu Bearbeiten springen Dort können Sie dann alle Änderungen vornehmen. 15. VERÖFFENTLICHEN: Veröffentlichen Sie Ihre Website: Lassen Sie uns also Ihre Website veröffentlichen, und das ist wirklich, wirklich einfach. Wenn Sie also zufrieden sind, klicken Sie einfach auf Veröffentlichen. Und dann wird Figma dir eine zufällige Zahl oder ein zufälliges Wort geben, und dann ist zufällige Zahl oder ein zufälliges Wort geben, es Punkt Figma Punkt SIDE, und das ist eine kostenlose URL, die du vorerst verwenden kannst Sie können Ihre benutzerdefinierte Domain später verbinden, aber vorerst ja, verwenden Sie diese Dann klicken Sie einfach auf Veröffentlichen. Und sobald Sie das Update gesehen haben, können Sie einfach auf diesen Link klicken und dann sehen Sie Ihre echte Website live. Es reagiert vollständig und Sie können jederzeit zurückgehen und einfach aktualisieren und auf Ihre Live-Site wechseln. 16. VERÖFFENTLICHEN: SEO, Favicon und soziale Weitergabe: Unsere Seite sieht also gut aus, aber es gibt einige zusätzliche Informationen, die wir hinzufügen sollten, also ein paar Informationen über die Seite Vielleicht wollen wir ein kleines Favicon, das ist das Ding in der Kopfzeile Also lasst uns hier auf unsere Einstellungen klicken und dann können wir allgemeine Einstellungen haben und wir haben Domaineinstellungen Hier können Sie also Ihre Domain verbinden und sie weiter kontrollieren, wenn Sie dies tun. Im Allgemeinen können Sie dann aber auch einige Informationen zur Seite hinzufügen. Hast du einen Titel, also was steht in einem Tab. Es ist nicht der beste Titel hier, aber das belassen wir dafür. Und dann haben wir eine Seitenbeschreibung. Das ist zum Beispiel so, wenn Sie es irgendwo kopieren, sie sehen es oder Suchmaschinen. Also hier würdest du eine Beschreibung hinzufügen wollen. Das ist zum Beispiel mein Portfolio. Also was ich tun werde, ich werde mir diesen ersten Teil hier schnappen und ihn hinzufügen. Eigentlich ist es eine gute Idee, wenn du Claude oder ChachiBT benutzt , um danach zu fragen, dir zu helfen, diese Beschreibungen zu schreiben und all das auszufüllen, und dann kannst du sagen, dass es Suchmaschinenoptimierung verwendet Sprache. In meinem Fall ist das Englisch, also werde ich Google Analytics verlassen. Das ist wirklich praktisch. Wenn du also sehen willst, wer klickt, wer deine Seite besucht, siehst du nicht, welche Person, aber du siehst, aus welchen Ländern demografisch sodass du einen kleinen Überblick bekommst, dann kannst du ein Analytics-Konto einrichten, und sie werden dir diesen Quellcode geben und du kannst ihn einfach da reinkopieren und er wird ihn verfolgen. Dann können Sie Websites aus den Suchmaschinenergebnissen ausschließen. Ich werde es so belassen, weil dies nur eine Demoseite ist. Aber wenn das deine Seite ist, möchtest du natürlich , dass sie nicht angeklickt wird, damit du sichergehen kannst, dass Suchmaschinen dich finden können Hier haben wir ein Favicon, also kleines Ding im Kopf und dieses kleine Symbol, das Sie sehen, und dieses kleine Symbol, das Sie sehen, dann ein Bild zum Teilen in sozialen Netzwerken Also lasst uns diese beiden einrichten. Also Favicon, 48 mal 48 und Social Sharing 1.200 mal 630. Also lass uns rüberspringen und das können wir tatsächlich genau hier machen Lassen Sie uns also unser Favicon einrichten. Also das war 48 mal 48. Also brauchen wir einen Rahmen. Sie können entweder hier klicken und einfach den Rahmen holen oder F drücken, und dann lassen Sie uns einfach einen Rahmen zeichnen und sicherstellen, dass die Abmessungen 48 mal 48 sind. Das wird also ziemlich klein sein. Also, ja, das Favicon ist kleine Header , den Sie später hier oben auf Ihrer Website haben Da ist so etwas wie dieses kleine Icon. Also werde ich einfach nach dem Zufallsprinzip etwas mit den Farben von meiner Seite erstellen. Also werde ich das für dich beschleunigen . Also, ja, das ist nur eine zufällige Idee, die ich hatte und die meiner Meinung nach gut zu meinem Design passt. Ich werde das Fabricon nennen. Du könntest also entweder das Favicon exportieren und dann wieder importieren, oder das ist tatsächlich viel einfacher Spring einfach hier rüber und gehe dann in deine Favicon-Einstellungen Und hier siehst du, wir nennen es Fabricon und du kannst es einfach auswählen und dann wird es angezeigt Also lass es mich dir zeigen. Lass uns noch einmal veröffentlichen. Und lass uns unsere Seite besuchen. Und jetzt können Sie hier oben sehen, dass unser kleines Favicon angezeigt Eigentlich liebe ich mein Favicon so sehr, dass ich es einfach in ein Logo ohne Hintergrund umwandeln werde, damit in ein Logo ohne es nicht so auffällig Also lass uns das hier nach oben verschieben. Ich werde daraus tatsächlich eine Komponente machen. Und jetzt werde ich das alles einfach durch mein neues Logo ersetzen . Kleiner Tipp, was Sie tun können, um es für Ihre gesamte Gruppe zu verwenden, ist es auszuwählen , und dann haben Sie hier oben eine Mehrfachbearbeitung, sodass Sie all das loswerden können. Und dann können wir auch diesen auswählen. Und jetzt ziehen wir eine Instanz heraus und fügen diese Instanz hier hinzu und das müssen wir für jede Instanz einzeln ausführen. Und ich werde dasselbe für mein Futter tun. Also werde ich das loswerden. Ich werde diesen auch loswerden. Und ich werde das hier einfach hinzufügen. Okay, großartig. Also hier kannst du mal nachschauen, denn das sind Komponenten, das hat mein Logo überall hinzugefügt. Nun, da wir die Seite haben, auf der wir sie haben wollen, richten wir unser Vorschaubild ein. Lassen Sie mich hier rüberspringen und Sie können sehen, dass es 1.200 630 sind, also werde ich das machen Also drücke ich F und zeichne einen Rahmen dieser Größe. Also 1.200. Mal 630 Und dann können Sie alles , was Sie wollen, als Vorschau hinzufügen. Sie können das ganz nach Ihren Wünschen gestalten. Ich werde einfach den einfachen Weg gehen und einfach eine Vorschau davon hier oben kopieren Es gibt also einen kleinen Trick, wie Sie das kopieren können, damit Sie nicht exportieren und importieren müssen Drücken Sie Shift Command und C, und das sollte ein PNG für Sie kopieren. Sie werden also eine kleine Warnung sehen, die Sie als PNG kopiert haben. Wählen Sie dann den Frame aus, in den Sie ihn einfügen möchten, und drücken Sie einfach Command und V. Also nur ein normales Einfügen Und jetzt wirst du quasi ein Bild von dem haben , was du hier oben geschnappt hast Oh, das kleine Problem, das ich hatte, ist, dass ich das alles abgeholt habe, also will ich das nicht Also werde ich vorerst einfach einen Screenshot machen Also lass mich das von meinem Computer holen. Ich werde es einfach hier einfügen. Und dann ist das mein kleines Vorschaubild. Und auch hier kannst du es ganz nach deinen Wünschen anpassen, also gebe ich ihm einfach einen dunklen Hintergrund Und ich werde das Vorschau nennen. Springe zurück zu deinen Einstellungen. Und dann kannst du das normalerweise einfach von hier holen. Und jetzt , wo immer du das deinen sozialen Netzwerken teilen willst, wird es auftauchen Sie können auch mehr Code hinzufügen. Wenn Sie hier also mit CSS vertraut sind, haben Sie die Möglichkeit, benutzerdefinierten Text-, Header- und Kopfcode hinzuzufügen, was auch immer Sie hier hinzufügen möchten. Dies sind jedoch die Grundeinstellungen, die Sie benötigen. 17. VERÖFFENTLICHEN: Verbinden einer benutzerdefinierten Domäne: Lassen Sie uns also die benutzerdefinierte Domain verbinden. Sie müssen diese Domain also zuerst bei einem beliebigen Anbieter kaufen. Ich habe meins bei Go Dei gekauft, also werde ich Ihnen das zeigen, aber Sie können auch jeden anderen Anbieter verwenden. Also infigmasites, gehe zur Veröffentlichung und dann kannst du eine Domain verbinden Sie befinden sich in der Einstellung, sodass Sie sie auch hier sehen . Klicken Sie erneut auf Domain verbinden und geben Sie dann einfach die Domain ein, die Sie bei Ihrem bevorzugten Anbieter gekauft haben Sobald Sie das getan haben, klicken Sie auf Sicher. Unten sehen Sie jetzt die sogenannten DNS-Einstellungen. Also müssen wir sie mit unserem Anbieter hinzufügen. Das klingt ein bisschen knifflig, ist aber eigentlich nicht so schwer. Zählen Sie, wo Sie Ihre Domain einsteigen, und dann müssen Sie nach den DNS-Einstellungen suchen. Wenn Sie jemals Probleme haben, diese Adresse zu finden, gibt es normalerweise einen Ansprechpartner für den Kundensupport , den Sie fragen können. Hier sehen Sie also Ihre DNS-Einträge, und wir fügen nur die hinzu, denen mitgeteilt wurde. Sie müssen also nicht viel darüber verstehen. Sie müssen nur einen CNAME-Datensatz und einen Textdatensatz hinzufügen. Und Sie können die Informationen einfach direkt aus FIGMA kopieren. Jetzt gehen wir hier rein und dann finden Sie eine Schaltfläche, mit der Sie einen Datensatz hinzufügen können In der Drop-down-Liste haben Sie den Datensatztyp, den Sie hinzufügen können. Hier wählen wir den Cname und dann fügen wir einfach Informationen ein, die Figma uns gegeben hat , und speichern sie jetzt und sie werden hinzugefügt Und jetzt können Sie sehen, dass wir tatsächlich die Fehlermeldung erhalten , dass dies bereits existiert Also müssen wir hier nachschauen und dann können wir sehen, dass wir schon einen C-Namen dafür haben. Ein C-Name zeigt also im Grunde einfach nur in eine Richtung. Also werden wir die Mondblöcke, die wir hier standardmäßig hatten , gegen unsere neuen austauschen. Und dann werden Sie möglicherweise gebeten, zu verifizieren, dass Sie der tatsächliche Besitzer sind. Und dann fügen wir einfach unseren Textdatensatz hinzu. In diesem Fall handelt es sich lediglich um eine Eigentumsüberprüfung. Und so können Sie sehen, dass es bereits einige gibt. Fügen wir also auf jeden Fall einfach unsere hinzu, und dann können wir uns später um etwaige Fehler kümmern . Also gehe ich einfach davon aus, dass Sie nicht viel über DNS-Einträge wissen. In diesem Fall kopieren Sie es einfach da rein und dann werden wir überprüfen, was passiert. Kopieren wir also auch diesen. Und dann werden wir einfach gebeten , das wahrscheinlich noch einmal zu überprüfen, wenn wir es sagen. Also mach weiter und verifiziere einfach , dass du der Besitzer bist. Und wenn wir zu Figma zurückkehren, können wir sehen, dass CNM funktioniert, aber mit den DNS-Einträgen scheint etwas nicht zu stimmen Es könnte eine Zeitverzögerung sein. Lass uns das nochmal versuchen. Aber anstatt einfach zu warten, werde ich das überprüfen, und dafür verwende ich gerne ein LLM Ich habe also keine Ahnung von diesen Aufzeichnungen. Ich werde nur einen Screenshot denen machen, die mir einen Fehler zeigen, und ich werde auch einen Screenshot von dem machen, was Figma mir gibt, und dann werde ich das einfach in die ALM legen , die dir gefällt Ich verwende CGPT, aber Sie können auch jedes andere ALM verwenden. Also werde ich diese Bilder einfach in meinem ALM ablegen , in meinem Fall JGBT Und dann werde ich es einfach fragen , so wie ich es bei jedem beliebigen Kundendienst oder Entwickler tun würde jedem beliebigen Kundendienst oder Entwickler Ich sage Ihnen also, dass ich versuche, Pigma-Sites mit meiner Go Daddy-Domain zu verbinden , und Sie würden den Anbieter hinzufügen, den Sie verwenden Und dann bitte ich Sie, einen Blick darauf zu werfen, denn ich bin etwas verwirrt, weil ich nichts über DNS-Einträge weiß, ist, ob bitte ich Sie, einen Blick darauf zu werfen, denn ich bin etwas verwirrt, weil ich nichts über DNS-Einträge weiß, ist, ich diese beiden Datensätze tatsächlich benötige ? Muss ich etwas löschen? Und ich werde es einfach bitten , mir dabei ein bisschen zu helfen. Und solche Sachen funktionieren super gut weil es sich buchstäblich um technische Informationen handelt. Es sagt mir also den C-Namen, wie wir Figma bereits gesehen haben, das funktioniert gut Und dann sagt es mir hier, dass es ein Problem gibt. Es zeigt mir also tatsächlich , dass es auf eine Stunde eingestellt ist. Also das ist im Allgemeinen in Ordnung. Ich bin vielleicht ein bisschen geduldig, und was sagt es mir dann noch? Sie müssen keine von beiden löschen, also sind beide in Ordnung. Warten Sie dann ein wenig und aktualisieren Sie sie also sind beide in Ordnung. Warten Sie dann . Ich bin also nicht sehr geduldig. Also das Einzige, was ich ändern werde , weil alles andere in Ordnung zu sein scheint. Ich werde das einfach auf eine halbe Stunde ändern , ein bisschen warten und dann aktualisieren. Und mein Patient wurde belohnt. Jetzt kann ich sehen, dass alles miteinander verbunden ist, also können wir auf den eigentlichen Link klicken, und dann können wir jetzt unsere voll funktionsfähige Website sehen. Also ja, alles ziemlich einfach. Und wenn Sie Probleme haben, dann nutzen Sie Ihre LLMs. Es wirkt Wunder Ein paar Randnotizen. Das sollte funktionieren, aber manchmal können Sie nur auf die Seite zugreifen, wenn Sie WWW eingeben und nicht nur den Namen. In diesem Fall müssen Sie es also weiterleiten. Entschuldigung, das ist auf Deutsch, aber Sie müssen Ihren Forward finden, HTDPS wählen und dann müssen Sie zum WWW weiterleiten, und dann wird es immer funktionieren, egal ob sie die ThreeWS oder nur den Namen eingeben Und dann speichern Sie es, und es sollte jetzt gut funktionieren. 18. VERÖFFENTLICHEN: Grundlegende Informationen zur Barrierefreiheit: Einstellungen für Barrierefreiheit. In diesem Video gebe ich Ihnen einen kleinen Überblick über die aktuellen Einstellungen zur Barrierefreiheit, die wir auf FicMA-Websites haben und die sich wahrscheinlich auch im Laufe der Zeit weiterentwickeln Sei dir nur bewusst, dass Barrierefreiheit in vielen Ländern tatsächlich eine gesetzliche Anforderung ist , die du erfüllen musst, und dass es für verschiedene Länder unterschiedliche Rollen gibt Es liegt also in Ihrer Verantwortung , dies selbst nachzuschlagen und im Zweifelsfall einen Anwalt zu konsultieren und sicherzustellen, dass Sie wissen, was Sie liefern müssen. Das ist also keine Rechtsberatung, die ich Ihnen gebe. Ich führe Sie nur durch die Einstellungen, die wir derzeit zur Verfügung haben. Fangen wir also mit unserem Text an. Also haben wir auf jeder Seite normalerweise eine Hauptüberschrift, und das ist die sogenannte H-Überschrift . Also die erste Überschrift. Wählen Sie nun diese Überschrift aus, und Sie können hier unten im Eigenschaftenfenster auf der rechten Seite sehen, dass es ein Eingabehilfenfenster gibt. Und weil wir Typografie ausgewählt haben, erhalten wir die Typografie-Tags Nun, P, das ist einfach irgendein normaler Kopiertext. Also, dieser hier sollte zum Beispiel als P gesetzt werden Schauen wir uns das an, und das ist richtig. Nun, das ist unsere Hauptüberschrift, H eins, also wollen wir das in unsere H-Überschrift ändern. Wir sind uns bewusst, dass es immer nur eine H-Eins pro Seite gibt. Sie können mehr H zwei, H drei haben, aber es sollte nur ein H eins geben. Beachten Sie nun, dass ich persönlich meine Stile nicht H eins, H zwei, H drei usw. nenne , was Sie aus dem Grund , den Sie hier gleich sehen werden, häufig aus dem Grund , den sehen werden. Ich habe also eine Anzeigenüberschrift, dann habe ich andere Überschriften. Also das ist der Stil. Das ist meine visuelle Hierarchie. Und das hier, die Tags, das ist meine Hierarchie, wenn jemand mit einem Screenreader das liest. Auf unserer Unterseite verwende ich zum Beispiel nicht diese Display-Überschrift, verwende ich zum Beispiel nicht diese Display-Überschrift, aber das ist immer noch eine weil das immer noch die Hauptüberschrift ist. Also ich möchte das hier immer noch verwenden. Nur eine kleine Randnotiz. Dafür gibt es verschiedene Herangehensweisen. Ich bin ein starker Befürworter der Entkopplung Ihres CSS-Textes von Ihren Stilnamen Denken Sie also wirklich darüber nach, wie jemand das lesen würde. Also das wird wahrscheinlich der wichtigste sein. Dann wäre das wahrscheinlich unser Alter von zwei Jahren, oder vielleicht haben wir hier eine Schlagzeile. Das könnte auch ein Alter von drei Jahren sein. Und einfach so würde ich da durchfahren. Also diese hier sind wahrscheinlich die unwichtigsten Schlagzeilen, also würde ich daraus eine vierjährige machen. Und hier kannst du sehen, dass du mehrere Altersstufen haben kannst, aber du hast nur ein Alter von eins Dann irgendeinen Text kopieren, der normalerweise schon auf P gesetzt ist , und wir können ihn einfach dort belassen Nun haben Sie vielleicht bemerkt , dass beim Veröffentlichen Fehler angezeigt werden. Wenn Sie also Probleme haben, hilft Ihnen Figma tatsächlich, diese zu lösen. Bisher haben wir sie ignoriert, aber lassen Sie uns einen Blick darauf werfen denn sie sollten alle auf Ihrer letzten Seite gelöst werden Hier sagt es uns also, dass wir hier tatsächlich mit diesem beginnen sollten. Es fehlt ein Etikett. Das heißt, wir haben ein Bild ohne Etikett. Lass uns hier klicken und dann springen wir zu diesem Bild. Und eigentlich müssten wir das wirklich zu all unseren Bildern hinzufügen . Was wir tun müssen, ist, wann immer wir ein Bild verwenden, dann müssen wir einen Namen oder eine Beschreibung hinzufügen, ein sogenanntes Alt-Tag. Also machen wir hier weiter. Wir klicken auf Plus und dann haben wir ein Etikett, und jetzt werden wir beschreiben, was wir hier sehen. Jeder, der einen Screenreader verwendet könnte jetzt verstehen, was hier passiert, also für den Fall, dass er diese Bilder nicht sehen kann. Und das müssen wir wirklich für alle tun. Wenn Sie ein dekoratives Bild haben, können Sie diese kleine Taste drücken. Manchmal hast du vielleicht einfach etwas dazwischen , das ist wie ein Hintergrund oder ein Platzhalter oder so Dann kannst du wirklich einfach hier klicken und das deaktiviert die Alt-Taste Aber auch hier, wenn du zum Beispiel dein Profilbild hast, achte einfach darauf, dass du ein Bild hinzufügst und dass du eine Beschreibung schreibst. Also hier, wo du deinen Namen schreiben würdest. Und das muss wirklich für alle Bilder passieren , die Sie verwenden. Ein weiterer wichtiger Teil, den Sie über diese Einstellungen zu Ihrem CSS hinzufügen können, ist die allgemeine Struktur. Nochmals, um besser lesen zu können, und das wird übrigens auch Ihre Suchmaschinenoptimierung verbessern . Wählen Sie zum Beispiel hier das aus, und dann können Sie im Text diesen Abschnitt sehen, der bereits als Überschrift markiert ist. Wir sollten also einen Header haben und ihm dann auch sagen , dass der Putter der Futer ist Man kann also sehen, weil das wohl als Putter-Block gespeichert wurde , dieser schon abgeholt wurde, aber ansonsten sollte man das von Hand machen Lassen Sie uns diese Haupt-Tags tatsächlich 1 Sekunde durchgehen. Also ein Div, das ein allgemeiner Container ist, also keine semantische Bedeutung Dann haben Sie einen Artikel, der ein eigenständiger Inhalt ist , der eigenständig sein könnte, wie zum Beispiel ein Blogbeitrag, und dann eine Website, die Inhalt bedeutet, der sich auf den Hauptinhalt bezieht wie eine Seitenleiste oder eine Notiz Dann haben wir einen Button, ganz offensichtlich. Also ein interaktives Element , das beim Anklicken eine Aktion ausführt Wir haben eine Abbildung, die verwendet werden kann, um Medien wie ein Bild oder ein Diagramm mit einer optionalen Bildunterschrift zu Medien wie ein Bild oder ein Diagramm mit einer optionalen Bildunterschrift Dann haben wir die Puta, die den Puta-Bereich der Seite definiert, das ist also ziemlich einfach Dann haben wir unsere Kopfzeile, die den oberen Bereich der Seite markiert, oder den Abschnitt, der normalerweise Titel oder Navigation Wir haben unseren Hauptinhalt, der den Hauptinhalt der Seite darstellt, ausgenommen sich wiederholende Elemente wie Nag Bar oder Puta Und dann haben wir genug, was die Navigationslinks für die Seitenbereiche enthält die Navigationslinks für die Seitenbereiche Und dann haben wir einen Abschnitt, also das ist semantisch gesehen ein Gruppenabschnitt oder Inhalt, wie ein Kapitel der Seite Also zum Beispiel unser „ Über uns“ -Teil, das könnte ein Abschnitt sein Und dann haben wir das hier als Header, und dann könnten wir noch etwas weiter gehen und wir könnten zum Beispiel sagen, dass wir das genau hier oben in unserer Komponente taggen könnten , wenn wir die Komponente verwenden, wenn wir es nicht einfach auf der Seite hinzufügen könnten. Das ist also unser Header. Und dann das hier, das wäre unser NAF. Sie können sehen, dass das schon eingerichtet ist. Und dann unser Button, dieser sollte als Button registriert werden. Und hier kannst du sehen, dass es zum Beispiel nicht abgeholt habe. Das können wir also tatsächlich direkt hier auf dem Button machen. Wenn wir es jetzt hier auswählen, weil es verschachtelt ist, können Sie sehen, dass es auch aufgenommen wurde Es ist eine gute Idee, all dies in Ihrer Komponente einzurichten , wenn Sie sie und für andere Elemente direkt auf Ihrer Seite verwenden andere Elemente direkt auf Ihrer Seite Barrierefreiheit ist also viel mehr, als hier und da ein bisschen Farbkontrast und ein paar Tags hinzuzufügen Farbkontrast . Aber als Designer kannst du schon ziemlich gute Arbeit leisten. Wie gesagt, das bedeutet nicht, dass Sie sich mit den allgemeinen Regeln Ihres Landes vertraut machen müssen , aber es gibt einige großartige Tools derzeit nur im Figma-Design und nicht auf Websites Ich hoffe, wir sehen sie bald auf Websites, in die sie integriert werden. Wenn Sie also im Figma-Design sind, gehen Sie über das Aktionsfeld zu Ihren Plugins Es gibt verschiedene. Es gibt eine namens ID. Es gibt einen namens Stark, also zeige ich dir einfach Star auch nur Google für Barrierefreiheit und probiere verschiedene aus. Und das ist wirklich toll, weil es mit einem Kontrast-Checker ausgestattet So könnten wir zum Beispiel überprüfen, ob wir die Textfarben haben, können wir sie tatsächlich auf welchem anderen Hintergrund verwenden also zum Beispiel diesen Text Sie könnten also zum Beispiel diesen Text nicht für diesen Text verwenden, aber Sie könnten zum Beispiel diese dunkle Textfarbe für eine der hellen verwenden . Sie sehen also, welcher vorbeikommt. Es gibt mehr Informationen. Und es gibt noch andere Themen wie Typografie, Berührungsziele, Vision Auch hier erhalten Sie alle Textfokus-Überschriften. Sie haben also all das hier drin , um ein bisschen tiefer einzutauchen 19. BIBLIOTHEK: Einführung in Bibliotheken: Richten Sie Ihre eigene Seitenbibliothek mit Farben, Typografie, Hierarchie und Ihren eigenen Komponentenblöcken Also, wie funktioniert das? Nun, im Grunde können Sie, da Sie Figma-Blöcke verwendet haben, Ihre eigenen Blöcke bauen Sie können also eine ganze Bibliothek einrichten. Das bedeutet, dass Sie Ihre Typografie ganz nach Ihren Wünschen einrichten könnten , also welche Schriftart Sie verwenden, wie sich all das über verschiedene Haltepunkte hinweg verhalten soll , und eine allgemeine Vorstellung von der Hierarchie Also, welche Art von Dynamik willst du hier? Das Gleiche gilt für Ihre Farben Sie können Farbvariablen einrichten, und Sie können sie dann für alle Ihre Designs verwenden und sie einfach aktualisieren. Und Sie können Ihre eigenen Blöcke einrichten, sodass es sich um vollständig anpassbare Komponenten handelt , die für verschiedene Breakpoints eingerichtet sind Sie könnten Blöcke einrichten, aber Sie können auch ganze Seiten einrichten und Vorlagen für jede beliebige Figma-Site-Seite erstellen Sie können diese gesamte Datei als Bibliothek veröffentlichen, was bedeutet, dass Sie sie einfach in Ihrem Team platzieren können , und dann können Sie eine beliebige Site-Datei erstellen oder eine vorhandene Sites-Datei verwenden Und über die Bibliotheksschaltfläche können Sie einfach auf diese externe Bibliothek zugreifen. Sie können jetzt alle Blöcke abrufen , die Sie mit den richtigen Einstellungen erstellt haben. Sie können dies natürlich vollständig anpassen, Bilder hinzufügen, Text ändern, und jede Änderung, die Sie in der Bibliothek vornehmen, wird auch hier widergespiegelt. Sie können es einfach veröffentlichen, wie Sie es mit jeder anderen Website tun würden , die Sie in Websites erstellt haben. Auf diese Weise können Sie Ihre vollständig ansprechende Seite mit Ihren eigenen Komponenten erstellen . 20. BIBLIOTHEK: Verbinden einer Bibliothek: Lassen Sie uns unsere Figma Moon Block-Datei importieren, sie in eine Bibliothek umwandeln und sie mit Pigma-Sites verbinden Als Erstes müssen Sie also in Ihr FigMA-Konto und dann in ein beliebiges Team springen , aber es muss ein professionelles Team oder höher sein Ich habe hier ein neues Projekt erstellt. Ich werde hier reinspringen. Und anstatt eine neue Datei zu erstellen, verwende ich dieselbe Schaltfläche, gehe aber zu Import. Übrigens, in Figma ändert sich die Benutzeroberfläche ziemlich stark, sodass Sie sie möglicherweise an einer etwas anderen Stelle finden Der wichtige Teil ist, dass Sie Import verwenden und jetzt die FIGMA-Datei importieren, die Sie zuvor Das könnte nur einen Moment dauern. Das ist eine ziemlich große Datei, also gib ihr etwas Zeit. Ich werde das hier beschleunigen. Wenn Sie fertig sind, doppelklicken Sie auf die Datei und dann können Sie hier alle voreingestellten Elemente sehen. Sie werden also Farben, Typografie und einige Elemente bereits eingerichtet haben Typografie und einige Elemente bereits eingerichtet Jetzt müssen Sie nichts mehr tun. Wir können so konsumieren, wie es ist, all diese Elemente direkt im Inneren. Das Einzige, was Sie tun müssen, ist, diese Datei in eine Bibliothek umzuwandeln , damit Sie sie verbinden können Also springen Sie hier zu den Assets. Also direkt neben der Datei siehst du die kleine Registerkarte „Assets“, und hier siehst du das Bibliothekssymbol. Klicken Sie auf dieses Symbol und dann auf Veröffentlichen. Auch hier kann es nur einen Moment dauern, da es etwas größer ist, also werde ich das im Hintergrund beschleunigen. Sobald dies erledigt ist, kehren wir zu unserem Team zurück Sie können eine bestehende Sites-Datei verwenden oder ich erstelle einfach eine neue. Also klicke ich erneut auf die Schaltfläche und gehe zu Sites Important, keine Designdatei, aber Sie benötigen eine FIGMA-Sites-Datei, und wir können das überspringen, weil wir ganz von vorne beginnen wollen Verkleinern wir die Ansicht ein wenig, und Sie können sehen , dass es uns bereits die Startseite geben wird, und es gibt eine Desktop-Version und eine mobile Aber in der Datei, die Sie haben, haben wir immer eine Version, alles, Desktop, Tablet und Handy. Also wollen wir dasselbe in unserer Seitendatei haben. Klicken Sie einfach auf eine Plus-Schaltfläche und dann sehen Sie diese hier. Dies ist bereits in genau den gleichen Größen eingerichtet, und wir haben jetzt genau das gleiche Setup wie in unserer Datei. Also wollen wir jetzt unsere Bibliothek verbinden. Also klicken Sie hier auf diesen kleinen Button. Und dann springe zu Bibliotheken. Es gibt Blöcke, aber Sie möchten Bibliotheken, und klicken Sie auf Team-Bibliotheken durchsuchen, und Sie sollten jetzt Ihre Bibliothek finden, wenn nicht sogar nur nach Namen suchen. Sobald Sie sie gefunden haben, habe ich hier zwei, weil ich sie schon einmal installiert habe. Also das ist der, den ich gerade hinzugefügt habe. Du wirst nur einen sehen. Klicken Sie einfach auf Zu Dateien hinzufügen. Und Sie können Ihre Bibliothek jetzt hier in der Bibliothek sehen. Also, selbst wenn du hier rausgehst, findest du es hier die ganze Zeit. Klicken Sie jetzt darauf und dann werden Sie drei Abschnitte sehen, die Bausteine. Das sind also all die kleinen Blöcke, Hero-Navigation, oder Sie können auch Designs haben. Also hier habe ich ein paar fertige Designs für dich oder Wireframes gemacht für dich oder Wireframes Wenn du zurück zur Datei springst, also zur Originaldatei, die du in eine Bibliothek umgewandelt hast, dann kannst du hier sehen, ob du weg von Assets zu Dateien gehst , die drei Seiten haben Also die Bausteine, die Sie standardmäßig sehen , das Wireframe Hier finden Sie also alle Wireframes und Designs. Das ist also ein exakter Spiegel dessen. Alles, was Sie tun müssen, ist entweder die vorgefertigten Blöcke auszuwählen. Sie wählen also einfach einen von ihnen und müssen ihn nur auf die Desktop-Version ziehen, und dann werden auch die anderen Haltepunkte für Sie eingerichtet auch die anderen Haltepunkte für Sie Oder Sie können auch die vorgefertigten Seiten verwenden, und das Gleiche hier, wählen Sie einfach eine von ihnen aus, platzieren Sie sie nur auf der Desktop-Version und alle anderen werden automatisch für Sie eingerichtet automatisch für Sie 21. BIBLIOTHEK: Einrichten benutzerdefinierter Seiten: Lassen Sie uns unsere erste Seite einrichten und auch einige grundlegende Einstellungen für das automatische Layout hinzufügen einige grundlegende Einstellungen für das automatische Layout denn was in Figma-Blöcke integriert wurde, müssen Sie hier von Hand einrichten Also haben wir unsere Seite eingerichtet, aber sie ist immer noch ein bisschen falsch, weil die Sache ist, dass wir nicht das Ganze sehen können Und wenn wir auf Vorschau drücken, also das ist dieser Button hier oder ihr könnt auch diesen benutzen, es ist dasselbe. Was dann passiert, ist, dass wir zwar die Vorschau sehen, aber wir können nicht richtig scrollen. Und wenn wir die Größe ändern, ich weiß nicht, ist es einfach ein bisschen falsch, oder? Es verhält sich nicht so, wie wir es erwarten. Also springen wir zurück. Und richte das ein. Das sind also ein paar automatische Layoutänderungen, die Sie vornehmen müssen. Und wenn Sie meinen reparieren müssen, ist das der einzige Teil , der etwas verwirrend sein könnte. Also folge mir einfach Schritt für Schritt, und es sollte dir gut gehen. Also schnapp dir den Desktop. Sie müssen ihn nur auf dem Desktop einrichten, und er wird ihn für den Rest einrichten. Was wir also tun müssen, ist, dieses Layout von einem freien Fluss auf ein vertikales Layout umzustellen . Also lass uns das machen. Als Nächstes müssen wir das Ganze auf die Mitte und die Oberseite ausrichten. Und dann stellen Sie sicher, dass das alles auf Null gesetzt ist. Also, wenn Sie hier einige Zahlen haben, ändern Sie sie auf Null. Um die gesamte Seite zu sehen, möchten wir die Höhe nicht auf einen festen Wert festlegen, sondern so, dass sie sich an den Inhalt anpasst Das sieht also schon ganz gut aus. Schauen wir uns die Vorschau mal ein wenig an. Wir können jetzt also scrollen, aber Sie sehen immer noch, dass es sich bei der Größenänderung jetzt in der Mitte befindet, aber wir bekommen immer noch diese kleinen Lücken, die wir nicht wollen weil wir wollen, dass alles sehr flüssig ist. Also müssen wir eine letzte Kleinigkeit tun. Also noch einmal, schnappen Sie sich den Desktop-Teil und drücken Sie dann die Eingabetaste, und es werden alle untergeordneten Elemente abgerufen, und Sie müssen sie so einstellen, dass sie den Container füllen. Also, was Dimensionen angeht, nimm das nicht raus. Sie einfach einen kleinen Fehler und wählen Sie dann den Behälter füllen. Und wenn wir das noch einmal überprüfen, dann können Sie jetzt sehen, dass es wirklich gut funktioniert. Und wir können jetzt den gesamten Inhalt nach unseren Wünschen ändern. Wenn Sie also den Text auf dem Desktop ändern, wird sich das nur auf alle anderen Bereiche auswirken Sie können die Bilder natürlich auch ändern , indem Sie einfach das Bild auswählen und dann über die Bildfüllung jedes andere Bild von Ihrem Computer auswählen. Jetzt sind die Seiten bereits für Sie eingerichtet. Vielleicht möchten Sie also ein etwas flexibleres Setup. Sie könnten dann auch die verschiedenen Bausteine verwenden. Lassen Sie uns also eine weitere Seite erstellen. Also werde ich hier unten auf die Webseite gehen. Ich werde das direkt daneben platzieren und es zum Beispiel die Coffeeshop-Seite nennen , und jetzt mache ich dasselbe Setup. Also werde ich ein Tablet hinzufügen, ich werde ein Handy hinzufügen. Anstatt zu den fertigen Seiten werde ich jetzt zu den Bausteinen springen, sodass ich hier dieselbe Navigation sehen kann. Ich werde es einfach hier anbringen und Sie können sehen, dass es bereits dasselbe hinzufügt. Jetzt müssen wir das Setup wiederholen, das wir zuvor hatten, was großartig ist, damit Sie es wieder sehen können. Lassen Sie uns also unsere Hauptseite auswählen und uns dann daran erinnern, dass wir als ersten Schritt eine vertikale Einrichtung benötigen. Dann müssen wir das zentrieren. Wir müssen sicherstellen, dass das alles auf Null gesetzt ist, also fängt es von oben an. Und wir wollen das jetzt so einstellen, dass es sich an den Inhalt anpasst, sodass wir genau so viel sehen wie hier. Die Größenänderung, den gefüllten Behälter, werden wir am Ende machen, aber wir könnten es auch einzeln mit allen machen Sie können also einfach das Element auswählen und es dann so drehen, dass den Container füllt, um die Größe zu ändern Lassen Sie uns also weitere Elemente hinzufügen. Fügen wir vielleicht nur einen kleinen Helden hinzu. Fügen wir das hier hinzu. Und wenn Sie es dann nicht in der gewünschten Reihenfolge haben, können Sie das einfach mit den Auf - und Ab-Tasten ändern. Und beachten Sie auch, dass Sie hier einige Optionen haben. So könnten Sie beispielsweise das Logo und die Schaltflächengruppe oder vielleicht nur eine Schaltfläche ausblenden . Deshalb werde ich auch einfach ein paar Bilder hinzufügen. Schauen wir uns also Undercard an. Also was ich tun kann, ist einfach dieses Bild hier hinzuzufügen, dann vielleicht ein größeres Bild Und wenn Sie so etwas haben, fügen wir auch etwas mehr Text hinzu. Dann möchten Sie vielleicht etwas Abstand dazwischen hinzufügen. Sie könnten das hier hinzufügen, aber das wird allem Abstand hinzufügen, also empfehle ich das nicht. Ich empfehle also, diese beiden auszuwählen und sie dann ebenfalls in eine automatische Layoutgruppe umzuwandeln . Auch das könnte etwas kniffliger sein. Sie drücken also Shift und A und schon wird daraus eine Autolayout-Gruppe. Und jetzt müssen Sie nur noch die Lücke im Inneren festlegen. Und Sie könnten auch eine gewisse Polsterung festlegen, zum Beispiel oben und unten Jetzt hättest du zum Beispiel eine kleine Lücke dazwischen. Übrigens können Sie auch eine Hintergrundfarbe festlegen. Wenn du das möchtest, gibt es hier einige voreingestellte Farben für dich. Sie können diese also verwenden und zum Beispiel eine beliebige Hintergrundfarbe einstellen. Wenn wir hier nun Bilder hinzufügen wollen, dann machen wir das genauso wie zuvor. Klicken Sie einfach hier und verwenden Sie dann das Füllbild und Sie können Bilder von Ihrem Computer hochladen. Und wieder, auch hier, wenn Sie die Reihenfolge ändern möchten, dann können Sie einfach das Element auswählen und dann mit den Auf- und Ab-Tasten das ändern. Außerdem können Sie hier jeden beliebigen Text ändern und er wird an allen Haltepunkten wiedergegeben Wenn wir uns nun die Vorschau dieser Seite ansehen, können Sie sehen, dass sie gut sitzt, aber auch hier haben wir diesen seltsamen Denken Sie also daran, dass wir alles so einstellen müssen, dass es gefüllt ist. Also haben wir es hier schon eingerichtet. Wir könnten also jedes dieser Elemente durchgehen und dann einfach alle so einstellen, dass sie den Behälter füllen, oder Sie können einen kleinen Trick verwenden, die Eingabetaste drücken und jetzt haben Sie alle ausgewählt und stellen sie nun so ein, dass sie den Container füllen. Schauen wir uns das noch einmal an. Und Sie können sehen, dass sich die Größe jetzt gut ändert Ah, schau mal hier nach. Es springt, und das liegt daran, dass wir das gruppieren, also müssen wir innerhalb dieser Gruppe gehen und dann sicherstellen, dass sie auch so eingestellt ist, dass sie den Container füllt Wenn wir uns das jetzt ansehen, dann sollte es jetzt reibungslos laufen und wir können dieses wirklich nette Verhalten sehen Lassen Sie uns jetzt einfach die Seiten verbinden. Um das zu tun, wählen Sie einfach das Element aus , das Sie verbinden möchten. Ich könnte das gesamte Vorschaubild haben oder nur das Bild oder vielleicht nur diesen Link hier drüben. Es liegt an dir. Dann gehe zu Interaktionen. Und dann müssen Sie nur noch eine kleine Interaktion in die Länge ziehen , und Sie können sehen, wie sie sie von allen Haltepunkten hier drüben zum Café herausholt allen Haltepunkten hier drüben zum Und wenn wir uns das jetzt ansehen, können wir unsere Seite hier sehen Wir klicken auf unseren Link und er bringt uns zum Café. Stellen Sie einfach sicher, dass Sie hier einen Breadcrumb hinzufügen, um zurückzugehen. Das kannst du später immer noch machen. Kehren wir zurück zum Design, zur Navigation. Hier haben wir unseren kleinen Brotkrumen. Lass uns das hier hinzufügen. Auch hier gilt: Wenn Sie ein neues Element hinzufügen, stellen Sie sicher, dass es den Container füllt, und wir können jetzt mit einem Link zu unserer Hauptseite zurückkehren. Denken Sie daran, Sie können jeden Text ändern und schon haben Sie eine ziemlich gut funktionierende Website. 22. BIBLIOTHEK: Anpassen der Farbe mit Variablen: Anpassen Ihrer Farben. Lassen Sie uns also ein wenig darüber lernen, wie Farben in unserer Bibliothek funktionieren und wie wir sie anpassen können Farben in Figma werden also im Allgemeinen in sogenannten Variablen eingerichtet Also in Ihrer Bibliothek, und nochmal, das könnte ein bisschen anders aussehen, wenn Sie es sich ansehen Dies ist die erste Version. Das Setup sollte jedoch ziemlich gleich sein. So findest du einen Überblick über deine Farben. Das sind also die aktuellen Markenfarben ich in dieser Bibliothek verwende, und du findest einen kleinen Screenshot, aber du kannst dort nicht wirklich etwas ändern. Wenn du eine Farbe auswählst, zum Beispiel dieses Rot, dann kannst du in deinem Füllmenü sehen, dass es sich dabei um den primären Schrägstrich handelt Also hier ist ein kleiner Clip, damit ich diese Farbe abnehmen kann. Und das wird quasi eine reine Farbe sein damit ich den Hex-Code sehen kann Aber gehen wir einfach zurück, denn was wir wollen, ist wir immer, wenn wir eine Farbe für etwas in unserem Design verwenden, eine Variable verwenden wollen. also über dieses Menü Klicken Sie also über dieses Menü auf dieses kleine Symbol und dann können Sie auf die Variablen zugreifen , die ich bereits für Sie eingerichtet habe. Was also wirklich wichtig ist, wenn Sie Elemente einrichten , ist , dass alles an diesem Element in einer Variablen eingerichtet ist. Wir möchten in Ihrem endgültigen Design niemals einen Hex-Code sehen . Schauen wir uns zum Beispiel diesen an. Wenn wir also diese Option auswählen, können Sie in Ihren Eigenschaftenfenstern auf der rechten Seite sehen, ob Sie sie alle gefangen haben. Gehen Sie nach unten und Sie sehen etwas, das als Auswahlfarben bezeichnet wird, und dann sollten Sie all das mit dieser Variablenschreibweise sehen . Sie möchten also so etwas nicht sehen, auch wenn es nur der Hintergrund ist. Sie können Farben hinzufügen , indem Sie die Elemente auswählen und dann im Filmmenü das kleine Symbol hier verwenden, und dann wählen Sie diese aus. Ich mag es also, es in Textfarben dann in Markenfarben zu unterteilen und dann einige neutrale Farben für Dinge wie den Hintergrund Aber es gibt sehr unterschiedliche Möglichkeiten Sie das einrichten können, also zögern Sie nicht, auch mit Ihrem eigenen Setup zu experimentieren Sie können sie jederzeit ändern. Wenn Sie also zum Beispiel diesen Text hier auswählen, über dieses Filmmenü können Sie über dieses Filmmenü einfach hier klicken und dann können Sie auch eine andere Farbe wählen. Der Ort, an dem diese Farben vorkommen und wo Sie sie bearbeiten und hinzufügen und all das organisieren können, befindet sich nun und wo Sie sie bearbeiten und hinzufügen und all das organisieren können im Variablenfenster. Klicken Sie also auf den Hintergrund Ihrer Leinwand, und dann sehen Sie auf der rechten Seite etwas, das als Variablen bezeichnet wird, und Sie können diese Einstellung öffnen. Wenn Sie die Farben nicht sofort sehen, stellen Sie sicher, dass Sie die Farben über das Drop-down-Menü für die Sammlung auswählen. Und hier kannst du alle Farben so sehen , wie ich sie eingerichtet habe. Auch hier können Sie diese Farben ändern. Zum Beispiel ist das eigentlich für unsere Primärfarbe, ändern Sie das einfach in lila, und dann könnten wir auch Variablen hinzufügen. Also klicken Sie einfach auf die Plus-Schaltfläche. Sie können eine weitere Farbvariable hinzufügen. Sie könnten also einfach eine beliebige Variable nach Ihren Wünschen hinzufügen, und das wird dann im Menü angezeigt Möglicherweise stellen Sie auch fest, dass ich einen Hellmodus und einen Dunkelmodus eingerichtet Sie können also Modi hinzufügen, indem Sie hier auf die kleine Plus-Schaltfläche klicken. Wenn wir also zu unserem Design zurückkehren, können Sie jetzt sehen, dass sich das alles hier geändert hat. Also all meine Knöpfe, die rot waren, jetzt hat sich die Variable geändert. Da ich die Variable überall verwende, muss ich sie nur an dieser einen Stelle ändern. Das ist also meine einzige Quelle der Wahrheit. Jetzt können wir auch den Dunkelmodus sehen. Sie können dies also hier auswählen oder lassen Sie uns eine davon auswählen. Ich denke, wir wären am besten, wenn Sie einfach eine Instanz herausziehen würden. Also hier haben wir eine Instanz. Und jetzt können wir hier drüben eine Art kleinen Schalter finden. Und wenn du auf diesen Schalter klickst, siehst du deine verschiedenen Variablen, Sammlungen und hier zum Beispiel die Farbe, und ich kann das in den Dunkelmodus ändern. Jetzt ist es am besten, einfach alles im Standardmodus zu belassen und den ersten Modus in Ihrer Sammlung zu verwenden. Lassen Sie uns das also aktualisieren und zu unserem Design übergehen. Um das aktuelle Design zu sehen, klicken Sie auf die kleine Bibliotheksschaltfläche, wenn Sie hier diese kleine Blase sehen , in der Sie aufgefordert werden , die neue Bibliothek mit den Änderungen zu aktualisieren und dann zu veröffentlichen . Lassen Sie uns also zu unserem Design übergehen. Und dann musst du zurückgehen, bis du das Vorschaubild und das kleine Symbol hier siehst Klicken Sie darauf und Sie können jetzt die Updates akzeptieren. Und jetzt schauen Sie sich an, was mit dieser Schaltfläche passiert, und Sie können sehen, dass wir jetzt die neue Farbe haben, die wir geändert haben. Jetzt können Sie Ihren Modus auch hier verwenden, sodass Sie einfach den gesamten Abschnitt auswählen können. Und dann hast du hier wieder den kleinen Schalter, und du kannst jetzt in den Dunkelmodus wechseln. Und dann siehst du, wie alles in den Dunkelmodus wechselt. Beachten Sie, dass dies immer noch rot ist, da wir die Farbe in unserem Dunkelmodus nie geändert haben. Sie können auch innerhalb Ihrer Website auf all diese Farben zugreifen . Wenn Sie zum Beispiel diesen Text auswählen und nur hier Änderungen vornehmen möchten, dann werden Sie über Ihr Filmmenü, wenn Sie darauf klicken, sehen, dass alle Ihre Farbvariablen automatisch aktualisiert wurden, sodass Sie auch direkt hier darauf zugreifen können. 23. BIBLIOTHEK: Responsive Typografiestile: Schauen wir uns also auch unsere Typografie an und wie wir sie verwenden und anpassen können Lassen Sie uns also noch einmal verstehen, wie das eingerichtet ist. Wie üblich, ist dies die erste Version dieser Bibliothek, die vielleicht etwas anders aussieht, aber im Allgemeinen werden Sie dafür sogenannte Stile und Variablen verwenden . Das Typografie-Setup ist im Allgemeinen etwas komplexer Ich empfehle, dass Sie, wenn Sie dieses Set benötigen sich ein wenig an das Setup halten, das ich Ihnen gegeben habe Ich werde dir einen kurzen Überblick geben. Aber noch einmal, wenn du ein absoluter Anfänger in Figma bist, könnte das ein bisschen schwierig sein , aber bleib einfach bei mir Also, was ich hier gemacht habe, und das ist etwas, das ich gerne aufstelle Das ist nichts, was mit Figma geliefert wird, sondern nur ein Überblick über Ihr Design Also generell nenne ich die Stile. Also habe ich Display, Headline L, M und so weiter, und dann habe ich ein paar Hauptteile und Knöpfe. Und auch hier können Sie es absolut nach Ihren Wünschen anpassen Sie können Dinge wegnehmen und hinzufügen, so wie Sie sie für Ihr Design benötigen Was Sie hier sehen, ist eine Vorschau, und diese Vorschau verwendet tatsächlich etwas, das als Stil bezeichnet wird. Also wenn ich das auswähle, dann kannst du hier in der Typografie sehen , dass das nicht Display heißt Und hier sieht man, genau wie bei den Farbvariablen zuvor, die verschiedenen Textstile Wenn Sie nun auf den Canvas-Hintergrund klicken und hier eine Vorschau Ihrer Stile sehen, und zum Beispiel in der Anzeige, die ich Ihnen gerade gezeigt habe, können wir diese öffnen und dann die Einstellungen ändern. kann mir auch einige Dinge ansehen, ich verwende gerne Line Hit auf diese Weise, weil ich persönlich hier gerne einen Prozentsatz verwende, aber Sie können sehen, dass einige Dinge als Variable verwendet werden. Also wenn es in diesem kleinen Feld hier oder diesem hier steht, heißt es nur Schrift, das ist also eine Variable. Wir haben auch eine Kollektion, die wir in diese Textilien stecken. Nochmals, das ist nichts, was Sie tun müssen. Sie könnten diesen buchstäblich einfach herausnehmen und hier einfach eine 80 eingeben und Sie hätten das gleiche Ergebnis. Wenn Sie also Anfänger sind, möchten Sie das vielleicht tun. Ich verwende nur eine etwas ausgefeiltere Methode, was bedeutet, dass ich, wenn ich bis zum Ende dieser Zeile gehe, ein kleines Variablensymbol sehe und jetzt die Größe aus meinem Variablen-Setup auswähle. Schauen wir uns also an, wie das aussieht. Und noch einmal, wenn Sie Anfänger sind, möchten Sie vielleicht einfach alles von Hand einrichten und diesen überspringen. Wir haben also unsere Sammlung, gehen wir zur Typografie über. Und hier kannst du sehen, was ich gemacht habe, ist, wir haben die Schrift, also verwende ich hier Pop-Ins. Nehmen wir an, Sie möchten die Schriftart Ihres gesamten Dokuments ändern an, Sie möchten die Schriftart Ihres gesamten Dokuments und Google Fonts wird automatisch abgerufen Sie können einfach zu Google Fonts, der Website, gehen und dann können Sie die verschiedenen Schriftarten sehen Sie können dann einfach den Namen hier eingeben. Nehmen wir an, ich möchte das alles in Inter ändern, dann müsste ich das einfach hier eingeben, und dann würden alle meine Schriften zu Inter wechseln. Ich muss also nicht eins nach dem anderen gehen. Also das ist super, super praktisch. Jetzt können Sie hier die verschiedenen Größen sehen. Das ist also Anzeige auf dem Desktop, dann Überschrift L auf dem Desktop, und Sie können sehen, dass ich sie für die verschiedenen Modi individuell ändern kann . In diesem Fall verwende ich Desktop, Tablet und Handy . Nur um es zu sehen, lassen Sie uns das lächerlich groß machen. Fügen wir das etwa 100 hinzu, damit wir sehen können, ob es funktioniert Also alles was ich tun muss, ich muss das hier ändern. Und das ist jetzt, wie Sie sehen können, das ist jetzt wirklich groß, und das ist Internw Sie können es hier also nicht wirklich sehen, aber wenn ich das abnehmen würde und ich würde diese Schrift auch hier abnehmen, dann können Sie sehen, dass das jetzt Inter ist Wir wollen das aber intakt lassen. Sie können also sehen, dass ich nur das tun muss, und das wird sich jetzt in allen meinen Designs widerspiegeln . Sie können hier also sehen, dass wir plötzlich eine wirklich, wirklich große Schlagzeile bekommen haben . Und jetzt verwenden wir das hier genauso, wie ich es Ihnen zuvor in der Vorschau gezeigt habe. Also, zum Beispiel dieses, Sie können sehen, dass ich in der Typografie Display verwende Wenn ich noch eine haben möchte, könnte ich von hier aus einfach eine andere Überschrift wählen Und das zieht die Stile an. Sie werden sich also immer mit den Stilen befassen, und dann beziehen die Stile die Variablen ein. Jetzt werden wir ein bisschen komplizierter, denn was hier passiert, ist, dass wir immer nur unseren allgemeinen Stil verwenden, und dann weiß der Stil, erinnern wir uns einfach daran, der Stil weiß, welcher Modus. Das ist also die Standardeinstellung, also arbeiten wir immer auf einem Desktop. Also, wenn wir mit unserem Tablet hierher gehen, müssen wir diesem Stil irgendwie sagen , dass es jetzt ein Tablet ist. Also, wir wählen diesen kleinen Schalter , den wir hier haben, und Sie gehen zur Typografie Ich habe mir auch einen für die Abstände ausgedacht, aber wir interessieren jetzt für Typografie und Sie müssen sagen, dass es sich um ein Tablet handelt, weil es standardmäßig so aussehen würde, was passieren würde Also werden wir ihm einfach sagen , bitte benutze den Tablet-Modus Also der ganze Typografie-Tablet-Modus dafür. Und dann kannst du das Gleiche hier für das Handy sehen. Wenn wir dies auswählen, können Sie sehen , dass alles für Mobilgeräte eingerichtet ist. Also nochmal, wenn du es dir ausdenken musst, könnte das ein bisschen überwältigend sein Ich würde also empfehlen, vorerst bei meinem Setup zu bleiben. Wenn Sie hier tiefer eintauchen möchten , empfehle ich Ihnen , sich zuerst wirklich, wirklich mit den Stilen und Variablen der Topographie vertraut mit den Stilen und Variablen der Topographie Wenn Sie mit FIGMA vertraut sind, wird dies für Sie sehr sinnvoll sein Wenn wir das nun wie gewohnt in unserem Design verwenden wollen , müssen wir nur unsere Bibliothek aktualisieren Lassen Sie uns also all diese Änderungen veröffentlichen. Lassen Sie uns nun zu unserem Design übergehen, unsere Bibliothek aktualisieren und jetzt einen Blick darauf werfen. Das sollte ziemlich groß werden. Und wir werden auch Inter sehen, anstatt Pop-Ins hier auftauchen zu lassen. Und weil alles bereits in den Komponenten verankert ist , müssen Sie hier nicht viel ändern. Sie können also sehen, dass es das automatisch aufnimmt, aber Sie werden es hier unten so sehen, wie es aussieht, dass hier ein Tablet verwendet wird und dass dies zum Beispiel ein Handy ist. Eine letzte Kleinigkeit, auf die ich vielleicht vergessen habe hinzuweisen. Also bin ich einfach zu meinen ursprünglichen Einstellungen zurückgekehrt , ob Sie einen Stil hinzufügen möchten, also haben wir gesehen, wie man Variablen hinzufügt. Erinnern wir uns einfach daran , wenn Sie eine weitere Variable wollen, klicken Sie einfach auf die Plus-Schaltfläche, und dieses Mal verwenden Sie keine Farbe, sondern fügen einfach eine weitere Zahlenvariable hinzu, und dann können Sie das einfach nach Ihren Wünschen definieren Und wenn Sie einen weiteren Stil hinzufügen möchten, können Sie ihn hier definieren, sodass Sie auf Plus klicken und einfach einen Textstil hinzufügen können Und dann bekommst du dieses Fenster und kannst es einfach einrichten. Aber ich finde es tatsächlich einfacher , meinen eigenen Stil zu kreieren. Nehmen wir an, ich möchte eine weitere Überschrift. Ich ziehe das heraus, ich nehme es und dann würde ich es ganz nach meinen Wünschen einrichten Fügen wir einfach so etwas wie zufällig hinzu, was wir wollen würden Also würde ich alles abtrennen und dann würde ich es so einrichten, wie ich es möchte Und sobald ich damit fertig bin, würde ich hier in mein Typografie-Panel gehen und es dann von hier aus hinzufügen Also gehe ich zu Stilen und erstelle dann diese neuen Stile. Und das findest du dann , wenn du auf den Hintergrund klickst, hier drinnen, in deinen Stilen. Und ich würde dann ein weiteres Feld erstellen und das in meiner Übersicht dokumentieren. Diese Übersicht ist also nichts verpflichtend. Das ist wirklich nur etwas für dich, um dich daran zu erinnern, wie das alles funktioniert. 24. BIBLIOTHEK: Reaktionsfähige Komponentenblöcke: Lassen Sie mich Ihnen zeigen, wie Sie Komponenten erstellen , um sie auf Figma-Sites zu verwenden, entweder um eine bestehende Bibliothek zu erweitern oder um Ihre eigene einzurichten Kleine Randnotiz, bevor wir eintauchen. Wenn Sie Ihre eigenen Bibliotheken erstellen möchten, müssen Sie die Funktionen von Figma wirklich verstehen, sodass Sie nicht damit durchkommen können, einfach zu raten und auszuprobieren Wenn Sie dies tun möchten, müssen Sie Variablen, Typografie-Stile und Variablen, Komponenten, Komponenteneigenschaften und das sehr wichtige automatische Layout von Figma verstehen Komponenten, Komponenteneigenschaften und das sehr wichtige automatische Layout von Figma Also folgen Sie uns. Es könnte dir trotzdem einen guten Überblick geben wenn du die Grundlagen von Figma kennst Aber wenn Sie das ernst meinen, dann stellen Sie bitte sicher, dass Sie in einen fundierten Anfängerkurs einsteigen und dass Sie diese Prinzipien wirklich bis ins Mark verstehen Lassen Sie uns also unserer Bibliothek eine Komponente hinzufügen, um zu verstehen wie das alles im Hintergrund funktioniert und welche Einstellungen damit verbunden sind. Wenn wir also Komponenten einrichten, benötigen wir auch ein paar Bausteine, die in sie einfließen. Ich habe meine Farben also bereits in Variablen eingerichtet, und ich habe meine Typografie-Stile Erinnern wir uns einfach daran. Hier können Sie die verschiedenen Typografie-Stile sehen. Und wenn wir dann Variablen einchecken, haben wir verschiedene Sammlungen Also werde ich diese Farbstile für meine Komponente verwenden , die ich erstellen werde. Ich habe eine zusätzliche Kollektion erstellt. Das ist nicht notwendig, aber es ist sehr praktisch und Sie können hier sogar noch anspruchsvoller werden. Also muss ich zum Beispiel die Bildschirmgröße als Variable angeben, also das ist ein Desktop, ein Tablet und ein Handy, und dann habe ich einige Polsterungen, die sich entsprechend ändern würden Auch hier können Sie das absolut nach Ihren Wünschen einrichten. Und denken Sie daran, dass ich meine Typografiegrößen auch so eingerichtet habe meine Typografiegrößen auch so eingerichtet , dass automatisch verschiedenen Größen für die verschiedenen Breakpoints übernommen In unserer Komponente kommt das jetzt also zusammen. Also werde ich eine Galerie hinzufügen und das in meinem Kartengruppen-Bereich platzieren. Was die Abschnitte also tatsächlich tun , ist, dass Sie verschiedene Möglichkeiten haben , Dinge zu organisieren. Auf der einen Seite haben wir also unsere Seiten in der Datei. Also haben wir unsere Bausteine. Lassen Sie mich Ihnen nur diesen Überblick geben. Das ist also diese Seite, und wir haben unsere Wireframes und unsere Designs Also so habe ich das eingerichtet. Du könntest das ganz anders einrichten. Und dann verwende ich auf meinen verschiedenen Seiten Abschnitte. Sie finden also Abschnitte hier unten. Sie haben Rahmen oder Sie haben Abschnitte. Sie können auch die Tastenkombination Shift S verwenden. Wann immer Sie etwas auf einer anderen Seite oder einem anderen Abschnitt platzieren , schauen wir mal hier in unserer Bibliothek nach, Sie können sehen, dass dies die Bibliothek ist. Also sehen wir uns zuerst die verschiedenen Seiten an. Und wenn wir dann zu den Bausteinen springen, möchte ich Sie daran erinnern, dass dies diese Seite hier wäre. Im Inneren können wir dann die verschiedenen Abschnitte sehen, die wir erstellt haben. Hier haben wir also die Kartengruppen, in denen wir unsere neue Komponente hinzufügen werden, also sollte sie hier erscheinen. Das ist wirklich toll , denn es bedeutet auch, dass Sie Komponenten einfach von einem Abschnitt in einen anderen ziehen können , damit alles neu organisiert oder umbenannt wird. Lassen Sie uns also vorerst in diesen Bereich hineinzoomen und unsere eigene Komponente hinzufügen Also, was ich zuerst tun werde, werde ich F drücken und ich werde einen Rahmen zeichnen. Und jetzt möchte ich, dass diese Rahmengröße der Größe meines Desktops entspricht. Und ich habe bereits eine Variable dafür eingerichtet. Ich könnte das auch einfach von Hand eingeben, aber ich habe eine Variable, also gehe ich einfach hier auf Abmessungen, und Sie sehen die Bildschirmgröße, und ich werde diese verwenden. Ich werde eine Überschrift hinzufügen. Ich werde T drücken, um etwas einzugeben, und ich werde dieser Überschrift einfach einen Namen geben. Und dann werde ich es ganz einfach halten. Also werde ich einfach ein Rechteck haben und ich werde hier einfach ein paar Rechtecke erstellen Und später möchte ich, dass sie sich einfach buchstäblich wie eine kleine bewegte Galerie durch das Ganze bewegen Machen wir sie etwas größer. Und lassen Sie uns das hier einfach hinzufügen. Also halte ich das ziemlich einfach. Und Sie können auch alle anderen Beispiele untersuchen , die ich hier hinzugefügt habe. Hier kannst du zum Beispiel sehen, dass das wie verschachtelte Karten ist. Du kannst also hierher springen und sehen, Du kannst also hierher springen und wo diese Karte ursprünglich gebaut wurde Man kann also quasi nisten und sehr raffiniert vorgehen. Aber ich werde dir nur ein einfaches Setup zeigen und dann kannst du es von dort aus weiter erforschen. Wir werden diesem einen Namen geben, und ich werde einfach dieser Galerie einen Namen geben, und jetzt füge ich ein automatisches Layout hinzu. Und auch hier werden Sie um das automatische Layout nicht mehr herumkommen , wenn Sie Ihre eigenen Komponenten einrichten möchten. Also zuerst werde ich diese verschachteln. Ich werde sie alle auswählen. Und Sie können sehen, dass ich keine Einstellungen für das automatische Layout habe. Ich verwende die Tastenkombination, einen Rahmen um ihn herum zu erstellen ist Shift A. Es wird ein automatischer Layoutrahmen um ihn herum erstellt , den Sie hier sehen können. Ich werde den Karten einen Namen geben. Und jetzt können wir die Einstellungen hier sehen. Das ist horizontal. Wir haben eine Lücke. Machen wir das einfach zu einem Vielfachen von Acht, vielleicht sogar etwas größer. Und dann werden wir links und rechts auch etwas Polsterung hinzufügen Also, wenn wir das getan haben, lassen wir es vorerst bei 40 und dann lassen wir es hier drüben bei 20, und dann sollte das funktionieren. Jetzt werden wir für diese ganze Sache ein automatisches Layout hinzufügen. Ich denke, ich kann damit durchkommen, es einfach dem übergeordneten Element hinzuzufügen. Lass uns einfach sehen. Und hier sind es die Frames. Ich sehe das Menü schon, und jetzt werde ich das alles nur zentrieren. wir also sicher, dass alles zentriert ist. Okay, großartig. Wir könnten den Abstand anpassen und so, aber ich lasse es vorerst einfach so. Und dann werde ich eine Kopie herausziehen, und jetzt möchte ich, dass das der Desktop ist. Und jetzt erinnere dich daran, dass ich so gearbeitet habe, dass ich Variablen für den Abstand habe. Andernfalls können Sie dies von Hand tun. Ich habe also einen Desktop, ich habe ein Tablet, also kann ich die hier einfach benutzen. Ich habe diese Abstandsvariablen nicht verwendet. Und dann ist es mit der Typografie genauso. Also muss ich zunächst sicherstellen, dass ich alles mit Variablen einrichte Ich werde das jetzt einfach überprüfen und dann sollten Sie die richtige Typografiegröße eingeben Und alle Änderungen. Zuallererst, nur um es dir hier zu zeigen, ich verwende diese Polsterung, also habe ich Polsterungen links und rechts, damit sich das anpassen würde Ich brauche es in diesem Setup wirklich nicht, aber ich habe es immer noch im Hintergrund, falls ich es brauche Was ich also noch nicht getan habe, ist, dass ich nicht überprüft habe, ob alles mit Sternen und Variablen eingerichtet ist. Also die Überschrift hat mir automatisch eine Überschrift L gegeben , das ist also in Ordnung. Und jetzt muss ich nur noch sicherstellen, dass meine Farben, dass meine Farben auch variabel sind. Also hier werde ich das einfach aus dem Hintergrund nehmen . Ich denke, das sollte das sein, das ich nicht brauche. Dieses werde ich in einer Sekunde in Bilder verwandeln. Das ist also eine Textfarbe. Sie könnten es auch einfach von hier drüben auswählen. Sie sehen also, dass es eine Textfarbe ist. Und selbst der Hintergrund ist sehr wichtig, dass Ihre Hintergrundfarbe auch in Farbvariablen festgelegt ist. Also eigentlich werde ich das einfach löschen und dann habe ich es hier. Um eine Kopie zu haben, können Sie jederzeit überprüfen, ob alle Ihre Auswahlfarben Variablen sind. Und ich habe wieder meine kleinen Bilder vergessen, also gehen wir einfach wieder hierher zurück. Und jetzt werde ich das als Bildfüllung einrichten. Ich habe das geklärt, und jeder, der diese Komponente später verwendet weiß, dass dies der Ort ist, an , weiß, dass dies der Ort ist, an dem ich erwarte, dass er Bilder hinzufügt. Okay, jetzt sollte es uns gut gehen. Nun, alles was wir tun müssen, ist das Aussehen hier drüben, und weil wir alles mit Variablen verwenden, ist es schon so, dass alle Informationen bereits in diesen verschiedenen Sammlungen gespeichert sind. Jetzt mache ich Abstand und ich gehe zum Tablett, und dann will ich auch die Farbe, die sich nicht ändert. Und dann die Typografie. Ich möchte auch, dass das das Tablett ist, damit Sie sehen können, dass es sich anpasst Und jetzt können wir dasselbe für unser Handy tun. Sie sehen also, ich habe sie geöffnet und ich werde mobil, und ich werde mobil. Du brauchst es nicht auf deinem Desktop , weil es der erste Modus ist. Manchmal füge ich ihn gerne hinzu, nur damit alles auf die gleiche Weise eingerichtet ist, aber da es der Standardmodus ist, brauchst du ihn normalerweise nicht. Und was wir jetzt tun können, wir können jetzt all diese auswählen. Und dann gehe ich mit einem Klick zu einem kleinen Drop-down-Menü und erstelle einen Komponentensatz Ich mache diesen Umriss gerne etwas dicker, damit er sichtbar ist, und dann vergrößere ich ihn normalerweise nur ein wenig, nur um einen besseren Überblick zu Okay, also lass uns einfach einen herausziehen. Lassen Sie uns die beiden rausnehmen und dann können wir sehen, dass sich einfach so verhält, wie ich es erwarte Jetzt können Sie sehen, dass ich immer noch einen Fehler habe. Also muss ich sie benennen. Und denken Sie daran, unsere Benennung lautet Desktop, Handy und Desktop, Tablet und Handy. Wählen wir das aus und ich werde sie einfach alle umbenennen. Und dann kann ich auch die gesamte Gruppe auswählen und diesen Breakpoint benennen. Okay, großartig Tablet, Desktop, und dann solltest du in der Drop-down-Liste unser Handy fantastisch sehen . Jetzt kann ich eine Kleinigkeit hinzufügen, und auch das ist etwas fortgeschrittener, aber es ist sehr praktisch, weil Sie vom Aussehen her eine Komponenteneigenschaft hinzufügen können. Sie können also hier auf Plus klicken, und dann kann ich einfach sagen, Überschrift anzeigen , Eigenschaft erstellen. Ich werde das auch hier hinzufügen. Also werde ich es einfach auswählen und dann sollte es es sehen. Ich kann es von hier aus auswählen , weil ich mich im selben Komponentensatz befinde. Und wenn ich das auswähle, können Sie später hier sehen, wir können einfach wählen, ob wir diese Komponente mit oder ohne Überschrift haben wollen . Das ist also später, wenn wir es konsumieren, wirklich nett. Okay, das sieht soweit gut aus. Lass es uns testen. Wir werden also diese Bibliothek veröffentlichen wollen . Also lassen Sie uns sie aktualisieren. Lassen Sie uns in unsere Designdatei springen und dann aktualisieren. Lassen Sie uns diese Updates erhalten. Okay, großartig. Wenn wir jetzt in den Bereich springen, in dem wir es platziert haben, nämlich Kartengruppen, sollten wir uns unsere Galerie ansehen, und Sie können sehen, dass sie genau hier ist. Und jetzt können wir das einfach ziehen und es sollte jetzt alle verschiedenen Breakpoints direkt auffüllen alle verschiedenen Breakpoints direkt Schauen wir uns das an, und das funktioniert wirklich gut. Das funktioniert also nur, weil wir die Namenskonvention Desktop, Tablet und Handy verwenden , sodass es weiß, was damit zu tun ist. Okay, großartig. Also, was wir jetzt tun müssen, lassen Sie uns eine Vorschau davon anzeigen, und dann können wir sehen , dass wir wahrscheinlich ein paar automatische Layouteinstellungen benötigen ein paar automatische Layouteinstellungen , weil sie nicht automatisch übertragen werden. Also alles, was drin ist, bleibt, aber du musst ihm sagen, wie dieser Block hier drinnen sitzen soll. Also machen wir wie gewohnt, wir wählen unser Paar und unseren Rahmen aus. Das ist bereits für ein vertikales automatisches Layout eingerichtet. Dann wählen wir diesen Rahmen aus, den wir gerade hinzugefügt haben , und stellen sicher, dass er so eingestellt ist, dass er den Container füllt. Schauen wir uns also an, wie das jetzt aussieht. Und ja, das sieht toll aus. Das ist die Art von Effekt, die wir wollen. Jetzt wollen wir, dass das rotiert, und im Moment können wir das nur auf der Figma-Site tun, also können wir es nicht zu unserer Bibliothek hinzufügen Also müssen wir uns das Element hier schnappen und dann zu Interaktionen springen, eine Interaktion hinzufügen und eine Marquee-Interaktion hinzufügen Sie sehen, das ist genau das , was wir wollen. Du könntest das ändern, also die Geschwindigkeit, die Richtung und alles, ich lasse es vorerst einfach so wie es ist. Also lass uns jetzt einen Blick darauf werfen. Das ist die falsche Seite. Wählen wir hier diese Seite aus. Spiel, und das sieht wunderbar aus. Und der wichtige Teil ist eigentlich, dass wir links und rechts ein bisschen Polsterung haben Andernfalls würden sie zusammenhalten. Lass mich dir das einfach zeigen. Also was wir hier gemacht haben, wenn Sie das auswählen, dann können Sie sehen, dass wir links und rechts davon Polsterungen haben Ansonsten bleiben sie zusammen, also sei dir dessen bewusst. Okay, lass uns einfach ein paar Bilder hinzufügen. Ich werde das nur für dich im Hintergrund beschleunigen . Lassen Sie uns also einen Blick darauf werfen. Das sieht toll aus. Stellen wir sicher, dass unsere Größenänderung funktioniert. Aber tatsächlich gibt es mir wieder diesen seltsamen Sprung. Also manchmal, wenn du eine Animation hinzufügst, passiert das, also musst du einfach wieder reingehen und sicherstellen, dass es so eingestellt ist den Container füllt oder was auch immer, eigentlich willst du, dass das funktioniert. Also lass es uns noch einmal versuchen. Und jetzt haben wir ein wirklich nettes Verhalten, also kannst du deine Presets auch hier verwenden Sie möchten etwas an dieser Komponente ändern. Nehmen wir zum Beispiel an, Sie möchten all das hier haben, und zwar mit abgerundeten Ecken. Lassen Sie uns alle auswählen. Kleine Tastenkombination, drücken Sie die Eingabetaste, und dann erhalten Sie alle untergeordneten Elemente, und dann fügen wir nur ein paar runde Ecken hinzu. Und dann werden wir aktualisieren. Übrigens eine kleine Randnotiz. Wenn Sie verschachtelte Elemente verwenden, haben wir hier alles auf einem Element Aber hier, wo wir zum Beispiel eine verschachtelte Karte haben, springen wir einfach zu dieser Wenn Sie bei der Benennung etwas zu viel Strich setzen, wird die Bibliothek dadurch nicht aktualisiert, da wir erst später Einblick in die vollständigen Komponenten in unserer Bibliothek geben wollen später Einblick in die vollständigen Komponenten in unserer Bibliothek geben Auf diese Weise können Sie diese kleinen Randnotizen verstecken. Lassen Sie uns das veröffentlichen und sobald es aktualisiert ist, müssen wir auch wieder darüber springen. Stellen wir sicher, dass das wirklich aktualisiert ist, veröffentlichen wir es. Ja. Stellen wir sicher, dass wir hier rüberspringen, und jetzt müssen wir den ganzen Weg zurückgehen, bis wir unser Vorschaubild sehen und wir werden es erhalten und jetzt schauen was mit den Ecken passiert also alles aktualisieren, können Sie sehen, dass das Update direkt empfangen wird 25. Erfahren Sie mehr über Figma: In diesem Kurs möchte ich mich nun auf viele Funktionen von FIGMA beziehen , wie z. B. auf Komponenten, auch auf Layouts und Variablen Wenn Sie T FIGMA verwenden, wird Ihnen das alles ganz natürlich vorkommen Wenn Sie FIGMA jedoch noch nicht kennen, könnte dies etwas überwältigend sein Ich werde diese Konzepte in diesem Kurs nicht behandeln. Mit Ihrer Skillshare-Mitgliedschaft können Sie jedoch an meinem Figma-Anfängerkurs Unter Projekte und Ressourcen habe ich einen direkten Link hinzugefügt Du kannst einfach darauf klicken. Dies führt Sie direkt zu diesem Kurs. Der Kurs dauert 4 Stunden und beginnt mit allen Grundlagen, die Sie vielleicht lernen möchten oder auch nicht. Wenn Sie sich nur mit bestimmten Konzepten wie Komponenten oder Variablen befassen möchten , zum Beispiel dem Unterschied zwischen Variablen und Stilen, was für die Typografie sehr wichtig ist, können Sie einfach zu diesen Abschnitten springen und das alles von Anfang an erklären Auch oder zum Layout, wie Sie hier sehen können. Wenn Sie sich ins Zeug legen möchten, finden Sie in diesem Kurs weitere Dinge, z. B. wie man mit FIGMA Prototypen erstellt, wie man zusammenarbeitet, und es gibt sogar ein Kursprojekt für Ihr Portfolio Dies ist auch mit Abstand mein beliebtester Kurs auf Skillshare, und wie Sie in den Bewertungen sehen können, haben sich die Leute sehr darüber gefreut Also springen Sie ein und erfahren Sie mehr über Figma.