Von Null zum Webdesign-Helden: Erobere Figma und erstelle 2024 atemberaubende Websites

1. Einführung in den Kurs: Hallo, willkommen zu meinem Figma - und UI UX Design-Bootcamp. Die einzige Klasse, die Sie zum Erstellen benötigen, Web- oder App-Design. Mein Name ist Peter und ich freue mich sehr, dass ich das Privileg hatte , Ihr Ausbilder in diesem Kurs zu sein. In den letzten Jahren habe ich Tausende von Menschen gelernt, habe ich Tausende von Menschen wie man programmiert und sich selbst aktualisiert. Dieser Kurs behandelt alle Konzepte und Themen, die Sie benötigen um über Figma und Webdesign zu lernen und zu beherrschen. Wir beginnen mit den Grundlagen von Figma, wie Toolbar, Ebenen, Panel, Rastersystem, Farbtheorie, Typografie, der Arbeit mit Bildern, Wireframes, Animationen und Prototyping und vielem mehr. Wir werden auch ein reales Projekt erstellen. Jetzt können Sie Ihr Portfolio hinzufügen. Dieser Kurs richtet sich an alle , die als UI-UX-Designer etwas über Figma lernen möchten, oder an jemanden, der einfach nur ein allgemeines Verständnis für das Entwerfen von Websites oder Anwendungen haben möchte als UI-UX-Designer etwas über Figma lernen möchten, oder an jemanden, der einfach nur ein allgemeines Verständnis für das Entwerfen von Websites oder Anwendungen haben allgemeines Verständnis für das Entwerfen von , unabhängig von früheren Erfahrungen. Es ist eine zentrale Anlaufstelle. Es ist der einzige Kurs, den du jemals brauchen wirst , um etwas über Figma zu lernen. Am Ende dieses Kurses können Sie damit rechnen, nicht nur mobile Anwendungen oder Websites zu entwerfen , sondern auch Vorschaubilder oder Infografiken für Social-Media-Handles zu erstellen . Danke, dass du uns besucht hast. Ich bin sehr zuversichtlich, dass du diesen Kurs lieben wirst. 2. (1) Einführung in Figma: Hallo zusammen. Willkommen zur allerersten Vorlesung unseres Figma-Kurses. Ich werde euch alle in das Thema Figma einführen. Und wir werden auch den Unterschied zwischen unserer Benutzeroberfläche und UX lernen . also ohne weitere Umschweife Lassen Sie uns also ohne weitere Umschweife einfach mit der heutigen Vorlesung beginnen. Also, was ist Sigma? Figma ist also eigentlich ein Cloud-basiertes Design-Tool für die Zusammenarbeit in Echtzeit. Nun, Cloud ist nur ein virtueller Raum im Internet. Es funktioniert wie ein Server. Sie alle müssen Cloud-basierte Anwendungen wie Google Drive und so verwendet haben Cloud-basierte Anwendungen . Die Cloud ist also nur ein virtueller Server , der im Internet vorhanden ist. diesem Figma können Sie in Echtzeit mit anderen Personen zusammenarbeiten in Echtzeit mit anderen Personen , während Sie Ihr Design erstellen. Lass dich also nicht von Anfang an verwirren, okay, du wirst alles Schritt für Schritt lernen. Also mach dir keine Sorgen, folge einfach dem Kurs. Und wenn Sie Fragen haben, können Sie unten jederzeit einen Kommentar abgeben. In Ordnung, was sind also einige der Funktionen von Figma? Figma gibt uns also im Grunde Designwerkzeuge. Wir können Ihr mobiles Projekt entwerfen. Nehmen wir an, Sie versuchen, eine Android-Anwendung zu erstellen. Also bevor Sie tatsächlich anfangen, eine Anwendung oder Website zu programmieren eine Anwendung oder Website , die Sie entwickeln möchten. Es hat immer ein Frontend und ein Backend. Frontend bedeutet im Grunde , dass Sie versuchen, den Interaktionsteil zu betonen, was der Benutzer sehen wird, was die Kunden oder Ihre Benutzer oder die Kunden, wir werden sehen, was auf ihrem Bildschirm angezeigt wird. Das ist der Frontend-Teil. Im Grunde genommen sind Ihre Artikel, Ihre Schaltflächen, Ihr Text, Ihre Bilder , Grafiken, Typografie all diese Dinge im Frontend-Teil enthalten. Wenn Sie sich also mit Webentwicklung auskennen, müssen Sie alle wissen, dass es ein Frontend und ein Backend gibt. Frontend bedeutet im Grunde, dass Sie sich tatsächlich mit dem Design befassen, wie Ihren Miniaturansichten, Symbolen, Schaltflächen, Topographie, Grafiken und all dem Zeug. Das ist also der Frontend-Teil. Das ist der Teil, den die Benutzer und Ihre Kunden sehen werden. Jede Anwendung, jede Website hat also ein Frontend und ein Backend. Das Backend befasst sich mit dem Serverteil. Was passiert, wenn der Benutzer auf eine bestimmte Schaltfläche klickt? Welche Funktion benötigt es , um ausgeführt zu werden? Was ist die Funktionalität oder welche Dinge müssen angezeigt werden , wie wird es angezeigt, und all das hängt vom Backend-Teil ab. Das gesamte Frontend und Backend müssen also codiert werden. Jetzt kannst du mit jeder der Sprachen weitermachen, okay, es gibt so viele verschiedene Sprachen, zum Beispiel für deine, für deine Webentwicklung, du hast dein HTML, CSS. Es gibt einige der Frameworks für CSS, wie Your Tailwind, CSS Bootstrap und all das Zeug. Sie müssen sich also keine Sorgen machen, da sich diese Klasse nicht auf all diese verschiedenen Komponenten oder das Frontend konzentriert, wir legen nur den Schwerpunkt auf den Designteil. Also bevor wir überhaupt versuchen, den Frontend-Code zu codieren, bevor wir überhaupt versucht haben, den Frontend-Teil zu entwickeln. Natürlich muss alles codiert werden, egal ob Frontend oder Backend . Bevor wir also mit dem Codierungsteil beginnen, möchten wir tatsächlich ein Layout erstellen. Wir wollen einen Plan erstellen dessen Grundlage wir unser Frontend entwickeln können. Das ist also der Grund, warum der UI - oder UX-Teil ins Spiel kommt. Dort haben wir unser Figma und andere Designtools, mit deren Hilfe wir unser Projekt tatsächlich jede Anwendung entwerfen können . Mit Figma können Sie also nicht nur ein mobiles Projekt erstellen, sondern auch eine Tablet-Anwendung oder ein Tablet-Projekt. Und Sie können sogar entwerfen, wie eine Desktop-Anwendung oder eine Webanwendung auf einem Laptop oder einem Computerbildschirm aussehen würde . Das sind also einige der Funktionen von Figma. Okay, ein weiteres Feature ist, dass es eine Prototyping-Funktion von Figma gibt. Was heißt eigentlich Prototyping? Nun, stellen Sie sich vor , Sie erstellen eine Anwendung, okay? Wenn Sie nun versuchen, die Anwendung zu entwickeln, möchten Sie nicht einfach Prototyp haben oder so etwas wie, sagen wir, keine perfekte Phase für die Implementierung, sondern eine andere Testphase, einen Prototyp, als ob Sie sich immer noch mit diesen Dingen befassen. Du bist immer noch, du testest das Zeug immer noch aus. Das ist also dein Prototyp. Figma Wenn Sie also Ihr eigenes Design erstellen, können Sie sogar in Ihrem die Prototyping-Funktion von Figma verwenden, um tatsächlich zu sehen und zu sehen, wie genau meine Anwendung in Echtzeit aussehen wird. Wenn ich auf diese Schaltfläche klicke , wird sie interagieren und all diese Dinge werden in Figma erledigt. Und das Beste an Figma ist, dass Sie kein einziges Zeug codieren müssen. Alles ist GUI-basiert und Sie müssen nur auf einige der Dinge klicken. Und es gibt einige Tastenkombinationen, die Sie verwenden können. All das ist also sehr einfach und sehr einfach zu befolgen. Also mach dir keine Sorgen, dieser Kurs ist sehr einfach und ich werde dir alles Schritt für Schritt erklären . Okay, ein weiteres Feature von Figma ist ein Tool für die Zusammenarbeit. Wie ich gleich zu Beginn erwähnt habe, bedeutet diese Zusammenarbeit im Grunde, dass Sie mit Ihren Kollegen oder sagen wir Ihren Kunden zusammenarbeiten können mit Ihren Kollegen oder sagen wir Ihren Kunden zusammenarbeiten . Nehmen wir an, Sie sind ein freiberuflicher Entwickler, Sie sind ein freiberuflicher UX-Entwickler, oder? Sie möchten also Ihre Ideen, Ihr Designmaterial Ihrem Kunden präsentieren . Also, wie wirst du es ihnen zeigen? Würdest du einfach all das Zeug holen und ihnen die Videodatei schicken? Nein. Sie können einfach Ihre Login-ID teilen oder besser gesagt, Sie können sagen, dass Sie einfach den Link Ihres Projekts teilen können . Sie können sich anmelden und dann können sie sehen , woran Sie gearbeitet haben. Und das werden sie in Echtzeit sehen können. Nehmen wir an, sie hinterlassen Kommentare zu dem Projekt und sagen , dass sie die Farbe ihres Hautfarbschemas Ihres Projekts ändern möchten . Sie wollen einen anderen Schriftstil. Sie können das und Sie werden das in Echtzeit sehen können. Das ist also das fantastischste Feature von Figma. Jetzt ist Figma nicht nur der einzige Designhocker, der auf dem Markt erhältlich ist. Es gibt auch andere Tools wie Adobe XD. also die Frage, warum wir Adobe XD nicht verwenden? Adobe, so eine tolle Marke? Adobe hat verschiedene Produkte wie Premier Pro, After Effects, Photoshop, Lightroom und all das Zeug. Also, anstatt diese hübsche Premium-Software und eine sehr zuverlässige Software zu verwenden diese hübsche Premium-Software , warum verwenden wir dieses Figma? Nun, der Grund dafür ist , dass Figma Adobe XD völlig kostenlos nutzen kann. Du musst einen gewissen Preis zahlen. Adobe hat sein Creative Cloud-Abonnement. Sie müssen die monatliche oder jährliche Abonnementgebühr zahlen um auf diese Anwendungen zugreifen zu können, da Sie sie sonst nicht verwenden könnten. Okay, das ist also der wichtigste, wichtigste Teil über Femur, der völlig kostenlos verwendet werden kann und ein kollaboratives Tool bietet. Okay, jetzt kommt der Teil der Zusammenarbeit. Nehmen wir an, Sie befinden sich irgendwo in den Vereinigten Staaten und möchten Ihr Projekt zeigen und Ihr Bauch ist irgendwo in Europa oder in Südafrika. Also, wie werden sie dein Projekt sehen? Du kannst einfach deinen Link teilen. Das ist also die Flexibilität, die Ihr Figma bietet. Kommen wir nun zu dem Teil über UI und UX, sind diese Dinge dasselbe? Gibt es einen Unterschied? Und wenn es einen Unterschied gibt, was ist der Unterschied zwischen UI und UX? Ui steht im Grunde für Ihre Benutzeroberfläche, wohingegen UX für Benutzererfahrung steht. Ui befasst sich mit der visuellen Gestaltung. Wie würde die Anwendung oder eine Website oder eines Ihrer Projekte aussehen. Und mit Hilfe von Figma befassen Sie sich nicht nur mit dem Teil des Anwendungsdesigns. Du kannst sogar Thumbnails für deine YouTube-Videos entwickeln. Sie können sogar Infografiken erstellen. Sie können sogar Folienvorlagen und all das Zeug erstellen. Mit Figma können Sie sich also nicht nur mit dem Anwendungsteil befassen, sondern auch Ihre Inhalte gestalten. Das ist das Beste an Figma. Benutzeroberfläche signalisiert also im Grunde , dass Sie sich mit den Farben, dem Layout, der Typografie und den Schriftstilen befassen dem Layout, der Typografie werden. Wie würde das Telefon aussehen? Das ist der topografische Teil, der entworfen wurde. UX hingegen bedeutet im Grunde, dass Sie sich mit dem Teil der Benutzererfahrung befassen werden. Wie werden Sie das nun tatsächlich feststellen? Dieser Benutzer wird bei der Verwendung unserer Anwendung eine fantastische Erfahrung machen. Es wird also auf jeden Fall einige Benutzerrecherchen geben. Nehmen wir an, Sie führen eine Umfrage durch und fragen Ihre Kunden oder Klienten , wie unsere Bewerbung aussehen soll? Ihre Kunden würden also etwa antworten, sagen wir, ich möchte eine sehr saubere Benutzeroberfläche und ich möchte, dass die Dinge einfach und sehr raffiniert sind. Ich will keine komplexen Animationen. Ich möchte nicht, dass komplexe Dinge vor meinem Bildschirm erscheinen. Ich möchte also keine Fachbegriffe. Ich möchte , dass die Dinge einfach und laienhaft auf meinem Bildschirm angezeigt werden . Das ist es also, was Ihre Benutzer forschen. Bevor Sie also den UX-Teil entwickeln, müssen Sie eine gründliche Benutzerforschung durchführen. Wir müssen Wert auf Copywriting legen. Das ist es also, was Sie zum Inhalt Ihrer Bewerbung passen werden, oder? Das ist also dein Copywriting-Teil. Dann haben Sie die Workflows , sagen wir, wenn Sie auf eine Schaltfläche klicken, welche anderen Dinge passieren sollten. Das ist also Ihr Arbeitsablauf. Aber was sind die verschiedenen Phasen, die passieren, sobald Sie mit den Schaltflächen oder Ihren Symbolen in der Anwendung interagieren den Schaltflächen oder Ihren Symbolen . Das ist also Ihr Arbeitsablauf. Und auch, wie der Benutzer mit der Anwendung interagieren würde und welche Psychologie Sie verwenden werden um Ihr Publikum, Ihre Kunden, so stark wie möglich für die Anwendung oder eine Website zu begeistern. Das ist also dein UX-Teil. Aber obwohl dies die Unterschiede zwischen UI und UX sind, gibt es einige Dinge, die UI und UX überschneiden , und das ist Ihr Wireframing. Nun, was bedeutet Wireframing eigentlich? Wir haben zwar einen speziellen Vortrag zum Thema Wireframing, lassen Sie mich Ihnen nur eine kurze Einführung in das Wireframing geben . Bevor Sie also tatsächlich, sagen wir, ich bin ein Kunde , kommt auf Sie zu und sagt, dass ich eine Portfolio-Website erstellen möchte. Jetzt ist der Kunde tatsächlich ein Wirtschaftsprüfer und er ist seit zehn Jahren in dieser Branche tätig und hat großartige Kunden. In Ordnung? Nun, wenn Sie eine Portfolio-Website für diesen Kunden entwickeln müssen, welchen Inhalt passen Sie dann eigentlich auf die Seite auf der ersten Seite, auf die Startseite, auf die Seite Über uns, Kontakt und all das Zeug. Das Erstellen eines Layouts ist also Ihr Wireframing-Teil. Okay, dann kommt die Benutzerfreundlichkeit. Benutzerfreundlichkeit ist eine weitere gemeinsame Ähnlichkeit zwischen Ihnen und UX. Das heißt, wie würde der Benutzer unsere Anwendung verwenden? Das ist also nicht nur Teil der Benutzeroberfläche, es ist auch Teil des UX-Teils, dann kommt das Prototyping wie besprochen. Prototyping ist nur eine Anwendung, die zwar nicht in der Endproduktionsphase, sondern in der Testphase in einer Funktion entwickelt wurde zwar nicht in der Endproduktionsphase, , als ob Sie die Anwendung tatsächlich verwenden. Die Anwendung ist zwar noch nicht vollständig fertig, aber Sie testen sie tatsächlich aus. Sie simulieren tatsächlich so, dass es so aussieht, als wäre die Anwendung vollständig bereit. Das ist es also, was Prototyping eigentlich bedeutet. Also ja, das war alles über die Summe der Einführung in Figma und all dem Zeug. Sie können einfach einen beliebigen Browser öffnen , den Sie verwenden. Ich bevorzuge Google Chrome. Sie können einfach einen beliebigen Browser öffnen und figma.com verbinden. Sobald Sie dort hingehen, sehen Sie diese Seite und Sie können einfach Ihr eigenes Konto erstellen. Also nach dem Einloggen und das werden Sie sehen. Sobald Sie auf diese Seite gekommen sind, können Sie einfach Ihren Teamnamen angeben. Du kannst einfach ein D bilden oder du kannst das einfach später tun. Sobald Sie ein Team gebildet haben, können Sie einfach Ihren Team-Link teilen und die Mitglieder können dieser Gruppe beitreten. Und sie werden Ihre Projekte sehen können , die Sie für diese Gruppe erstellen. Obwohl ich gesagt habe, dass die Nutzung dieser Figma-Software völlig kostenlos ist, gibt es einige Einschränkungen. Das bedeutet, dass Sie unbegrenzt viele Dateien haben können. Nehmen wir an, Sie haben einige Ihrer eigenen Assets wie Ihre Bilder, einige Videos, die Sie einbetten möchten. All das ist völlig unbegrenzt. Sie können N Dateien hochladen, aber Sie können nur drei Dateien entwerfen und Sie können nur ein Projekt erstellen. Das ist also ein Rückschlag bei der Nutzung Ihres kostenlosen Tarifs. Obwohl der kostenlose Tarif, wie Sie wissen, möglicherweise nicht ausreicht um alle Funktionen zu nutzen. Für diesen speziellen Kurs müssen Sie jedoch keinen einzigen Cent bezahlen, um mit Figma zu beginnen. Okay, fangen wir einfach mit dem kostenlosen Plan an und wir werden in der nächsten Vorlesung weitermachen. 3. (2) Figma Übersicht: Willkommen zurück zum Kurs. In diesem Video-Tutorial gebe ich Ihnen allen einen kurzen Überblick über Figma als Arbeitsbereich. Und wir werden einige der Dinge lernen, die wir in Figma haben. Ordnung, sobald Sie sich angemeldet und Ihr eigenes Konto erstellt haben, erhalten Sie eine Bestätigungs-E-Mail an Ihre E-Mail-Adresse. Gehen Sie also einfach dorthin und bestätigen Sie, dass Sie es sind und versuchen, ein Figma-Konto zu erstellen. Sobald Sie das getan haben, behalten Sie einfach all die Dinge , zu denen Sie aufgefordert werden. Sie werden auch versuchen, Sie zu einem Schnellkurs zu bringen, sie werden versuchen, Ihnen eine kurze Tour zu Figma zu geben, aber Sie müssen sich darüber keine Sorgen machen. Ich mache hier genau das Gleiche. Ordnung, also jetzt, wenn Sie tatsächlich auf diese Figma als Homepage kommen, werden Sie sehen, dass Sie zwei Möglichkeiten haben. Sie können entweder eine neue Designdatei oder eine neue Feigenjam-Datei erstellen . Was ist nun diese große Jam-Datei? Stellen Sie sich das also als Whiteboard vor, auf dem Sie Ihre Ideen brainstormen und einige Ideen erkunden. In Ordnung, das ist deine Prüfungsakte. In der Designdatei hingegen haben Sie tatsächlich versucht, Prototypen für Ihre Anwendung zu entwerfen und zu erstellen. Wie Sie auf der Registerkarte Ergebnisse sehen können, auf dieser speziellen Registerkarte auf der linken Seite sehen, Sie auf dieser speziellen Registerkarte auf der linken Seite sehen, dass Sie Gründe haben. Bei den letzten Projekten , an denen Sie gearbeitet haben, werden Sie also Entwürfe sehen. Die Dinge, die Sie nicht manuell gespeichert haben, werden also automatisch gespeichert und Sie werden es sehen, und Sie werden es hier sehen. Also genau wie in Ihrem Gmail versuchen Sie, eine E-Mail zu verfassen und Sie senden sie nicht. Was passiert dort? Es wird automatisch im Entwurfsteil gespeichert. Das, genau das macht deine Figma hier drüben. Dann siehst du hier ihre Teams. Also, wie viele Teams haben Sie bisher gegründet und wer sind die Teammitglieder? An welchem Teamprojekt haben Sie gearbeitet? Also all diese Dinge wirst du hier sehen können. Nun, da dies das allererste Video eines anderen ist, sollte ich sagen, dass ich zu Beginn unseres Kurses noch keine Datei erstellt habe. Also all die Dinge, die Sie hier sehen werden, das sind die Dateien, die bereits vom Figma-Team erstellt wurden. Und diese dienen nur dazu, dass Sie einen kurzen Blick darauf werfen und verstehen können , wie Sie dieses und das Design-Tool verwenden. Versuchen wir also einfach, eine neue Designdatei zu erstellen. Und wenn ich hier drüben klicke, wirst du sehen, dass Arbeitsbereich von Figma so aussieht. Jetzt werden sie tatsächlich versuchen, Ihnen die Aufforderung zu geben , einen kurzen Rundgang durch Figma zu machen? Also einfach auf diese neuen Tanks klicken und mit dem Workspace fortfahren. Oben können Sie also sehen, was Sie haben, Ihre Werkzeugleiste. Dies wird als Werkzeugleiste bezeichnet, da Sie hier eine Reihe von Optionen haben, mit denen Sie arbeiten können. Nun, neben diesem Entwurf, werden Sie ihn als unbetitelt sehen. Sie können also einfach auf die Entwürfe klicken. Aber ich sollte eher sagen, dass Sie einfach auf das Untitled klicken können und das Projekt umbenennen können. Nehmen wir an, ich möchte dem als Test einen Titel geben. Der Titel meines Projekts lautet also Test. Und sobald ich auf diese Dropdown-Schaltfläche klicke, habe ich die Möglichkeit, den Versionsverlauf anzuzeigen. Das heißt, was waren die anderen Dinge, die ich zuvor getan hatte? Wenn ich das in ein PNG- oder JPEG-Dateiformat exportieren möchte , kann ich das tun. Wenn ich dieses Projekt duplizieren möchte, kann ich das tun. Wenn ich das umbenennen würde, kann ich das auch tun. Wenn ich das löschen möchte, wenn ich diese Datei als Favorit markieren möchte, falls ich das habe, wenn ich dieses Projekt in ein anderes Team verschieben möchte, oder sagen wir, an einen anderen Ordnerspeicherort. Das kann ich auch. Das sind also alle Funktionen in meiner Toolbar. Oben haben wir eine Werkzeugleiste, sodass Sie die Werkzeugleiste sehen können. Ich habe dieses Cursorsymbol. Sobald ich auf dieses Drop-down-Menü klicke, habe ich die Möglichkeit, es zu verschieben oder zu skalieren. Bewege dich also, du kannst einfach auf einige der Kompetenzen klicken , die du in deinem Workspace haben könntest , und du kannst sie von einem Standort zum anderen verschieben. Der Skalierungsteil wird tatsächlich versuchen, Ihre Größe zu skalieren. Nehmen wir an, Sie möchten um das 1,5-fache skalieren. Das können Sie also mit Hilfe der Waage tun. Dann hast du das als Rahmen, Abschnitt und Hobel. Wenn ich auf den Rahmen klicke, wenn ich hier drüben klicke, können Sie sehen, dass ein Rahmen für uns erstellt wurde. Was können wir nun tun? Auf diesem Rahmen? Sie können tatsächlich Formen zeichnen. Sie können es tatsächlich mit dem Stiftwerkzeug zeichnen. Sie können tatsächlich einiges und all das hinzufügen. Nehmen wir an, mit dieser rechteckigen Feld-Schaltfläche kann ich jede gewünschte Form erstellen. Es gibt also einige der vordefinierten Formen, die Sie erstellen können , indem Sie sie einfach herausziehen. Sie haben also ein Rechteck, einen linierten Pfeil, die Ellipse, den Polygonstern, und Sie können sogar ein Bild oder ein Video platzieren , wenn Sie möchten. Jetzt können Sie sehen, dass es einige Tastenkombinationen gibt , die Sie auf Ihrer Tastatur drücken können , um Ihr Rechteck zu zeichnen. Nehmen wir an, ich klicke auf dieses Rechteck und muss es zeichnen. Sagen wir, anstatt hier drüben zu klicken, wenn ich einen Pfeil zeichnen möchte, was kann ich dann stattdessen tun? Ich kann, lass mich das einfach löschen. Ab sofort. Ich lösche das einfach mit der Löschtaste. Ordnung, ich kann einfach meine Shift-Taste gedrückt halten und meine Taste auf der Tastatur drücken. Sobald ich das getan habe, können Sie sehen, dass der Pfeil ausgewählt wurde. Sie können sehen, dass die Pfeilform ausgewählt wurde. Jetzt kann ich das einfach ziehen und die Pfeilform wird gezeichnet. In Ordnung? Das kann ich also in meinem Rahmen machen. Das ist also mein Rahmen und Sie können all die verschiedenen Formen sehen , die ich in meinem speziellen Rahmen habe. Auf der linken Seite ist dieser spezielle Teil also mein Ebenen-Panel. Sie können sehen, dass ich verschiedene Ebenen habe und derzeit arbeiten wir an der ersten Seite. Sie müssen also auf vielen Websites gesehen haben, wir haben eine Homepage, wir haben eine Übersichtsseite, wir haben eine Kontaktseite. Wie in der Tat werden Sie auch auf meiner Website meine Homepage sehen. Über uns Die Kontaktseite. Wie viele Kurse ich habe und all das Zeug, all das ist auf meiner Website. Es gibt also mehrere Seiten. Also einfach so, wenn Sie zuerst die Homepage gestalten möchten, dann werden die weißen auf der Kontaktseite gestaltet. Dann möchten Sie vielleicht die Dienste , die Sie anbieten, auf dieser gesamten Seite gestalten . Sie können also einfach auf dieses Plus-Symbol klicken und die Anzahl der Seiten wird für Sie erstellt. In Ordnung, du kannst das also einfach löschen, wenn du willst. Nehmen wir an, Sie möchten diese Seite umbenennen, beispielsweise in die Seite Über uns. Sie können das also tun, wenn Sie den Patienten um drei löschen möchten , können Sie das tun. Wenn Sie einige der Seiten duplizieren möchten, sagen wir in der Patientin einer, was auch immer wir bisher erstellt haben, ich möchte dies duplizieren, damit ich einfach duplizieren kann und eine neue Seite mit dem Titel Seite Nummer zwei wird erstellt. Genau die gleichen Dinge, die ich auf meiner Seite Nummer eins habe. Und wenn ich ein paar kleine Änderungen vornehmen möchte, kann ich das in meinem pH2 tun. Das ist es, was Figma uns ermöglicht. Ordnung, jetzt fahren wir mit dem nächsten Teil fort In Ordnung, jetzt fahren wir mit dem nächsten Teil fort. Im Ebenenbedienfeld befinden sich Assets. Diese Ressourcen ermöglichen es uns nun, einige der Assets zu erstellen , sodass wir verschiedene Sigma-Projekte verwenden können . Nehmen wir also an, dieser spezielle Rahmen hat ein Gewirr und eine Pfeilform. Nehmen wir an, ich möchte daraus ein Asset erstellen, obwohl dieses Asset nichts bedeutet, okay, es nützt nichts. Es ist nicht einmal ein Designteil, aber nur um der Sache willen erstelle ich ein Asset, damit ich es auch in meinen anderen Projekten verwenden kann. schaffe ich. Ich habe die nötigen Funktionen , um das zu tun. In Ordnung, das ist es also, was uns unser Vermögen ermöglicht. In dieser Werkzeugleiste habe ich jetzt auch das Stiftwerkzeug. Mit dem Stiftwerkzeug kann ich auf einen Scheitelpunkt klicken, ich kann auf die anderen Eckpunkte klicken. Ich kann das so weiterziehen , um ein Objekt zu erstellen. Nehmen wir an, dieses Objekt wurde erstellt. Das bildet sich also wie ein Dreieck. Wenn Sie ein Dreieck einigermaßen sehen können, wurde ein Dreieck gebildet. Und um das zu beenden, kann ich, was ich tun kann, ich kann einfach auf einen der Eckpunkte doppelklicken und es wird tatsächlich einer gebildet. Ich kann einfach auf Fertig klicken. Und Sie können sehen, dass eine Form geformt wurde. Das ist es, was uns Append to ermöglicht. Ich kann auch mit der freien Hand zeichnen. Das ist es, was uns mein Bleistiftwerkzeug ermöglicht. Nehmen wir an, ich zeichne das mit dem Bleistiftwerkzeug. Rechteck wurde erstellt, aber dieses Mal musste ich die Eckpunkte nicht wirklich mappen. Ich musste es mit der freien Hand zeichnen. Wenn Sie also ein Grafiktablett haben, dann sind Sie in der Lage, das Stiftwerkzeug sehr effizient zu verwenden. Andernfalls ist es nicht die beste Methode, eine Form mit der Maus zu zeichnen. Sie können stattdessen das Stiftwerkzeug verwenden. In Ordnung, dann haben wir das Textfeld, okay? Sie können also, was Sie tun können, Sie können einfach auf diesen Text klicken oder Sie können einfach die T-Taste auf Ihrer Tastatur drücken und Sie können auf eine beliebige Stelle auf dem Rahmen klicken. Jetzt können Sie alles eingeben, was Sie angeben möchten , und Sie können sogar einen Teil der Farbe für Ihren Text festlegen. Sie können den Textstil formen, wenn Sie, sagen wir, Sie möchten ihn als, Sie möchten diesen Text fett und unterstrichen formatieren. Also, wie kannst du das machen? Wenn Sie die Größe dieser Schrift erhöhen möchten, können Sie dies sogar für diese Betonung in diesem Bedienfeld mit den Designeigenschaften tun , das sich auf der rechten Seite befindet. Wir können es also möglicherweise nicht vollständig sehen. Geben Sie mir einfach eine Sekunde und Sie werden dieses Design-Eigenschaftenfenster vollständig sehen können . Jetzt hoffe ich, dass Sie in der Lage sein müssen , dieses Fenster mit den Designeigenschaften zu sehen. Und hier können Sie sehen , dass ich diesem Text tatsächlich Farbe geben kann. Nehmen wir an, ich möchte diese Farbe geben , damit ich diese rote Farbe geben kann. Okay, ich habe die Möglichkeit diesen Text mittig auszurichten oder vielleicht rechts, links auszurichten und all das Zeug. Dann habe ich die Möglichkeit, das Ganze in ein PNG-Format zu exportieren . Wenn ich das machen will, kann ich das tun. In diesem Fenster mit den Designeigenschaften können Sie also einfach ein beliebiges Element auswählen und alle Designelemente sehen , mit denen Sie umgehen können. Hier können Sie also entwerfen, Sie können Prototypen erstellen, Sie können sogar einige der Elemente überprüfen. Was bedeutet dieses Inspect Element nun eigentlich? Wenn Sie also in der Webentwicklung gearbeitet haben, müssen Sie mit dem HTML- und CSS-Teil vertraut sein. Sie können also sehen , dass der gesamte Designteil mit dem CSS erledigt wird Mithilfe von CSS Cascading Stylesheets steht Ihr CSS dafür. Also hier drüben, wenn du genau das Gleiche auf deiner Webseite machen willst , dann kannst du einfach diese CSS-Stile kopieren und in deine Datei einfügen . Sie können dies sogar im CSS-Format importieren. Wenn Sie eine iOS-Anwendung entwickeln möchten, können Sie das Ganze kopieren und in Ihr iOS-Projekt einfügen . In Android können Sie das Gleiche tun. Auch wenn Sie das Ganze nicht vollständig in Ihr Android- oder iOS-Projekt integrieren können , wird der Großteil des Designs von Figma selbst erledigt. Wir können einfach den Code kopieren und die meisten von ihnen, die meiste Arbeit ist für Sie alle erledigt. Das ist das fantastische Feature von Figma. Und ja, das ist so ziemlich alles. Wir haben auch das Handsymbol , mit dem Sie von einem Teil zum anderen wechseln können. Nehmen wir an, Sie haben diese Schnittstelle Nummer zwei, Sie haben diesen ersten Frame. Und mal sehen, du erstellst auch noch einen weiteren Frame. Nehmen wir an, Sie erstellen einen weiteren Frame. Jetzt willst du also von einem Teil zum anderen wechseln. Sie können dies einfach mit diesem Handsymbol ziehen. Okay, sagen wir, wenn Sie einige besondere Anmerkungen zu diesem speziellen rechteckigen Feld hinterlassen möchten . Sie können hier also einfach eine übliche Sache weglassen, diese rechteckige Box sieht cool aus. Und du kannst es einfach hier hinstellen. Wenn Sie jetzt den Link Ihres Figma-Projekts teilen, können Sie sehen, dass Sie den Link teilen können. Sie können diesen Link einfach kopieren und ihn per E-Mail oder auf einer beliebigen Social-Media-Plattform teilen . Und wenn sie zu diesem Projekt kommen, können sie einfach darauf klicken und sie können sehen , welchen Kommentar sie hinterlassen haben. Und sie können dort sogar Änderungen vornehmen. Nehmen wir an, das ist die Frage, die ich zu stellen versuche, und eine andere Person, mein anderer Kollege oder mein Kunde kann sie anwenden. Das ist okay. Die Größe der Box sieht cool aus, aber ich möchte die Farbe der Form ändern , damit sie einen Kommentar hinterlassen können, der besagt, dass gerade die Farbe der Box geändert wurde. In Ordnung? Und genau das ermöglicht uns unser Kommentar. Das war also nur ein kurzer Überblick über unser Figma und wie es all die verschiedenen Tools in Figma gibt. Was werden wir uns mit diesem ganzen Kurs und all dem Zeug befassen ? In der nächsten Vorlesung konzentrieren wir uns also nur auf die Werkzeugleiste. Wir werden uns also jede einzelne Funktion unserer Toolbar-Angebote ansehen und versuchen einige Dinge mithilfe der Toolbar-Funktionen zu erstellen. In Ordnung. 4. (3) Symbolleiste: Hallo zusammen, willkommen zurück zu einem weiteren Video-Tutorial. In dieser Vorlesung konzentrieren wir uns auf unsere Toolbar in Figma. Also ich hatte zwar so ziemlich alles über die Toolbar geteilt, aber es sind noch einige Dinge übrig. Wir werden das in diesem Video-Tutorial behandeln. Ordnung, wie Sie sehen können, ist dies unser Arbeitsbereich. Und in diesem speziellen Rahmen, und in diesem speziellen Rahmen haben wir ein rechteckiges Feld, wir haben einen Kommentar, wir haben mit dem Stiftwerkzeug eine Form gezeichnet. Wir haben mit dem Bleistiftwerkzeug ein Rechteck gezeichnet, wir haben einige Texte, wir haben einige Pfeile. Was ist nun mit dieser Figma-Ikone? Was macht es? Was können wir mit Hilfe dieser Aktionsschaltfläche im Hauptmenü tun ? Sie können also einfach zu den Dateien zurückkehren, vorherigen Dateien, an denen Sie gearbeitet haben, und Sie können einfach zu einer anderen Datei springen. Das ist also die Testdatei, wir gearbeitet haben. Also doppelklicke ich einfach darauf. Und dieses Figma-Projekt wird für uns geöffnet. Wenn Sie diese Datei tatsächlich importieren möchten. Wenn Sie exportieren möchten, sollte ich eher sagen, exportieren dies in Form von PNG oder JPEG. Sie können einfach auf dieses Dropdownmenü mit dem Figma-Symbol klicken und einfach auf diese Datei klicken und Sie haben die Möglichkeit, diese auch in Form von PDF zu exportieren. Abhängig von der Anzahl der Räume, die Sie erstellt haben, können Sie das PDF erstellen. Nehmen wir an, Sie möchten die Frames dann in das PDF-Format exportieren. derzeit auf dieser Seite Wie viele Frames haben wir derzeit auf dieser Seite, Seite eins? Wir haben keine anderen Rahmen. Wir haben nur einen Frame, wie Sie hier sehen können, hervorgehoben ist nur Frame eins auf der zweiten Seite, wir haben zwei Frames, Frame eins, Frame zwei. Wenn ich das nun in Form von PDF exportieren möchte, dann, wenn ich dieses PDF öffne, werden Sie sehen, dass dieses PDF zwei Seiten hat, Seite eins und Seite zwei, die Seite, wenn sie komplett leer ist, weil dieser Rahmen keine anderen Elemente enthält. Nun, obwohl wir diesen Rahmen erstellt haben, hatten wir ihn manuell mit dem Cursor gezeichnet. Was ist, wenn Sie tatsächlich eine Anwendung entwerfen möchten? Oder nehmen wir an, Sie möchten eine mobile Anwendung entwerfen , die für Ihr iPhone geeignet ist. Also klicken Sie einfach auf diesen Rahmen und wählen Sie den Rahmen aus. Und im Eigenschaftenbereich, diesem Bereich mit den Designeigenschaften, lasse ich mich einfach auf die linke Seite bewegen. Sie haben verschiedene Möglichkeiten, einen Rahmen für das iPhone 14, 14, 14 Plus zu erstellen einen Rahmen für das iPhone 14, 14, 14 . Nehmen wir an, ich möchte einen iPhone 14-Rahmen erstellen. Das sind also die genauen Abmessungen , in denen ich vielleicht für meine Anwendung arbeiten möchte. So erstelle ich also einen Rahmen für ein bestimmtes Hardwaregerät. Ich kann wieder auf meine Rahmen klicken. Ich kann. Und ich habe die Möglichkeit, ein beliebiges Android-Gerät und ein großes Android-Telefon, Android Small, auszuwählen beliebiges Android-Gerät und . Ich habe die Möglichkeit, zwischen iPhone 814 und so weiter zu wählen. Ich habe verschiedene Optionen, um zwischen verschiedenen Tablets zu wählen, z. B. Ihrem Surface Pro oder iPad. Ich kann Desktops wie MacBook Air, MacBook Protein Inch Pro, MacBook 816 Zoll Pro Desktop wählen MacBook Protein Inch Pro, . Und ich kann auch eine Präsentation erstellen. Nehmen wir an, ich erstelle eine Diashow mit einem Verhältnis von 16 zu 29, also kann ich das auch tun. Ich kann sogar Folien mit vier im Verhältnis 234 mal drei erstellen. Ich kann eine Anwendung oder ein Design für meine Smartwatch erstellen . Ich kann sogar das Papierformat erstellen, sagen wir A4-Größe, A5-Größe und all das Zeug. Wenn ich ein Bild für meine Instagram-Posts erstellen möchte und darauf klicken kann, wird ein Rahmen für die genaue Datengröße erstellt . diesem Figma können wir also auch einen Twitter-Post, einen Twitter-Header und all das Zeug erstellen . Figma ist so flexibel , dass wir Rahmen für verschiedene Dinge erstellen können Rahmen für verschiedene Dinge erstellen denen wir vielleicht arbeiten möchten. Wie Sie sehen können, ist das mein Rahmen. Ich habe auch die Möglichkeit zu schneiden. Also, was bedeutet das eigentlich? Also sagen wir, in diesem speziellen Frame, eins, Frame, eins, möchte ich tatsächlich einen Teil davon in Scheiben schneiden. Ich kann also einfach auf dieses Segment klicken und den Teil des rechteckigen Feldes ziehen , den ich separat exportieren möchte. Sobald ich das gemacht habe, kann ich einfach hier klicken und auf Export klicken. Jetzt kann ich das in Form von JPG, SVG exportieren. Svg ist im Grunde dein Symbolformat, SVG. Wenn Sie, wenn Sie dies im SVG-Format exportieren, bedeutet das im Grunde, dass Sie dies in Form eines Fab-Icons verwenden können . Sie können dies als Symbol für Ihre Website verwenden. Das ist es also, was dein SVG eigentlich bedeutet. Sie können dies sogar in die PDF-Formate exportieren. Wenn ich das in ein PDF-Format exportiere, was es tun wird, es wird es tatsächlich exportieren. Und versuchen wir, das im PNG-Format zu exportieren. Und wenn ich das gemacht habe und wenn ich es öffne, werden Sie sehen, dass ein Teil meines Rahmens ausgeschnitten wurde, und jetzt ist es dieses spezielle Bild. In Ordnung? Auf diese Weise können Sie einige der Dinge, die Sie verschieben und skalieren können, in Scheiben schneiden . Nehmen wir an, Sie möchten diese Form skalieren, oder sagen wir, ich werde tatsächlich eher sagen, ich werde eine erstellen. Sagen wir eine Ellipse. Ich zeichne eine Ellipse. Cool. Nehmen wir nun an, ich möchte diese Kreisform vergrößern. Wenn ich also auf diesen bestimmten Eckpunkt klicke und erweitern möchte, kann ich das tun. Aber Sie können sehen, dass sich auch die Form selbst verändert, aber ich möchte nicht, dass das passiert. Was ich stattdessen tun kann, ist, dass ich einfach meine Umschalttaste gedrückt halten kann. Und jetzt. Selbst wenn ich meinen Cursor von oben nach unten bewege, kann man mit Hilfe der Umschalttaste sehen, dass sich die Form nicht ändert . Sie können sehen, auch wenn ich meinen Cursor von oben nach unten, von links nach rechts, nur versuche, meine Form zu erweitern. Es versucht nicht, die Eigenschaft meiner Form zu ändern. Okay, das ist es, was uns unsere Shift-Taste ermöglicht. Sie können Ihre beliebige Form problemlos erweitern, nicht nur Ihre Ellipse, sondern auch Ihr Rechteck oder Ihre benutzerdefinierte Form. Sie können dies mit Hilfe der Shift-Taste erweitern. Halten Sie also einfach die Umschalttaste gedrückt und klicken Sie auf einen der Scheitelpunkte, und Sie können ihn erweitern. Ordnung, das ist also deine Form, die du vielleicht erstellen möchtest. Du kannst auch einen Stern erstellen. Nehmen wir an, Sie möchten einen Stern erschaffen. So wie Sie sehen können, während ich den Stern zeichne, können Sie sehen, dass sich auch die Form selbst verändert. Im Moment sind die Kanten also lang, aber die Breite ist sehr klein, aber ich möchte nicht, dass das passiert. Was ich stattdessen tun kann, ist, einfach meine Umschalttaste gedrückt zu halten und meine Sternform zu erweitern. Cool. Wir haben auch verschiedene Komponenten. Wir können einige Plug-ins herunterladen. Was bedeutet dieses Plugin nun eigentlich? Wenn Sie also an WordPress gearbeitet haben, kennen Sie möglicherweise Plugins. Plugins sind also im Grunde einige Funktionen , die von einigen Entwicklern geprüft und entwickelt wurden. Und sie können jetzt kostenlos ausgeführt werden. Sobald Sie diese Plugins in Ihrem speziellen Projekt installiert haben, erledigt das Plug-In selbst den größten Teil der Arbeit. Sie müssen sich keine Gedanken darüber machen, wie Sie diese Dinge manuell erledigen werden. Also, genau wie du über dein flaches Symbol sehen kannst, was wird dieses Plugin tun? Dieses Plugin wird dir tatsächlich helfen, einige der Icons direkt aus dieser Wohnung zu importieren , die ich anschließen kann. Sie müssen also nicht auf eine andere Website gehen, nach den Plugins suchen, sie herunterladen und hier hochladen. Sie können dieses Plugin einfach direkt verwenden. Sobald Sie dieses Plugin für Ihr Projekt installiert haben, können Sie einfach nach dem Symbol suchen , nach dem Sie suchen und das direkt in Ihr Projekt importiert wird. Das ist also das coole Feature von Figma, dass Sie die Möglichkeit und die große Vielfalt haben, zwischen verschiedenen Plugins zu dass Sie die Möglichkeit und die große Vielfalt haben wählen. Nicht nur, dass Sie sogar Ihre Designform von Jeff oder ein Videoformat exportieren können. Normalerweise können Sie also sehen, Sie Ihr Figma-Projekt entweder in ein PDF-Format oder in ein PNG- oder JPEG-Format exportieren können , im Grunde nur ein statisches Format, nicht in ein dynamisches Format. Mit Hilfe dieser verschiedenen Plugins können Sie dies sogar in ein Videoformat exportieren. Ordnung, dann haben wir verschiedene Plug-ins und so, sodass Sie das Plug-in nach Ihren Anforderungen suchen und herunterladen können das Plug-in nach Ihren Anforderungen suchen und herunterladen . Es ist nichts Starres oder Festes , dass Sie dieses spezielle Plugin verwenden müssen. Wir haben auch verschiedene Widgets, die Sie verwenden können. Wir haben auch die Möglichkeit, unser Jira und Asana zu integrieren. Diese beiden sind die Projektmanagement-Tools, mit denen Sie mit Ihren Arbeitsabläufen und Ihrem Team umgehen können. In Ordnung, das sind also alle Widgets, die wir haben. Also ja, das ist so ziemlich alles. Das haben wir. Ansonsten wurden die restlichen Dinge wie Ihr Text, Ihre Kommentare, verschiedene Formen, der Rahmen, die Fähigkeit, sich zwischen verschiedenen Objekten und Ihren Rahmen zu bewegen verschiedenen Objekten und Ihren Rahmen bereits in den vorherigen Vorlesungen behandelt. Ich muss diese Dinge also nicht immer wieder wiederholen. Okay, das war also alles von meiner Seite für diesen speziellen Vortrag. Wir sehen uns in meiner nächsten Vorlesung. Pass auf dich auf. 5. (4) Schichtplatte in Figma: Hallo zusammen, willkommen zurück zum Video. In dieser Videovorlesung werden wir uns das Ebenenpanel ansehen. Obwohl wir uns bereits mit dem Ebenen-Panel befasst haben, müssen wir noch einige Dinge behandeln. Wie Sie also auf dieser speziellen Seite, Nummer zwei, sehen können , haben wir verschiedene Frames, okay? Und in jedem einzelnen Frame haben wir verschiedene Formen und Vektoren , die wir erstellt haben, oder? Übrigens ist dieser Vektor nichts anderes als die Form, die Sie mit dem Stiftwerkzeug erstellt haben. Das ist also dein Vektor. Nehmen wir an, wenn Sie einige Ihrer Formen tatsächlich umbenennen möchten , sagen wir, statt einer Ellipse, möchten Sie diesen Titel geben, da Sie einfach hier oder hier klicken können . Und Sie können auf dieses bestimmte Objekt doppelklicken und einfach einen beliebigen Namen angeben. Nehmen wir an, ich gebe diesen Titel als Kreis, Kreis eins. Anstelle der ersten Ellipse möchte ich uns eine eingekreiste geben. In Ordnung? Und so kann ich jede meiner Formen umbenennen, nicht nur Formen , alles, was Sie möglicherweise in Ihrem Figma-Arbeitsbereich erstellt haben. Was ist nun, wenn Sie einige der Dinge löschen möchten , die Sie in Ihrem, Sie wissen schon, Ihrem Arbeitsbereich haben . Nehmen wir an, Sie möchten Frame drei löschen. Sie möchten diesen iPhone 14-Rahmen ebenfalls löschen. Wie kannst du das machen? Nun, das machst du manuell, du mit der rechten Maustaste auf diesen bestimmten Frame klickst und dann einfach nach einem Löschen suchst oder vielleicht einfach auf die Schaltfläche Löschen klickst. Das kannst du tun, aber es gibt einen kürzeren Weg, das zu tun. Sie können einfach die Umschalttaste gedrückt halten und mehrere Dinge auswählen, und Sie können einfach Ihren gesamten Frame löschen. Sie können also sehen, dass all diese Dinge bisher gelöscht wurden. Cool. Sogar dieser Frame wird gelöscht, oder? Das ist es, was uns bleibt, nur Frame Nummer eins. Jetzt können Sie sehen, dass wir gerade im Zoom sind. Der Zoom-Prozentsatz beträgt 78. Nehmen wir an, ich möchte auf etwa 01:25 zoomen. Ich kann also einfach meine Strg-Taste gedrückt halten und mein Mausrad benutzen. Mit dem Mausrad können Sie die Ansicht vergrößern und verkleinern, aber Sie müssen die Strg-Taste gedrückt halten. Wenn ich meine Umschalttaste gedrückt halte und meine Scrolltaste oder mein Mausrad verwende , um tatsächlich zwischen der linken und der rechten Seite meines Arbeitsbereichs zu wechseln . schaffe ich. Anstatt also meinen Cursor und meine Maus manuell zu benutzen, gehe ich von der linken Seite zur rechten Seite navigiere zum linken Licht, rechts. Ich kann einfach meine Umschalttaste gedrückt halten und das Mausrad benutzen . In Ordnung, das sind einige der Dinge. Jetzt kann ich sogar einige dieser Dinge gruppieren. Als ob ich einfach meinen Cursor benutzen kann, vergewissern Sie sich, dass Sie diese Verschiebungstaste ausgewählt haben. Und Sie können das Ganze auswählen. Und jetzt kannst du sie mit dem Control G gruppieren Also ist jetzt alles unter einer Gruppe zusammengefasst. Jetzt kann ich sie bewegen. Sie können sehen, dass alles bewegt werden kann. Das Ganze kann verschoben werden. Nehmen wir an, ich erstelle einen weiteren Rahmen. Okay, ich kann einen weiteren Rahmen erstellen. Nehmen wir an, ich möchte einen Desktop-Frame erstellen. In Ordnung? Also für, sagen wir mal MacBook Pro 14 Zoll. Sie können also sehen, dass der 14-Zoll-Rahmen des MacBook Pro für mich erstellt wurde. Ich kann es einfach ziehen und ich kann es hier platzieren oder ich kann einfach eine doppelte Kopie davon erstellen und sie dort einfügen. Dazu kann ich einfach die Strg-Taste gedrückt halten und auf D oder Control D klicken, und das wird hier repliziert. In Ordnung, das muss ich nicht tun. Control C und Control V Ich kann einfach Control D machen und ich kann die doppelte Kopie davon ziehen. Ordnung, Sie können also sehen, dass ich zwei Frames in meiner Seite Nummer zwei habe , und ich kann auch zwischen verschiedenen Seiten wechseln. Ich habe also verschiedene Seiten, aber ich möchte andere Seiten löschen. Also, was werde ich tun? Ich kann einfach hier klicken und auf Löschen klicken, oder ich kann einfach auf diesen Rechtsklick klicken und es löschen. In Ordnung? Dieses Häkchen bedeutet also im Grunde, dass Sie sich auf Seite sechs befinden , oder Sie können hier sogar sehen, dass Sie sich auf Seite sechs befinden. In Ordnung, ich lösche das einfach. Und jetzt sind wir auf Seite zwei. Wir haben den 14-Zoll-Rahmen des MacBook Pro und den Rahmen, den wir tatsächlich manuell gezeichnet haben. In Ordnung, was ist nun mit den Assets im Ebenenfenster? Was ist damit? Wie können wir es nutzen? Nehmen wir an, ich möchte tatsächlich einen Vermögenswert von, sagen wir, einem Auto erstellen . Sie müssen tatsächlich ein Auto auf einer Website gesehen haben. Wenn Sie sich dessen nicht bewusst sind, versuchen wir einfach, eine einfache Karte zu erstellen. Ordnung, ich lasse mich einfach auch auf diese Gruppe klicken und ich kann diese löschen. In Ordnung. Was ich nun mache, ich erstelle eine rechteckige Form mit weißer Farbe. Geben wir das einfach als weiße Farbe an. Und ich gebe das lieber, lass mich das einfach aus meinem Bild entfernen, sonst wirst du nicht sehen können , was ich mache. In Ordnung, diese Box wurde also aus meinem Rahmen entfernt. Jetzt gebe ich diesen Grenzradius an. Jetzt klicke ich einfach darauf. Ich kann den Grenzradius angeben. Das ist also mein Eckenradius. Jetzt komme ich aus der Webentwicklung und nenne diesen US-Grenzradius gerne. Sie können diesen S-Eckradius in Figma sogar S-Eckradius nennen, wir nennen ihn S-Eckradius. Also wenn ich sage, möchte ich es einen Radius von etwa zehn nennen. Also sagen wir 20. Auf Null. Sie werden also sehen, dass es einige leicht gekrümmte Kanten gibt. Die Kanten sind nicht scharf. Das ist mit dem Eckenradius möglich, ich kann ihn sogar auf, sagen wir, 50 ändern. 50 habe ich ausgewählt. Und ja, das ist so ziemlich ****. Und was ich jetzt tun werde, ich erstelle eins. Ich erstelle eine Ellipse. In Ordnung? Ich werde ein Textfeld erstellen. Ich kann den Namen so nennen wie ich. Ich möchte, dass die Farbe meines Textes schwarz ist. Also lass uns das einfach als Schwarz nehmen. Joe. Blogs erhöhen auch die Textgröße. Also anstatt einfach, nun, geben wir das einfach als 24 an. Ich hoffe, es wäre für alle vier sichtbar. Lassen Sie uns einfach auf 36 vergrößern. Ja. Der Name dieser Person ist also Joe Bloggs. Und was ich tun werde, das nächste, was wir tun wollen, ist ich einfach so etwas wie Webentwickler sagen kann. Okay, wir müssen die Text-, Farb- und Größenstatistiken ändern . Ja. Also Webentwickler, Freelancer und Portale. Wir können einen Softwareingenieur sehen. Softwareingenieur. In Ordnung. Jetzt kann ich einfach das Ganze auswählen. Ich kann die Texte in der Mittellinie verwenden. Ordnung, ich kann das Textfeld vergrößern , damit es gut aussieht. Ich kann einfach hier klicken. Ich kann das vergrößern. Stimmt es? Ja, das ist so ziemlich alles. Was ich nun tun werde, ich werde das Unsplash-Plugin verwenden , damit ich ein Bild importieren kann. Im Plugin-Bereich kann ich nach Unsplash suchen und auf diese Schaltfläche „Ausführen“ klicken. Sobald ich das getan habe, wird es einige Zeit dauern, bis dieses spezielle Plugin tatsächlich für Sie ausgeführt wird. Und du kannst nach jedem suchen. Nehmen wir an, Sie wollen einen Ingenieur? Ingenieur? Ich suche nur. Jep. Ich klicke einfach auf dieses Bild. Und ich kann es hierher ziehen. Also dieses Bild ist zu groß, aber wir passen es an unsere, ähm, du weißt schon, du kannst sehen, wenn ich es in meine Ellipse ziehe, es hat sich tatsächlich entsprechend verkleinert. In Ordnung, also so sieht meine Karte aus. Was ich jetzt tun kann, ist, dass ich einfach das Ganze auswählen kann. Ich kann das Ganze auswählen. Und was ich tun kann, ich kann sie mit der Tastenkombination Strg-G gruppieren. Und ich kann die Kontrolle über alle zehn K verwenden , um tatsächlich einen Vermögenswert zu bilden. Diese zweite Gruppe ist jetzt mein Kapital. Oder was Sie tun können, Sie können die gesamte Gruppe auswählen und haben die Möglichkeit, eine Komponente zu erstellen. Sie können also einfach eine Komponente erstellen und jetzt wurde ein Asset für uns erstellt. Sie können also einfach zu diesem Assets-Teil gehen und dieses Asset in Ihr MacBook Pro 14 Zoll oder einen anderen Rahmen oder eine Seite importieren in Ihr MacBook Pro 14 Zoll oder , die Sie verwenden möchten, sagen wir, von Seite eins bis zur Seite Über uns . Ich möchte dieses Asset importieren. Also, was ich hier machen werde, ich erstelle einfach einen neuen Rahmen, sagen wir, meines iPhone Pro. Und jetzt möchte ich meine Säure mitbringen. Jetzt können Sie also sehen , dass der Vermögenswert angesprochen wurde , richtig? Nehmen wir an, dieser Frame hat einen Hintergrund oder ich kann ihn importieren. Sie können sehen, dass es genau so ist. Sogar die Abmessungen sind exakt gleich. 5.7 von 616. Wenn ich zu meiner zweiten Seite zurückkehre, schätze ich. Ja. Bis hier haben wir also auch 5,7 mal 616. Das ist also meine Breite und Höhe. sind also all die Dinge , die ich mit dem Ebenenbedienfeld und der Werkzeugleiste und all dem Zeug tun konnte . 6. (5) Ausrichtung und Vertrieb: Hallo zusammen, willkommen zurück zu einem anderen Video. In diesem Video-Tutorial lernen wir etwas über Ausrichtungen und Verteilung in Figma. Wie Sie vor meinem Bildschirm sehen können, habe ich einen Rahmen erstellt, in dem ich eine Tanglebox habe. Jetzt können Sie sehen, sobald ich mein Tangle-Feld im Bereich mit den Designeigenschaften auswähle , habe ich die Möglichkeit, meine Box tatsächlich auszurichten. Also kann ich es entweder nach links ausrichten. Ich kann es entweder nach rechts oder sogar nach der Mitte ausrichten . Was passiert nun, wenn ich diese linksbündige Ausrichtung wähle? Sobald ich darauf klicke, hat es es an der linken Seite, ganz links, ausgerichtet. Sie können sehen, wenn ich es jetzt nach oben ziehe, können Sie sehen, dass es möglich ist, obwohl ich es sogar irgendwo dazwischen platzieren kann , das kann ich tun. Und sobald ich wieder auf die Schaltfläche Links ausrichten klicke , wurde sie wieder an der linken Seite ausgerichtet. Schon wieder. Dies geschieht nun in Bezug auf die X-Achse. Wie Sie sehen können, passiert das in Bezug auf die X-Achse, richtig? Was ist nun, wenn ich dieses spezielle Feld tatsächlich so ausrichten möchte, dass es beispielsweise horizontale Mittelpunkte ausrichtet. Was nun in diesem Fall passiert, ist, dass unsere Box tatsächlich in der Mittelposition in Bezug auf die X-Achse ausgerichtet wird . Ebenso kann ich das tun, wenn ich es nach rechts ausrichten möchte . Wie Sie sehen können, wurde es, sobald ich hier drüben geklickt habe , nicht nach rechts ausgerichtet . Wenn ich auf diese Schaltfläche klicke die besagt, dass sie nach oben ausgerichtet ist, wird mein Element jetzt ganz rechts ausgerichtet. Nun, warum ist das so? Das liegt daran, dass wir das bereits ausgewählt haben. Wir wollen es nach rechts ausrichten. Was ist, wenn ich möchte, dass sich meine Box an der obersten Position befindet, aber nicht ganz rechts, sondern größtenteils in der Mitte. Also kann ich das Zentrum auswählen. Und jetzt können Sie sehen, dass es auch die Mittellinie ist, aber es befindet sich auch an der obersten Position. Das passiert also in Bezug auf die Y-Achse. Die Ausrichtung nach oben erfolgt in Bezug auf die Y-Achse und die X-Achse. Was passiert nun, wenn ich „Vertikale Mittelpunkte ausrichten“ auswähle? Es orientiert sich also an der Y-Achse, nicht an der X-Achse. Also, selbst wenn ich es so ausdrücke, sagen wir, ich platziere es irgendwo hier drüben. Wenn ich das mache und Sie sehen, dass es in Bezug auf die Y-Achse an der Mitte ausgerichtet wird. Also selbst wenn ich die X-Achse mache, meine Boxen auf der linken Seite, muss sie sie in Bezug auf die Y-Achse größtenteils in der Mitte ausrichten ? Korrigiert. In ähnlicher Weise habe ich auch andere Möglichkeiten , es nach unten auszurichten. Das heißt, es wird an die Nullen und die Y-Achse angehängt , richtig? Ich kann es sogar so ausrichten , sagen wir, ich möchte, dass es sich ganz rechts befindet, aber auch unten. Wenn ich oben will. Und ich möchte, dass es Irland ist, das kann ich auch. Das sind also einige der Dinge , die ich euch allen zeigen wollte. In Ordnung? Das war also ein individuelles Element. Was passiert nun, wenn wir eine Gruppe von Elementen haben? Nehmen wir an, ich habe diese Box und auch eine kleinere Box. Was ist, wenn ich versuche Was ist, wenn ich versuche, sie zu gruppieren? versuche nicht gerade, sie mit Hilfe von Control G zu gruppieren . Aber wenn ich das einfach mit Hilfe dieser Verschiebe-Schaltfläche auswählen kann , kann ich sie tatsächlich auswählen. Wenn ich nun versuche, dies an der äußersten linken Seite auszurichten, können Sie sehen, dass mein Bild jetzt weg ist. Meine rechteckige Box ist jetzt weg, aber sie ist nirgendwohin gegangen. Es ist direkt dahinter oder du kannst sagen, es befindet sich in Bezug auf mein Elternelement ganz links . Sobald Sie also versuchen, einige der Elemente zu gruppieren, versteht Figma automatisch, dass das kleinste Element, die kleinste Form, das untergeordnete Element ist , wohingegen das Element, das die größere Form hat, wenn die größere Größe hat, Ihr übergeordnetes Element ist. In ähnlicher Weise haben wir auch Geschwister, was bedeutet, sagen wir, ich erstelle auch, lassen Sie mich eine weitere Box erstellen. Was ich stattdessen tun kann, ist, dass ich einfach versuchen kann, Control D zu machen. Sobald ich das getan habe, kann ich ziehen. Und jetzt wurde ein Geschwisterelement gefunden. Beide fungieren also als Geschwister, wohingegen das übergeordnete Element dieser beiden Boxen meine große rechteckige Box ist. Wenn ich nun versuche, sie auszurichten, was wäre, wenn ich versuchen würde, das Ganze auszuwählen und wenn ich versuche, sie nach links auszurichten, können Sie meine beiden Boxen sehen, dieses Feld und dieses Feld sind jetzt in Bezug auf meine X-Achse an der äußersten linken Seite ausgerichtet . Das liegt daran, dass mein Elternteil Bezug auf mein Elternelement passiert. Wenn ich versuche, das Ganze erneut auszuwählen es nun an der äußersten rechten Seite auszurichten, was passiert dann in diesem Fall? Sie können sehen, dass es in Bezug auf mein Elternelement übereinstimmt, nicht das, was ich mir eigentlich erhofft hatte. Ich hatte erwartet, dass dieser Euro, meine Schwesterelemente, ihn in Bezug auf den Rahmen ganz rechts ausrichten würden . Aber jetzt passiert es in Bezug auf mein übergeordnetes Element, weil sie jetzt unter dieser Hierarchie stehen. In Ordnung? Wenn ich sie im Universum ausrichten will, diese horizontalen Mittelpunkte, dann kannst du sehen, dass sie sich in der Mitte ausrichten. Ich kann sogar die Farbe ändern, sodass Sie sehen können , dass genau meine Boxen sind. Ich kann das also als rote Farbe angeben, sogar das als dieselbe rote Farbe. Jetzt können Sie sehen, dass beide jetzt größtenteils in der Mitte ausgerichtet sind . Korrigiert. Ebenso habe ich diesen Text Figma in meinem rechteckigen Feld. Wenn ich nun versuche, dies auszuwählen und sie auszurichten, nehmen wir an, ich möchte meinen Text Figma unten ausrichten. Meine Box bewegt sich nirgendwo anders hin. Die Boxen an exakt derselben Position. Was sich bewegt, ist mein Textfeld, mein Textelement. Richtig? Jetzt wurde es größtenteils nach unten ausgerichtet. Wenn ich es in Bezug auf die Y-Achse an der Mitte ausrichten möchte , kann ich dieses bestimmte Element auswählen. Wenn ich möchte, dass es Bezug auf die Y-Achse oben steht, kann ich dies auswählen. Wenn ich möchte, dass es rechtsbündig ist, dann kannst du sehen, dass es in Bezug auf x passiert. Wenn du also versuchst, es nach links oder rechts auszurichten, wird es in Bezug auf die X-Achse geschehen, aber du solltest versuchen, deine Ober- oder Unterseite auszurichten. Es kann auf beide Arten passieren, XOR y .. Okay? Das ist also, was Ihr übergeordnetes und untergeordnetes Element tut, und deshalb ist es wichtig, dass wir verstehen, wie Ebenen tatsächlich gebildet werden, wie die Hierarchie gebildet wird. In Ordnung? Obwohl Sie hier keine Gruppe gebildet haben, versuchen Sie, sie in einem Gruppenformat zusammenzubringen, aber es ist keine Gruppe. Sie haben gerade das Ganze ausgewählt. Und Figma versteht automatisch , dass sich daraus nun eine Gruppe gebildet hat. Lassen Sie mich Ihnen ein anderes Beispiel geben. Habe ich in meinem Rahmen verschiedene Boxen? Sie können sehen, dass alle bis zur Größe meiner Boxen exakt gleich groß sind. Die Ausrichtung ist ziemlich unterschiedlich. Was ist, wenn ich sie so ausrichten und gruppieren möchte , dass sie wie eine Zehnertastatur aussehen. Sie wissen, wie die Struktur unserer Zehnertastatur ist. Was ich stattdessen tun kann, ist, dass ich einfach das Ganze ziehen und all diese Elemente auswählen kann. Jetzt können Sie unten rechts sehen, sobald ich meinen Cursor hierher bewege, habe ich die Möglichkeit, meine Boxen tatsächlich so auszurichten , dass sie wie eine Zehnertastatur aussehen. Oder die Struktur wird so sein , dass es mit dem richtigen Abstand, der richtigen Ausrichtung und ähnlichem ausgerichtet wird . Sobald ich dort drüben klicke, siehst du das erste Feld, Feld Nummer eins. Sie können sehen, dass es jetzt so ist, dass es in Bezug auf die X-Achse zur äußersten linken Seite und in Bezug auf die Y-Achse zur obersten Position gehört die X-Achse zur äußersten linken Seite . Das zweite Feld befindet sich jetzt an der obersten Position, aber es ist in der Mitte in Bezug auf die X-Achse ausgerichtet, nicht auf der Y-Achse, sondern auf der X-Achse. Wohingegen dieses Element in der Mitte in Bezug auf die Y-Achse und auch das Zentralatom in Bezug auf die X-Achse ausgerichtet Bezug auf die Y-Achse und ist. So war es also in der Lage, das zu tun. Und diese besondere Sache , die ich gerade gemacht habe war nichts anderes als die Fähigkeit, aufzuräumen. Sie können sehen, dass wir dafür auch eine Tastenkombination haben. Sie können die Tasten Alt, Shift und D gedrückt halten , um sie tatsächlich aufzuräumen. Andernfalls, wenn Sie möchten, dass sie verteilt sind, horizontale Abstände, können Sie sehen, wie es aussieht wenn Sie möchten, dass sie einen vertikalen Abstand haben. So wird es aussehen, oder? Jetzt. Wir werden uns jedoch später mit den Rastern und dem ganzen Abschnitt befassen. Sie können sehen, dass wir einige pinke Highlights haben. Was bewirkt das und wie wird es uns helfen? Nehmen wir an, ich habe diesen rosafarbenen Raum, den Raum, der zwischen diesen beiden Boxen übrig ist. Wenn ich das ausdehne, sehen Sie, dass zwischen meinem ersten und dem zweiten Feld der gleiche Abstand, der dem Wert von 08 entspricht, verbleibt. Ähnlich zwischen Box eins, Box drei, Box vier und Box Phi und so weiter. Da ich genau einen ganzen Raum lasse, kann ich das auch mit Horizontal machen. Sie können sehen, dass ich genau den gleichen Platz lassen kann , den ich für sie haben möchte. In Ordnung? Ich kann sogar, weißt du, bestimmte Kästchen auswählen, bestimmte Kästchen auswählen denen ich nicht möchte, dass sie aufeinander abgestimmt werden. Ich kann einfach diese bestimmte Box halten und die Ausrichtung ändern. Also ja, das ist so ziemlich alles, über deine Ausrichtungen und Verteilung. Eine Sache, an die Sie sich erinnern sollten, ist, dass Figma immer versucht, die Ebene an ihrem übergeordneten Element auszurichten. Es könnte Ihre Gruppe sein, es könnte ein Rahmen sein oder den Rahmen der Komponente enthalten. Daran müssen Sie sich also erinnern. Und basierend auf diesem Wissen können Sie wunderschöne Designs für Ihre Website oder Anwendungen erstellen . 7. (6) Gittersystem in Figma: Hallo zusammen, willkommen zurück zu einem anderen Video. In diesem Video-Tutorial lernen wir das Gridsystem in Figma kennen. Also all die Leute, die sich mit Webentwicklung auskennen, sie alle müssen über die Flexbox-Ränder, das Padding, das Rasterlayout in Bezug auf Webentwicklungsaspekte , denn wir haben CSS gelernt, auch wenn Sie meinen Kurs nicht gesehen haben, ich bin mir ziemlich sicher, dass jeder Kurs oder Kurs, für den Sie in Bezug auf Webentwicklung angemeldet sein müssen , habe etwas über Ihr Netzsystem gelernt. Das Rastersystem bleibt also auch in Figma so ziemlich gleich. Was bedeutet das und warum verwenden wir es? Im Grunde verwenden wir also das Grid-System um unsere Anwendung zu erstellen, oder besser gesagt, Android-Anwendung von Website und Anwendung wäre nicht so reaktionsschnell. Die Website muss auf jeden Fall responsiv sein. Responsive bedeutet im Grunde, dass, sagen wir, dieser spezielle Laptop, den ich gerade verwende , über ein 15,6-Zoll-Display verfügt. Was ist, wenn versucht wird, mit einem mobilen Gerät auf diese Website zuzugreifen? Nun, mobile Geräte haben im Allgemeinen keine größeren Bildschirme, richtig? Sie liegen im Allgemeinen im Verhältnis von sechs zu neun. Und die Größe des Geräts ist im Vergleich zu Ihren Laptop-Bildschirmen ziemlich klein , richtig. Also da drüben, wie würde deine Website aussehen? Nun, einige der Portionen werden ausgeschnitten oder es werden nur einige Dinge angezeigt und einige Dinge werden ausgeblendet. Was wird in diesem Fall passieren? Im Allgemeinen, wenn Sie einfach Ihr Telefon öffnen und nach einer der Websites suchen, sehen Sie dann all diese Dinge? Ja, natürlich machst du all diese Sachen. In Ordnung. liegt daran, dass die Website, auf die Sie zugreifen, responsiv ist. Jede Website, die Sie erstellen oder auf die Sie auch nur zugreifen möchten , muss responsiv sein, denn in der heutigen Zeit gibt es so viele verschiedene Geräte, nicht nur Ihre Smartphones, sondern wir haben Ihre Tablets, wir haben Laptops, wir haben Desktops, wir haben Smartwatches, wir haben Mobiltelefone. Diese verschiedenen Geräte haben also unterschiedliche Displays und entsprechend sollte die Website den Inhalt entsprechend der Größe des Geräts unterbringen . Aus diesem Grund haben wir das Grid-System. Mithilfe des Rastersystems werden Sie verstehen, wie ich die Größe meiner Elemente auf meiner Webseite so ändern kann, dass sie perfekt zu dieser bestimmten Größe des Geräts passen. Wie Sie sehen können, habe ich einen Rahmen erstellt, der der Größe des 16-Zoll-MacBook Pro des MacBook Pro entspricht. Und stellen Sie sicher, dass Sie diese Raster-Layouts aktiviert haben. Stellen Sie einfach sicher, dass Sie die Layoutraster sehen können. Andernfalls haben Sie zwar die Raster ausgewählt, aber möglicherweise nicht sehen, nur weil Sie diesen Teil ausgeblendet haben. Stellen Sie also sicher, dass Sie dieses Ding ausgewählt haben. Klicken Sie einfach auf dieses Plus-Symbol und Sie können sehen, dass das Raster gebildet wurde. Dieses Raster ist jetzt spalten- und zeilenweise. Was ist, wenn Sie nur die Spalten, das Säulenraster, anzeigen möchten ? Jetzt können Sie also nur die Spalten sehen. Nun wird der Abstand zwischen diesen beiden Spalten, dieser Spalte und dieser Spalte, der Leerraum, den Sie haben, der Leerraum, den Sie haben , als Godot bezeichnet. Die Rinne ist der Raum zwischen Ihren Spalten oder sogar Zeilen. Wenn ich in einem Zeilenformat anzeigen möchte, können Sie das auch tun. Was ist, wenn Sie von Ihrem Rahmen aus etwas Platz lassen möchten ? Wenn Ihre Spalte tatsächlich beginnt, beginnt tatsächlich eine Zeile, das ist Ihr Rand. Also wenn ich sage, dass der Rand etwa 50 Pixel betragen muss. Alles hier, der Rand oder Ihr Randradius, Ihr Eckenradius, die Größe der Box und all das Zeug ist im Pixelformat. Es gibt verschiedene Einheiten wie Ihre Pixel. In CSS haben wir verschiedene Einheiten wie Ihre Pixel. Wir haben, wir haben EM-RAM, wir haben prozentual. In Figma haben wir also der Einfachheit halber nur ein ausreichendes Pixelformat. Stellen Sie also sicher, dass Sie bei allem, was Sie eingeben, eine Pixeleinheit in der Mine haben. In Ordnung? Wenn ich also 50 eingebe, damit Sie sehen, dass noch etwas Platz übrig ist, okay, wenn ich jetzt auch die Rinnengröße anpassen möchte , kann ich das tun. Ebenfalls. Nehmen wir an, ich möchte, dass die Rinnengröße 30 Pixel beträgt, dann können Sie sehen, dass die Spaltengröße jetzt verringert wurde. Wenn ich möchte, dass die Anzahl der Spalten auf, sagen wir, zehn erhöht wird , dann siehst du, dass das keine Bedeutung hat. Es passen jetzt zehn verschiedene Säulen in unseren Rahmen. Mit Hilfe dieses Layouts Ihrer Spalten können Sie nun Ihre Elemente so anordnen, Ihre Elemente so anordnen dass zwischen diesen Elementen ein bestimmter Abstand bleibt . Sagen wir mal, wenn ich hier drüben eine rechteckige Box erstelle , okay? Und wenn ich hier dasselbe mache, können Sie sehen, dass zwischen diesen verschiedenen Feldern 42 Pixel Platz bleiben. In Ordnung? Das ist also meine Leertaste, wenn du willst. Übrigens, wenn Sie sehen, dass, wenn ich mein rechteckiges Feld auswähle, sehen Sie, dass Sie sich im nassen Bereich auf das Fenster mit den Design-Eigenschaften konzentrieren. Innerhalb dieser Breite steht W dafür, h für Höhe. Das ist die Abmessung im Pixelformat, okay, 124 mal 78. Und diese X- und Y-Position besagt, dass ab meinem Frame noch 62 Pixel Platz übrig sind. Wenn ich versuche, dieses Feld in Richtung meiner, besser gesagt X-Achse, zu bewegen , dann kann man sehen, dass der X-Achsenwert auf 13 sinkt. Anfangs waren es ungefähr 62, jetzt sind es ungefähr 13. Okay, lass uns jetzt gegen 13 sein. Wenn ich das nach oben verschiebe, können Sie sehen, wie sich der Wert meines Y ändert. Also dieses Leerzeichen, 47, ist das Leerzeichen von der obersten Pille, wo meine eigentliche Schachtel anfängt. Das ist also meine Y-Position und das ist meine X-Position. In Ordnung? So können Sie responsives Design erstellen. Wenn Sie tatsächlich herausfinden möchten , wie viel Speicherplatz von hier bis zu diesem Punkt noch übrig ist. Von diesem Punkt bis zu diesem Punkt können Sie die Lineale verwenden. Gehen Sie also einfach zurück zu hier und wählen Sie Lineale aus. Sie haben auch eine Tastenkombination namens Shift R, um Lineale in Ihrem Projekt tatsächlich zu aktivieren. Also, was werde ich jetzt tun? Ich kann, ich kann tatsächlich das Zentrum erstellen. Ich kann auf den gesamten Rahmen klicken und mein Lineal mitbringen. Sie können also sehen, dass das Lineal jetzt platziert wird, es wurde hier platziert. Wenn ich also hier drüben klicke, siehst du, 62 die Position von meinem Y ist. Und wenn ich mein Lineal bewege, wenn ich mein Lineal bewege, wirst du sehen dass es auch den Wert 47 anzeigt. Lass mich noch einmal auf mein Lineal klicken. Warum wird die X-Achsenposition nicht angezeigt . Also wenn ich tatsächlich ein Lineal mitbringen möchte, das von der X-Achse oder von der horizontalen Achse aus misst. Ich muss nur von oben nach oben ziehen , wo mein Lineal sein soll. Sie können also sehen, dass es sich jetzt in dieser speziellen Position befindet. In Ordnung? Das ist es also, was deine Herrscher dir erlauben werden. Das war es also. Und was sind die Dinge , die uns noch bleiben? Übrigens, falls ihr euch die verschiedenen Tastenkombinationen ansehen wollt , die wir für Figma haben. Du kannst einfach hier klicken und du kannst zur Hilfe eines Accounts gehen und du kannst einfach auf diese Tastenkombinationen klicken oder was du tun kannst, du kannst einfach die Strg-Umschalttaste und das Fragezeichen gedrückt halten . Sobald Sie dort drüben klicken, finden Sie all die verschiedenen Tastenkombinationen zum Zoomen, zum Navigieren zwischen verschiedenen Werkzeugen, zum Auswählen einiger Elemente und all das. Sie können also einfach all diese verschiedenen Tastenkombinationen sehen all diese verschiedenen Tastenkombinationen , die Sie in Figma haben. 8. (7) Farbtheorie: In Ordnung Leute, willkommen zurück zu einem anderen Video. In dieser Videolektion werde ich versuchen, alles über die Farbtheorie zu erklären. Und ich habe versucht, alle wichtigen Informationen zu erklären ohne es für Sie alle sehr kompliziert zu machen. Wenn es um Farbtheorie geht, gibt es im Internet viele Informationen . Wenn Sie schon einmal mit Designarbeiten gearbeitet haben, kennen Sie wahrscheinlich die Grundlagen der Farbtheorie. Aber wenn Sie es nicht sind, brauchen Sie vielleicht nur eine kleine Erfrischung. Also, ohne Zeit zu verschwenden, schauen wir einfach, wie es läuft. Schauen wir uns zunächst einige der Farbtypen an. Die erste ist deine Grundfarbe. Die Primärfarbe umfasst jetzt Ihre roten, gelben und blauen Farben. Wenn wir diese Farben mischen, erhalten wir unsere Sekundärfarben, nämlich Grün. Wenn wir Blau und Gelb mischen, erhalten wir Orange. Wenn wir Gelb und Rot mischen, erhalten wir Violett oder Lila, wenn wir Blau und Rot mischen. Wenn Sie nun Ihre Primär - und Sekundärfarben mischen, erhalten Sie die Tertiärfarben. Wenn Sie Blau mit Grün mischen, erhalten Sie Blaugrün. Wenn Sie Grün und Gelb mischen, erhalten Sie ein gelbes Grün. Grün ist eigentlich deine Sekundärfarbe, wohingegen Gelb eine Primärfarbe ist. Wenn Sie also diese beiden Farben kombinieren, erhalten Sie eine Tertiärfarbe, die eine gelbe, grüne Farbe hat. Schauen wir uns einige der Farbterminologien in Figma an. Also werde ich einfach in mein Figma springen. Jetzt erstelle ich ein rechteckiges Feld in etwa der Größe. Und ich werde etwas über UNS erklären. Also, was ist das, was Sie bestimmt schon so oft von Q gehört haben , wenn Sie vielleicht Fotobearbeitungswerkzeuge wie Lightroom oder Canva verwenden . Also u ist nur deine Farbe wenn du die Farbe von hier auswählst, das ist dein Farbton. Benutze nur eine Farbe. Wenn Sie also diesen Cursor auswählen, zeigen Sie ihn auf die äußerste linke Seite. Es wird heißen, dass Sie zwischen verschiedenen Rottönen wählen können . Die reinste Form jeder Farbe ist also im Grunde ein Du. In Ordnung? Also wenn ich meinen Cursor von dieser Seite auf vielleicht sagen wir diese Seite ziehe . Also werde ich mir eine richtige satte blaue Farbe besorgen. Wenn ich das auf diese Seite ziehe, werde ich grün. Wenn ich das auf diese Seite ziehe, kriege ich eine rosa oder lila Farbe, ? Das ist also mein Problem. Lassen Sie uns über Tönungen, Schattierungen und Töne sprechen. Was ist jetzt mit Zehnern? Okay, stellen wir uns vor , dass die Farbe dieser bestimmten Form etwa blau ist. In Ordnung? Jetzt werde ich eine exakt gleiche Box-Replik dieser Box mit einer weißen Farbe erstellen , oder? Weiße Farbe mit einer Opazität von etwa 40 Prozent. Also habe ich einfach die Opazität geändert, indem die F4-Taste auf meiner Tastatur gedrückt habe. Und jetzt können Sie sehen, dass die Opazität meiner Form auf 40% geändert wurde. In Ordnung? Wenn ich nun diese Form über diese Form bewege, können Sie sehen, dass die Farbe der Box jetzt in eine hellblaue Farbe geändert wurde, oder? Zehn ist also im Grunde genommen, wenn du einer bestimmten Farbe ein Weiß hinzufügst , das ist deine Sehne. Ordnung, lassen Sie mich einfach eine weitere Schachtel machen , damit Sie den Unterschied in der Farbe sehen können. Also das untere Feld, dieses Feld ist die reinste Form meiner Farbe, wohingegen dieses Feld der Farbton dieser bestimmten Farbe ist. So konnte ich das mit Hilfe von Tinder erreichen , oder? Was ist mit Schatten? Stellen Sie sich also vor, dass Sie anstelle dieser speziellen Box, die schwarz statt weiß ist, sehen können, dass dies schwarze Farbe ist. Wenn ich das auf dieses spezielle Feld ziehe, okay, ich erhalte eine dunklere blaue Farbe. Ich konnte diese spezielle Farbe erreichen weil ich einer bestimmten Farbe Schwarz hinzufüge. Sie können den deutlichen Unterschied zwischen diesen beiden Farben erkennen. Dieser sieht viel langweiliger aus, oder? Es hat einen etwas dunkleren Farbton. Wohingegen dies ein reineres und natürlicheres Format ist. Lass uns über Töne sprechen. Jetzt. Ein Ton ist, wenn Sie Ihre Farbe mit einer grauen Farbe mischen. Lassen Sie mich diese Farbe auswählen, oder besser gesagt dieses spezielle Feld mit dem Grau, oder? Das ist grau, oder? Wenn ich dieses oder dieses bestimmte Feld ziehe, werden Sie sehen, dass meine Form so aussieht. Stimmt es? Jetzt. Wenn ich diese Farbe dieser Box mit dieser Box abgleichen möchte, muss ich meinen Schieberegler bewegen. Ich muss meinen Schieberegler diagonal nach vorne bewegen. Das heißt, auf der linken, unteren linken Seite, so werde ich in der Lage sein , genau diese Farbe zu erreichen. Sie können sehen, sobald ich meinen Cursor bewege, den Cursor, kann ich genau dieselbe Farbe abrufen. Irgendwie das Gleiche. Ja, du kannst sehen, dass die gleiche Verzögerung möglich ist, weil ich jetzt etwas möglich ist, weil ich jetzt Grau zu meiner natürlichen Farbe hinzugefügt habe. Wenn ich diese Form etwas dunkler machen möchte, oder? Wenn ich diese Farbe etwas dunkler machen oder ihr etwas Schatten hinzufügen möchte , muss ich meinen Cursor nach unten rechts ziehen . Dadurch werde ich dunkler und meiner Farbe mehr Schatten verleihen. Wenn ich mehr hinzufügen möchte, muss ich meinen Cursor nach oben links bewegen. Stimmt. So werde ich in der Lage sein, mich um diese Farbe zu kümmern. Lassen Sie uns über die Sättigung sprechen. Nun, Sättigung ist eine weitere Terminologie , die häufig verwendet wird wenn wir über Farben und Farbtheorie sprechen. Es sagt uns im Grunde, wie reich oder es sein könnte. Stellen Sie sich also vor, dass dies die reinste Form meiner Farbe ist. So können Sie sehen, wie viel Blau in dieses spezielle Feld hinzugefügt wurde. Dieser Sättigungsgrad liegt also bei 100%, oder Sie können sehen, dass die Sättigung höchstens ist. Wenn ich noch mehr Dumpfheit hinzufüge. Sie können sehen, dass diese bestimmte Farbe nicht gesättigt ist. Es ist erledigt. Helligkeit, die im Gegensatz zu dieser speziellen Aussage zur Sättigung steht, spricht dieser speziellen Aussage zur Sättigung steht, man, wenn die Farbe auf einer Skala näher an Weiß oder Schwarz liegt. Sagen wir, wenn ich meine Farbe ganz nach rechts verschiebe, können Sie sehen, dass die Farbe Blau sehr hell ist. Wenn ich meinen Cursor nach unten bewege, können Sie sehen, dass die Farbe nicht so hell ist. So kann ich sagen, wissen Sie, dass diese spezielle Farbe bei Albright nicht vorkommt. Apropos Farbtemperatur, wir haben entweder kalte Farben oder warme Farben. Coole Farben sind die Farben, die wir haben , die angenehm oder cooler sind, wer auch immer sie sieht, das sind Blau, Grün und Lila. Apropos wärmere Farben, sie werden als eine bezeichnet, weil sie für unsere Augen ziemlich warm sind. Zu den Farben gehören also Rot, Gelb und Orange. Wenn ich meinen Mauszeiger auf die EU bewege, wer hat die linke Seite, siehst du, dass ich die wärmere Temperatur erhalte, oder? Wenn ich die Temperatur meiner Farbe zu warm einstellen möchte, rutsche ich in Richtung Warm. Und wenn ich möchte, dass es kühler wird, schiebe ich es nach rechts. Das sind die coolen Farben. Das sind also einige der Terminologien. Lassen Sie uns über einige Farbmodelle sprechen, die wir haben. Lassen Sie uns über RGB sprechen. Rgb ist ein ziemlich beliebtes Farbmodell , das wir schon seit geraumer Zeit verwenden , auch in CSS. Wann immer wir damit zu tun haben, unseren Elementen einige Farben zuzuweisen, verwenden wir im Allgemeinen die RGB-Anweisungen oder die RGB-Einheit. RGB steht also für Rot, Grün und Blau. Also all diese PC-Gamer, von RGB-Streifen und RGB-Lichtern sehr fasziniert sind. Rgb steht für Rot, Grün und Blau. Und es nutzt die additive Mischung von Licht, um verschiedene Farben zu erzeugen. Jetzt haben alle unsere Bildschirme unterschiedliche LED-Leuchten. Jetzt haben diese LED-Leuchten drei Intensitäten. Rote Intensität, grüne Intensität und blaue Intensität. Basierend auf diesen Intensitäten verschiedener Lichter können Sie nun alle verschiedenen Farben sehen. Selbst auf meinem Laptop-Bildschirm habe ich winzige Transistoren und Dioden, und zusammen bilden sie diese verschiedenen Farben. Wenn ich sage, dass ich eine schwarze Farbe erzeugen möchte, die Intensität meiner roten, wäre die Intensität meiner roten, grünen und blauen Dioden das Minimum oder die niedrigste. Da nun die Intensität nicht angegeben wird, wäre die Farbe natürlich schwarz. Aber wenn ich möchte, dass die Farbe weiß ist, alle Lichter, die rot, grün und blau sind , wäre die Intensität zu hoch eingestellt. Das bedeutet, dass alle drei Farben ihrer maximalen Kapazität heranwachsen. Und jetzt würde ich die weiße Farbe bekommen. Wenn Sie also Rot, Grün und Blau bei voller Helligkeit überlappen , erhalten wir Weiß. Und so funktionieren unsere Bildschirme, nicht nur unsere Bildschirme, sondern sogar meine Maus hier drüben. Sie können diese Gaming-Maus sehen. Es ist in der Lage, verschiedene Farben zu ändern. Lass es mich dir einfach zeigen. Das sind also verschiedene Farben auf meiner Maus. Es ist also in der Lage, diese verschiedenen Farben abzurufen, weil verschiedene Leuchtdioden, LED-Dioden, hat. Nun, diese LED-Streifen haben keine anderen Farben. Sie haben nur Rot, Grün und Blau, je nach Lichtintensität, es kann verschiedene Farben annehmen. So funktioniert das RGB-Modell. Lassen Sie mich Ihnen zeigen, wie wir mit dem RGB-Modell in Figma arbeiten können. Wie Sie hier sehen können, habe ich, wenn ich zwischen Hex und RGB wähle, wenn ich zwischen Hex und RGB wähle, die Möglichkeit oder die Option, die Werte hinzuzufügen. Jetzt kann ich die Werte im Bereich 0-255 hinzufügen. Der Wert bis 55 ist der Höchstbetrag, den ich entweder Rot, Grün oder Blau geben kann . Jetzt steht die erste Einheit oder der erste Wert , den ich eingeben werde, für die rote Farbe. Der zweite Wert steht für Grün und der dritte Wert für w. Da ich in diesem Fall eine kühlere Farbe habe. Ich habe keine rote Farbe. Deshalb haben wir rote Nullen. Wie Sie sehen können, da diese Farbe eher zur blauen Seite tendiert, können Sie sehen, dass die Sättigung von Blau maximal ist, also 255, obwohl es einen gewissen Farbton gibt, haben wir auch etwas Grün. Das ist der Grund, warum wir diesen kühleren Ton dieser bestimmten Farbe bekommen . Wenn ich das auf, sagen wir mal Rot, ändern möchte, dann setze ich auf 55, 55, die anderen auf Null. So werde ich in der Lage sein, deine rote Farbe zu bekommen. In Ordnung, das ist mein RGB-Farbmodell. Lassen Sie uns auch über verschiedene Farbmodelle sprechen. Zweitens haben wir das CMYK. CMYK steht für Cyan, Magenta, Gelb , Schwarz. Um Farben zu erzeugen, verwendet dieses Modell das sogenannte subtraktive Mischen. Jetzt werden wir nicht näher auf das CMYK-Farbmodell eingehen , da es hauptsächlich für Druckzwecke verwendet wird Wir verwenden es im Allgemeinen nicht in Figma oder einem der Designtools, egal ob wir ein App-Design, ein Website-Design oder irgendeine Inhaltserstellung oder Designkram entwerfen oder irgendeine Inhaltserstellung oder , wir verwenden das CMYK-Modell nicht. Wir verwenden im Allgemeinen das RGB-Modell und andere Modelle, die ich besprechen werde. Ein anderer ist dein HSB. Jetzt, HSB, steht es für Farbton, Sättigung und Helligkeit. Diese drei Farbterminologien habe ich bereits besprochen. Wenn Sie sich jedoch nicht sicher sind, zu diesem Teil zurück und Sie können ihn erneut aufrufen. Dieses spezielle Farbmodell verwendet nun eine Mischung dieser drei Attribute, um verschiedene Farben zu erzeugen. Lass es mich dir in Figma zeigen. also, wenn ich anstelle von RGB Was passiert also, wenn ich anstelle von RGB diesen HSB wähle? Sie können sehen, dass der maximale Wert, den wir haben, 100 ist und der niedrigste Wert , den wir erhalten können, Null ist. Wenn ich das also auf 100 setze, können Sie sehen, dass die EU 100 ist, Sättigung ebenfalls 100 ist und die Helligkeit ebenfalls auf 100 eingestellt ist. Wenn ich die Helligkeit auf Null stelle, erhalte ich das als Schwarz. Warum ist das so? Weil es keine Helligkeit hat. Die Farbe ist komplett fertig. Es ist schwarz, oder? Wenn ich die Sättigung auf 50% setze, schauen wir mal, was passiert. Sie können immer noch sehen, dass es schwarz ist , weil die Helligkeit auf Null gesetzt ist. Wenn ich die Helligkeit auf 50 stelle, ist sie irgendwo hier drüben, oder? Wenn ich den Farbton auf, sagen wir, 50 einstelle, dann erhalte ich diese bestimmte Ockerfarbe, oder? So kann es mir U, Sättigung und Helligkeit geben . Ihr Wert hängt also davon ab, wo Sie Ihren Cursor auf dieser bestimmten Skala platzieren. Das könnten Sie sagen, lassen Sie uns über andere Modelle sprechen. Hexadezimal ist also ein weiteres Farbmodell, das wir verwenden. Hexadezimal ist eine sehr benutzerfreundliche Art , Ihre RGB-Farben anzuzeigen, da sich die ersten beiden Buchstaben oder Zahlen auf den gelesenen Wert beziehen. Die nächsten beiden Flüsse werden grün, und die letzten beiden beziehen sich auf blau. Jetzt verwenden all die Leute, die mit CSS vertraut sind , möglicherweise Hexadezimal. In CSS verwenden wir jetzt im Allgemeinen das Hash-Symbol, bevor wir unsere Hex-Werte schreiben. Aber in Figma müssen wir das nicht tun. Wenn ich also zu meinem Figma zurückkehre, können Sie sehen, dass ich auch den Hex-Wert auswählen kann. Jetzt sind wir hier, wie Sie sehen können, haben wir 40 AD und denn der Wert 40 steht für mein Rot, AT für mein Grün und die Vier für mein Blau. Warum haben wir es uns nun per mitgeteilt, denn wenn Sie etwas über Hexadezimalwerte gelernt haben, all die Werte, die zweistellig sind, wie Sie sind 10, 111-213-1415. Diese werden im Gitterformat dargestellt. Ansonsten 0-9 haben wir Zahlen. Der Buchstabe a steht also für den Wert Zehn, da wir im Hexadezimalwert nicht zehn schreiben können , da er sonst als ein Unteroffizier dargestellt wird. Deshalb haben wir die Buchstaben a, B und so weiter. Das sind also meine Hex-Werte, oder? Und wenn ich das beispielsweise auf diesen bestimmten Wert ändern möchte, können Sie sehen, dass sich auch der Hex-Wert ändert. Lassen Sie uns also kurz zusammenfassen, was wir in dieser Sitzung gelernt haben. Es gibt also drei Grundfarben, Rot, Gelb und Blau. Diese stellen die Bausteine für alle anderen Farben dar. Die Sekundärfarben werden durch Mischen der Primärfarben erhalten, z. B. Rot plus Gelb wird Orange. Wenn wir Rot und Blau mischen, erhalten wir lila oder violett. Wenn wir Blau und Gelb mischen, holen wir Grün. Tertiärfarben funktionieren durch Mischen von Primär- und Sekundärfarben. Du bist die dominante Familie einer bestimmten Farbe. Der CMYK-Farbmodus verwendet die Farben Cyan, Magenta, Gelb und Schwarz und sie werden hauptsächlich für Druckzwecke verwendet. diesem Grund verwenden wir dieses spezielle Farbmodell nicht für Figma oder andere Designtools. Schließlich haben wir RGB- und HSB-Modelle, die in digitalen Medien verwendet werden. Und das hexadezimale Farbformat ist eine benutzerfreundlichere Methode zur Darstellung von RGB-Farben. Also ja, das war alles von meiner Seite für diesen speziellen Vortrag. In der nächsten Vorlesung lernen wir etwas über Farbharmonien, die Psychologie der Verwendung verschiedener Farben und verschiedene Werkzeuge, die uns bei der Projektabwicklung helfen können . 9. (8) Farbharmonien & Psychologie: Hallo zusammen, willkommen zurück zu einem anderen Video. In dieser Videovorlesung lernen wir etwas über Farbharmonien und die Psychologie der Verwendung verschiedener Farben. Wenn Sie jetzt mit verschiedenen Farben arbeiten, kann das etwas entmutigend sein, insbesondere für Anfänger, da Sie die Farbtheorie kennen, aber nicht wissen, wie Sie verschiedene Farben in Ihr spezifisches Projekt integrieren können. Das ist der Grund, warum wir Farbharmonien, die Farbpalette und die Psychologie der Verwendung verschiedener Farben haben. Nehmen wir nun diese Formel-1-Website als Beispiel. Nun, wie kam Formula When auf die Idee rote Farbe in ihrem Projekt, auf ihrer Website zu verwenden. Nun, es gibt an sich keine Regeln , wenn Sie verschiedene Farben für Ihr Projekt verwenden. Es gibt jedoch einige, einige Richtlinien, die Ihnen helfen , eine bestimmte Farbe für Ihr Projekt auszuwählen. Da sie also Rot verwenden, ist Rot im Grunde die Farbe der Leidenschaft. Es wird verwendet, um die Aufmerksamkeit der Benutzer oder vielleicht Ihre Botschaft an das Publikum zu vermitteln. Die Formel 1 versucht also, mit gutem Beispiel voranzugehen, um zu sagen , dass es so viele Rennfahrer mit unterschiedlichen Raten gibt und sie wollen mit gutem Beispiel vorangehen. Das ist also der Grund, warum sie vielleicht bald rote Farbe verwendet haben . Wir haben die Website Digital Ocean. Jetzt verwendet es blaue Farbe als Primärfarbe. Sie können auf dieser gesamten Website sehen dass wir blau sind, oder? Blau ist die beliebteste und am weitesten verbreitete Farbe im Internet. Die meisten Websites und mobilen Anwendungen , die Sie sehen, haben in ihrem Projekt blaue Farbe verwendet. Die meisten von ihnen sogar, weil es Vertrauen , Intelligenz und Sicherheit vermittelt . Die meisten Technologiemarken wie Facebook, Twitter, LinkedIn verwenden also alle blaue Farben. Sogar Digital Ocean ist ein Slogan, weil er Ihnen Server zur Verfügung stellt, oder? Sie stellen Ihnen eine SAS-Anwendung zur Verfügung. Sie bieten Ihnen die Möglichkeit, Ihre Anwendungen und Websites auf dem Server auszuführen . Nehmen wir also Marken, die normalerweise blaue Farbe verwenden. Finanzinstitute verwenden auch blaue Farben wie Goldman Sachs. Sie verwenden Farbe. Dann haben wir Gelb. Jetzt wird Gelb nur noch von Ihrer Unterhaltungs- und Kinderspielzeugindustrie verwendet . Warum ist das so? Weil Gelb im Allgemeinen für Spaß und mutige Bewegungen steht. Es ist die Farbe der Sonne. Deshalb bringt es uns Freude, Glück. Das ist es, was Filme tun. Das machen Fernsehserien. Deshalb wird gelbe Farbe im Allgemeinen für die Unterhaltungsindustrie verwendet, oder? Es vermittelt auch warme Energie. Daher wird gelbe Farbe im Allgemeinen verwendet, wenn Sie es mit dem Unterhaltungssektor zu tun haben. Dann haben wir die grüne Themenfarbe, die im Allgemeinen für die Natur verwendet wird, oder? Grün ist die Farbe der Natur. Es steht für Gesundheit, Wohlbefinden und Sicherheit. Also alle Websites, die ihre Ergänzungsprodukte verkaufen oder mit der Gesundheitsbranche, Fitnessbranche, Medizinindustrie zu tun Fitnessbranche, Medizinindustrie haben oder für einige umweltfreundliche Produkte werben, dann ist es möglicherweise am besten, grüne Farbe zu verwenden. Wie Sie sehen können, werben sie für vegane Produkte haben daher die kommende grüne Farbe verwendet. Wir haben jetzt orange Farbe. Orangen stehen im Allgemeinen für Glück, Freude und Selbstvertrauen. Da Orange also eine Kombination aus Rot und Gelb ist, entstehen Orangen, wenn Sie Rot und Gelb mischen. So bekommt man Orange. Das ist der Grund, warum wir die meisten Eigenschaften von Gelb und Rot orange bekommen. Daher wird Orange im Allgemeinen von Kommunikationswebsites wie Postman verwendet . Postman ist eine API-Plattform, APIs und eine Anwendungsprogrammierschnittstelle, die für Kommunikationszwecke verwendet wird. Das ist der Grund, warum wir Orange als Themenfarbe in Postman haben . Nehmen wir an, ich möchte eine Website für meinen Kunden erstellen, der tatsächlich sein eigenes Geschäft für vegane Produkte einrichtet, oder? Die Farbe, die wir verwenden sollten, ist also offensichtlich grün. Aber welche genaue Farbe oder welche Sättigungshelligkeit sollte die EU oder mein Ton für meine grüne Farbe haben. Um das herauszufinden, kann ich einfach den Hex-Code dieser grünen Farbe kopieren. Und ich kann zu color.adobe.com gehen. Und dort drüben im Bereich Erstellen kann ich dieses Farbrad verwenden. Jetzt können wir sehen, dass ich sie habe, ich kann verschiedene Farben wählen und der Hex-Wert wird hier angezeigt. Es zeigt sogar die RGB-Werte an. Jetzt können wir verschiedene Farben aus dem Farbrad verwenden , das es uns tatsächlich zeigt. Sie können sehen, dass sie unterschiedliche Farben haben. Wie viele Tools wie deine analoge, einfarbige Triade, Kompliment und all das Zeug. Analog bedeutet also im Grunde genommen , dass, wenn Sie es mit grüner Farbe zu tun haben, Ihnen die Farben im grünen Segment angezeigt werden. Wenn ich einfarbig gewählt habe, wird der Kontrastbereich entweder auf der dunkleren Seite meines Grüns oder auf der helleren Seite des Grüns angezeigt entweder auf der dunkleren Seite meines Grüns oder auf der . Sie können also sehen, dass sich hier ein Kontrast bildet. Dann habe ich die Triade. Jetzt gereist. Triad zeigt uns tatsächlich oder gibt uns Vorschläge zu verschiedenen Farben, die entgegengesetzt sein werden. Es kann uns also auch grün geben. Sie können im Blauton und auch bei der wärmeren Temperatur sehen . Das ist also meine Triade. Dann habe ich ein Kompliment. Jetzt ist kostenlos das komplette Gegenteil. Es wird uns entweder grün und einige Vorschläge in die entgegengesetzte Richtung zeigen . Wir können also Grün, Lila, Rosa verwenden. Diese sind kostenlos. Wir haben auch geteilte, komplementäre doppelt geteilte komplementäre quadratische Verbundfarben und wir können sogar benutzerdefinierte Farben verwenden. Aber im Allgemeinen würde ich Ihnen als Faustregel immer empfehlen, bei der Entwicklung Ihrer Websites oder der Entwicklung Ihrer Figma-Designtools bei einfarbig oder vielleicht kostenlos zu bleiben Entwicklung Ihrer Websites oder der Entwicklung Ihrer Figma-Designtools bei einfarbig oder vielleicht kostenlos zu . Wir haben also einfarbige, analoge und ergänzende Materialien, die wir in unserem Projekt verwenden können. Du kannst dieses Rad sogar bewegen. Wenn Sie diesen in Richtung Mitte bewegen, werden Sie feststellen, dass die Farbe eher zur helleren Seite hin zeigt. Die Farbe ist nicht so gesättigt. Es ist heller und nicht gesättigt. Je weiter Sie sich dem Rad nähern, desto satter wird es und es wird etwas heller. Es wird gesättigter sein. Sobald Sie das Rad bewegen, bewegt sich auch die Farbe, oder? Sie können sehen, dass sich auch die Grundfarbe ändert, die einfarbige. Sie können sehen, wann wir den gesättigten und den weniger gesättigten haben. Das sind also verschiedene Farben, mit denen wir unser Figma-Projekt entwickeln können , oder? Lassen Sie uns kurz zusammenfassen, was wir in dieser gesamten Vorlesung gelernt haben. Zuallererst können Farben in verschiedenen Szenarien oder Kulturen unterschiedliche Bedeutungen haben in verschiedenen Szenarien oder Kulturen unterschiedliche Bedeutungen . Es gibt also kein spezifisches Regelwerk, mit dem Sie „ Nur lesen“ verwenden können , um Leidenschaft zu zeigen oder die Aufmerksamkeit Ihrer Zuschauer zu erregen. Es hängt ganz von der Art des Projekts ab , das Sie verwenden. Aber nur um eine Richtlinie beizubehalten, hatte ich Ihnen verschiedene Beispiele für verschiedene Websites gegeben , auf denen diese verschiedenen Farben verwendet wurden. Farbharmonien können Sie jetzt ganz einfach eine Farbpalette erstellen. Aus diesem Grund haben wir das Konzept der Farbharmonien. Eine ergänzende Farbpalette Ihnen den größten Kontrast. Das haben wir in der Adobe-Farbpalette gesehen, oder? Während ein einfarbiges Modell den geringsten Kontrast bietet. Das Adobe Color-Tool eignet sich am besten , um Farbthemen zu erkunden oder eigene Farben zu erstellen. Also, ja, das war so ziemlich alles von meiner Seite. In den kommenden Vorlesungen lernen Sie, wie Sie Ihre eigenen Farben erstellen, wie Sie tatsächlich verschiedene lineare Farben und feste Füllfarben erstellen. Und wir werden auch den Teil der Topographie untersuchen. 10. (9) Füllmodus in Farben: Hallo zusammen, willkommen zurück zu einem anderen Video. In dieser Videovorlesung werden wir etwas über den Filmmodus in Figma lernen . Und wir werden uns auch den Ebenenbereich ansehen , den wir in Figma haben. Also, was genau ist Fillmore? Wir haben also etwas über die Farbtheorie gelernt. Wir haben noch nicht über Farbharmonien gesprochen, aber es gibt noch einige Dinge zu den Farben in Figma zu besprechen. Also nicht nur Figma, sondern auch darum, Dinge zu entwerfen. Wie Sie sehen können, habe ich diese spezielle Box, aber grüne Farbe, oder? Jetzt können Sie sehen, dass, sobald ich im Farbmodus auf diese Füllung klicke , dass dieser spezielle Filmmodus einfarbig ist. Fest bedeutet im Grunde, dass die Farbe nur, diese bestimmte Elementbox nur eine Farbe haben wird. Das ist meine Volltonfarbe. Was passiert, wenn ich das auf linear ändere? Ich werde zwei kontrastierende Farben haben. Das heißt, erstens kann ich entweder grüne Farbe haben und zweitens kann ich entweder Cyan oder eine andere Farbe haben. Lassen Sie mich also eine grüne Farbe wählen, die andere Farbe als Sünde. Und wenn ich diesen Punkt an diesen Punkt und die zweite Farbe an diesen Punkt verschiebe , werden Sie sehen, dass auf diese Weise ein Schatten oder eine lineare Farbe entstanden ist . Zwei Farben wurden verwendet, um diese eine Farbe zu bilden. Das ist mein linearer Filtermodus. Dann habe ich Radial, Radial, wie Sie sehen können, es formt sich wie eine kreisförmige Form, so wie die Sonne bei Sonnenschein leuchtet, so zeigt uns das. Sie können sehen, dass dies der radiale Fillmore ist, oder? Dann haben wir den eckigen. Das heißt, ich kann entweder diesen Winkel zu diesem Winkel wählen. Nur in diesem bestimmten Winkel werde ich diese dunklere oder cyanfarbene Farbe bekommen, oder? Das ist mein eckiger Filmmodus. Ich habe Diamant. Sie können sehen, dass sich eine Diamantform gebildet hat. Stimmt es? Dann habe ich das Bild. Ich kann beim Erstellen einer Farbe entweder Bild oder Video verwenden und so weiter, oder? Das sind also die verschiedenen Modi, die ich in Figma habe. Lassen Sie uns über die Ebenen sprechen, die wir in Figma haben. Okay, diese Ebenenmethode, schauen wir uns an, wie wir tatsächlich unsere eigene Farbe kreieren können, wenn wir verschiedene Formen verschiedener Farben überlappen. Also was ich tun werde, ich erstelle einfach einen neuen Rahmen, oder? Und ich werde verschiedene Formen kreieren. In Ordnung? Wenn ich die Alt-Taste gedrückt halte, kann ich genau dieselbe Form replizieren. In Ordnung? Das sind also die drei Formen, und alle drei Formen überlappen sich. Nehmen wir an, diese spezielle Form hat eine violette oder violette Farbe, oder? Eine violette oder violette Farbe mit etwas Transparenz. Dieser hat eine gelbe Farbe. Stellen wir das auf Gelb. Ja. Dieser war Cyan. Sie können also sehen diese drei Formen zum Signieren bereit sind. Wenn ich jetzt alle drei Formen überlappe, erhalte ich dann die neue Farbe? Wenn Lila und Cyan gemischt werden? Der überlappende Teil, kriege ich eine neue Farbe? Nein, tue ich nicht. Warum ist das so? Ganz einfach, weil die Art der Ebene, wie sie geschichtet ist, es ist Durchlass, nicht Multiplikation. Wenn ich das tun möchte, muss ich alle drei Formen ziehen und die Ebene als multipliziert festlegen . Sobald ich das mache. Jetzt können Sie sehen , dass, wenn Cyan und Violett multipliziert wird, die Farbe w ist. Wenn sich alle drei Farben multiplizieren, erhalten wir Schwarz. Wenn sich Cyan und Gelb multiplizieren, erhalten wir Grün, Lila oder Rosa wird mit Gelb multipliziert, wir erhalten Rot. Da ging es also nur um Farben. Wir sind fertig mit Farben. In der nächsten Vorlesung lernen wir nun etwas über Typografie und verschiedene Textilien. 11. (10) Textstile und Eigenschaften: In Ordnung, lasst uns zur Typografie übergehen. Nun, Typografie ist ein wirklich wichtiges Designkonzept, egal ob Sie eine Website oder eine mobile Anwendung entwerfen . Es hätte irgendeine Art von Textinhalt. Wenn Sie nun Inhalte in einem textbasierten Format schreiben, wissen Sie, dass Ihre Inhalte Bilder oder Videos sein können, oder? Es könnte auch Text sein. Also braucht X auch etwas Styling. Das Textdesign könnte nun auch der Schriftstil, die Schriftfamilie, die Schriftstärke und die Schriftgröße sowie die Schriftausrichtung sein. ob Sie möchten , dass es in der Mitte oder vielleicht oben, vielleicht unten ausgerichtet wird. Das ist also alles, was wir in dieser Vorlesung lernen werden. Wie Sie sehen können, habe ich dafür einen Rahmen darin erstellt. Wenn ich etwas schreiben möchte, muss ich in meiner Werkzeugleiste auf dieses Symbol klicken. Dieses T I can steht für den Text. Sobald ich dort drüben klicke, kann ich jetzt ziehen. Ich kann meine Maustaste gedrückt halten und das Textfeld ziehen. In dieses Textfeld kann ich meinen Text schreiben. Nehmen wir an, ich schreibe einen beliebigen Text. Nun sehen wir wieder, wir können diesen Text sehen. Obwohl der Text sehr klein ist, können wir ihn vergrößern indem wir das Fenster mit den Designeigenschaften aufrufen. Im Fenster mit den Designeigenschaften können Sie sehen, dass ich die Schriftgröße auf, sagen wir, 30 ändern kann. Diese 30-Einheit ist also in Pixeln. Wenn hinter dem Wert kein anderes Symbol oder keine Einheit zu sehen ist, handelt es sich wahrscheinlich um Pixel. Wenn Sie ein Prozentzeichen sehen, bedeutet das, dass es sich um eine Prozentzahl handelt. Wenn Sie das Format „Nicht abgeschlossen“ gesehen haben, ist es „In Degree“. Wenn Sie hier im Fenster mit den Konstruktionseigenschaften nachschauen, wird diese bestimmte Drehung im Grad-Format eingestellt. Die Einheit hier ist also Grad, wohingegen die Schriftgröße das N-Pixel-Format ist. Hier können Sie sehen, dass wir die Schriftstärke haben. Derzeit ist es auf regulär eingestellt. Sie könnten dies sogar in fett ändern. Sie können sehen, dass der Text jetzt in Schüssel geändert wurde. Wenn Sie möchten, dass das etwas leichter ist, können Sie sehen, wie unser Lehrbuch aussieht. Ich werde wieder zur Normalität zurückkehren. Versuchen wir nun, den Stil unserer Schrift zu ändern, aber versuchen wir, die Schriftfamilie zu ändern. Ich möchte ein anderes Styling darauf anwenden und kann zwischen verschiedenen Stylings wählen. Nun, wie grenzen wir uns aus dieser gesamten Liste auf eine bestimmte Schriftfamilie ein? Nun, dafür stehen Ihnen andere Ressourcen zur Verfügung, aus denen Sie herausfinden können, welche Schriftfamilie Sie verwenden möchten. Ich persönlich verwende Google Fonts, um zu überprüfen, welche Schriftfamilie für mein Design am besten geeignet ist. Sie können also einfach zum neuen Tab gehen und Google-Schriftarten suchen. Sobald Sie auf Google-Schriftarten klicken, wird diese Seite angezeigt. Ich gehe rein und sehe nach verfügbaren Telefonen. Sobald ich dort hingehe, können Sie sehen, dass ich so viele verschiedene Schriftfamilien habe , aus denen ich wählen kann. Nehmen wir an, ich möchte Roboto auswählen. Doppelklicken Sie hier. Und jetzt seht ihr, es zeigt uns auch, wie es aussehen würde, wenn ich sagen das Gewicht meiner Schriftfamilie wäre zu dünn, 100, wie mein Handy aussehen würde , wenn ich das auf metallisch ändere, wie es aussehen würde, wenn ich das auf unregelmäßig sagen würde und so weiter. Nehmen wir an, ich möchte mich tatsächlich meinen Inhalten befassen und nicht mit deren Scheininhalten. Ich möchte meinen eigenen Dummy-Content festlegen, um zu überprüfen, ob er zu meinem Styling passt oder nicht. Dafür könnte ich also Teil meines Vorschautextes hier schreiben. Nehmen wir an, ich möchte einen beliebigen Text schreiben. In Ordnung? So würde mein Text also aussehen. Nehmen wir an, ich möchte diese Roboto-Schriftfamilie verwenden. Also kann ich einfach zu meinem Figma zurückkehren. Ich kann auf die Schriftfamilie klicken. Ich muss den gesamten Text auswählen . Du kannst hier rübergehen und einfach nach Roboto suchen. Und Sie können sehen, dass das Roboto-Styling hier angewendet wurde und es derzeit auf regulär eingestellt ist. Was ist, wenn ich das fett formatieren möchte? So sieht unser Text aus. Und so würde mutig aussehen. Du kannst genau das Gleiche sehen. Korrekt? Nun, dieser spezielle Bereich in dem wir den Wert 35 haben, was ist das für ein Ding? Das ist im Grunde meine Zeilenhöhe. Was bedeutet nun im Grunde Zeilenhöhe? Nehmen wir an, ich habe auch einen anderen Satz. Sagen wir irgendeinen zufälligen Text, den ich eintippe, um dies zu testen. Insgesamt habe ich also drei Zeilen getippt. Stimmt es? Jetzt wird die Höhe zwischen diesen drei Linien durch meine Zeilenhöhe definiert. Also kann ich die Zeilenhöhe auf, sagen wir, 30 ändern. Also kann ich 30 einstellen. Und Sie können sehen, dass der Text jetzt näher erscheint. Was ist, wenn ich das erhöhen möchte? So kann ich auch die Zeilenhöhe erhöhen. Ich halte nur die Aufwärtspfeiltaste gedrückt , um die Zeilenhöhe zu erhöhen. Und jetzt werden Sie sehen dass diese Änderung auf meinen Text angewendet wird. Lassen Sie mich einfach meinen gesamten Text auswählen. Ich werde die Zeilenhöhe überschreiten und die Zeilenhöhe erhöhen. Du kannst es sehen. Das ist immer mehr Abstand zwischen diesen verschiedenen Linien. Was ist, wenn ich zwischen diesen Buchstaben etwas Abstand lassen möchte? Dafür muss ich den Buchstabenabstand verwenden, der hier drüben ist. Jetzt können Sie sehen, dass die Prozenteinheit verwendet wird, nicht die Pixeleinheit, sondern die Prozenteinheit. Lassen Sie uns das zuerst auf zehn Prozent setzen und dann versuchen wir, es zu erhöhen. Du kannst 10% sehen. So sieht es aus. Was ist, wenn ich das verringern möchte? Sie können den Abstand zwischen den Buchstaben so sehen , wie unser Format aussehen würde. Stimmt es? Was ist mit diesem Teil? Was bedeutet das? Das bedeutet im Grunde, dass der Absatzabstand nun gut ist, wir werden jetzt nicht auf den Absatzabstand eingehen , da es nicht offensichtlich sein wird, wenn ich Ihnen alles zeige. Ordnung, lassen Sie mich jetzt all diese Dinge auf unseren Ausgangszustand zurücksetzen. Ich tippe, um die Schrift zu testen. Stimmt es? Jetzt. Das ist die Größe meines Textfeldes. Wenn ich jedoch etwas mehr Inhalt hinzufügen möchte , kann ich, sagen wir danach, in meiner neuen Zeile Zeilennummer für Zeile phi hinzufügen. Dieser gesamte Text, Zeile vier und Zeile fünf, befindet sich außerhalb meines Textfeldes. Stimmt es? Was ich dafür tun kann, kann ich auf diese Zeilenhöhe ändern. Das bedeutet, dass sich das Textfeld an die Höhe meiner Linie anpasst . Nun, diese feste Größe bedeutet , dass mein Textfeld bis zu diesem Punkt nur bis zu diesem Punkt mein Textfeld ist, es wird sich nicht ändern, wenn ich mehr Wörter oder mehr Zeilen hinzufüge. Lassen Sie mich Ihnen das Beispiel dafür zeigen. Nehmen wir an, das ist der Text , den ich tatsächlich hinzufüge. Sie können also sehen, dass die Höhe nicht angepasst wird. Sogar die Breite wird nicht angepasst, nur weil wir das zur festen Größe gesagt haben. Es hat also die Größe zuvor festgelegt, basierend auf den Texten, die wir für Zeile Nummer fünf mussten, und jetzt ändert das Feld weder seine Breite noch seine Höhe. Was ist, wenn ich die Breite unseres Textfeldes entsprechend dem Text im Textfeld ändern möchte . Dafür muss ich diese Option auswählen , nämlich die automatische Breite. Jetzt können Sie sehen, wie mein Textfeld aussieht. Was ist, wenn ich möchte, dass dieser Text mittig ausgerichtet ist? Ich kann diese spezielle Schaltfläche auswählen , die meinen Text in der Mitte in Bezug auf mein Textfeld ausrichtet. Wenn ich dies auswähle, wird es in Bezug auf mein Textfeld nach links ausgerichtet . Wenn ich dies auswähle, wird es in Bezug auf mein Textfeld nach rechts ausgerichtet . Dies ist ausgewählt, das heißt, richten Sie es nach oben aus. Wenn ich das auswähle, wird es nach unten ausgerichtet, oder besser gesagt in der Mitte. Lass mich dir zeigen, was ich damit meine. Wenn ich diesen Teil auswähle und ihn an der Mitte ausrichte, lasse ich mich die nächste Boxgröße reduzieren. Dafür kann ich also schreiben, sagen wir lorem ipsum. In Ordnung. Jetzt können Sie sehen, dass sich das Textfeld an die Texte, die wir haben, anpasst. Dies ist möglich , weil wir unser Textfeld so eingestellt haben , dass es automatisch überprüft wird. In Ordnung? Wenn ich eine neue Linie hinzufüge, können Sie sehen, dass sie sogar ihrer Höhe entspricht, oder? Also klicke ich auf dieses Textfeld und ziehe ein neues Textfeld. Jetzt kannst du sehen, dass ich diesen Text ab der Mitte schreiben kann. Jetzt richtet es den Text in Bezug auf die Y-Achse in meinem Textfeld aus. Wenn ich dies auswähle, um es nach oben auszurichten, erscheint mein Text in Bezug auf die Y-Achse in meinem Textfeld oben . Wenn ich dies nach unten auswähle, bedeutet das, dass mein Text in Bezug auf die Y-Achse in meinem Textfeld nach unten ausgerichtet wird . Das sind also einige der Eigenschaften meiner Schriften. Ich habe auch eine weitere Funktion in meinem Bedienfeld mit den Designeigenschaften, nämlich die drei Punkte hier drüben. Das sind meine Typeinstellungen. Wenn ich hier drüben klicke, kann ich eine Vorschau des Textes anzeigen, bevor ich das Styling überhaupt auf meinen Text anwende. Jetzt kannst du sehen, ob ich das anwende, was eine feste Größe ist. So würde mein Text aussehen , wenn ich ihn auf automatische Höhe setzen würde. So würde mein Text in diesem Textfeld aussehen. Wenn ich das auf Automatisieren einstelle. So könnte der Export aussehen. Wenn ich die Ausrichtung auf der linken Seite haben möchte, kann ich das tun, wenn ich möchte, dass sie zentriert ist. So würde es aussehen wenn ich nach rechts ausgerichtet sein wollte. So würde es aussehen. Und wenn ich möchte, dass es gerechtfertigt wird, würde es so aussehen. Sie jetzt daran, dass nicht alle Funktionen wie Ihre Ausrichtung, Ihre Größenänderung und die Dekoration für jede Schriftfamilie verfügbar sind . Manche Schriftfamilien erlauben es, manche Gestaltungselemente, die Summe nicht. Also behalte das im Hinterkopf. Jetzt verwenden wir Roboto. Deshalb ermöglicht es uns diese begründete Ausrichtung. Was ist, wenn ich diesen bestimmten Text von Roboto, sagen wir, in Poppins ändere ? Wenn ich das mache, werden Sie jetzt sehen, dass ein Teil des Stylings nicht verfügbar ist. Nehmen wir an, welches Styling ist nicht verfügbar. In Ordnung, das gesamte Styling ist verfügbar. Gehen wir zu den Details. Es sind also sogar tiefgestellt und hochgestellt verfügbar. Okay, also ja, ich habe darüber gesprochen, dass einige Stilrichtungen für manche Schriftfamilien nicht verfügbar sind. Aber in meinem Fall erlaubt uns Poppins, diese Dinge zu formatieren, oder? Wir können also eine begründete Ausrichtung vornehmen, wir können unterstreichen. Wir können sogar durchstreichen, was bedeutet, dass eine Zeile durch unseren Text geht. Was ich damit meine ist, sagen wir mal, ich bin, lassen Sie es mich so ausdrücken. In Ordnung. Lassen Sie mich Wörter schreiben, die Sinn machen würden wie zufälliger Text. Sie können sehen, dass der Text etwas unterstrichen ist. Was ist, wenn ich keine Unterstreichung möchte, sondern diese, die durchgestrichen ist, haben möchte. Dann können Sie sehen, dass eine durchgestrichene Zeile unseren Text durchgezogen hat. Was ist, wenn ich das will? Aber einfach keine, keine Dekoration als solche. Das kannst du also sogar tun. Wenn Sie nun einen Absatz eingerückt haben , können Sie das tun. Nun, was bedeutet Absatzstrich? Nehmen wir an, Sie haben zehn Pixel eines Absatzes eingerückt. Das bedeutet, dass zehn Pixel Platz übrig wären. Ausgehend vom Textfeld. Ihr erster Brief beginnt mit Ihren Texten, richtig? Das ist also mein eingerückter Absatz. Wie ich bereits sagte, würde ein Absatzabstand keinen Sinn machen. Wenn ich das erkläre, werden Sie sich das später alle ansehen, falls es erforderlich ist. Wir haben auch einen Listenstil. Nehmen wir an, ich habe auch einige andere Texte. Sagen wir eins. Erster, zweiter, dritter. In Ordnung? Und ich wähle meinen gesamten Text aus. Und ich könnte einen Listenstil anwenden, wie sagen wir eine Aufzählungsliste. Also so würde unser Text aussehen , wenn ich diese zweinummerierte Liste sagen würde, sie hätte Zahlen, oder? Wenn ich etwas Zeilenabstand habe, kann ich das sogar machen. Dann haben wir einige Fälle. Kleinschreibung bedeutet nun, dass, wenn ich möchte Groß- und Kleinschreibung bedeutet nun, dass, wenn ich möchte , dass mein gesamter Text in Großbuchstaben geschrieben wird, alle Buchstaben in meinem Text Großbuchstaben haben. Wenn ich möchte, dass das in Kleinbuchstaben geschrieben wird, dann würden alle Buchstaben in meinem Text Kleinbuchstaben enthalten. Wenn ich den Titel groß schreiben möchte, bedeutet das, dass jedes Wort, erste Buchstabe, in Großbuchstaben geschrieben ist. Es hat alle Buchstaben in diesem Wort, wären Kleinbuchstaben. Dann haben wir das, was für Small Caps nicht unterstützt wird. Sie können sehen, dass die Schrift keine Großbuchstaben unterstützt, daher unterstützt dieser Poppins diese spezielle Groß- und Kleinschreibung nicht. Das hatte ich also zuvor gesagt. Wechseln wir zurück zu Roboto und wir werden sehen, ob dies zutrifft oder nicht. Jetzt können Sie diese erzwungenen Großbuchstaben anwenden. Nun zu Großbuchstaben bedeutet im Grunde, dass zwar alle Buchstaben in Ihrem Text in Großbuchstaben geschrieben sind, die Größe jedoch kleiner ist, sodass es so aussehen würde. Es ist keine so große und riesige Schrift, oder? Das ist es also, was diese erste Small-Cap eigentlich bedeutet. Nehmen wir an, Sie möchten keinen dieser Fälle anwenden , dann können Sie einfach diesen keinen auswählen. Sie können zu diesen Details zurückkehren. Wenn du etwas hoch - oder tiefgestelltes möchtest, kannst du das sogar schreiben. Nehmen wir an, Sie haben diesen Text etwa zwei hoch zwei. Sie können das also hochgestellt stellen. Jetzt sind es also zwei, auf die zwei erhöht. Was ist, wenn ich schreiben möchte, sagen wir, logge dich zur Basis zehn ein. Also kann ich Log Ten schreiben. Ich kann zehn auswählen und diese im Index hinzufügen. Jetzt können wir also sehen, dass es jetzt bis zur Basis Ten loggt. Wenn Sie Inhalte für Ihre Website oder vielleicht eine Anwendung entwerfen, in der Sie diese mathematischen Ausdrücke oder vielleicht chemische Gleichungen verwenden möchten diese mathematischen Ausdrücke oder , können Sie Figma verwenden, um tatsächlich hochgestellt und tiefgestellt zu haben Ihr Design tatsächlich hochgestellt und tiefgestellt zu haben. Ordnung, das war also alles von meiner Seite für diesen speziellen Vortrag. In der nächsten Vorlesung erfahren Sie, was der Unterschied zwischen Ihrem Serifen- und Sans-Serif-Format ist? 12. (11) Serif vs Sans Serif Fonts: Jetzt gibt es viel Verwirrung zwischen Serifen - und Sans-Serif-Schriften. Nun, macht euch keine Sorgen, Leute. Ich werde mein Bestes geben, um die Verwirrung zu beseitigen. Und am Ende dieser Vorlesung werden Sie in der Lage sein, die perfekte Schrift für Ihr Design auszuwählen. Was genau ist der Unterschied zwischen diesen Serifen- und Sans-Serif-Schriften? Sons ist also ein französisches Wort, was im Grunde ohne bedeutet. Wie der Name schon sagt, besteht der Hauptunterschied zwischen diesen beiden Schriftzeichen im Vorhandensein oder Fehlen von Serifen in den Buchstaben. Nun, was genau ist das sicher? So selbstbewusst wie eine dekorative Linie oder eine Verjüngung am Anfang oder Ende eines Buchstabenstamms, wodurch kleine horizontale und vertikale Ebenen innerhalb eines Wortes entstehen . Kurz gesagt, Sie können sagen, dass Serifenschriften diese dekorativen Linien oder Verjüngungen haben, serifenlose Schriften jedoch nicht. Wie Sie hier sehen können, haben Sans-Serif diese Striche nicht. Schauen wir uns nun einige der häufig verwendeten Serifenschriften an. Das sind also Times New Roman. Wir haben in unserem Microsoft Word. Times New Roman ist also eine häufig verwendete Serifenschrift. Garamond ist eine weitere häufig verwendete Serifenschrift. Dann haben wir Baskerville, Georgia und Courier New. Schauen wir uns einige der häufig verwendeten Sans-Serif-Schriften an. Helvetica, Proxima Nova, Futura und Calibri. Nun, was sagt eine Serifenschrift über Ihre Marke aus? Wenn Sie bei Ihrem Design ein traditionelles Erscheinungsbild bevorzugen, sollten Sie auf jeden Fall die Serifenmethode wählen. Seitdem werden Serifenschriften häufig in Büchern, Zeitungen und Zeitschriften verwendet . Sie erinnern uns an klassischere, formellere und anspruchsvollere Themen. Serifenschriften sind eine gute Wahl für Marken, die als vertrauenswürdig, etabliert und zuverlässig angesehen werden möchten . Serifenschriften sind daher eine gute Wahl für traditionellere Unternehmen wie Anwaltskanzleien, Finanzunternehmen oder Versicherungsunternehmen. Was sagt eine Sans-Serif-Schrift über Ihre Marke aus? Bei serifenlosen Schriften geht es also eher darum, Tradition über den Haufen zu werfen , und sie bevorzugen viel mehr als Raffinesse. Serifenlose gelten also als moderner, weil Sie wissen, unsere minimalistischen, sie sorgen für einen modernen Look. Sie sind einfacher. Also, wenn Sie möchten , dass Ihr Design jugendlicher und zugänglicher wirkt, oder? Serifenlose Schriften können sich also zugänglicher anfühlen als das Zeug hier, eher serifenlose Gegenstücke. Serifenlose Schriften werden daher aufgrund ihrer Einfachheit als zugänglicher, verspielter und jugendlicher angesehen . Im Grunde verwenden also neue Unternehmen, Start-ups , Online-Unternehmen und Technologieunternehmen , Online-Unternehmen und Technologieunternehmen diese Sans-Serif-Schriften. Das aktuelle Logo von Google verwendet die Sans-Serif-Schrift. Früher, glaube ich, 2005 oder sechs, als Google im Vergleich zu Yahoo noch ziemlich neu war, verwendeten sie Serifenschriften. Das war es also. Ich hoffe, die Verwirrung zwischen Serif und Sans Serif ist geklärt und ich hoffe, dass Sie alle wissen , welche Schriftart Sie für Ihr Design verwenden sollen. 13. (12) Benutzerdefinierte Schriftarten in Figma verwenden: Okay, schauen wir uns an wie wir unsere benutzerdefinierten Schriftarten und Figma hochladen können. Nun könnte es vorkommen, dass Sie eine Schriftfamilie verwenden möchten, die in Figma nicht verfügbar ist. Nicht, es ist in Google-Schriften verfügbar. Also, was machst du in diesem Fall? Um Ihnen ein Beispiel zu geben, was ist, wenn ich die Grand Theft Auto-Schriftfamilie verwenden möchte ? Ich habe es wirklich genossen, vermietete Spiele zu spielen, und ich würde diese Schriftfamilie gerne verwenden, aber die ist in Figma einfach nicht verfügbar. Nehmen wir an, ich möchte dasselbe Styling auf diese Schrift anwenden. Also, wie wende ich das an? Dafür muss ich also zu figma.com Slash Downloads gehen . Gehen Sie einfach dorthin dorthin und wählen Sie die Plattform aus , die Sie verwenden. In meinem Fall verwende ich einen Windows-Computer, also werde ich dieses Windows-Installationsprogramm in diesen Font-Installern installieren . Es wird also einige Zeit dauern und es wird versuchen , die EXE-Anwendung herunterzuladen Öffnen Sie sie einfach und installieren Sie sie in Ihrem System. Also werde ich das installieren. Sie können sehen, dass dies installiert wurde. Jetzt kann ich zu dieser Schrift zurückkehren und hier klicken, um sie herunterzuladen. Jetzt werde ich das nicht noch einmal herunterladen , da ich es bereits in mein System heruntergeladen habe. Also hier, wie Sie sehen können, ist dies eine Zip-Datei. Also werde ich das mit 7-Zip extrahieren. Sie können jedes andere Werkzeug verwenden, das Sie haben, wie Ihre Luftröhre oder all diese Dinge. Ich werde nicht näher auf Daten eingehen. Jetzt haben wir also diese berühmte Schrift Punkt TXT. Sobald ich auf diese, oder besser gesagt, ich sollte das sagen, auf diese ein-Punkt-PDF-Datei geklickt oder besser gesagt, ich sollte das sagen, auf diese habe. Sie können diese Schaltfläche „Installieren“ sehen, klicken Sie einfach dort drüben. Also wird die Figma diese spezielle Schriftfamilie herunterladen. Jetzt können Sie diese Schriftfamilie in Ihrem Figma verwenden. Also lass mich dich zurück zu Figma und ich gehe zurück zu meinem Testprojekt. Gehen wir also wieder da drüben hin. Ich werde den Text anwenden, der Grand Theft Auto ist. Wenden wir das Styling an, das heißt, wenn ich mich nicht irre , der Preis sinkt. Und du kannst es genauso sehen. Ja. Jetzt können Sie sehen genau dieselbe Schriftfamilie angewendet wurde. Hier drüben. Sie können sehen, dass dies die verwendete Schriftfamilie ist. Das Gleiche wird hier angewendet. Lassen Sie mich die Schriftgröße erhöhen , damit sie viel sichtbarer wird. Jetzt hoffe ich, dass Sie alle sehen können genau dieselbe Schriftfamilie verwendet wird. 14. (13) Arbeiten mit Bildern in Figma: Okay, lass uns mit Bildern in Figma fortfahren. Jetzt gibt es drei Möglichkeiten, Bilder in Figma zu importieren. Die erste und wichtigste Methode besteht darin, dass Sie in der Werkzeugleiste über das Symbol für diese Formen klicken können . Und Sie können diese Option auswählen , um ein Bild oder Video zu platzieren. Sie können auch die Tastenkombination Strg , Umschalttaste und k sehen . Wenn Sie also die Tasten Strg und K gedrückt halten, müssen Sie das Bild durchsuchen , in dem Sie sich in Ihrem Ordner befinden. Und das kannst du wählen. Und Sie können es einfach dort platzieren, wo Sie es einfügen möchten. In Ordnung, du kannst also sehen, das ist mein Bild. Dieses spezielle Bild ist das Vorschaubild meines Full-Stack-Webentwicklungskurses. Wenn Sie daran interessiert sind, die Aspekte der Webentwicklung zu erkunden , sollten Sie unbedingt meinen Kurs besuchen , da sich dieser Kurs auf die Full-Stack-Webentwicklung konzentriert. Es konzentriert sich sowohl auf das Frontend als auch auf das Backend. Wir beginnen also direkt mit HTML. Dann behandeln wir CSS, einige CSS-Frameworks wie Bootstrap, Entail und CSS. Wir betrachten auch JavaScript in seiner Gesamtheit. Wir behandeln auch JavaScript-Frameworks wie React , ein Frontend-Framework. Dann behandeln wir auch ein Backend-Framework, nämlich NodeJS. Wir schauen uns auch Express JS an. Dann behandeln wir Datenbanken wie MongoDB und Sie werden auch sehen, wie Sie Git und GitHub verwenden , um Ihre Projekte tatsächlich hochzuladen. Und nicht nur Projekte, sondern jede Website, die sie gerne hochladen. Übrigens, wenn Sie daran interessiert sind, reale Anwendungen und Websites zu erstellen , sollten Sie sich diesen Kurs unbedingt ansehen , denn dort versuche ich mein Bestes, den Kurs regelmäßig zu aktualisieren , indem ich Projekte, Videos und Tutorials zu neuen Frameworks hochlade . Also genug vom Marketing für meine anderen Kurse, konzentrieren wir uns wieder auf unsere Bilder und Figma. Das ist also die einzige Möglichkeit, ein Bild in Figma zu importieren. Die andere Möglichkeit besteht darin, den Ordner tatsächlich zu öffnen und das Bild einfach per Drag-and-Drop in Ihrem Figma-Arbeitsbereich zu platzieren. Nun, hier drüben, wie Sie sehen können, habe ich dieses Bild nicht in meinen Rahmen importiert. Wenn ich dieses Bild und den Rahmen platzieren möchte, kann ich das auch tun. Lassen Sie mich also einfach einen Rahmen von, sagen wir, Desktop-Größe erstellen . Und, ähm, ja, ich weiß, wo ich mein Bild platzieren kann, sodass ich Drag-and-Drop verwenden kann, oder ich kann sogar Control C und Control V verwenden. Sobald ich Control V gemacht habe, können Sie sehen, dass das Bild in meinem Rahmen platziert wurde. Jetzt werden Sie sehen , dass die Bilder im Vergleich zur Rahmengröße groß sind. Das Bild wurde also beschnitten, oder? Also, wenn ich die Größe des Bildes ändern möchte, dann kann ich diese, du weißt schon, diese vier Eckpunkte halten . Sie können sehen, ob Sie der Meinung , dass Sie die Größe des Bildes ändern möchten. Und wenn Sie so etwas tun, werden Sie feststellen, dass das Bild nicht Größe geändert, sondern beschnitten wird. Also, was machst du in diesem Fall? Warum passiert das? Es passiert, weil wir den Zug ausgewählt haben. Stattdessen sollten wir die Skalentaste auswählen. Also lass mich einfach rückgängig machen. Und jetzt wähle ich die Skalierungsmethode aus oder Sie können einfach die Taste auf Ihrer Tastatur gedrückt halten. Und jetzt werde ich die Größe so , dass das Bild auf keinen Fall beschnitten wird. Sie können sehen, dass die Bilder nicht geclubt werden. Es ist eher Angst zu haben. Es wurde reduziert. Die Größe meines Bildes wurde deutlich reduziert und das Bild wird sowieso nicht geclubt. Ordnung, das sind also die drei Möglichkeiten, Bilder tatsächlich in Figma zu importieren. Was ist nun, wenn Sie dieses Bild in einer Form platzieren möchten? Wie gehen wir das an? Nehmen wir an, ich möchte dieses Bild und das rechteckige Feld platzieren . Lassen Sie mich also eine rechteckige Box erstellen. Und hier möchte ich dieses spezielle Bild platzieren. Was ich also tun kann, ich kann dieses spezielle Feld auswählen. Und in meiner Fülle. Wir haben im Bereich Farbe etwas über Felder und all das Zeug gelernt . Also werde ich statt solide Bild wählen. Sobald ich hier bin, kann ich mein Bild auswählen, das ist dieses bestimmte Bild. Jetzt kannst du sehen, das ist jetzt, das war jetzt in meiner Form. In Ordnung, jetzt kann ich dieses Bild sogar drehen. Sobald ich also auf diese Drehung klicke, wird sie um 90 Grad gedreht. Warum sie, das Bild wurde gedreht, nicht meine Form. Das ist also eine Sache, die Sie beachten sollten. In Ordnung? Ich kann es also so oft drehen, wie ich möchte. In Ordnung? Jetzt werden Sie auch sehen , dass wir einige andere Anpassungen haben, die ich vornehmen kann. Eher sollte ich das im Film sagen oder ich kann sogar vom Filmmodus in den Fit-Modus wechseln. Sobald ich das getan habe, werden Sie sehen, dass die Form genau die gleiche Größe wie mein rechteckiges Feld einnimmt. Das ist also möglich, weil ich diesen FET-Modus gewählt habe. Wenn ich diese Option zum Zuschneiden auswähle, kann ich das Bild so zuschneiden , dass nur dieser Teil des Bildes sichtbar ist. Nehmen wir an, ich möchte mich aus dem Bild entfernen und nur das Logo platzieren, bei dem es sich um das NodeJS-Logo von MongoDB Express handelt. Sobald ich mit dem Zuschneiden meines Bildes fertig bin, können Sie jetzt einfach auf dieses Kreuz klicken , um den Zuschneidemodus zu verlassen. Und jetzt ist nur dieser Teil des Bildes in meiner Box vorhanden. In Ordnung, wir haben auch andere Optionen. Damit meine ich, sagen wir, ich wähle diesen Teil aus, ich gerne anpassen würde. Das heißt, lass uns fit werden und lass mich die Größe meiner Box vergrößern. In Ordnung? Ich werde die Größe meiner Box erhöhen. Und jetzt kann ich auch andere Anpassungen vornehmen. So wie Lightroom und Photoshop es Ihnen ermöglichen , mit anderen Anpassungen in Ihren Bildern umzugehen , wie Belichtung, Kontrast, Sättigung, Temperatur, Farbton, Glanzlichter, Schatten, all die Dinge, die Sie in Figma selbst tun können. Sie müssen keine andere Software verwenden , um sich tatsächlich mit dem Bildteil zu befassen. Wie Sie sehen können, habe ich die Belichtung etwas heruntergefahren , damit das Bild dunkler erscheint. Das ist also meine Belichtung, wenn ich den Kontrast erhöhen möchte und Sie werden mehr Schärfe und all das Zeug dazu sehen . Wir möchten die Sättigung erhöhen. Das kann ich auch. Die Anpassung liegt also bei Ihnen. Es gibt keine festen Regeln welche Belichtung für dieses Bild eingestellt werden sollte oder welcher Kontrast für dieses Bild eingestellt werden sollte. Es hängt ganz von Ihrem Anwendungsfall dem Bild ab, mit dem Sie arbeiten. In Ordnung? Und die andere Sache , die ich zeigen wollte, ist, dass ich zwar im Abschnitt Effekte ausführlich darauf eingehen werde , wir an, Sie möchten für dieses bestimmte Bild einen dunkleren Ton oder einen Glaseffekt erzeugen dunkleren Ton oder . Und es möchte etwas Text darauf anwenden. Jetzt müssen Sie einige Websites gesehen haben , auf denen Sie ein Bild haben. Dieses Bild hat nun eine gewisse Transparenz und darauf wird etwas Textbreite und ein hellerer Farbton aufgetragen , wird etwas Textbreite und ein hellerer Farbton aufgetragen sodass das Bild auch sichtbar ist, wenn auch nicht deutlich, aber ein gewisser Schatten der Bilder dort auf der Webseite und der Text ist auch da. Lass mich dir zeigen, was ich damit meine. Wählen Sie anschließend dieses Bild aus. Ich kann zum Transparenzpanel gehen und die Transparenz reduzieren. Wenn ich also von 100% zwei ändere, sagen wir 80, 80 Prozent. Und Sie können sehen, dass das Bild transparent ist. Okay, lass uns, lass es uns wieder auf 100% bringen. In Ordnung, ich kann die Alt benutzen. Ich kann nach unten ziehen , sodass ich eine exakte Kopie dieser Form erhalte . Und jetzt wechseln wir im Filmmodus vom Bild zum Festbild. Das heißt, ich möchte kein Bild ausmalen. Gib mir etwas dunklere Farbe hier drüben. Und ich werde die Transparenz auf etwa, sagen wir mal, etwa 22% wählen . Wenn ich zu diesem Teil zurückkomme. Jetzt kannst du sehen, wie mein Bild aussieht. Sie können sehen, dass mein Bild so aussehen würde. Jetzt kann ich sogar etwas Text auf dieses Bild anwenden. Nehmen wir an, ich möchte so etwas wie MAN Stack schreiben. Ich werde auch die Schriftgröße erhöhen. Erhöhen wir also die Schriftgröße dieses Textes. Also statt 12 machen wir daraus 36. 36 ist immer noch nicht klar. Lass uns mit 48 beginnen. 48 sieht gut aus. Ändern wir den Textstil auf Roboto. Und ich kann sogar die Farbe dieser Schrift ändern , sagen wir, schwarz. Stimmt es? Ja, das sieht cool aus. Ein Stapel. Das war also alles über Bilder für diesen Vortrag. Noch einmal eine kurze Zusammenfassung. Es gibt drei Möglichkeiten, Bilder in Ihre Datei zu importieren. Die erste Methode besteht darin, die Umschalttaste und die K-Tasten auf der Tastatur gedrückt zu halten . Und dann können Sie sich die Datei ansehen , die Sie importieren möchten. Die andere Möglichkeit besteht darin, das Bild einfach aus Ihrem Ordner in Ihren Figma-Arbeitsbereich zu ziehen und dort abzulegen. Die dritte Methode besteht darin, die Methoden Control C und Control V tatsächlich zu verwenden . Was haben wir gelernt? Wir lernen, dass es eine Möglichkeit gibt, Ihr Bild tatsächlich in die Form zu importieren oder auf andere Weise zu platzieren, jede Form, nicht nur ein Rechteck, sondern, wenn Sie es mit einer Ellipse oder einem Polygon zu tun haben , können Sie den Füllmodus wählen und vom Filmmodus innerhalb des Volumenkörpers, von, Sie können das von Vollbild zu Bild ändern. Sobald Sie das getan haben, haben Sie auch andere Möglichkeiten. Du kannst das entweder zuschneiden. Eine letzte Sache, die uns noch blieb, ist, dass ich sogar von FIT zu Crop wechseln kann. Und wenn ich einmal Kacheln gemacht habe, bedeutet das, dass ich die Bilder so oft wiederholen kann , wie ich möchte. Nehmen wir an, von 20 I10, setzen Sie diesen Wert auf 25, dann werden Sie 25% sehen. Das bedeutet, dass mein Bild im Grunde viermal in dieser bestimmten Form wiederholt wurde. Das ist also mein Plättchen. Sie haben also verschiedene Optionen zur Auswahl. Wenn Sie füllen, bedeutet das, dass das Bild innerhalb Ihrer Form platziert wird, es jedoch nicht an die Abmessungen der Form angepasst wird. Wenn Sie die Passform wählen, passt sie entsprechend. Wenn Sie die andere Methode wählen, nämlich das Zuschneiden, müssen Sie den Teil Ihres Bildes zuschneiden. Wenn Sie die Kachel wählen, können Sie die Bilder so oft wiederholen , wie Sie möchten. Dann haben Sie die Möglichkeit, sich mit den Anpassungen des Bildes wie Belichtung, Kontrast, Sättigung und all dem Zeug zu befassen . Ich habe auch erklärt , wie man Bilder dreht. Okay? Denken Sie noch einmal daran , dass Sie bei jeder Drehung das Bild innerhalb der Form drehen , nicht die Form selbst. Das ist also eine Sache, an die Sie sich erinnern müssen. Und wenn Sie die Transparenz des Bildes verringern oder erhöhen möchten , gehen Sie einfach zu dieser Ebene und Sie können sich um die Transparenz des Bildes kümmern. Wenn Sie diese Art von Schatten- oder Glaseffekt verwenden möchten , können Sie einfach eine andere Form mit einer Volltonfarbe verwenden, die Transparenz herunterklappen und sie mit diesem bestimmten Bild platzieren. Und dann können Sie jedes andere Telefon oder jede andere Form verwenden , die Sie auf dieser Ebene verwenden möchten. Das war also alles. In der nächsten Vorlesung lernen Sie einige Plug-ins kennen, mit denen wir Bilder tatsächlich importieren können . Und lernen Sie auch, wie Sie Hintergrund von den Bildern in Figma selbst entfernen. 15. (14) Plugin Unsplash: Okay, lass uns mit Bildern und Figma weitermachen. Jetzt erstellen Sie manchmal ein Design für Ihren Kunden. Vielleicht möchten Sie einige Archivfotos verwenden. Wenn Sie jetzt denken, dass ich jedes Foto von Google verwenden kann, kann ich einfach jedes Bild, das ich in meinem Design verwenden möchte, googeln , damit Sie es meinem Kunden liefern können. Nun, du irrst dich. Warum ist das so? Manchmal sind die Bilder urheberrechtlich geschützt. Wenn Sie es für kommerzielle Zwecke verwenden, können Sie mit einigen rechtlichen Problemen konfrontiert werden, z. B. mit Copyright-Problemen. Du willst dich also nicht in Schwierigkeiten bringen. Der beste Weg, um mit dieser Situation umzugehen, besteht darin, urheberrechtsfreie Bilder von den Seiten herunterzuladen, wodurch Stock-Fotos bereitgestellt werden. Eine der Websites, die sehr beliebt ist, ist Unsplash. Gehen Sie also einfach zu unsplash.com und suchen Sie nach einem Bild , nach dem Sie suchen. Nehmen wir an, ich suche nach abstrakten Bildern. Also kann ich einfach da rübergehen. Ich kann nach jedem der Bilder suchen und sie herunterladen. Eine weitere Website ist pexels.com. Das dritte ist Pixabay. Und Sie finden eine EGN-Anzahl von Websites, die Stock-Fotos anbieten. Eine Möglichkeit, die Archivfotos in Ihr Figma-Projekt zu importieren , besteht darin, sie tatsächlich von diesen Websites herunterzuladen, sie in einem Ordner zu suchen und in Ihr Figma zu importieren. Das haben wir zuvor gelernt, dass es drei Möglichkeiten gibt, Bilder in Figma zu importieren. Aber gibt es nicht eine Abkürzung, um Bilder direkt von Unsplash in Ihr Figma-Projekt zu importieren Das ist es, was Plugins kommen, kommt ins Spiel. Das Plug-In ist also im Grunde eine Ergänzung oder Erweiterung Ihres vorhandenen Programms, das einige zusätzliche Funktionen bietet , die das vorhandene Programm nicht bietet. Sie können also jedes Plug-in herunterladen, nicht nur das Unsplash-Plugin, sondern jedes Plug-in, das Sie in Figma haben möchten, indem einfach auf dieses Ressourcensymbol in der Werkzeugleiste gehen oder zu Figma, klicken Sie einfach dort, gehen Sie zu diesen Plug-ins und suchen Sie nach einem Plugin, nach dem Sie suchen. In unserem Fall möchten wir das Unsplash-Plugin herunterladen , da wir es mit Bildern zu tun haben. Suchen wir also nach Unsplash. Gerade jetzt. Sie können sehen, dass dies in meinem letzten Artikel erscheint, einfach weil ich es bereits in mein Figma-Konto heruntergeladen habe. Einfach darauf klicken. Die Installation wird einige Zeit in Anspruch nehmen und die Installation lassen. Sobald Sie das getan haben, erhalten Sie diese Option zum Ausführen. Jetzt können Sie es von hier aus ausführen und das Bild importieren, den Bildtyp, den Sie in Ihrem Projekt verwenden möchten . Das kannst du also tun. Ein anderer Weg. Du kannst sehen, dass mein Unsplash-Plugin läuft. Jetzt kann ich diese abstrakte auswählen. Ich kann das importieren. Sie können sehen, dass der Import einige Zeit dauern wird, und jetzt wurde er importiert, oder? Eine andere Möglichkeit, dieses Plugin herunterzuladen, besteht darin, mit der rechten Maustaste auf Ihren Figma-Arbeitsbereich zu klicken. Gehen Sie zu diesen Plug-ins und finden Sie weitere Plug-ins. Sobald du das getan hast, wirst du Unsplash finden. Eine andere Möglichkeit, das Unsplash-Plugin tatsächlich zu verwenden , besteht darin, mit der rechten Maustaste auf Ihre Form oder Ihren Rahmen und einfach zu Plugins, Unsplash zu gehen. Und Ihr Unsplash-Plugin wird direkt geöffnet Wählen Sie ein abstraktes Bild oder einen anderen Bildtyp aus, den Sie verwenden möchten. Und in meinem Fall möchte ich dieses spezielle Bild verwenden. Also werde ich einfach darauf klicken. Es wird einige Zeit dauern. Und jetzt können Sie sehen, dass dieses Bild geladen wurde. Ich kann sogar die Schriftfarbe ändern. Moment ist es schwarz und das Bild ist auch dunkel, also sieht es nicht gut aus, aber keine Sorge. Ich versuche nur, euch allen zu erklären , wie man dieses spezielle Plugin benutzt. Was ist nun, wenn Sie dieses Unsplash-Bild Italien in eine Form importieren möchten? Also, wie gehen wir das an? Nehmen wir an, ich habe ein rechteckiges Bild. Lassen Sie mich einfach dieses spezielle Bild löschen. Das Rückgängigmachen dauert einige Zeit. Jetzt kann ich eine rechteckige Form dieser Größe erstellen. Dann kann ich ein weiteres Rechteck von, sagen wir, dieser Größe erstellen . Ich kann die Alt benutzen und so kann ich damit umgehen, oder? Jep. Lassen Sie uns eine weitere Kopie dieser Form erstellen. Und noch eine Kopie dieser Form. Jetzt möchte ich die Bilder so importieren. Lassen Sie uns übrigens versuchen, sie mittig auszurichten. Jetzt kann ich die Bilder in dieser Form importieren , indem ich einfach mit der rechten Maustaste auf diese Form klicke. Ich kann Plugins, Unsplash und dann abstrakt wählen. Lassen Sie uns dieses Bild importieren. Und Sie können sehen, dass dieses Bild importiert wurde. Das Gleiche kann ich hier tun. Hier drüben. Auch hier drüben. Hier drüben und auch hier. So einfach können Sie urheberrechtsfreie Bilder in Ihr Figma-Projekt importieren . 16. (15) Hintergrund von Bildern in Figm entfernen: In Ordnung, schauen wir uns an, wie wir den Hintergrund aus unseren Bildern entfernen können . Jetzt weiß ich, dass Sie alle wissen müssen , dass die Dot Vg-Website entfernt wurde. Nun, das ist eine wirklich berühmte Website , die den Hintergrund von Ihren Bildern entfernt. Sogar ich verwende es von Zeit zu Zeit, um den Hintergrund von meinen Bildern zu entfernen. Was Sie hier also tun, ist, dass Sie einfach beliebiges Bild hochladen, von dem Sie den Hintergrund entfernen möchten, und Sie können das geänderte Bild herunterladen. Können wir das jetzt einfach direkt in Figma machen ? Nun, das kannst du machen. Und dafür benötigen Sie ein Plugin, das ich offensichtlich entfernt habe oder BG. Sie müssen sich jedoch anmelden und zuerst ein Konto erstellen oder den Punkt Vg entfernen , damit Sie Ihren eigenen API-Schlüssel generieren können. Wenn Sie diesen API-Schlüssel verwenden, verwenden Sie ihn dann in Ihrem Plug-In, dem Remove Background From the Images. Also lass mich mich einfach schnell anmelden und hier ein Konto erstellen. Ich werde Google benutzen. Stellen Sie einfach sicher, dass Sie dies auswählen. Ich stimme den Nutzungsbedingungen zu. Und wenn Sie die neuen Funktionen und Sonderangebote per E-Mail erhalten möchten . Sie können einfach darauf klicken, ihr E-Mail-Marketing, E-Mail-Marketing, dieses Zeug. Sobald Sie das getan haben, gehen Sie einfach zu Tools und API. Geh da rüber. Und Sie können Ihren eigenen API-Schlüssel generieren. Gehe einfach zu dieser ABI und Befehlszeile. Und du wirst sehen, wie ich eine API bekomme. Geh einfach da rüber. Und sie werden Ihnen zeigen, dass Sie im Kontoprofil den API-Schlüssel sehen. Also werde ich einen neuen API-Schlüssel erstellen. Ich werde diesen API-Schlüssel erstellen und ihn kopieren. Ich gehe zurück zu meinem Figma. Ich wähle diese spezielle Form , in die ich mein Bild importieren möchte. Gehen wir also zu Plugins unsplash. Ich werde nach einem Portraitbild suchen. Suchen wir also nach einem Portrait. Ich wähle dieses Bild und möchte den Hintergrund für dieses Bild entfernen. Benutze das alte Muster , damit ich dieses Bild nachbauen kann. Und ich werde ein neues Plugin herunterladen, indem ich hier nach, remove, remove, BG suche . Sie können sehen, dass ich Ausführen auswählen kann und es wird versuchen, zu starten, aber es wird nicht ausgeführt. Warum ist das so? Einfach weil Sie zuerst den API-Schlüssel festlegen müssen , müssen wir, wie Sie gesehen haben, zuerst den API-Schlüssel festlegen. Gehen wir zurück zu den Plugins. Ich werde auf dieses Drop-down-Menü klicken. Versuchen wir, unseren API-Schlüssel einzurichten. Und jetzt muss ich mein EBIT einfügen. Also füge ich einfach meinen API-Schlüssel ein und wir klicken auf Speichern. Und jetzt kann ich diesen Hintergrund entfernen indem ich einfach auf Rechtsklick-Plugins klicke. Entfernen Sie den Hintergrund und starten Sie, und es wird einige Zeit dauern , bis der Hintergrund entfernt ist. Versuchen wir, ihnen etwas Zeit zu geben , um den Hintergrund zu entfernen. Und Sie werden sehen, dass der Hintergrund entfernt wurde. 17. (16) Bilder in Figma maskieren: Ordnung, schauen wir uns verschiedene Maskierungstechniken an , die wir in Figma anwenden können. Jetzt fragen Sie sich vielleicht , was diese Maskierung ist? Maskieren ist, wissen Sie, eine Möglichkeit, Ihre Bilder zu manipulieren , ohne die Qualität Ihres Bildes zu beeinträchtigen. Nehmen wir an, Sie möchten tatsächlich einen Teil Ihres Bildes zeigen. Das ist also deine Maskierung des Bildes. Genau wie zuvor, was wir gesehen haben, wie man den Hintergrund aus den Bildern entfernt. Das war nichts anderes als eine Möglichkeit, Titelbilder zu maskieren. Wir entfernen den Hintergrund aus dem Bild. Wir haben nur das Porträt gezeigt, die Person selbst, wie Sie hier sehen können. Wenn wir den Hintergrund aus dem Bild entfernen und diese graue Farbe, die Sie sehen, ist nichts anderes als die Farbe unserer rechteckigen Box. In diesem speziellen Bild hat es also im Wesentlichen keinen grauen Hintergrund. Jetzt nimmt das die Farbe ein, die die Farbe unserer rechteckigen Box ist. Schauen wir uns verschiedene Möglichkeiten an, wie wir Majors maskieren können. Also, was ich dafür tun werde, erstelle ich einfach einen neuen Rahmen mit etwa Desktop-Größe. Und darin werde ich dieses Bild kopieren. Und ich werde es hier einfügen. In Ordnung, versuchen wir, dieses Bild zu maskieren. Sie müssen also auf Social-Media-Plattformen gesehen haben , dass die Profilbilder im Allgemeinen kreisförmig sind. Wie können wir dieses Bild also tatsächlich maskieren? Und es ist so , dass nur das Gesicht oder bestimmte Teile dieses Bildes innerhalb der Ellipse oder einer Kreisform erscheinen. Was ich also tun kann, ich kann eine neue Ellipsenform erstellen. Wahrscheinlich von der Größe. Es sieht cool aus. Und jetzt will ich nur den Teil meines Bildes, das ist das Gesicht innerhalb des Kreises. Also, wie kann ich das machen? Nun, was Sie tun müssen, ist, dass Sie Ihr Bild einfach im Ebenenbereich nach vorne bringen können, wie Sie im Ebenenbedienfeld hier sehen können , genau hier drüben ist die Ellipse auf der obersten Ebene als das rechteckige Feld, das wir haben. Dieses Rechteck ist nichts anderes als das Bild, über das wir gesprochen haben. Diese Ellipse muss also hinter unserem Bild stehen. Oder Sie können sagen, dass das Bild vor unserer Ellipsenform stehen muss . Sie können das also im Ebenenbedienfeld tun. Sie können einfach nach unten ziehen und das Bild wird vorne angezeigt. Oder Sie können einfach mit der rechten Maustaste auf diese kreisförmige Form klicken. Und Sie können es einfach zurückbringen oder besser gesagt nach hinten senden. Einfach nach hinten schicken oder was Sie tun können, Sie können Ihr Bild auswählen, mit der rechten Maustaste auf Ihr Bild klicken und es nach vorne bringen. Sie können auch die Tastenkombinationen dafür sehen. So macht man das also. Wählen Sie dann sowohl Ihre Ellipsenform das Rechteck aus, indem Sie die Strg-Taste gedrückt halten und im Ebenenbedienfeld sowohl Ihr Bild als auch die Ellipsenform auswählen. Klicken Sie nun mit der rechten Maustaste auf das Bild und verwenden Sie es als Maske. Sie können auch die Tastenkombination Strg , Alt und M sehen . Sobald Sie das getan haben, wird nur das Gesicht innerhalb der kreisförmigen Form angezeigt. So maskierst du also deine Bilder und Figma. Lassen Sie uns auch versuchen, uns anzusehen, wie wir ein Bild in unserem Text maskieren können. Dass ich das Ganze auswähle und das irgendwohin hier drüben verschiebe. In Ordnung. Jetzt erstelle ich ein neues Textfeld und lese die Textmaske. Okay, die Farbe dieses Textes scheint also zu sein, oder besser gesagt, ich sollte sagen , dass dieser Text nicht Teil dieser bestimmten Ebene sein muss . In Ordnung, also wo ist meine Nachricht? Das ist mein Text. Lass uns Moschee schreiben und es muss außerhalb des Krams sein. Was jetzt passiert ist, ist dass Figma meinen Text automatisch mit dem rechteckigen Boxbild und meiner Ellipsenform zu einer einzigen Ebene kombiniert meinen Text automatisch mit dem rechteckigen Boxbild hat. Da sich das Bild nun nur in diesem Teil des Bereichs befindet, können Sie sehen, dass das Bild, das mit blauen Punkten hervorgehoben ist , blaue Striche sind. Dieser Teil enthält mein gesamtes Bild. Wenn ich meinen Text in diesen Teil einbringe, dann wirst du meinen Text natürlich nicht sehen. Das liegt daran, dass das Bild in diesem Text belegt ist . Stimmt es? Jetzt wollen wir, dass diese Maske ein Bild in einem Masterformat enthält. Also dafür werde ich eigentlich lieber, ich sollte sagen, dass ich alles in Großbuchstaben schreiben werde. Versuchen wir, diesen Text irgendwo hier drüben zu verschieben. Machen wir das mutig, okay, es ist schon mutig. Versuchen wir, den Schrifttyp oder die Schriftfamilie zu ändern. Lass es uns auf Roboto ändern. In Ordnung? Wenn 80 Pixel gut aussehen. Okay, lass uns versuchen, ein Bild aus dem Unsplash-Plugin mitzubringen . Also werde ich wählen, dass Unsplash ein abstraktes Bild verwendet. Gehen wir also zur Zusammenfassung. Ich wähle dieses oder ein anderes Bild aus. Versuchen wir, dieses Bild auszuwählen, oder? Jetzt. Warten wir, bis es auftaucht. In Ordnung, versuchen wir, dieses Bild zu skalieren. Also werde ich das skalieren. Ich habe den Skalenteil ausgewählt. In Ordnung? Stellen Sie also sicher, dass Sie es verkleinern. In Ordnung, das sieht cool aus. Und jetzt wollen wir, dass unser Text hinter unserem Bild steht. Jetzt wirst du sehen, dass dieses Unsplash-Bild nicht Teil meines Desktop-Frames ist. Also, wie platzieren wir das eigentlich in unseren Desktop, Desktop an Frame? Also bring das einfach runter. Und jetzt können Sie sehen, dass diese Textmaske vor meinem Bild erscheint. Aber wir wollen nicht, dass das passiert, sonst funktioniert die Maskierung nicht. Wir wollen also, dass der Text hinter unserem Bild steht. So werden wir in der Lage sein, ein Bild in unseren Text zu maskieren. Wenn Sie also Ihr Bild maskieren möchten, stellen Sie immer sicher, dass, egal ob Sie das in eine Form oder einen Text oder irgendwas anderes maskieren möchten , sicherstellen, dass das Bild vorne und das andere Ding hinten ist. Also schick das einfach nach hinten und wähle jetzt sowohl dein Bild als auch den Text aus und klicke mit der rechten Maustaste und verwende das als Maske. Sobald Sie das getan haben, können Sie sehen, dass sich dieses Bild jetzt in meinem Text befindet. 18. Margin & Padding im UI UX Design: Bevor wir uns nun mit dem automatischen Layout in Figma befassen, ist es wichtig, dass wir das Konzept von Rand und Abstand verstehen . Was genau sind nun dieser Rand und diese Polsterung? Zusammenfassend lässt sich sagen, dass Rand und Polsterung eigentlich der Abstand zwischen zwei verschiedenen Elementen oder Elementen sind. Um dies zu erklären, kann ich anhand eines Beispiels einfach eine rechteckige Box zeichnen. Nehmen wir also an, dieses rechteckige Feld hat, sagen wir, rote Farbe und ein weiteres rechteckiges Feld hat, sagen wir, eine grüne Farbe. Ja. Der Abstand zwischen diesen beiden roten und grünen Feldern wird also als mein Rand bezeichnet. Rand ist im Wesentlichen der Abstand, äußere Abstand zwischen verschiedenen Elementen oder zwischen zwei Elementen oder zwei Elementen. Die blau gepunktete Linie, die Sie zwischen dem roten und dem grünen Feld sehen können, ist also mein Rand. Jetzt gilt die Marge für alle vier Richtungen. Das heißt, wann immer wir über den Rand sprechen, wenn Sie möchten, dass der Rand eine bestimmte Höhe hat, dann kann das von oben, von unten, von links oder von rechts sein. Der Rand ist also in allen vier Richtungen vorhanden, oben, unten, links und rechts. Wenn ich also eine weitere Schachtel mit, sagen wir, blauer Farbe hineinlege , lass mich das einfach blau machen. Eine weitere Schachtel mit, sagen wir, gelber Farbe. Also lass es mich so ausdrücken, oder? Und lassen Sie uns die gelbe Farbe behalten. Und versuchen wir auch, eine weitere Kiste mitzubringen. Wir können das, sagen wir, in schwarzer Farbe belassen. In Ordnung? Sie können also sehen das rote Feld einen Rand aus allen vier Richtungen hat, von links, von oben, von rechts und von unten. Also wenn ich tatsächlich überprüfen möchte, ob der Rand oder besser gesagt Stimmen der Rand von oben, unten links, rechts ist. Sie können sehen, dass, wenn ich diese Objekte bewege, ich sehe, dass es einen Rand von links und von rechts gibt. Sie können sehen, dass der Rand von links und von rechts 88 Pixel lang ist. So kann ich meinen Spielraum sehen. Rand ist im Wesentlichen nur der Abstand zwischen meinen äußeren Elementen. In Ordnung? Der Abstand zwischen zwei verschiedenen Elementen, das ist der äußere Abstand zwischen meinen beiden Elementen. Jetzt haben wir Polsterung. Polsterung ist der innere Raum zwischen zwei Elementen. Wenn ich platziere, sagen wir, ich lösche meine anderen Formen wie Blau, Gelb. Und lass mich auch diesen Schwarzen befreien. Okay, ich habe nur zwei Boxen, nämlich grün und rot. Und lassen Sie mich dieses rote Feld erweitern. Mit der ersten Skala kann ich das also erweitern. Ich werde meine grüne Box irgendwo in der Mitte platzieren. In Ordnung? Der innere Abstand zwischen meiner roten und der grünen Box wird also als meine Polsterung bezeichnet. Nennen wir es als meine Polsterung. Polsterung besteht wiederum nicht Die Polsterung besteht wiederum nicht aus allen vier Richtungen von oben, unten, links und rechts. Bevor wir uns also mit Teil der äußeren Schicht in Figma befassen, ist es wichtig, dass wir etwas über Rand und Polsterung wissen . Ich hoffe also, dass Ihnen allen die Grundlagen von Margin und Padding klar sind. 19. Auto-Layout in Figma: In Ordnung, beginnen wir mit dem automatischen Layout in Figma. Auto-Layout bedeutet nun im Grunde , dass das Layout, das wir für unser Design festlegen werden, seine Eigenschaften automatisch ändert. Das ist es also, was Autolayout eigentlich bedeutet. Wenn ich also versuchen würde, dies anhand eines Beispiels zu erklären, kann ich beispielsweise einen Rahmen von etwa dieser Größe zeichnen kann ich beispielsweise einen Rahmen von etwa dieser Größe zeichnen. Und in diesem Rahmen, sagen wir, ich habe ein Rechteck von ungefähr dieser Größe. In Ordnung, fügen wir Text hinzu. Also werde ich ein Textfeld von wahrscheinlich dieser Größe zeichnen. Lassen Sie uns unseren Text einfügen. Und ich werde die Textgröße auf etwa 32 Pixel reduzieren. Und passen wir auch die Höhe an, oder besser gesagt, okay, wir haben die Größe nicht verringert. 36 Pixel Das sieht cool aus. Und wir haben das Textfeld so eingestellt, dass es eine automatische Höhe hat. In Ordnung, das sieht cool aus. Und lassen Sie mich das Textfeld so anpassen , dass es einen richtigen Rand hat. Das heißt, der Rand dieser rechteckigen Box und dieser sollte von links den gleichen haben. In Ordnung? Also das habe ich bisher gezeichnet. Das ist mein Design. In Ordnung? Was ist, wenn ich in meinem Rahmen ein weiteres rechteckiges Feld mit, sagen wir, etwa dieser Größe hinzufügen möchte . Also, was glauben Sie, wird in diesem Fall passieren? Passt mein Rahmen seine Höhe an oder wird er vielleicht nass , je nachdem, was ich eigentlich hineinlege? Nein, das glaube ich nicht. Nun gut, lass uns versuchen zu sehen, ob ich dieses Feld in meinen Rahmen ziehe. Erstens, Sie können immer noch sehen , dass dieses Rechteck zwei nicht Teil meines Rahmens ist. Was ich also tun kann, ist, wenn ich möchte, dass dieses rechteckige Feld in diesem Rahmen in einem anderen Frame enthalten ist, muss ich die Größe meines Freeman erhöhen, oder? Ich muss diesen Rahmen auswählen. Dann. Ich muss meinen Rahmen vergrößern. Nun werden Sie sehen, dass dieses Rechteck jetzt Teil ist , oder besser gesagt, ich sollte es hier platzieren. Jetzt ist dieses Rechteck Teil meines ersten Rahmens. Sie können im Ebenenfenster sehen , dass wir zuerst dieses Textfeld haben. Wir haben ein Rechteck, zwei, Rechteck, eins, oder? Das ist jetzt also Teil meines Rahmens. Was ist, wenn ich es entferne und außerhalb meines Rahmens verschiebe , dann können Sie sehen, dass das Rechteckwerkzeug nicht Teil meines Rahmens ist , oder? Was ist, wenn ich noch eine Sache habe? Nehmen wir an, ich erstelle ein weiteres Textfeld. Okay, lassen Sie mich ein weiteres Textfeld erstellen. Sie können sehen, wenn ich mein rechteckiges Feld in meinen ersten Rahmen ziehe . Jetzt ist es Teil meines Rahmens, als ich das manuell machen und hinzufügen musste , um die Größe meines Rahmens ebenfalls zu erhöhen. Was ist, wenn ich in meinem ersten Rahmen ein Textfeld hinzufügen möchte? Nehmen wir an, ich erstelle einen Text. Okay, lassen Sie mich den Text einfügen und ich werde die Höhe entsprechend anpassen. In Ordnung. Nehmen wir an, stattdessen all diese Texte, lassen wir es einfach nur an dieser Stelle belassen. Ja, das sieht cool aus. Versuchen wir, dies in unseren Rahmen aufzunehmen. Was glaubst du, wird passieren? Wird es reinkommen? Nein. Sie können sehen, dass es nicht Teil meines Rahmens ist. Das muss ich erhöhen. Wenn ich das einbeziehen wollte, muss ich das in meinen Rahmen einbauen , indem ich die Rahmengröße erhöhe. Also Autolayout, was Autolayout im Grunde macht, ist das, lassen Sie mich Ihnen zeigen, was Auto-Layout macht. Also was ich tun werde, ich werde mein Rechteck einfach außerhalb dieses Rahmens platzieren. Lassen Sie mich die Rahmengröße verringern. Also werde ich meinen ersten Rahmen verwenden. Ich werde die Rahmengröße verringern. Ich wähle diesen Rahmen aus und stelle ihn so ein, dass das automatische Layout hinzugefügt wird. Das ist also eine Möglichkeit. Sie können auch sehen, dass die Tastenkombination, um Ihrem Frame ein automatisches Layout hinzuzufügen , die Umschalttaste ist. Halten Sie die Umschalttaste gedrückt und drücken D auf Ihrer Tastatur. Oder im Bereich mit den Designeigenschaften wird auch das Symbol für das automatische Layout angezeigt. Und außerdem wirst du dieses Plus-Symbol haben. Sobald Sie dort klicken, werden Sie feststellen, dass das automatische Layout hinzugefügt wurde. Also kann ich das als automatisches Layout einstellen. Sie können sehen, dass es bereits hinzugefügt wurde. Warum ist das so? Weil ich hier auf das Plus-Symbol geklickt habe. Jetzt wurde diesem Frame ein automatisches Layout hinzugefügt. Und Sie können sehen, jetzt können Sie sehen, dass das Frame-One-Symbol ebenfalls geändert wurde. Wenn ich mit Control Z den Vorgang rückgängig mache, werden Sie sehen, dass das Frame-One-Logo ursprünglich eine solche Tic-Tac-Toe-Box hatte. Sie können zwei vertikale Linien und zwei horizontale Linien direkt hier sehen . Sobald ich das automatische Layout eingestellt habe, können Sie sehen, dass das Symbol meines Rahmens geändert wurde. Dies weist darauf hin, dass der gesamte Frame über ein automatisches Layout verfügt. du, wird passieren, wenn ich versuche, ein rechteckiges Feld in meinen Rahmen einzufügen Was glaubst du, wird passieren, wenn ich versuche, ein rechteckiges Feld in meinen Rahmen einzufügen? Sie können sehen, dass die Rahmenhöhe automatisch angepasst wurde. Was wäre, wenn ich versuchen würde, diesen Text in meinen Rahmen einzufügen? Sie können sehen, dass das Textfeld auch in meinem Rahmen hinzugefügt wurde. Jetzt werden Sie den Text selbst nicht mehr sehen , da der Text in Anstellung ist. Lassen Sie mich das auf schwarze Farbe ändern. Also kann ich einfach zu Fill gehen. Ich kann Schwarz wählen. Und jetzt können Sie den Text lesen. In Ordnung? So umgehen Sie das automatische Layout. Jetzt werden Sie sehen, dass alle Elemente, die wir innerhalb eines Rahmens hinzufügen , auf automatisches Layout eingestellt wurden. Die Höhe wird automatisch angepasst. Was wäre, wenn wir die Breite entsprechend anpassen wollten? Wie können wir unser automatisches Layout so einstellen , dass unabhängig von den Elementen, die wir einen weiteren Rahmen hinzufügen, die Breite statt der Höhe erhöht wird. Also, was brauchst du, um das zu tun? Wählen Sie Ihren Rahmen aus und gehen Sie zum Bereich mit den Designeigenschaften. Klicken Sie auf diesen Teil für das automatische Layout, und Sie werden diese Symbole sehen. Dieses spezielle Symbol bedeutet also, dass es auf vertikale Richtung eingestellt wurde. Wenn ich das in die horizontale Richtung ändere, werden Sie sehen, dass sich die Breite automatisch an die Elemente anpasst , die wir haben. Sie können also sehen, dass die Elemente jetzt in einem vertikalen oder einem anderen horizontalen Format vorliegen. Das ist also meine horizontale Richtung, oder? Wenn ich also ein weiteres Element hinzufüge, wird die Höhe entsprechend angepasst. Ordnung, was bedeutet nun dieser bestimmte Staat, dieses besondere Symbol? Dies bedeutet, dass der Abstand zwischen den Elementen derzeit auf 53 Pixel festgelegt wurde. Da dieser keine andere Einheit hat. Wir wissen, dass dies eine Pixeleinheit hat. Wenn es eine Grad- oder eine Prozenteinheit hätte, müssen Sie sich alle bewusst sein, dass es sich nicht um eine Pixeleinheit handelt. Im Moment ist das keine Pixeleinheit. Wenn ich das also von 53 auf sagen wir 60 setze, dann wirst du sehen, dass diese Box und ihre Größe zunehmen. Sie können sehen, dass der Abstand zwischen diesem Textfeld und diesem rechteckigen Feld vergrößert wurde. Der rot schattierte Bereich ist der Bereich, der den Abstand zwischen meinen verschiedenen Elementen darstellt. Das sind meine 60 Pixel Abstand zwischen verschiedenen Elementen. Jetzt habt ihr alle schon etwas über Polsterung und Rand gelernt , oder? Was ist, wenn ich die Polsterung von oben und unten hinzufügen möchte? Also, wie gehe ich dabei vor? Lassen Sie mich also den ersten Frame rückgängig machen. Im Moment wurde es auf horizontale Richtung eingestellt. Ändern wir das in die vertikale Richtung. Und du wirst sehen, dass es so aussieht. Okay, lassen Sie uns versuchen, ein rechteckiges Feld aus dem Rahmen herauszuziehen , sodass es nicht mehr Teil des Rahmens ist. Lassen Sie uns auch unser Textfeld außerhalb des Rahmens verschieben. Es ist also nicht mehr Teil des Rahmens. Sie können sehen, dass die Rahmengröße verringert wurde , seit wir unseren Rahmen auf automatisches Layout und in vertikaler Richtung eingestellt haben . Sie können auch den Abstand zwischen den Elementen sehen , sagen wir 60 Pixel. Jetzt haben Sie etwas über die Polsterung erfahren. Was ist, wenn ich eine Polsterung hinzufügen möchte, die der innere Abstand zwischen meinem Rahmen und der rechteckigen Box ist. Wenn ich möchte, dass das passiert, kann ich einfach hier meine vertikale Polsterung auswählen. Und ich kann das von 42 auf sagen wir 60 ändern. Sobald ich das getan habe, werden Sie sehen, dass der Abstand von oben unten vergrößert wurde. Lassen Sie mich dieses Textfeld direkt hierher verschieben. In Ordnung. Lass mich das hierher verschieben, oder? Jetzt können wir den Text sehen. Vielmehr betrug der Abstand zwischen diesem Teil und diesem Teil 60 Pixel. Was ist, wenn ich möchte, dass es die gleiche Größe hat? Das heißt von oben, unten, von links oder rechts. Schauen wir uns auch zuerst den horizontalen Weg an. Was ist, wenn ich nur die Polsterung von links und rechts manipulieren möchte , dann kann ich 100 wählen . Und Sie können sehen, dass diese Größe und dieser Bereich auf 100 Pixel erhöht wurde. Was ist, wenn ich das will? Ich möchte festlegen , dass all diese Richtungen die gleiche Polsterung haben sollen. Dann kann ich wählen , dass es auch 60 ist, und dieses auch 60 sein. Was ist, wenn ich den Polsterbereich nur von oben, von unten oder von links oder rechts manipulieren möchte den Polsterbereich nur von oben, von ? Kann ich die einzelnen Polster manipulieren? Ja, das kann ich natürlich. Wählen Sie einfach Ihren Rahmen aus, gehen Sie zu diesem automatischen Layout und wählen Sie diesen Teil aus, in dem unabhängige Polsterung steht. Sobald Sie dort drüben klicken, finden Sie die Polsterung von links, die Polsterung von oben, die Polsterung von rechts und die Polsterung von unten. Sie können also die Werte eingeben, die Sie in Ihrem Design sehen möchten. Eine weitere Sache, die Sie hier vielleicht sehen, ist, dass dies auf die Ausrichtung von oben links eingestellt ist. Was bedeutet das im Grunde? Nehmen wir an, ich erhöhe die Rahmengröße. Lassen Sie mich dieses rechteckige Feld und dieses Textfeld löschen. Ich werde diese beiden löschen , um zu zeigen, was das eigentlich bedeutet. Außerdem werde ich auch auf etwa 50 Prozent herauszoomen. Versuchen wir, unseren Rahmen zu vergrößern. Wie Sie sehen können, wenn ich meine Rahmengröße erhöhe, werden Sie immer noch sehen, dass mein Inhalt, nämlich das rechteckige Feld und mein Textfeld, immer noch im oberen linken Bereich bleibt. Es passt sich nicht entsprechend an , da die Ausrichtung auf oben links eingestellt wurde. Wenn ich möchte, dass meine, diese rechteckige Box und dieser Teil die Mittellinie sind, dann kann ich hier auswählen. Und jetzt können Sie sehen, dass es perfekt zur Mitte ausgerichtet ist. Wenn ich in der Position ganz rechts sein möchte, aber in Bezug auf die Y-Achse in der Mitte. Ich kann dies auswählen, wenn ich möchte, dass es in Bezug auf die Y-Achse oben, aber in Bezug auf die X-Achse mittig ausgerichtet ist. Ich kann das auswählen und du kannst einfach mit anderen Richtungen herumspielen , in denen du deine Elemente platzieren möchtest . Es geht also um dein automatisches Layout. Eine letzte Sache , die wir in dieser Vorlesung noch behandeln müssen , ist, dass wir in Figma auch ein verschachteltes Layout im automatischen Layout haben können . Was nun mit verschachteltem Autolayout im Grunde gemeint ist, ist der Begriff Auto-Layout innerhalb eines Auto-Layouts. Nehmen wir an, ich habe diesen Rahmen, okay? Ich habe diesen speziellen Rahmen. Ich kann diesen ersten Rahmen auswählen. Und ich kann die Maustaste gedrückt halten, ich sollte sagen, dass ich dieses Bild auswählen kann, ich kann die Umschalttaste und eine Taste gedrückt halten. Und jetzt können Sie sehen, dass wir auch einen Rahmen geformt haben , an dessen Innenseite wir einen Rahmen haben. Das ist also mein verschachteltes Auto-Layout. Was ich meine ist, sagen wir, ich erstelle eine rechteckige Box. Und was ist, wenn ich das in meinem verschachtelten Auto-Layout platzieren möchte ? Wenn ich das in mein zweites Bild ziehe, kannst du sehen, okay, ich ziehe es einfach heraus und platziere es in meinem zweiten Bild. Jetzt können Sie sehen, dass es jetzt Teil meines Rahmens , bis es jetzt Teil meines Frames zu Frame eins ist. Dieser Teil, in dem sich dieses Textfeld und das kleine rechteckige Feld befinden, ist mein erster Rahmen, das zweite Rechteck und der erste Rahmen sind beide der Teil meines Rahmens selbst das automatische Layout und die vertikale Richtung eingestellt ist . Wenn ich möchte, dass dies in horizontaler Richtung erfolgt, werden Sie sehen, dass es so aussieht. 20. (19) Prinzipien in Figma formatieren: Ordnung, lassen Sie uns mit den Formatierungsprinzipien in Figma fortfahren . Nun gibt es vier wichtige formative Prinzipien , die Sie beachten müssen. Die erste ist Gruppierung. Dann haben wir, Sie wissen schon, Framen, Kopieren und Duplizieren. Schauen wir uns also jeden einzelnen an. Nehmen wir zum Beispiel an, Sie haben einen Rahmen, sagen wir, von ungefähr dieser Größe. Und in diesem Rahmen werde ich einen erstellen, sagen wir einen Stern. Stimmt. Jetzt. Das ist eine Sternform. Lass mich die Seite verschieben. Und ich werde einen Text verfassen, der besagt , dass dies ein Stern ist. In Ordnung? Lassen Sie mich auch den Text vergrößern. Erhöhen wir also die Schriftgröße auf vielleicht etwa, sagen wir 24 Pixel. Versuchen wir es mit 32. Das sieht viel lesbarer aus. Das ist also ein Text. Lassen Sie uns auch einen weiteren Text erstellen , der etwa lauten würde, wie viele Seiten hat dieser Anfang 1.234,5. Also sagen wir, dass dieser Stern fünf Seiten hat, Phi-Seiten, und Schafe haben eine graue Farbe, ungefähr so. Und lassen Sie uns auch versuchen, die Schriftgröße auf etwa 20 Pixel zu verringern, oder? Ja, es sieht gut aus. Eine Sache noch, lass mich das neu anordnen. Ich sollte eher sagen, dass ich es richtig ausrichten sollte. Dieser auch. Hier drüben würde ich so etwas schreiben. In Ordnung, ja, das sieht cool aus. Wir haben also drei Dinge in unserem Rahmen. Zuerst haben wir unsere Form, wir haben diesen Text und dann haben wir die Beschreibung dieses Textes. Nun, wenn ich dieses Element und dieses Element zusammen gruppieren dieses Element und dieses Element muss, wie kann ich das tun? Ich kann einfach diesen auswählen. Ich kann meine Umschalttaste gedrückt halten und auf das andere Element klicken. Jetzt können wir im Ebenenfenster sehen , dass diese beiden Texte bisher ausgewählt wurden. Wenn ich sie gruppieren möchte, muss ich meine Strg- oder Befehlstaste gedrückt halten, wenn du das MacBook verwendest und G steuerst . Sobald du das getan hast, kannst du sehen, dass eine Gruppe gebildet wurde. In dieser Gruppe haben wir diese beiden Textelemente. Was ich jetzt mit Hilfe dieser Gruppe tun kann, ist, dass ich es einfach ziehen und platzieren kann , wo immer ich möchte. Dies hat eine ganze Gruppe gebildet. In Ordnung? Das ist also eine Gruppe. Wenn ich diese Form zusammen mit dieser Form gruppieren möchte, wäre das eine verschachtelte Gruppe. Weil es eine Gruppe innerhalb einer Gruppe sein könnte. Das kannst du also auch tun. Wählen Sie erneut einfach dieses Element aus, das unsere Sternform ist. Halten Sie die Umschalttaste gedrückt, wählen Sie Ihre andere Gruppe oder ein anderes Element aus, das Sie gruppieren möchten , und halten Sie Ihre Steuerungs- und G-Tasten gedrückt. Sobald Sie das getan haben, werden Sie feststellen, dass dies jetzt zur gesamten Gruppe geworden ist. Richtig? Nun, innerhalb dieser zweiten Gruppe, werden Sie feststellen, dass diese Gruppe zwei eine sternförmige und eine Gruppe hat, wenn sie selbst ist. Diese erste Gruppe enthält diese beiden Textelemente. So gruppierst du also verschiedene Elemente in deinem Rahmen oder in Figma. In Ordnung, so gruppiert man sie also. Lassen Sie uns nun verstehen, wie wir diese Elemente kopieren können. Nehmen wir an, ich möchte mein Gruppe-eins-Element kopieren, nicht die gesamte Gruppe zwei, sondern nur das Groupon-Element. Nehmen wir an, ich habe eine andere, eine andere Form, sagen wir, ein Polygon. Also werde ich ein Polygon erstellen. In Ordnung? Und ich will diese erste Gruppe. Also was ich tun werde, ich halte meine Strg-Taste gedrückt. Wenn Sie einen Mac verwenden, würden Sie Befehlstaste drücken und die C-Taste drücken, was die Kopiersteuerung ist, C ist Kopieren. Jetzt habe ich diese gesamte Gruppe kopiert, eine, die zwei Textelemente hat, oder? Zuerst der Name unserer Form und die Beschreibung unserer Form. ich das, wenn ich diesen Text unter meinem Polygon einfügen Wie mache ich das, wenn ich diesen Text unter meinem Polygon einfügen möchte? Ganz einfach, ich verwende Steuerung V. Obwohl ich nun die Taste V gedrückt habe, würden Sie im Ebenen-Panel sehen, dass eine weitere Gruppe namens Groupon mit diesem Text eine weitere Gruppe namens Groupon gebildet wurde. Richtig? Warum können wir unser Textelement, das wir gerade eingefügt haben, nicht sehen ? Das liegt daran, dass es genau das eingefügt hat. Wenn ich das also in die Länge ziehe, werden Sie feststellen, dass dies unsere Kopie unserer ersten Gruppe ist. Richtig? Jetzt kann ich diesen Text manipulieren, indem ich diesen Teil auswähle. Ich kann sagen, das ist ein Polygon. Dieses Polygon. Hat drei Seiten. Und die Form hat eine graue Farbe, oder? Also so formt man oder anders man kopiert verschiedene Elemente und fügt sie ein. Das ist also eine Möglichkeit, dies zu tun. Eine andere Möglichkeit ist, sagen wir lieber, ich sollte sagen, ich erstelle einen weiteren Rahmen. In Ordnung? Ich werde einen weiteren Rahmen erstellen. Lassen Sie mich eine Ellipse von ungefähr dieser Größe erstellen, oder? Geben wir der Füllung eine Farbe. Ich gebe das als Blaugrün, eine Art Aquamarinfarbe , hellblau, oder? Und ich möchte eine Kopie oder ein Duplikat dieses bestimmten Elements erstellen . Und wie werde ich das machen? Ich kann meine Control-Taste gedrückt halten und d verwenden, was für dupliziertes Steuerelement steht. D steht für Duplikat. Ein Duplikat wurde mit nur einem Tastenkürzel Strg D erstellt. Ich muss nicht die Steuerung C und die Steuerung V ausführen. Ich habe Strg D verwendet, um ein Duplikat meiner Form zu erstellen. Aber warum kann ich mein Duplikat nicht sehen? Mit einer einfachen Antwort? Es geht nur um meine erste Ellipse. Also, wenn ich mich hinziehe, wirst du sehen, dass wir ein Duplikat gebildet haben. Nochmals, wenn ich dieses Element einfüge oder wenn ich ein Duplikat dieses bestimmten Elements erstelle, dann werden Sie wieder feststellen, dass kein Duplikat gebildet wurde. Wenn ich wieder Control D mache, dann siehst du jetzt, dass eine Form, die sich zwar außerhalb eines Rahmens befindet , ich die Größe meines Rahmens vergrößern kann. Aber jetzt ist es im gleichen Raum, dem Raum zwischen dieser Ellipse, dieser Ellipse, was auch immer, welche Entfernung auch immer zurückgelegt wurde, die gleichen Abstände wurden auch hier beibehalten , auch ANOVA. Also, mit Hilfe von Steuerung D, passiert, dass Sie ein Duplikat Ihrer Elemente oder Ihrer Form erstellen. Und es geht auch darum , die Distanz aufrechtzuerhalten , die Sie zwischen verschiedenen Elementen haben , oder? Also kann ich, was ich tun kann, ist meinen Rahmen zu vergrößern. Stimmt. Jetzt werden Sie sehen, dass wir auch die vierte Ellipse haben. So erstellen Sie mit Hilfe von Control D, Befehl, Duplikate Ihrer Formen als Elemente. Okay, bis jetzt hast du gelernt, wie man Dinge gruppiert, wie man ein Duplikat erstellt, wie man Kopien erstellt. In Ordnung, versuchen wir zu sehen wie wir mit dem automatischen Layout umgehen können. Und obwohl wir uns mit dem automatischen Layout befasst haben, lassen Sie mich Ihnen auch zeigen, was passiert, wenn wir das automatische Layout für den Text festlegen, nicht für den Rahmen, sondern für die anderen beiden sind Text. Aber das sollte ich lieber sagen. Was passiert, wenn ich eine rechteckige Form erstelle? Okay, nehmen wir an, dass dies meine rechteckige Form ist. Und jetzt haben wir eine Ellipse in dieser rechteckigen Form. In Ordnung, lassen Sie mich diese rechteckige Form als rote Farbe angeben. Zum anderen hat diese Ellipse eine rote Farbe und ein Rechteck als Bürokragen. Ordnung, ich wähle mein Rechteck In Ordnung, ich wähle mein Rechteck aus und gebe es als einfarbige weiße Farbe an. In Ordnung? Nun, was passiert ist, wenn ich wirklich möchte, dass sich dieses Rechteck wie ein Rahmen verhält, dann kann ich es einfach auswählen. Und ich kann erstellen, was die Rahmenauswahl ist. Ich schaffe das. Und jetzt können Sie sehen, dass ein dritter Rahmen gebildet wurde. Rahmen eines unserer Polygone ein. Dieses Zeug. Lass mich dir zeigen, was ich damit meine? Also werde ich einfach ein bisschen herauszoomen, oder? Ja, sieht perfekt aus. Nun, du wirst sehen, das ist mein Rahmen zu dieser ganzen Sache, das ist mein Rahmen zu, das ist mein erster Rahmen. In Ordnung? In meinem dritten Rahmen habe ich also mein Rechteck. Im Moment verhält sich mein Rechteck also nicht wie ein Rahmen. Vielmehr befindet sich mein Rechteck jetzt innerhalb des Rahmens. Wenn ich auf diesen Rahmen klicke, siehst du, dass das Tangle jetzt Teil meines Rahmens ist, oder? Wenn ich diesen Rahmen verschiebe, werden Sie sehen, dass sich die Ellipse an ihrer ursprünglichen Position befindet. Es bewegt sich nicht mit dem Rahmen. Normalerweise passiert das, lassen Sie mich Ihnen zeigen, was ich damit meine? Wenn ich das sage, möchte ich diesen Rahmen verschieben, der unseren Stern als Polygon und all das Zeug hat. Wenn ich den gesamten Rahmen verschieben möchte, dann bewegt sich auch das Ganze, alle Elemente in diesem Rahmen . Sie können sehen, aber das passiert bei unserem dritten Bild nicht. Warum ist das so? Denn wenn Sie sich das Ebenen-Panel genau ansehen, werden Sie feststellen, dass die Ellipse nicht Teil unseres dritten Rahmens ist . Wenn ich möchte, dass diese Ellipse Teil unseres dritten Rahmens ist, muss ich sie in unseren dritten Rahmen bringen. Richtig? Wenn ich nun mein drittes Bild verschiebe, werden Sie sehen, wie sich auch die Ellipsen mitbewegen. Das ist also das Konzept des Framings. Bisher haben wir gelernt, wie man einrahmt, gruppiert, kopiert und dupliziert, oder? Lassen Sie uns das Letzte lernen, was wir für diesen Teil behandeln müssen. Lassen Sie mich einen Text hinzufügen. Also nehmen wir an, ich habe einen Text und er ist nicht Teil meines Rahmens. Es ist nur im Arbeitsbereich von Figma. Und ich möchte dem einen Rahmen hinzufügen. Wie kann ich das dann machen? Ich kann einfach ein automatisches Layout hinzufügen, oder? haben wir etwas über das automatische Layout gelernt In den vorherigen Vorlesungen haben wir etwas über das automatische Layout gelernt. Wenn Sie mehr darüber erfahren möchten, können Sie einfach diese Vorlesungen nachschlagen. Schon wieder. Schreiben wir einen einfachen Text besagt, dass dies einfach ist. Als Nächstes. In Ordnung. Jetzt können Sie sehen, obwohl ich diesen Text erstellt habe, Text ist weiß und hat keinen Hintergrund, da er nicht Teil eines Rahmens ist. Wenn ich diesen inneren Rahmen hinzufügen möchte, kann ich ihm einfach ein automatisches Layout hinzufügen, oder? Ihr seht also, ein Rahmen ist eher, ich sollte sagen, dass der Text jetzt Teil meines Rahmens ist. Du kannst es hier sehen. Was nun passiert, ist dass ich, da dies jetzt ein automatisches Layout ist, auch die Richtung des automatischen Layouts angeben kann. Ob ich möchte, dass es vertikale oder horizontale Richtung ist. Egal, ob ich möchte, dass dieses Element links oben oder in der Mitte ausgerichtet wird, das kann ich tun. Aber eine Sache, die wichtig ist , ist , dass dieser Rahmen keine Farbe hat. Also kann ich dem eine Füllung hinzufügen. Sobald ich das getan habe, werden Sie sehen eine weiße Farbe hinzugefügt wurde. Wenn ich jetzt meinen Text auswählen muss, kann ich diese Farbe auf Schwarz ändern. Jetzt können Sie unseren Textrahmen richtig sehen. Ich kann Text hinzufügen oder einige Änderungen daran vornehmen. So etwas wie, sagen wir, das ist ein Text. Ich kann einfach das Wort einfach entfernen. Und jetzt verringert sich auch die Rahmengröße, einfach weil dieser gesamte Text jetzt Teil meines Rahmens ist und er jetzt automatisch layoutet, oder? Also so machen wir es. Jetzt können Sie einer Form sogar ein automatisches Layout hinzufügen . Also lass uns sehen. Fügen Sie Ihrer Ellipse ein automatisches Layout hinzu, dann können Sie das sogar tun. Also kann ich diese gesamte Ellipse auswählen. Ich kann ein automatisches Layout hinzufügen. Und jetzt hat der Rahmen diese Ellipse darin. So funktionieren die Formatierungsprinzipien in Figma tatsächlich. 21. Figma Einschränkungen & Größenänderung: Ordnung, lassen Sie uns mit den Einschränkungen und der Größenänderung in Figma fortfahren . Was bedeuten nun eigentlich Einschränkungen? Einschränkungen sind also eine Möglichkeit, unsere Artikel an einer festen Position zu platzieren. Versuchen wir es also anhand eines Beispiels zu verstehen . Nehmen wir an, ich erstelle einen Rahmen von ungefähr dieser Größe. Und ich habe irgendwo hier oben links eine Ellipse angebracht. Und lassen Sie mich dieser speziellen Form eine Farbe geben , irgendwo wie hier. In Ordnung? Nun, was hier passiert, ist, dass, wenn ich die Größe meines Rahmens tatsächlich ändere, wenn ich ihn, weißt du, von der rechten Seite aus erweitere, die Position meiner bestimmten Ellipse nicht ändert. Wenn ich von dieser Seite aus erhöhe, ändert sich das. Warum ist das so? Warum hält es an seiner Position oben links fest? Denn wenn Sie im Bereich mit den Konstruktionseigenschaften genau hinschauen, werden Sie feststellen, dass die Einschränkungen standardmäßig auf links und oben gesetzt wurden. Links bedeutet das in horizontaler Richtung. Das heißt, egal, ob Sie versuchen, Ihren Rahmen zu dehnen, von rechts oder von links zusammendrücken . Ihre Form, die Element-Ellipse, die gerade ausgewählt wurde, hat immer versucht, ganz links zu bleiben . Und auf der Y-Achse bedeutet das, wenn ich versuche, meinen Rahmen von der oberen oder von der unteren Position aus zu dehnen oder zusammenzuziehen meinen Rahmen von der oberen oder von der unteren Position , versucht er, an der obersten Position zu bleiben. Lass mich dir zeigen, was ich damit meine. Wenn ich versuchen würde, meinen Rahmen von unten nach oben zusammenzuziehen, werden Sie feststellen , dass die Ellipse ihre Position nicht ändert . Aber wenn ich versuchen würde, die Position meines Rahmens von oben nach unten zu drücken , dann werden Sie sehen, dass meine Ellipse versucht , im obersten Teil meines Rahmens zu bleiben. Das ist also aufgrund von Einschränkungen möglich. Stimmt es? Jetzt. Lassen Sie uns versuchen, ein, Sie wissen schon, Website-Design nachzuahmen. Also was ich tun werde, ich werde einfach ein Hamburger-Symbol erstellen. Also das Hamburger-Symbol, weißt du, das Hamburger-Symbol besteht nur aus diesen drei Zeilen. Und sobald Sie dort klicken, sehen Sie Ihre Navigationsleiste. Das ist es also, was dein Hamburger-Icon im Grunde macht. Also werde ich eine Nachbildung davon machen. Diese Linie, Hamburger, hat im Grunde drei Zeilen, also machen wir das. Ja, so sieht mein Icon eigentlich aus. Okay, lass mich sie gruppieren. Ordnung, ich gruppiere sie mit Hilfe von Control G und lass mich das umbenennen in, weißt du, ich benenne es in Schinkenburger um. Hamburger. Und versuchen wir auch, einige Textelemente hinzuzufügen. Sagen wir nach Hause. Dann erstelle ich einen über. Also geben wir das etwa an, versuchen wir auch, unsere Rahmengröße ein wenig zu erhöhen , damit wir etwas Platz haben, um unseren Kontakt hinzuzufügen. Nehmen Sie auch mit uns Kontakt auf. Also kontaktiert. In Ordnung, versuchen wir, diese drei Navigationselemente zu gruppieren. Lassen Sie mich das auch umbenennen und sagen, dass Navigation, in Ordnung, Navy. In Ordnung. Versuchen wir, sie so zu bewegen , dass sie irgendwo so erscheinen, oder? Es sieht gut aus. Und lassen Sie uns versuchen, die Größe eines Rahmens so , dass er wie eine Handy- oder Tablet-Ansicht aussieht. Ordnung, versuchen wir, diese Position meines Hamburger-Symbols links oder oben zu korrigieren . Und wir setzen das so ein , dass es in horizontaler Richtung immer mit der äußersten rechten Seite schmeckt. Und auf der Y-Achse bleibt es ganz oben. Sobald ich das getan habe, was passiert, wenn ich versuche, meinen Rahmen zu vergrößern oder zu verkleinern ? Wenn ich also versuchen würde, die Größe meines Rahmens zu verkleinern, werden Sie sehen, dass dieses Navigationssymbol, diese Navigationsschaltflächen wie Ihre Startseite über Kontakt aussehen. Sie alle versuchen, auf der äußersten rechten Seite unseres Rahmens zu bleiben . Wenn ich versuche, den Rahmen von der äußersten linken Seite aus zu vergrößern, werden Sie sehen, dass das Hamburger-Symbol werden Sie sehen, dass das Hamburger-Symbol ganz links bleibt. Aber dieses Navigationselement, das Home about und Contact ist, ändert seine Position nicht weil es versucht, auf der äußersten rechten Seite zu bleiben. Wenn ich versuchen würde, von unten nach oben zu steigen du keine Veränderung sehen. Sie werden an ihrer Position bleiben. Aber wenn ich versuche, meinen Rahmen von oben zu verkleinern oder von oben zu vergrößern, dann wird er natürlich versuchen, an der obersten Position zu bleiben. Was passiert, wenn ich versuche, mein Hamburger-Symbol auszuwählen und wenn ich die Einschränkungen von links und von links auf, sagen wir in der Mitte, ändere links und von links auf, sagen wir in der Mitte, was passiert dann in diesem Fall? Wenn ich versuche, meinen Rahmen in horizontaler Richtung zu vergrößern , werden Sie sehen, dass das Hamburger-Symbol auch seine Position ändert. Denn jetzt versucht es, in Bezug auf die Erweiterung auf der äußersten linken Seite an der Position ganz in der Mitte zu bleiben Bezug auf die Erweiterung auf der äußersten linken Seite an der Position . Aber wenn ich das rückgängig mache und wenn ich meine Position oder Größe meines Rahmens vergrößere. den größten Teil oben oder unten betrachten, werden Sie sehen, dass sich nichts ändert. Es versucht, den größten Teil zu kleben, weil wir auf der Y-Achse ausgewählt haben, dass es am obersten Teil haften soll. Wenn ich das auf Mitte ändere, dann wirst du die Änderung jetzt sehen. Lassen Sie mich versuchen, es zu verringern. Dann wirst du das Hamburger-Symbol nicht sehen. Warum ist das so? Weil es versucht, in der Mittelposition zu bleiben. Wenn ich versuchen würde, zu erhöhen, würdest du sehen, dass es versucht, zu sinken. Das heißt, in Bezug auf die Y-Achse versucht mein Hamburger-Symbol, in der äußersten Mitte zu bleiben. Sie können also mit anderen Richtungen herumspielen, um zu sehen, wie unser Element reagieren würde. Also lass mich einfach rauszoomen und wo ist mein Frame? Also hier haben wir unseren Rahmen. In Ordnung? Ich hoffe also, dass die Grundlagen Ihrer Einschränkungen klar sind. Versuchen wir, die Größenänderung zu verstehen. Nun, die Größenänderung ist so ziemlich dasselbe wie Einschränkungen. Der einzige Unterschied besteht darin, dass Einschränkungen normalerweise auf die Elemente oder Elemente angewendet werden, die Teil des normalen Rahmenlayouts sind . Die Größenänderung dagegen gilt für Elemente oder Elemente , die zu einem Rahmen gehören , der in einem automatischen Layout-Format vorliegt. Okay, schauen wir uns an, wie wir die Größenänderung verwenden können. Also werde ich einen Rahmen erstellen. Ordnung, lassen Sie mich einen Rahmen von, sagen wir über diese Größe, zeichnen . Und ich werde ein automatisches Layout hinzufügen. Also füge ich ein automatisches Layout hinzu und füge ein Element hinzu, das ein Rechteck innerhalb dieses Rahmens ist. Da dieser Frame nun Teil unseres Frame-to-Frames für sich ist , handelt es sich um ein automatisches Layout. Sie können sich dieses spezielle Symbol ansehen. Dieses Symbol bedeutet, dass sich dieser Rahmen im automatischen Layout befindet, wohingegen dieses Symbol bedeutet, dass der Rahmen ungewöhnlich ausgeblendet ist. Also jetzt automatisches Layout, wir alle wissen, was dabei passiert. Es ändert im Grunde die Größe meines Rahmens in Bezug auf die Elemente in meinem Rahmen. Das haben wir bisher gemacht. Jetzt werden Sie sehen , dass ich zwar mein Rechteck in den Rahmen eingefügt habe mein Rechteck in den Rahmen eingefügt und die Größe meines Rahmens anfangs viel zu klein war im Vergleich zu dem, was er jetzt ist. Aber wenn ich mein Rechteck vergrößere, auch die Größe meines Rahmens zugenommen, aber wir können immer noch eine Lücke zwischen meinem Rechteck und meinem Rahmen sehen . Dies wird als Polsterung bezeichnet. Wir haben das auch schon früher behandelt. Aber was passiert, wenn ich versuche , die gesamte Polsterung an den Positionen zu entfernen? Das ist von der Position X, Y aus. Was passiert in diesem Fall? Ich wähle meinen Rahmen aus. Ich gehe zum Bereich mit den Designeigenschaften. Und hier sehen Sie die Polsterung aus horizontaler Position und aus vertikaler Position. Wenn ich also von zehn auf beispielsweise Null wechsle, x, y, und aus y-Richtung auch Null. Dann werden Sie sehen, dass das Rechteck keinen zusätzlichen Platz einnimmt. Oder besser gesagt, ich sollte sagen, dass sich im Rahmen keine Polsterung befindet. Und das Rechteck entspricht genau der Größe meines Rahmens, oder? Das ist also meine Art, die ich zu vertreten versuche. Was passiert nun in diesem Fall, wenn ich mein Rechteck auswähle, diese bestimmte Form? Sie werden die Einschränkungen nicht sehen. Art und Weise der Einschränkungen. Was wir früher gesehen haben. Wir können es momentan nicht sehen, weil wir das Ganze gerade in einem Auto-Layout-Format haben . Wir sollten anstelle von Einschränkungen die Größenänderung des Panels sehen , richtig. Also, wie können wir das sehen? Was sollten wir tun, um das zu tun? Was wir also tun können, ist innerhalb dieses Rechtecks, oder besser gesagt, in diesem Rahmen, Sie sehen jetzt das Rechteck im Autolayout-Teil genau hier drüben , wo mein Cursor schwebt. Sie werden sehen, dass das Rechteck jetzt an der Ausrichtung oben links festhält. Wenn ich es bis zur Mittelausrichtung schaffe und versuche, die Größe meines Rahmens zu vergrößern, werden Sie sehen, dass das Rechteck jetzt an der zentralen Position haftet, unabhängig davon, ob es in Bezug auf die X-Achse sein soll, ob es in Bezug auf die Y-Achse sein soll. Das Rechteck befindet sich in der äußersten Mitte. Dies ist möglich, weil wir im Bereich für das automatische Layout ausgewählt haben, dass sich unser Elementrechteck in der Mitte befinden und ausgerichtet sein soll , oder? Das haben wir bisher gemacht. Nun, wenn ich das will, möchte ich, dass es ein Element zur Größenänderung hat, wie können wir das dann machen? Ich kann also einfach dieses rechteckige Element im Bereich mit den Designeigenschaften auswählen . Das feste Ende, diese horizontalen, sind im Grunde meine horizontale Größenänderung. Das ist meine vertikale Größenänderung. Beide sind also standardmäßig auf fest eingestellt. Wenn ich von fest auf, sagen wir, vollen Behälter umstelle, was wird dann Ihrer Meinung nach in diesem Fall passieren? Moment bedeutet diese feste Breite im Grunde, dass unabhängig davon, ob ich meinen Rahmen vergrößere, ein gewisser Abstand zwischen meinem Rahmen und meinem Rechteck besteht . Wir haben zwar keine Polsterung verwendet , aber es wird trotzdem etwas Platz geben, da Rahmen momentan mein Rahmen momentan größer ist als die Größe meines Rechtecks. Und das Dreieck wurde auf fest gesetzt. Ändern der Größe. Es wurde gesagt, dass es auf eine feste Breite eingestellt werden soll. Und das Rechteck befindet sich jetzt in der Mitte, die in Bezug auf die Y- und X-Achse am stärksten ausgerichtet ist, oder? Wenn ich das nun so ändere, was bedeutet, dass dieses Rechteck gefüllt werden muss, dann heißt das Container. Was bedeutet Container im Grunde? Der Behälter wirkt wie eine Kiste, ein Ablagefach. Das ist es, was Container im Grunde bedeutet. Also rechteckig oder besser gesagt , der Rahmen verhält sich jetzt wie ein Container. Und jetzt sagen Sie, dass das Rechteck seine Größe entsprechend dem Behälter einnehmen sollte . Also egal wie groß mein Rahmen ist, er wird sich vergrößern und er wird sich ausdehnen. Das Element. Rechteck hier drüben nimmt die maximale Breite ein, die es erreichen kann, und es wird versuchen, die Ränder meiner drei zu berühren. Dies ist möglich , weil wir vollen Container in Bezug auf die horizontale Achse erstellt haben. Wenn ich das auch für die vertikale Achse mache, wird es das auch so machen. Im Moment haben wir also keine Polsterung. Unser Rechteck ist auch die Mittellinie. Und die Größe meines Rahmens kann auch abnehmen. Oder besser gesagt, die Größe meines Rahmens, nicht ein Wirrwarr, die Größe meines Rahmens kann abnehmen und trotzdem wird mein Rechteck kleiner. In Bezug darauf wird es die Größe meines Rahmens einnehmen. Es wird seine Größe ändern. Das Rechteck wird seine Größe in Bezug auf die Größe meines Rahmens ändern , weil wir die Größenänderung verwendet haben , damit es seinen Behälter füllen soll, oder? Wenn ich also expandiere, können Sie sehen, dass sich das Rechteck ebenfalls ausdehnt. Dies ist aufgrund der Größenänderung möglich. In Ordnung, schauen wir uns ein anderes Beispiel an. Was ist, wenn ich erstelle, oder besser gesagt, lass uns zu unserem ersten Frame zurückkehren wo wir ein normales Layout haben. In Ordnung, wir haben eine normale Ebene. Wir haben kein automatisches Layout für diesen Ruhm. Okay, wir haben ein Hamburger-Symbol, wir haben unsere Navigationstools, oder? Was ist, wenn ich in diesem bestimmten Rahmen einen Text hinzufügen möchte ? Nehmen wir an, ich möchte ein Textfeld hinzufügen. In Ordnung, ich habe es gezeichnet XBox. Ich werde mit der rechten Maustaste auf diesen Rahmen klicken. Ich gehe zu meinen Plugins. Und jetzt kannst du sehen, dass ich ein Plugin namens Lorem Ipsum habe. Wenn Sie dieses nicht haben, einfach nach weiteren Plug-ins und suchen Sie nach dem Lorem Ipsum-Plugin. Versuche das einfach auszuführen. Was dieses Plugin nun tut, ist im Grunde, dass es versucht, zufälligen Text zu generieren. Und jetzt werden wir aufgefordert, tatsächlich einige Textebenen auszuwählen. Also wähle ich diese Textebene aus. Und hier werden wir gefragt, ob Sie zufällig zehn Wörter und Sätze, zehn Zeichen, zehn Absätze, was auch immer Sie wollen, generieren möchten. Nehmen wir an, ich möchte zehn Sätze generieren, oder reduzieren wir auf fünf Sätze. Okay, ich werde das generieren. Und jetzt werdet ihr sehen, dass es tatsächlich so aussieht, aber wir wollen nicht, dass es so aussieht. Und außerdem möchte ich, dass das automatisch die Höhe annimmt. In Ordnung? Und ich möchte die Größe meines Textfeldes ändern. Also, wie würde ich das machen? Lassen Sie mich diese Position einfach verschieben. Und was ich tun kann, ist hier, ich kann die Größe meines Textfeldes reduzieren. Ordnung, lassen Sie uns versuchen, die Größe meines Textfeldes irgendwo so zu reduzieren . Jetzt sieht es cool aus. Und versuchen wir, das mit automatischer Höhe zu versehen. Automatisch ausblenden. Das heißt, egal wie viele verschiedene Wörter oder Zeichen ich in mein Textfeld einfüge, meine Größe wird auch entsprechend zunehmen oder abnehmen, oder? Das ist es, was es im Grunde bedeutet. Versuchen wir, das so auszurichten, dass dieses Textfeld, egal was ich mit meinem Freund mache, in der Mitte bleibt. Also werden wir versuchen, es in der Mitte auszurichten. In Ordnung. So hätte ich gerne mein Textfeld. Und innerhalb meiner Einschränkungen möchte ich, dass dies in Bezug auf die horizontale oder X-Achse und auch auf die Y-Achse in der zentralsten Position steht. Ich möchte, dass dies mittig ausgerichtet ist. Wenn ich nun versuche, meinen Rahmen zu manipulieren, sagen wir, wenn ich die Größe meines Rahmens verringere, werden Sie sehen, dass mein Textfeld immer noch in der Mitte bleibt, oder? Dieses Hamburger-Symbol sollte links und oben sein. Okay, wenn ich nun versuchen würde, meinen Rahmen zu vergrößern, werden Sie sehen, dass sich dieses Textfeld immer noch in der Mitte befindet, oder? Das haben wir mit Hilfe von Einschränkungen gemacht , oder? Also das war es auch schon. Lass mich zurück zu meinem Hamburger gehen. Ich hoffe, es ist oben links. Jep. Gehen wir zum nächsten Teil über, dem wir das Konzept der Größenänderung auf unseren Text ausrichten oder auf andere Weise anwenden. Nehmen wir an, ich füge hier etwas Text hinzu. Lassen Sie mich ein Textfeld zeichnen, oder besser gesagt, ich sollte sagen, anstatt zuerst ein leeres Textfeld zu erstellen, lassen Sie mich einfach hier mit der rechten Maustaste klicken. Generieren Sie einen zufälligen Text mit etwa fünf Sätzen zu diesem Feld. In Ordnung, generiert. Jetzt können Sie sehen, dass fünf Sätze generiert wurden. Und ich werde das gesamte nächste Feld auswählen und die automatische Höhe anwenden. In Ordnung, cool. Das ist es, was wir wollten. Versuchen wir, diesem bestimmten Textfeld ein automatisches Layout hinzuzufügen . Also werde ich diesem Textfeld ein automatisches Layout hinzufügen. Also einfach mit der rechten Maustaste klicken und ein automatisches Layout hinzufügen. Und Sie können sehen, dass diesen speziellen Texten ein automatisches Layout hinzugefügt wurde, was bedeutet, dass dieser dritte Rahmen jetzt Text enthält. Bild drei ist nicht sichtbar, aber Text ist jetzt Teil meines dritten Rahmens. In Ordnung? Jetzt kann ich diesem Rahmen drei geben, wenn diese Farbe hat. Versuchen wir also, eine Hintergrundfarbe von, sagen wir, Grau hinzuzufügen , oder? Eine grünliche Farbe. Graue Farbe. Und der Text wäre schwarz, gelb, oder? Versuchen wir, dem eine schwarze Farbe zu geben . Cool. Das ist es, was wir wollten. Was passiert nun in diesem Fall, wenn ich meinen Text auswähle, wird der Text zur Größenänderung angezeigt. Es hat Hub enthält, es hat einen vollen Container. Es hat momentan eine feste Breite, ausgewählt und in Bezug auf die Y-Achse enthält es. Was passiert nun, wenn ich versuche, meinen Rahmen zu verkleinern? Sie werden sehen, dass die Größe meines Rahmens verringert wird, aber der Text befindet sich jetzt außerhalb meines Rahmens. Das Textfeld passt seine Größe nicht an meine Rahmengröße an. Also, wie werden wir das ändern? Ich kann meinen Text auswählen und dasselbe tun, nämlich den vollen Container. Wenn ich nun versuche, die Größe meines Rahmens in Bezug auf die X-Achse zu verringern , werden Sie sehen, dass die Größe meines Textfeldes auch an Höhe zunimmt , da es jetzt versucht, in den Container zu passen, oder? Das wollten wir. So können wir das machen und Sachen binden. Was ist nun, wenn ich diesen ganzen Frame drei Insight hinzufüge, einen weiteren Frame, der kein automatisches Layout ist, was in diesem Fall passiert, lassen Sie uns versuchen, einen Rahmen von etwa dieser Größe zu erstellen. Lassen Sie uns diesen dritten Frame zu meinem Frame hinzufügen , um zu erfahren, was in diesem Fall passieren würde. Was würde passieren? Lass uns versuchen, das herauszufinden. Lassen Sie mich es also irgendwo hier ausrichten. Ich werde diesen dritten Rahmen auswählen. Eine Sache, die wir hier beachten sollten, ist dass, sobald wir einen dritten Frame hinzugefügt haben , der wiederum ein automatisches Layout innerhalb eines anderen Frames ist, was normalerweise kein automatisches Layout ist, dann sehen wir C-Einschränkungen oder wir sehen die Größenänderung. Nun, die Antwort ist, wir werden beide sehen. Wie Sie sehen können, sobald ich meinen dritten Rahmen ausgewählt habe, erhalte ich Optionen zur Größenänderung, die entweder eine feste Breite oder eine feste Höhe enthält. Und auf der Y-Achse werde ich auch diese beiden Optionen sehen, und ich werde hier auch Einschränkungen sehen. Moment wird also standardmäßig ganz links in Position ganz links in Bezug auf die X-Achse genannt. Und es ist auf oberste Position eingestellt, oberste Einschränkung in Bezug auf die Y-Achse. Sie können also einfach mit verschiedenen Richtungen herumspielen , um zu sehen, wie es funktionieren würde und wie es für Ihr Design aussehen würde. Das war also alles von meiner Seite für diesen speziellen Vortrag. Einschränkungen und Größenänderung sind ein sehr wichtiges Konzept, das es im Webdesign oder App-Design von Figma zu lernen gilt, einfach weil wir wissen sollten, wie unser Design auf diese bestimmte Größe unseres Geräts reagieren würde, wenn wir versuchen , ansprechende Designs zu erstellen , das heißt, um tatsächlich auszusehen oder ein entwickeltes Design für verschiedene Geräte oder ein entwickeltes Design zu entwickeln. 22. Figma Styles und Komponenten: In Ordnung, lassen Sie uns mit Stilen und Komponenten fortfahren. Jetzt, wann immer wir versuchen, eine Website oder eine Webanwendung zu entwickeln, oder es könnte sich um eine andere Anwendung handeln. Wir sollten einige Stile und Komponenten für unser Design erstellen . Warum brauchen wir sie jetzt? Versuchen wir zuerst, sie zu verstehen. Um ein Beispiel zu geben, können Sie sich einfach meine eigene Website ansehen. Ich habe meine eigene Website mit Technologien wie Reactant, Tailwind, CSS erstellt . Also hier drüben, wenn Sie es aus der Designperspektive sehen können, können Sie sehen, dass der Text schwarz ist. Der Hintergrund oder, Sie wissen schon, das Haupthintergrund-Highlight dabei ist keine rein weiße Farbe. Es ist irgendwo im Grauton, selbst in der oberen Navigationsleiste. Sie werden sehen, dass dieses Grau einen gewissen Farbton hat, oder? Es ist nicht ganz dunkel, es ist nicht ganz hell. Es hat eine gewisse Grauschattierung. Wenn wir versuchen, den Mauszeiger über die Navigationstasten zu bewegen , z. B. bei Ihren Startkursen , kontaktieren Sie mich. Sie werden dort eine blaue Farbe sehen , wenn wir den Mauszeiger darüber bewegen. Und der gleiche Teller wird hier angewendet. Wenn Sie nach unten scrollen, werden Sie sehen, dass diese Karten, wie die Technologie, die ich verwende, das HTML, CSS Bootstrap React, JavaScript, NodeJS, Java, all diese Dinge. All diese Karten haben einige Schattenseiten. Es hat einen gewissen Grenzradius. Es hat einen festen Stil oder eine feste Größe seiner Breite und Höhe , die auf der gesamten Website einheitlich war . Und an der Unterseite meines Fußes. Stimmt. Sie können unten auf meiner Webseite sehen, was meine Fußzeile ist, oder über Sie können meine sozialen Links sehen. Wenn ich den Mauszeiger darüber bewegen würde, werden Sie die Symbolfarben sehen, die Farben der Markensymbole. Also z.B. dass Twitter eine blaue Farbe hat, rasterförmig, orange Farbe hat. Wenn Sie also den Mauszeiger über diese Farben bewegen, bewegen Sie den Mauszeiger über diese Artikel, dann werden die Markenfarben angezeigt. Anfänglich. Sie werden keine Farben sehen , da ich diese Konsistenz meines Designs auf der gesamten Website beibehalten muss. Das haben wir also getan. Okay, wann immer wir versuchen, ein Design für unsere Website zu entwickeln, in erster Linie versuchen, Stile, Stile und Typografiestile zu erstellen . Welche Farben werden wir also auf unserer gesamten Website verwenden? Was wird die Grundfarbe sein? Was wird meine Sekundärfarbe sein? Was benötige ich für eine Markenfarbe mit Farbverlauf? Brauche ich sie? Wenn ja, dann sicher. Machen Sie weiter und schließen Sie sie auch ein. Was ist dann mit den Textfarben oder vielleicht Schatten oder, du weißt schon, einigen Hintergrundhervorhebungen. Diese Farben sind also auch wichtig. Dann kommt der Teil der Topographie. Das bedeutet, welche Textgröße Sie für den Titel Ihrer Website wünschen. Welche Art von Schriften, Schriftfamilie möchtest du verwenden? Welche Art von Schriftstärke Sie verwenden möchten. Möchten Sie fett verwenden. Weiter so, halbfett, neu, normal. Was willst du? Wie groß soll der Buchstabenabstand sein? Wie hoch soll die Zeilenhöhe sein? All diese Dinge würden in einem formellen Stil gestaltet werden. Der Vorteil der Verwendung von Stilen besteht nun darin, dass Sie, sobald Sie einen Stil erstellt haben, mehrere Kopien dieser Kacheln in anderen Komponenten oder anderen Stilen Ihrer Website erstellen können dieser Kacheln in . Was ich damit meine, ist, sagen wir, auf ihrer Home-Website, Ihrer Homepage, Sie haben das Center-Design erstellt. Auf der Seite „Über uns“ müssten Sie diese Konsistenz des Designs tatsächlich beibehalten. Wir versuchen also, manuell zu versuchen , diesen Hex-Code für Ihre Farbe einzufügen. Versuche, wirklich jedes einzelne Detail zu machen. Nein. Warum fügen Sie nicht einfach das Styling , das Sie angewendet haben, in die Homepage ein. Es wird dir das Leben leichter machen, oder? Das ist es also, was Styling macht. Nehmen wir an, nachdem Sie das gesamte Design entwickelt haben, zeigen Sie es Ihrem Kunden. Kunden sind das, weißt du was? Ich finde diese Farbe nicht so ansprechend. Ich möchte die Tastenfarben von, sagen wir, Rosa, Blaugrün ändern . Also, wenn du versuchst, auf jede Webseite zu gehen, wie Homepage über bezahlte Kontaktseite und finde alle Schaltflächen und dann manuell versuchst, die Farben von Rosa zu ändern, um es zu wissen. Wenn ich den Stil habe, den ich auf alle Knöpfe angewendet habe, kann ich einfach die Farbe meines Stils ändern. Und die restlichen Änderungen werden auf alle Schaltflächen auf meiner Website angewendet , oder? Das ist also der Vorteil meines Stils. Kompetenz hingegen ist so, sagen wir, ich möchte einen Button erstellen, oder sagen wir, ein Auto wie dieses, oder? Ein Auto ist einfach eine Visitenkarte, okay? Oder solche Icons in dieser Größe. Dann, sobald ich ein Auto mit diesem bestimmten Gewicht, einer bestimmten Höhe, einem bestimmten Grenzradius und einem bestimmten Text in der Mitte erstellt habe bestimmten Höhe, einem bestimmten Grenzradius . Wir müssen die Höhe und Breite definieren, ab der der Text platziert werden soll. Wollen wir, dass es mittig ausgerichtet ist, links und rechts ausgerichtet ist, all diese Dinge würden in Form einer Komponente gebildet. Dann können Sie die Kompetenz auf anderen Webseiten oder auf dieser Webseite selbst replizieren , jedoch in einem anderen Abstand. Das ist also der Vorteil Ihrer Stile und Komponenten. Lassen Sie uns versuchen, uns anzusehen, wie wir tatsächlich unsere eigene oder eine andere Website entwickeln können . Wie entwickeln wir unsere eigenen Stile und Kompetenzen für unser Design-Layout, oder? Zuallererst brauchen wir eine Marke. Logo. Also habe ich zufällig dieses spezielle Markenlogo von Google ausgewählt . Wie Sie sehen können, hat dieses Logo zwei Farben. Einer ist lila oder dunkelviolett, violett, und der zweite ist rosa oder man kann sagen, ein burgunderfarbener Farbton, oder? So kann ich diese beiden Farben auswählen und sie in meinem Stil verwenden. Zuallererst müssen Sie also tatsächlich eine Chrome-Erweiterung in Ihrem Browser installieren, und das ist der Farbwähler. Sie können also einfach nach der Chrome-Erweiterung für den Farbwähler suchen und sie herunterladen und in Ihrem Chrome installieren, oder? Sobald Sie das getan haben, sehen Sie möglicherweise, dass dies die Popup-Benachrichtigung ist , die Sie möglicherweise darüber informiert, dass Dateizugriff erforderlich ist. Das heißt Ihre persönliche Datei, wie dieses spezielle Bild, das ich in meinen Ordner heruntergeladen und mit Chrome geöffnet habe. Normalerweise passiert also , dass jedes der Bilder in unserem System mit dem ImageViewer geöffnet wird, wie bei einem Fotobetrachter, oder ich weiß nicht, was auf dem Mac passiert. Wenn Sie das also nicht tun möchten, können Sie es einfach mit Chrome öffnen, sodass Sie mit der Color Picker-Erweiterung den Farbhexadecodewert für diesen violetten und burgunderroten Farbton auswählen können der Color Picker-Erweiterung den Farbhexadecodewert für diesen violetten und burgunderroten Farbton auswählen den Farbhexadecodewert . Jetzt können Sie zu den Einstellungen gehen und nach unten scrollen und dies auswählen, um den Zugriff auf Datei-URLs zu ermöglichen. Sobald Sie das aktiviert haben, können Sie diesen Teil schließen Sie können zu diesem Logo zurückkehren, auf diese Chrome-Erweiterung klicken, um sie zu spezifizieren, und zu der Farbe ziehen in der Sie die Farbe auswählen möchten. Irgendwo an diesem Punkt möchte ich also den Hex-Wert kopieren. Also werde ich einfach meinen Hex-Wert mit Hilfe von Steuerelementen kopieren . Hier können Sie einfach auf diese Schaltfläche klicken , um Ihren gesamten X-Wert zu kopieren. Geh zurück zu deinem Figma. Ich werde einen Rahmen von, sagen wir, Desktop-Größe erstellen . In Ordnung? Und wenn ich das getan habe, was ich tun werde, werde ich eine Ellipsenform mit 160 Pixeln Breite und 160 Pixeln Höhe erstellen 160 Pixeln Breite . Sobald ich das getan habe, füge ich Farbe hinzu, was ein Hexadezimalwert ist. Lassen Sie mich also hinzufügen und stellen Sie sicher, dass Sie das Pfund- oder das Hashtag-Symbol vor Ihrem Hex-Wert entfernen das Pfund- oder das Hashtag-Symbol und die Eingabetaste drücken. Das ist jetzt meine Grundfarbe. Wenn ich das also in Form eines Stils speichern möchte, kannst du dieses Symbol neben deinem Film oder deinem Plus-Symbol sehen . Sie können also diese spezielle Schaltfläche mit vier Punkten sehen , was Stil ist. Also geh einfach da rüber, klicke auf dieses Plus, um deinen eigenen Stil zu kreieren und diesem Ding einen Namen zu geben. Also werde ich das einfach als primär angeben. In Ordnung, und ich werde das als Create Style wählen. Jetzt werde ich eine Nachbildung dieser Ellipse anfertigen und jetzt werde ich die Differenzierung der gesamten Farbe verwenden . Was ist nun, wenn Ihr Markenlogo keine andere Farbe hat? Es hat nur eine Farbe, wie werden Sie dann tatsächlich eine Sekundärfarbe für Ihr Design erstellen ? Sie können Adobe Color verwenden. Wir haben das schon früher benutzt, oder? Sie können also einfach zu Adobe Color gehen und einen Schrägstrich erstellen. Da drüben. Du findest das analog, geh da rüber und füge die Grundfarbe ein, die du verwenden möchtest. Also füge ich einfach meine Grundfarbe ein. Ich drücke die Eingabetaste und du wirst verschiedene Farben davon sehen, oder? Sie werden verschiedene Schattierungen davon sehen. Im Moment zeigt es uns also diese Farbe, zeigt andere Versionen davon, keine Burgunder-Versionen. Wenn Sie sich für einfarbig oder dreifarbig, komplementär, splitten, komplementär oder doppelspaltig entscheiden oder dreifarbig, komplementär, splitten, , finden Sie das Farbschema, das zu Ihrem Design passt. Es liegt also an Ihrem Design, was Sie in Ihrem Design verwenden möchten. In Ordnung? Da dieses spezielle Logo jedoch zwei verschiedene Farben hat und zum Design passt, werde ich diese Burgunderfarbe und die violette Farbe wählen. Gehen Sie also noch einmal zu Ihrem Farbwähler und holen Sie ab. Und manchmal funktioniert diese Erweiterung möglicherweise nicht. In diesem Fall können Sie einfach zu Ihrer Erweiterung zurückkehren oder auf diese Erweiterung klicken. Also kann ich auf diese drei Punkte klicken und zu Erweiterung verwalten gehen. Klicken Sie auf diesen Zugriff auf, Ich habe Zugriff auf Datei-URLs. Aktualisieren Sie dies, gehen Sie zurück, aktualisieren Sie, wählen Sie Einstellungen. Versuchen Sie erneut, dies umzuschalten, gehen Sie zurück. Und jetzt können Sie diese burgunderfarbene Farbe wählen. Lassen Sie uns diesen Hex-Wert kopieren hier drüben steht. Wir werden das einfügen. Und zuallererst muss ich das wirklich trennen oder mein Styling trennen. Was normalerweise passiert, ist, dass Sie, sagen wir oder mehrere Komponenten erstellen, die nicht kompetent sind, aber sagen wir, eine Form oder ein Element oder irgendeinen Teil des Elements. Und du hast etwas Styling darauf geklebt und ein Duplikat dieses Artikels erstellt. Jetzt hat das Duplikat genau das gleiche Design wie der ursprüngliche Artikel. Wenn Sie tatsächlich ein anderes Styling anwenden oder aus dem duplizierten Element einen anderen Stil erstellen möchten , müssen Sie zuerst den Stil daraus abgleichen. Du kannst also diesen unverlinkten Button oder ein Icon sehen , indem du dann einfach drüber klickst. Und jetzt können Sie zum Füllen, Einfügen und zum Farbhexadezimalcode zurückkehren , dieses Aschsymbol entfernen, auf Okay klicken und das Styling erstellen, dem ich den Titel als sekundär geben würde. Klicken Sie auf Stil erstellen und Sekundärfarbe wurde ebenfalls gebildet. Außerdem wird versucht, eine weitere Ellipse mit einem Farbverlauf zu erstellen . Versuchen wir also, die Verknüpfung aufzuheben. In Ordnung? Was ich jetzt anstelle von Solid machen werde. Mache einen linearen, einen linearen Gradienten. Und jetzt wird diese Farbe Burgunderrot sein, und das wird meine sein, diese Farbe, diese Farbe. Also lass mich diese Farbe kopieren. Also werde ich einfach hier klicken. Was ist der Farbwert? Lassen Sie mich den Farbwert auswählen. Ich wähle den Farbwert aus und mache ihn rückgängig, sodass er dieses primäre Styling hat. Lass uns hierher gehen. Wählen Sie Linear, gehen Sie zurück, fügen Sie den Wert ein und drücken Sie die Eingabetaste. Ich bin mir nicht sicher, warum die grüne Farbe gewählt wurde? Idealerweise sollte es diese Farbe wählen, oder? Versuchen wir also, das auszuwählen. Und ja, das haben wir. Und ich möchte, dass das horizontal erfolgt. Das heißt, von Burgund bis Violett, ich möchte, dass die Form von links nach rechts geht , ungefähr so. Also das wollen wir und das sieht cool aus. Das ist also mein Markengradient. Ich kann dem Ding ein neues Styling geben. Geben wir also den Markengradienten an. In Ordnung, lass uns Stil kreieren. Sie können also sehen, dass wir drei verschiedene Farbstile kreiert haben . Nun, was ist mit unserer nächsten Farbe? Also lasst uns die Verknüpfung aufheben. Geben wir eine dunkelschwarze Farbe. Irgendwo, ungefähr so. Machen wir eine Kopie davon. Geben wir das als ein anderes an. Versuchen wir, die Transparenz von 100% oder sagen wir 80 oder anderen, sagen wir 75%, zu ändern . In Ordnung, dann von 75 auf sagen wir 50%. Also ändern wir das auf 50 Prozent, dann auf 50-25. Geben wir das als 25% an. Dann von 25 auf, sagen wir mal 10%. Dann von zehn auf, sagen wir, 5%. Wir haben diese verschiedenen Stile kreiert. Versuchen wir, sie als Stil zu speichern. Also gebe ich das als schwarzen Hundert an. In Ordnung, schwarz und rot. Dieser war schwarz 75. Lassen Sie uns also einen Stil namens Black 75 erstellen. Dieser hat schwarze 50. Dieser war wie 50, dieser war schwarz 25. Dieser hat schwarze Zehn. Und dieser hat Black Phi. Okay, das sind also verschiedene Stylings, die wir bisher kreiert haben. Stellen Sie sich nun vor, ich versuche , meine Website zu erstellen. Also würde ich noch einmal einen Desktop-Rahmen erstellen. Nehmen wir an, ich nehme hier die Primärfarbe, da ich die Dokumentenfarbe oder die lokalen Farben wählen kann . Von Dokumentarfilmen bis hin zu lokalen Filmen. Und jetzt haben Sie die Möglichkeit, aus einer zu wählen. Du willst also deine Primärfarbe, deine Sekundärfarbe. Versuchen wir, unsere Grundfarbe auszuwählen, oder? Ich habe die Grundfarbe genommen. Nehmen wir an, ich habe welche, sagen wir, lassen Sie uns eine rechteckige Box bilden. Fügen wir eine Farbe hinzu, die die Sekundärfarbe sein wird. Fügen wir diesem Ding auch eine Schaltfläche hinzu. Also fügen wir hier eine Schaltfläche hinzu. Nehmen wir an, mit einem Gradienten. Mein Gradient. Haben wir nicht einen Markengradienten im Gradientenstil erstellt? Ja, haben wir. Und warum kann ich es nicht hier sehen? Gehen wir zurück. Wählen Sie Füllen. Oder besser gesagt, wähle deinen Markengradienten aus, oder? Das sieht cool aus und sieht nicht so cool aus, Beispiel wenn man bedenkt, dass der Hintergrund lila ist. Versuchen wir also, das Ganze so zu manipulieren , dass wir die gewünschte Ausgabe erhalten. Oder besser gesagt, ich sollte auswählen, weißt du, Lass uns eine Schaltfläche erstellen, eine Schaltfläche. Tastenbreite, sagen wir etwa einen Radius von 20. In Ordnung, fügen wir etwas Text hinzu. Nehmen wir an, ich möchte, dass dieser Button schwarz ist, wie 25, schwarz 50, schwarz 75. Sind das 75 Jahre? Etwa 75, irgendwo hier drüben. Jep. Und ich kann dem Ding auch etwas Text hinzufügen. Lassen Sie mich als Nächstes eine Schaltfläche hinzufügen. In Ordnung. Nun, diesen Schaltflächentext möchte ich als 32 Pixel angeben. Zwei Pixel. Ich möchte, dass das etwas gewagt ist. Habe eine Schriftfamilie von Roboto mit dem Mittellinientext. Ich möchte, dass das eine automatische Höhe hat. Ich möchte, dass das einen gewissen Buchstabenabstand hat. Nehmen wir also an, der Gitterabstand beträgt etwa fünf, 5% automatische Höhe. Okay, wir belassen das als automatische Höhe. Und geben wir das auch als Auto-Bit an. In Ordnung. Das sieht ziemlich gut aus. Das ist also mein Button. Ich gestalte solche Design-Sachen. In Ordnung? Nun, wenn ich eine Button-Komponente erstellen möchte, eine Komponente wie ein Layout, wie kann ich das machen? Wenn ich möchte, dass das auf Knopfdruck geschieht. Damit ich sie verwenden kann, egal wie viele Schaltflächen ich in meinem Website-Design habe. Und was kann ich in diesem Fall tun? Ich kann das Ganze einfach ziehen. Und oben in der Werkzeugleiste sehen Sie dieses spezielle Symbol, dem Sie Ihre Komponente erstellen können. Und du kannst sogar die Tastenkombination sehen, die ganz oder teilweise die Strg- oder Befehlstaste auf deinem Mac, die Alt-Taste in deinem Windows oder die Optionen auf deinem Mac und die K-Taste ist Alt-Taste in deinem Windows . Sobald Sie das getan haben, wird eine Komponente erstellt. In Ordnung? Eine Komponente wurde erstellt. Jetzt ist diese Komponente tatsächlich eine Masterkomponente, oder Sie können sagen, dass dies ein übergeordnetes Element und kein untergeordnetes Element ist . Was meine ich jetzt mit Eltern und Kind? Lass es mich dir zeigen. Das ist von meinen Eltern, oder? Wenn ich genau dieselbe Komponente auf anderen Webseiten oder in anderen Frames verwenden möchte , oder sagen wir in diesem Frame selbst. Aber ich möchte das machen, ich möchte diese Komponente nutzen . Wie mache ich das dann? Nun, ich benutze das Steuerelement D oder alt, halte meine Orderoptionstaste gedrückt und verwende meine Maus, um ein Duplikat davon zu erstellen. Nein, ich werde das Vermögen verwenden. Ich kann einfach im Ebenenbedienfeld zu meinen Assets gehen. Ich werde nach lokalen Komponenten suchen. Ich werde auch den Desktop und den Button-Text finden. Ich kann es einfach ziehen und hier platzieren. Nun, wenn, sagen wir aus irgendeinem Grund mein Kunde herausfindet, dass mir dieser Button-Text nicht gefällt. Ich möchte, dass der Text auf dieser Schaltfläche eine andere Farbe hat. Wie mache ich das dann? Nehmen wir an, mein Design enthält Hunderte von Schaltflächen. Und der Kunde sagt , dass ich die Farbe dieser Schaltfläche ändern möchte . In allen Schaltflächen möchte ich die Farbe in meiner Schaltfläche ändern. Und diese Änderung sollte für alle Schaltflächen in meinem Design gelten. Also, wie würde ich das machen? Ich wähle einfach mein Master- oder Elternelement aus. Ich werde zu dieser Farbe zurückkehren. Ich ändere das auf Gradient. Und jetzt werden Sie sehen, dass hier eine Gradienten-Schaltfläche gebildet wurde. Du kannst sehen, dass das mein Kind ist. Wenn ich Änderungen am übergeordneten Element vornehme, werden alle Elemente dieselben Änderungen haben oder besser gesagt, sie spiegeln sie wider. Stimmt es? Ich hoffe, das ist euch allen klar. Was ist, wenn ich eine SMS schreiben oder, du weißt schon, etwas technisches Styling machen möchte ? Also, was werde ich in diesem Fall tun? Nehmen wir an, ich erstelle einen Titeltext. Ordnung, ich werde das Ganze auswählen. Als Nächstes. Ich werde die Größe auf, sagen wir, 40 oder 40 sind vielleicht nicht genug, dann 48. Okay, ich möchte, dass das, sagen wir mal Josephine Sans, halb fett ist. Das sieht cool aus. Und das will ich für meinen Titel. Also kann ich den gesamten Text auswählen . Ich kann diesen wählen, um einen Stil für meinen Text zu erstellen. Ich kann hinzufügen. Und ich kann das Titel nennen. Ich kann einen erstellen. Eine andere Möglichkeit besteht darin, auch einen Fließtext zu erstellen. Ich kann also einfach Fließtext sagen. Was nun normalerweise passiert , ist, dass der Fließtext normalerweise eine kleine Schriftgröße hat, oder? Es hat eine kleine Schriftgröße. Wo ist meine andere? Nun, für Ihren Fließtext, Ihnen die Optionen für die Schriftfamilie möglicherweise nicht angezeigt. den Buchstabenabstand usw. werden im Fenster mit den Entwurfseigenschaften nicht angezeigt Optionen für den Buchstabenabstand usw. werden im Fenster mit den Entwurfseigenschaften nicht angezeigt. Einfach, weil Figma im Moment davon ausgegangen ist, dass, da wir ein weiteres Textfeld erstellt haben, das gleiche Design wie unser Titeltext enthalten würde. Also nochmal, jetzt müssen Sie den Stil, den er zuvor enthielt, trennen oder trennen. Und jetzt können Sie das Design ändern. Was ich also tun kann, ich kann einfach die Größe dieses Textes reduzieren . Lassen Sie mich einfach Unlink auswählen und das Styling auf 24 ändern, von Semi Bowl auf, sagen wir, normal oder normal. Und lassen Sie uns das als linksbündig belassen. Das habe ich also richtig gemacht. Lass uns wieder hierher gehen. Nehmen wir an, ich möchte das umbenennen, um mehr zu lesen. Lesen Sie mehr. Okay, nehmen wir an, bei diesem bestimmten Rahmen im Ebenenfenster kann ich meinen Desktop für den Rahmen mit der Farbe auswählen, das heißt, ich kann die Farbe auswählen. Ich kann wählen, sagen wir schwarz 25. 25. Möglicherweise sehen Sie diese schwarze 25 nicht, nur weil der Arbeitsbereich meiner Figma im Dunkelmodus befindet. Sie werden die Änderungen also nicht sehen. Wenn ich also zu etwas wie dem schwarzen Phi wechseln möchte, sollte ich idealerweise schauen, weil schwarzes Phi eine helle Farbe hat. Lass uns sehen. Sehen wir? Nein, wir sehen Lag Phi nicht in schwarzer Farbe, oder? Also muss ich das Chrome- und Chrome-Erscheinungsbild vom dunklen in den hellen Modus ändern . Also lass mich das machen. Nun, das Thema meiner Figma zu ändern, hat nicht geholfen. Im Grunde müssen Sie einfach auf den Arbeitsbereich klicken, zum Hintergrund gehen und die Farbe in Grau ändern. Übrigens, wenn Sie Ihr Figma vom hellen in den dunklen Modus oder vielleicht vom dunklen in den hellen Modus oder umgekehrt ändern Ihr Figma vom hellen in den dunklen Modus möchten. Gehen Sie einfach zu diesem Figma-Symbol, klicken Sie in der Dropdownliste auf Preferences Team und wählen Sie einfach, was Sie möchten , hell, dunkel oder Systemdesign. Das habe ich also getan. Und jetzt können Sie sehen, dass auch dieser Frame-Desktop eine graue Farbe hat, oder? Lassen Sie mich nur ein wenig hineinzoomen damit Sie es richtig sehen können. Wählen wir also unseren Desktop von Desktop zu Frame aus. Auch hier wählen wir diesen Desktop aus, um ihn zu färben, da er gerade Black Phi ist, oder? Wir können Schwarz 50 wählen. Ja, 50 sieht cool aus. Was ist mit Schwarz 25. 25. Es sieht also gut aus, aber 50 sieht viel besser aus. Das ist also mein gesamter Rahmen. Okay, nehmen wir an, ich spreche von dieser Komponente. Ich habe als Nächstes dieses spezielle. In Ordnung, lass mich etwas Text in dieses Zeug einfügen. In Ordnung? Das werde ich tun. Was ich tun werde, ist, dass ich etwas Text einfüge. Nehmen wir an, ich schreibe diesen Begriff. Full-Stack, Full-Stack-Webentwicklung. Full-Stack-Webentwicklung. Und ich kann dem Styling hinzufügen. Also, wo ist meine SMS? Ich kann das Styling hinzufügen. Ich kann also Titel verwenden, ich kann Titel verwenden und ich kann einfach ziehen, sodass er irgendwo hier drüben passt. Wo ist mein Körper? Das ist mein Fließtext. Lass mich das zu unserem neuen Textil hinzufügen und wir fügen Körper hinzu. In Ordnung, lass uns Stil kreieren. In Ordnung? Und lassen Sie uns hier ein Styling hinzufügen. Wir geben das als zufälligen Text. Also dafür, was ich tun werde, Plugins Lorem Ipsum. Okay, lassen Sie uns ein Textfeld erstellen. Generieren Sie Phi-Sätze, das würde reichen. Jetzt wurde automatisch davon ausgegangen, dass es den Körperstil verwenden würde. Warum ist das so? Weil ich diesen Körperstil zuvor kreiert habe. Also hat es jetzt den Körperstil verwendet. So benutzt es dieses Anti-Zeug also tatsächlich. Wenn Sie diese beiden gesamten Dinge replizieren möchten, können Sie das tun. Du kannst es hier benutzen, oder? Du kannst es benutzen. Wenn Sie Ihren Rahmen vergrößern möchten, können Sie das auch tun. Sie können sogar ein automatisches Layout hinzufügen, Sie kennen sich aus. Ändern wir die Farbe dieses bestimmten Rechtecks von sekundär zu primär, nehmen wir an, die primäre Site kann von sekundär zu primär wählen. Es sieht gut aus. Wir können sehen, dass wir in Figma tatsächlich mit Stilen und Komponenten arbeiten . 23. Einführung in Figma Effekte und Schlaganfälle: In Ordnung Leute, lasst uns mit Figma-Effekten und Truppen beginnen . Versuchen wir also, ein rechteckiges Feld mit Farbe zu erstellen. Sagen wir grün. Dieser Schatten sieht gut aus. In Ordnung? Was ist, wenn ich dieser bestimmten Box einen Rand hinzufügen möchte , vielleicht sagen wir schwarz. Dann wissen wir in CSS, dass wir eine Box geben können, oder? Wir können ungefähr eine Kiste geben. In CSS müssen Sie etwas über Content Box und Border-Box gelernt haben . Das werden wir uns also ansehen. Nehmen wir an, ich möchte diesem bestimmten Feld einen Rahmen hinzufügen , wie kann ich das dann machen? Nun, wenn Sie sich auf das Fenster mit den Konstruktionseigenschaften konzentrieren, wird eine Option zum Hinzufügen eines Strichs angezeigt. Du kannst also einfach hinzufügen. Und jetzt werden Sie sehen, dass eine dünne schwarze Linie in Form eines Rahmens zu unserem grünen Feld hinzugefügt wurde , oder? Die Farbe ist schwarz, Opazität ist rote Person. Und es gibt ungefähr eine Zeile. Nun, was bedeutet diese eine Zeile eigentlich? Also, wenn ich das zoome, wenn ich es so weit zoome Sie feststellen, dass Figma im Kern aus diesen kleinen Kästchen besteht, oder? Es gibt so viele verschiedene kleine Boxen. Lassen Sie mich nun einfach nach oben scrollen , damit Sie sehen , wie viele Felder einem schwarzen Rand belegt sind, damit Sie eine Vorstellung haben, warum wir eins als Wert haben? Jetzt können Sie gleich hier sehen, Sie können sehen, dass wir eine Box haben. Das bedeutet also, dass trotz meiner rechteckigen Box rechteckige grüne Box 622 Pixel in der Breite und 320 Pixel in der Höhe hat . Dieser Rand ist jetzt Teil meiner rechteckigen Box. Es ist nicht außerhalb meiner Box. Es ist in meiner Schachtel, oder? Sie können sehen, dass wir drinnen ausgewählt haben. Das ist Teil meiner rechteckigen Box. Wenn ich meinen Rand vergrößere, das grüne Rechteck, versucht das grüne Rechteck, kleiner zu erscheinen. Im Moment belegt es also nur eine Box. Wenn ich das auf zwei ändere, dann siehst du die Toolboxen für die Nutzer in Bezug auf y, denn das ist unser Rabatt, okay? Die Breite, oder Sie können sagen, was wäre diese Höhe, ist die Höhe der Box , die Sie hier angeben, nimmt zu. Wenn ich das von zwei auf, sagen wir 20, ändere, dann wären offensichtlich so viele Boxen belegt, etwa 20 Boxen. Nun wollen wir sehen, ob unsere rechteckige Box tatsächlich an Größe verliert oder nicht. Jetzt können Sie sehen das rechteckige Feld erscheint, aber kleiner als früher. Wenn ich das also auf 60 ändere, können Sie sehen, dass das grüne Rechteck so klein aussieht. Aber wenn ich das von innen nach außen ändere, dann sieht das grüne Kästchen jetzt größer aus. Aber das Rechteck, oder besser gesagt der Rand , der schwarz ist, befindet sich jetzt außerhalb meines Rechtecks. Es ist außerhalb des Rechtecks. Es ist nicht mehr Teil dieser rechteckigen Box. Das ist es also, was es im Grunde bedeutet. Wenn ich das wieder auf 20 ändere, wirst du sehen, dass es so aussieht. Wir haben noch eine Option, die Mitte ist . Was bewirkt das? Mitte bedeutet im Grunde, dass es sich um eine Kombination aus Innen und Außen handelt. 20 Boxen sind also sowohl drinnen als auch draußen belegt. Und das Zentrum wird mit dieser blauen Linie gebildet. Sie können sehen, dass Ihr Schlaganfall im Grunde genommen genau das bedeutet. Sie können die Farbe des Rahmens ändern , wenn Sie möchten, dass er eine lineare Farbe Sie können das auch tun. Lass mich das ändern in, sagen wir diese Farbe, das wird nicht gut aussehen. Lass uns etwas wie Rot lesen und die andere Farbe zu, sagen wir, vielleicht Gelb. Und geben wir diese Farbe. Aber diese Art von linearem Schatten. In Ordnung. Ja, das sieht gut aus, oder? Das sieht gut aus. Lass es mich so ausdrücken, damit du die Farbe richtig sehen kannst. Wir wollen, dass beide Farben 100% haben. Weil du hier drüben sehen kannst, als IT-Mitarbeiter, ja, jetzt sieht es gut aus. Und was sonst? Ja. So können Sie also auch die Farbe des Randes ändern . In Ordnung, schauen wir uns einige Effekte an. Also lass uns sehen. Ich erstelle eine weitere Box. Jetzt. Ich möchte, dass diese Kiste einen Schatten hat. In ihrem Bereich mit den Konstruktionseigenschaften. Sie können eine Schaltfläche sehen , die Effekte ist. Sobald ich auf das Plus-Symbol klicke , wird ein Schlagschatten angezeigt. Es wendet jetzt also eine Form von Schatten an, die Sie vielleicht gerade nicht sehen können. Aber sobald ich diese bestimmte Form abgewählt habe, können Sie sehen, dass sich am unteren Rand meines Felds einige Schatten bilden. Wenn ich das erneut auswähle, habe ich die Möglichkeit die innere Schattenebene, die Hintergrundunschärfe usw. auszuwählen. Aber konzentrieren wir uns jetzt einfach auf Schlagschatten. Also wähle ich dieses Symbol aus. Ich werde den X-Wert und den Y-Wert sehen. Was heißt das? Es bedeutet im Grunde den Offsetwert. Wenn ich den x-Wert von Null auf, sagen wir, 12 ändere, dann bewegt er sich von der X-Achse zur X-Achse weit voraus. Das ist es also, was es im Grunde bedeutet. Anfänglich wurde der X-Offsetwert auf Null gesetzt. Es gab also keinen Versatz auf der rechten oder linken Seite? Korrigiert. Und im y haben wir den Wert vier. Unten siehst du also eine Art Schatten. Wenn ich das wieder auf 12 ändere , erscheint ein Schatten, richtig. Es gibt auch eine gewisse Unschärfe. Lassen Sie uns versuchen, Learn von jetzt an zu entfernen. Wenn ich Unschärfe entferne, was können Sie dann sehen? Du kannst sehen, wie sich genau dieselbe Form gebildet hat, oder? Wenn Sie über die Straße gehen, wo Sie einige Straßenlaternen haben und sich hinter Ihnen ein Schatten bildet. Also, was heißt das? Der Schatten ist eng geformt und der Schatten hat genau die Form Ihrer Größe. Also Schatten in Figma, wann immer Sie Schatten für Ihre Objekte oder Ihre Elemente oder Gegenstände erzeugen , passiert, dass er genau dieselbe Größe einnimmt. Sie können sogar die Farbe des Schattens ändern. Derzeit ist es auf Schwarz eingestellt, 25% Transparenz. Aber wenn wir wollen, dass das eine Farbe hat , sagen wir lila, oder sagen wir bläuliche Tönungsfarbe, Aquamarinfarbe. Das kannst du also tun. Wenn Sie etwas Unschärfe wünschen, können Sie auch eine Unschärfe hinzufügen. Sie können also sehen, dass diesem speziellen Schatten etwas Blut hinzugefügt wurde . Wenn du willst, dass es sich ausbreitet. Streuung bedeutet im Grunde, wie stark soll Ihr Schatten einen Wischeffekt erzeugen? Wenn Sie 20 eingeben, werden Sie sehen, dass es aus allen Richtungen verschmiert wurde. Das ist es also, was ein Schlagschatten im Grunde bedeutet. Wenn Sie von Schlagschatten zu beispielsweise innerem Schatten wechseln, werden Sie sehen, dass der Schatten jetzt in unserem Element erscheint. Das ist mein innerer Schatten, werde später in die Ebenen- und Hintergrundunschärfe schauen. 24. (23) Texteffekt: In Ordnung Leute, lasst mich euch einen coolen Texteffekt zeigen , den wir machen können. Ich denke also, dass wir ein Bild machen können, das durch unseren Text schaut. Das ist es also, was ich im Kopf habe. Dafür. Was ich tun werde, ich werde einfach einen Rahmen erstellen, der vielleicht etwa der Größe entspricht. Die Größe ist viel zu groß. Versuchen wir, die Größe von diesem Wert auf 1080 mal 1080 zu reduzieren. Und den nächsten Schritt möchten wir beim Bild verwenden. Das ist also unser Rahmen. Versuchen wir, ein Bild mit unserem Unsplash-Plugin hochzuladen. Versuchen wir also, abstrakt zu sein. Wollen wir eine Zusammenfassung oder ein Porträt? Lass uns ein Portrait machen. Und lass uns versuchen, diesen Kerl mitzunehmen. In Ordnung. Im Wesentlichen passiert Folgendes. Ja, das wollten wir also. Wir wollten nicht, dass sich dieses Bild genau in unserem Rahmen befindet. Wir wollen, dass es manuell gemacht wird. Also werde ich dieses Bild jetzt in unserem Rahmen platzieren. Wie machen wir das jetzt? Indem Sie einfach in das Ebenenbedienfeld gehen, können Sie die Bildebene unter Ihren Rahmen ziehen. Jetzt ist es also innerhalb des Rahmens. Sie können sich einfach dort bewegen, wo Sie SMH haben möchten. Wenn Sie mit diesem Bild manipulieren möchten, können Sie das auch tun. Einfach auf die Füllung klicken. Sie können einfach die Sättigung verringern, wenn Sie möchten, die Sättigung erhöhen, was auch immer für Sie am besten funktioniert. Sie mit der Kontrastbelichtung herumspielen möchten, machen Sie weiter und tun Sie das. Dieses Bild ist jedoch nicht erforderlich, da es einfach Ihr Schwarzweißbild ist. Also, was werden wir als Nächstes tun? Versuchen wir, ein Rechteck zu erstellen. Vielleicht in dieser Größe. Und lassen Sie mich das einfach auf etwa 50% zoomen . Ja. im nächsten Schritt Lassen Sie mich im nächsten Schritt auch die Größe der rechteckigen Box vergrößern , etwa so. Ja. Als Nächstes möchten wir, dass die Farbe dieser Box weiß ist. Ordnung, lassen Sie uns auch versuchen, einen Text in diesem Feld zu erstellen. Also können wir so etwas wie Figma sagen. Figma ist eher, Figma ist großartig. In Ordnung, Sigma ist großartig. Und jetzt kann ich UI-Designs erstellen. In Ordnung, so etwas. Und lassen Sie uns auch dieses Textfeld für die automatische Höhe zur automatischen Höhe machen . Okay, der Schriftstil hat eine gute Wirkung. Wir haben 96, okay? Wenn wir die Größe dieser Box erhöhen wollen, können wir das auch tun. In Ordnung. Wir können es ungefähr so machen. Ja. Und was wollen wir? Sollte das weiße rechteckige Feld so bleiben, wie es ist. Aber dieser Text sollte auch das Bild enthalten und auch etwas Unschärfe hinter diesem Text. Um das zu tun, können wir eine Replik dieses Bildes platzieren, indem wir die Alt-Taste gedrückt halten und es oben platzieren. So würde es aussehen. Im nächsten Schritt wollen wir unseren Text. Wir können es auswählen und wir können es verwenden , um es als Moschee zu nutzen. Und so sieht unser Output aus. Einfaches Zeug. Also, was ist hier in diesem ersten Rahmen passiert Dieser Text fungiert jetzt als Maske über unserem Bild. Und dieses Bild befindet sich jetzt, oder besser gesagt dieses rechteckige Feld auf der obersten Ebene unserer obersten Ebene, nicht auf der obersten Ebene, sondern auf der oberen Ebene meines Bildes. Sie können gleich hier sehen, das ist mein Bild davon, dass wir eine rechteckige Box haben. In diesem rechteckigen Feld haben wir unseren Text. Und Text wird als Maske für unser Bild verwendet. Das haben wir getan. Sie können diesen Text auswählen. Gehe zu den, du weißt schon, deinen Effekten, du kannst etwas Schlagschatten hinzufügen. Wenn du etwas Schatten möchtest, sagen wir schwarze Farbe mit vielleicht etwa 50% Schatten. Blur steht für etwa, sagen wir, zehn X, zehn Y für Phi. Sie können sehen, wie unsere Ausgabe aussehen würde. Sie können sehen, wie wir das mit Hilfe von Figma-Effekten und Schatten gemacht haben . 25. Sliced Texteffekt: Ordnung Leute, heute freue ich mich sehr denn jetzt werde ich euch ein paar Sachen auf Profi-Niveau zeigen. Was wir also tun werden, ist, dass wir unseren Text aufteilen und ihm etwas Schatten hinzufügen. dazu zunächst, Versuchen wir dazu zunächst, einen Rahmen in Desktop-Größe zu erstellen. In Ordnung? Das ist also unsere Dimension. Lassen Sie uns unserem Desktop etwas Farbe geben. Also gebe ich Orange. Geben wir eine orange, vielleicht mattorange Farbe. Ja, das sieht gut aus. Fügen wir diesem Rahmen etwas Text hinzu. Also füge ich den Text hinzu, der geschnitten ist. Und Sie können sehen, dass die Schriftfamilie ich tatsächlich verwende, betroffen ist und die Schriftgröße 300 Pixel beträgt. Gut. Stellen Sie sicher, dass der Text in der Mitte liegt, sowohl in Bezug auf die X-Achse als auch in Bezug auf die Y-Achse. Jetzt erscheint unser Text also perfekt in der Mitte. Jetzt werde ich mit Hilfe des Stiftwerkzeugs den Text tatsächlich überschneiden. Und jetzt möchte ich den Text so haben, dass er diagonal geschnitten wurde. Und zwischen diesen beiden Diagonalen, der oberen linken Diagonale und der unteren rechten Diagonale, wird ein gewisser Abstand gebildet . Und der Raum ist winzig, wenn auch auffällig, aber nicht so wegweisend. Und wir wollen etwas Schatten hinzufügen. Um das zu tun, werde ich mein Stiftwerkzeug verwenden. Wählen Sie einfach Ihr Stiftwerkzeug aus. Was ich tun werde, ich werde es irgendwo hier drüben platzieren , damit ich es direkt diagonal schneiden kann. Irgendwo hier oben. Gehe nach links, sodass es zu dieser Position passt. Bring es irgendwo hier runter. Dieser Teil meines Textes wurde also geschnitten. Was ich nun tun werde, ich wähle diesen Vektor aus, der zusammen mit diesem Text geschnitten wurde. Und jetzt, was ich mache, subtrahieren wir den ausgewählten Teil. Sie können sehen, dass dies jetzt subtrahiert wurde. Der Teil, den ich tatsächlich ausgewählt habe, wurde jetzt in Scheiben geschnitten und verbunden. Was ich jetzt tun werde, ist zunächst, diesen Vektor auszuwählen. Hoppla. Lassen Sie mich diesen Teil auswählen. Und ich wollte diesen subtrahierten Teil machen , oder? Den subtrahierten Teil, lass mich diesen Vektor wählen. Ich wollte das geben, den Strich entfernen und ich wollte das haben, was grau ist. Sie können also sehen, dass der Teil abgewählt wurde oder dass ein Teil meines Textes entfernt wurde , nur weil wir den Strichteil entfernt haben. Okay, das ist also mein subtrahierter. In Ordnung, lassen Sie uns ein Duplikat unseres Subtrakts erstellen. Ordnung, ich werde mit Hilfe von Control D ein Duplikat erstellen In Ordnung, ich werde mit Hilfe von Control D ein Duplikat erstellen. Jetzt müssen wir das erste, das geschnitten wurde, und das zweite, das ein Duplikat ist, subtrahieren . Der, der in Scheiben geschnitten wurde. Ich werde das so intakt halten, indem ich es sperre. Und der, der gleich hier ist. Was ich hier machen werde, werde ich erweitern. Ich werde diesen Vektor wählen, ich werde diese Farbe wählen. Und jetzt stelle ich mithilfe dieser Funktion, nämlich meinem Objekt bearbeiten, nämlich meinem Objekt bearbeiten, sicher, dass ich meine Schaltfläche Verschieben ausgewählt habe. Ich werde diesen obersten Teil wählen , der aus drei besteht, diese drei Eckpunkte, den ersten, den zweiten und den dritten. Also ziehe ich einfach diesen Teil und wähle ihn aus. Jetzt ziehe ich es nach unten. In Ordnung. Vielleicht wurde dieser Teil, dieser Teil ausgewählt. Ich entscheide mich dafür, dass das erledigt ist. Und was jetzt passiert ist, ist, dass zwei Teile meines Textes in Scheiben geschnitten wurden. Der erste war mein oben links und der untere rechts. In Ordnung. Es wurden also zwei Subtrahierungen vorgenommen. Also werde ich jetzt den Vektor wählen. In Ordnung? Ich werde den Wert meines X-Offsetwerts ändern. Ich werde den X-Offsetwert erhöhen. Wenn ich also erhöhe, indem ich meine Aufwärtspfeiltaste gedrückt halte, werden Sie sehen, dass es sich leicht nach links bewegt. Wenn ich meinen Y-Wert erhöhe. Was hier passiert, ist, dass sich das Teil bewegt und dadurch eine Art Leerraum entsteht, oder? Es sind einige kleinere Aktionen im Gange. In Ordnung? Was wir jetzt wollen, ist das, lass es mich einfach so machen. Was wir nun wollen ist , dass in diesem Teil eine Kopie dieses Vektors erstellt, Teil eine Kopie dieses indem wir unseren alten Vektor gedrückt halten. Oder wenn Sie den Mac verwenden, können Sie die Optionstaste verwenden und sie einfach hier drüben platzieren. Okay, lassen Sie uns auch eine Ellipse von ungefähr dieser Größe erstellen . Und wir werden das gruppieren, diese Ellipse und diesen Vektor, beide, aber im Moment wollen wir diese Ellipse. Diese Ellipse wäre übrigens zusammen mit unserem Vektor. In Ordnung? Diese Ellipse sollte eine lineare Farbe mit 100 Prozent Schwarz und einer Transparenz von Null Prozent haben. Achte also einfach darauf, dass am Ende beide Farben schwarz sind. Dieser sollte 100% haben, dieser sollte eine Opazität von 0% haben. In Ordnung, gruppieren wir sie. Also wähle ich diesen Teil und diesen Teil aus, indem ich meine Umschalttaste gedrückt halte. Und anstatt sie tatsächlich zu gruppieren, werde ich sie in Form einer Maske verwenden. Und jetzt werde ich das auswählen. Ich kann diese gesamte Massengruppe oder einen anderen Teil auswählen , der nur Ellipsen ist. Ich werde diesen Winkel drehen. Also werde ich das rotieren. Ja, ich verschiebe das hierher. Lassen Sie mich die Drehung noch einmal ändern. Lassen Sie mich meine Ellipse auswählen. Drehung. Ja, das sieht cool aus. Reduzieren wir die Größe dieses Schattens. Irgendwie so. Wenn ich, wenn ich noch einmal meine Ellipse auswähle , ist das genau das, was wir wollten. So ein cooles Design. So können Sie Ihr Design wie 3D aussehen lassen und mit Figma können Sie so coole Effekte erzielen. Eine letzte Sache , die noch hinzugefügt werden muss , damit es wie eine Kirsche auf dem Kuchen ist. Das wäre also, unserem Schatten auf dieser speziellen Ellipse etwas Schatten hinzuzufügen . Deshalb haben wir diese Füllfarbe hinzugefügt. Wir können zu Effekten gehen und etwas Ebenenunschärfe hinzufügen. Und wenn ich auf dieses Symbol klicke, können wir den Unschärfewert von vier auf, sagen wir zehn, ändern. Wenn ich das mache, werden Sie sehen, dass unser Text so aussehen würde. Wenn Sie die Größe unserer Unschärfe reduzieren möchten. kannst du auch tun. Und perfekt. So sollte es eigentlich aussehen. Wenn Sie möchten, können Sie den Rahmennamen von Desktop zu beispielsweise geschnittenem Texteffekt ändern den Rahmennamen von Desktop zu beispielsweise . 26. (25) Texteffekt: Ordnung Leute, schauen wir uns an, wie wir einen Gliederungstexteffekt erstellen können. Dafür werde ich also einen neuen Rahmen von ungefähr dieser Größe erstellen . Und bevor wir tatsächlich ein Wireframe erstellen, weißt du was, was wir tun werden? Wir bringen nur ein Bild aus dem Unsplash-Plugin mit. Also lasst uns einfach versuchen , ein Tier zu finden. Okay, diese Giraffe sieht cool aus. Also werde ich dieses mitbringen und wir werden versuchen, den Hintergrund von diesem Bild zu entfernen. Mit dem Plugin Remove BG entferne ich den Hintergrund von diesem bestimmten Bild. Sobald der Hintergrund entfernt wurde, was ich tun werde, werde ich einfach ein wenig herauszoomen. Und im nächsten Schritt wollen wir einen Rahmen. Lassen Sie uns also einen Rahmen von etwa 1920 mal zehn ADP erstellen. Das sind deine Pixel, oder? Das ist unser Anzeigeformat. Also 1920 mal 1080 Pixel, oder? Sobald wir zoomen und möchten, dass sich dieses Bild innerhalb eines Rahmens befindet, wollen wir das. Lassen Sie uns zuerst versuchen, die Mitte auszurichten oder anders, wir werden versuchen, dies zu skalieren. Werde versuchen, diese besondere Giraffe zu erklimmen. Aber weißt du, was dieser Rahmen ist, anstatt 1920 mal 1080? Lass uns auch das machen, die Breite Null mal 1080. Und lassen Sie uns versuchen, dieses Bild zu vergrößern, um zu versuchen, es zu verkleinern. Schon wieder. Versuchen wir, das zu skalieren. Ja, das sieht cool aus. Wir werden versuchen, das so zu zoomen , dass es gut aussieht. In Ordnung. Wir werden versuchen, die Mitte mit Hilfe dieses Elements auszurichten. Das sieht cool aus. Wir geben unserem Rahmen auch eine Farbe. Versuchen wir also, diesem Rahmen eine Farbe zu geben. Um diesem Rahmen eine Farbe zu geben, stelle ich sicher, dass er zum Verschieben ausgewählt wurde , wähle deinen Rahmen und gehe dann zurück zum Fenster mit den Designeigenschaften, gehe zu dieser Farbe, einfarbig, finde eine Naturfarbe, die offensichtlich grün ist. Also suche ich diesem Waldfarbton und einer etwas dunkleren Seite. Jep, das sieht gut aus. Okay, der nächste Schritt, wir wollen einen Text, also bringe ich mein Textfeld mit. Die Größe. Sieht cool aus. In Ordnung, versuchen wir, den Gliederungstext aufzuschreiben. In Ordnung, versuchen wir, es mittig auszurichten. Mit dieser Hilfe habe ich Centerline, meinen Text. Okay, ich weiß, was ich vorhabe diese beiden Texte zu skizzieren, diesen Gliederungstyp wirksam werden zu lassen. Was wir haben ist, dass wir wollen, dass dieses Bild massenhaft ist, sodass es irgendwie so aussieht. Das Bild wurde maskiert und Text enthält dieses Bild. Aber wir verwenden nicht die Maskierungsmethode. Stattdessen verwenden wir die Gliederungsmethode und sehen uns einen kurzen Trick an. Wie Sie hier sehen können, haben wir diesen Text und ich werde eine Kopie davon machen. Also halte ich meine Alt-Taste gedrückt und öffne mein Bild unter das Bild. Was hier passiert , ist , dass es eine Textebene gibt , in der es um mein Bild geht, und eine Textebene, die sich hinter meinem Bild befindet. Es gibt also zwei Schichten. Noch eins, das vorne ist, wir wollen es verstecken. Also werde ich dafür einfach die Farbe entfernen. Und sobald die Farbe entfernt wurde, werden Sie das Textzeichen natürlich nicht mehr sehen, Sie das Textzeichen natürlich nicht mehr sehen da es jetzt unsichtbar ist. Obwohl der Text vorhanden ist, gibt es eine Steuererklärung, bei der es sich um Gliederungstexte handelt. Aber da es keine Farbe hat, wie wird man säen? Das ist es also, was hier passiert. Der nächste Schritt, was wir wollen, ist dieser spezielle Text , der vorne steht. Wir wollten einen Überblick geben. Also füge ich etwas Strich hinzu. Und sobald ich einen Strich hinzugefügt habe, können Sie das Bild sehen, das sich in meinem Text befindet. Jetzt ändere ich die Farbe meines, du weißt schon, der Strich so, dass er auch weiß ist, das macht das. Eine Phi-Zelle haben. Wir wollen, dass das drinnen ist und so würde unser Text aussehen. Also auf der vorderen Ebene des Textes, die vorne in meinem Bild erscheint. Das heißt, keinen Text zu haben. Es hat nur eine Grenze. Grenze. Wenn es einen Rand hat und keine Farbe hat. Offensichtlich würdest du ein Bild sehen. Jetzt hinter diesem Bild. Was hast du sonst noch? Derselbe Text mit derselben Farbe. Es entsteht also, weißt du, als ob es dir tatsächlich die Illusion gibt , dass du dein Bild maskiert hast. Das ist es also, was hier passiert. Ansonsten ist es ziemlich einfaches Zeug. Wir haben hier nichts getan. Also zwei einfache Dinge, die wir getan haben. Zunächst haben wir unser Bild innerhalb des Rahmens verwendet. Sie haben unserem Rahmen eine Farbe verliehen. Dann haben wir zwei Ebenen unseres Textes verwendet. Eine, die sich vorne auf meinem Bild befindet und keine Farbe hat, sondern nur einen Strich, der wiederum dieselbe Farbe wie meine Textfarbe hat. Und die Textebene, die sich hinter meinem Bild befindet, hat keinen Rand. Es hat nur eine Füllfarbe. Es entsteht also die Illusion, dass das Bild maskiert wurde. 27. Glühender Icon Effekt: In Ordnung Leute, schauen wir uns an, wie wir blaue Symboleffekte erstellen können. Dafür erstelle ich einen neuen Rahmen in der Größe des Instagram-Beitrags. Lass uns das dunkler oder schwarz machen. Jetzt importieren wir das Instagram-Symbol. Um das zu tun, werde ich tatsächlich das When-Plugin verwenden, das eigentlich ein Schriftsymbol oder ein Font Awesome-Plugin ist Sie können einfach mehr Plug-ins finden und nach Font Awesome-Symbolen von I conduct suchen. Führen Sie das einfach aus und suchen Sie nach dem Symbol, nach dem Sie suchen. Was ich im Kopf habe, ist, dass wir das Instagram-Symbol verwenden und es so modifizieren, dass mithilfe der Effekte und Schatten, die wir bisher gelernt haben, so ich es mithilfe der Effekte und Schatten, die wir bisher gelernt haben, so aussehen lasse, als würde es leuchten. In Ordnung, also lass uns einfach das Instagram-Logo verwenden. In Ordnung, versuchen wir, die Mitte auszurichten. Mittellinie. Dies muss mittig ausgerichtet sein. Wählen Sie das irgendwo hier aus. In Ordnung? Und versuchen wir auch, es zu vergrößern. Sagen wir 200 mal 200. Oder was Sie auch tun können, ist, dass Sie dies einfach sperren können , sodass sich die andere Dimension entsprechend ändert, wenn Sie die Größe Ihrer Breite oder Höhe ändern. Wenn Sie also möchten, dass es 250 sind, können Sie das tun. Sieht gut aus. Wählen Sie das aus. Und wir werden die Farbe unseres Symbols von Schwarz auf Weiß ändern, damit es sichtbar ist. Der nächste Schritt, den wir wollen, ist, dass, weißt du, der nächste Schritt ist wir versuchen, einige Schatteneffekte zu verwenden. Also klicken wir auf die Effekte. werde zuerst eine Ebene Unschärfe verwenden, oder besser gesagt, ich sollte sagen, zuerst den inneren Schatten, den wir verwenden werden. Nun, innerhalb des inneren Schattens wollen wir, dass es keinen Offset gibt, oder? Es sollte keinen Offset geben. Wir möchten nicht, dass der Schatten außerhalb des angegebenen Bereichs liegt. Es sollte so aussehen, wie es ist, wie unser Instagram-Symbol derselben Dimension aussieht, es sollte nicht von der X- oder Y-Achse versetzt sein. Das ist es, was wir wollen , dass Blut von etwa 20 Pixeln entfernt ist. Und die Farbe, die wir benötigen, ist lila oder violett. Das benutzt Instagram, oder? Irgendwo in diesem Schatten. Und wir wollen , dass das 100, 100% ist. Und das ist die Farbe , die wir verwenden werden. Der nächste Schritt, den wir benötigen, ist, dass wir einen weiteren Schatten benötigen , der Ihr Schlagschatten ist. Benutze also den Schlagschatten. Schon wieder. Machen Sie den Offset auf Null. Mache die Unschärfe auf 50. Lass es uns mit 50 versuchen. Ändern Sie die Farbe auf dieselbe Farbe, die Ihre Farbe ist, die wir tatsächlich verwendet haben. Senden Sie die Farben des Dokuments. Das findest du hier. Und genau das wollten wir und die Unschärfe soll zu 5.000% sein, oder? Jetzt mache ich eine Kopie dieses Instagram-Symbols. Also mach einfach eine Kopie davon. Also zu den Instagram-Symbolen, die wir haben Sie können sehen, klicken Sie nicht auf diesen Vektor. Klicken Sie auf dieses Symbol, Instagram, das ist Gruppe. Okay, das ist die, die wir tatsächlich benutzt haben, und das ist die Kopie. Also werde ich in der Kopie alle Schatten entfernen. Was ich benutzen werde, ist nur mein Schlaganfall. Fügen Sie also einfach einen Strich hinzu und machen Sie den Strich so, dass er weiß ist. Mache eine Größe von etwa fünf Pixeln. Und die Farbe, die wir anstelle von Weiß verwenden werden. Verwenden wir dieselbe Dokumentfarbe. Und jetzt können Sie diesen klebrigen Effekt sehen. Bevor wir dieses Tutorial beenden, müssen Sie schließlich nur die Füllfarbe entfernen und einige Effekte hinzufügen, nämlich die Ebenenunschärfe. Also füge einfach eine Schicht Unschärfe hinzu und mache daraus etwa fünf Blut. Was passiert, wenn wir das erhöhen? Du wirst sehen, dass wir die Unschärfe um den Gegenstand sehen werden , wenn ich ihn vergrößere. In Ordnung? Also, wenn du willst, dass es fünf sind, würde das cool aussehen. Und so erzeugen Sie leuchtende Symboleffekte. 28. (27) Miniprojekt: In Ordnung Leute, heute freue ich mich sehr denn jetzt werden wir uns wirklich gute Sachen ansehen. Weil wir ein Mini-Projekt bauen werden. Nun, dieses Mini-Projekt , das wir erstellen werden, ist nur ein einfacher Header. Oder Sie können eine Landingpage für Ihre Website sehen. Und wir werden nicht näher darauf eingehen. Papa, welche Topographie, welche Schriftfamilie, welche Art von Farbschema solltest du für dein Figma-Design verwenden . Stattdessen schauen wir uns einfach an, wie wir unsere Gegenstände platzieren und wie wir diese Dinge mit dem, was wir bisher gelernt haben, anordnen. Dafür erstelle ich einfach einen Rahmen in Desktop-Größe. Und ich möchte, dass es vom MacBook Pro 14 Zoll entfernt ist. Also können wir das auswählen. Und lassen Sie mich einfach ein bisschen herauszoomen. In Ordnung, nicht so viel. 50 Prozent, das wäre gut. Ja. Der nächste Schritt, den wir wollen, ist, dass wir sicherstellen wollen, dass wir, weißt du, ein Layout hinzufügen können. Also stellen Sie sicher, dass Sie dafür hierher gehen. Stellen Sie also sicher, dass Sie hierher gehen und sicherstellen, dass die Layoutraster geklebt wurden. Der nächste Schritt ist, dass Sie einfach auf dieses Layoutraster klicken und Sie werden das gesamte Layoutraster sehen , das sich auch in den Spalten und Zeilen befindet, aber wir wollen nur unsere Spalten. Dafür verwenden wir einfach dieses Symbol, das heißt, ich wähle dieses Symbol aus. Ich werde zwischen Raster und nur Spalten wählen. Sobald ich Spalten ausgewählt habe, ändere ich die Spaltenanzahl 5-12. Wenn Sie auch die Farbe ändern möchten, können Sie das ändern, sagen wir, statt Rot möchten Sie etwas wie Hellblau oder diese Farbe haben. Das kannst du also tun. Der nächste Schritt. Was wir tun werden, ist, dass wir einen gewissen Abstand zwischen der ersten Spalte unseres Rasters und der letzten Spalte unseres Rasters haben wollen Abstand zwischen der ersten Spalte . Also werden wir etwas Spielraum hinzufügen. Wählen Sie, sagen wir, ich möchte einen Rand von etwa 50 Pixeln hinzufügen . Also kann ich das machen. Nun, das scheint nicht gut für unser Projekt zu sein, also können wir das auf, sagen wir, vielleicht 100 ändern . Jetzt sieht es gut aus. Aber was ist, wenn ich das wieder auf 125 ändere , so etwas. Das sieht ziemlich cool aus. Im nächsten Schritt haben wir den Dachrinnenabstand. Ein guter Abstand bedeutet nun im Grunde , dass der Abstand, zusätzliche Abstand zwischen den beiden Layoutrastern, zwischen den beiden Layoutspalten liegt. Dieser Raum, in dem mein Cursor schwebt, ist mein Dachrinnenraum. Ich glaube, der Dachrinnenraum ist jetzt 20. Wenn wir das auf, sagen wir vielleicht 30, ändern, sieht es gut aus. Also können wir daraus 30 machen. Der nächste Schritt. Was werden wir tun? Ich werde das nur ein bisschen zoomen , damit du es sehen kannst. Okay, im nächsten Schritt wollen wir eine Navigationsleiste erstellen. Dafür erstelle ich eine verworrene Händlerbox, die von dieser Ecke bis zu dieser Liste beginnt , damit sie richtig angehängt wird. Lassen Sie mich sicherstellen, dass dies auch diese Linie berührt. Und wir werden sicherstellen, dass die Höhe nur 100 beträgt. In Ordnung, lassen Sie uns das auf 200 erhöhen. Nein, nein, das wäre viel zu viel. Also ich denke, einhundert2.000 waren gut. Im nächsten Schritt wollen wir dies bis zu diesem Punkt verlängern. Der nächste Schritt, was werden wir tun? Wir wollen unser Symbol direkt hierher bringen und die anderen Menüpunkte hier. Dafür werde ich mein Plug-in verwenden. Wenn Sie Ihr Symbol erstellt haben, können Sie es einfach herausbringen, oder wenn Sie Ihr eigenes Logo erstellen möchten, können Sie das auch in Figma tun. Verwenden Sie also einfach dieses Font Awesome-Symbol. Und ich kann nach jeder der Marken suchen. Nehmen wir an, ich möchte einige berühmte Marken wie LinkedIn verwenden . Also nutzen wir das. Benutze das. Und wir werden sicherstellen , dass dieses Symbol sechs Pixel hoch und 36 Pixel breit ist . Also werde ich einfach diese 36 Pixel in der Höhe und 36 B-Zellen und nass verwenden . In Ordnung, 36 mal 36. Es ist eigentlich viel zu klein. Ändern wir das von 50 auf 50. Ja, es sieht gut aus. Was ist, wenn ich das von 50 mal 50 auf vielleicht 60 mal 60 ändere . Ja, das sieht gut aus. 60 mal 60 ist also die ideale Größe, die ich tatsächlich in meinem Projekt verwenden würde. Jetzt kommt es tatsächlich auf das Aussehen Ihres Designs an. Es gibt keine feste Regel, dass Sie 60 Pixel in Höhe und Breite für alle Ihre Symbole in Ihrem Webdesign verwenden in Höhe und Breite für alle Ihre Symbole in Ihrem müssen. Sie müssen nur herumspielen und sehen ob es auf Bestellung zu Ihrem Design passt. Der nächste Schritt, was werden wir tun? Wir stellen sicher, dass das heißt, es in Bezug auf die Y-Achse mittig ausgerichtet ist . Also wähle ich einfach das aus, nämlich vertikale Mittelpunkte ausrichten. Ordnung, der nächste Schritt, den wir wollen , ist , dass wir unser Menü nutzen. ich also einfach mein Tiki drücke, kann ich tatsächlich aufschreiben, sagen wir nach Hause. Zuhause. Dann habe ich über Dan Services und die Kontaktseite. Das sind also die verschiedenen Elemente des Navigationsmenüs. Zuhause ist also eines, das ich auswählen werde. Im nächsten Schritt möchte ich, dass die Textgröße etwa beträgt, vielleicht sagen wir, 36 Pixel sehen sichtbar aus. Also fahren wir mit 36 Pixeln fort. Ich werde Medium verwenden. Medium sieht gut aus. Und die Schriftfamilie , die wir verwenden sollten, ist, sagen wir, was ist, wenn ich etwas wie Let's keep this intern verwende. Es macht mir nichts aus, diesen zu benutzen. Nun, ich mache das als Nächstes. Ich mache eine Kopie davon. Ich werde den Inhalt von zu Hause auf etwa zehn ändern, ab etwa um uns zu kontaktieren. Nehmen Sie Kontakt mit uns auf. Und schließlich werde ich Dienste nutzen. Dienstleistungen. In Ordnung? Nun der Grund dafür, dass ich diese verschiedenen Textfelder verwendet habe und sie in verschiedene Richtungen ausrichte . Sie können sehen, dass dieser unten ist, dieser befindet sich oben in der Wohnung. Das ist wieder unten. Das ist wieder ganz oben. Eine solche richtige Ausrichtung findet nicht statt. Also können wir das machen. Was Sie tun müssen, ist einfach all diese auszuwählen und sie zu einer Gruppe zusammenzustellen , nicht gerade zu einer Gruppe. Sie müssen nicht Control G oder Command G verwenden . Sie müssen lediglich diesen verwenden. Sobald Sie das getan haben, können Sie tatsächlich ein automatisches Layout hinzufügen. Sobald Sie das automatische Layout hinzugefügt haben, ist Ihre Arbeit erledigt. Das hast du also getan. Ziehen Sie jetzt einfach den gesamten Rahmen heraus und platzieren Sie ihn hier. Also, warum haben wir es hier platziert? Warum haben wir dafür gesorgt , dass Contact Us in diesem Teil meines Layouts bleibt , weil wir möchten, dass der letzte Teil der Layoutspalte den letzten Menüpunkt berührt. Also das haben wir hier gemacht. Und das blaue Symbol, das Sie zuvor gesehen haben und das ich angeklickt habe, es gab nichts anderes, als einfach einen Rahmen zu bilden. Also haben wir gerade eine Rahmenauswahl getroffen. Sie können das mit der rechten Maustaste tun und Sie können auch die Rahmenauswahl verwenden. Es gibt also nichts derartiges wie Raketen und Raketenwissenschaft . Der nächste Schritt, den wir tun wollen , ist , dass wir unser Rechteck verstecken wollen. Wir möchten nicht, dass dies auf unserer Website erscheint. Also, wenn du willst, dann kannst du das verwenden und du kannst einfach etwas verschwommenen Schatten hinzufügen und du kannst etwas Transparenz für diese spezielle Navigationsleiste verwenden. Im nächsten Schritt wollen wir sicherstellen , dass dieser und dieser beide vertikal ausgerichtet sind. Wir stellen also einfach sicher, dass beide vertikal ausgerichtet sind , und verstecken einfach unser rechteckiges Feld. Sobald Sie das versteckt haben, würde unsere linke Seite so aussehen. Okay, der nächste Schritt, da wir eigentlich versuchen, ein Projekt zu erstellen, wird ein Mini-Projekt sicherstellen , dass es responsiv ist. Das heißt, selbst wenn sich die Größe meines Nasses ändert, okay, wenn ich vom MacBook Pro auf beispielsweise ein Mobilgerät umsteige, dann sollte der Inhalt nicht ausgelassen dann sollte der Inhalt werden oder er sollte nicht herausgeschnitten werden. werden wir also tun, um sicherzustellen, dass Was werden wir also tun, um sicherzustellen, dass das nicht passiert? Wir wählen unser Symbol aus, dieses LinkedIn-Symbol. Und im Teil mit den Einschränkungen, im Teil mit den Einschränkungen, sollte ich den Teil mit den Einschränkungen sehen. Also füge ich ein automatisches Layout hinzu. Sobald ich das automatische Layout hinzugefügt habe, werden Sie diese Einschränkungen und die Größenänderung von Elementen sehen. Auf der Y-Achse möchten wir also, dass dies andere Elemente umarmt. Und von der X-Achse aus wollen wir, dass das fest damit verbunden ist. In Ordnung? Der nächste Schritt, was wir jetzt tun werden , ist sicherzustellen, dass unser Design responsiv ist, das heißt, wenn ich von der MacBook Pro-Bildschirmgröße auf, sagen wir, ein Mobilgerät übergehe . Ich möchte nicht, dass ein Teil meiner Portion wegfällt. Gerade jetzt. Unser Design ist nicht responsiv. Was passiert also, wenn ich die Breite meiner Website reduziere? Dann werden Sie sehen, dass einige Inhalte in meinem Menü weggelassen wurden. Sie können die Schaltfläche „ Kontaktieren Sie uns“ nicht deutlich sehen. Selbst wenn ich die Feuchtigkeit von diesem Teil auf diesen Teil reduziere, wirst du das Lumen-Symbol außerhalb meines Rahmens sehen. Okay, das ist nicht Teil meines Themas, also bringen wir das einfach in dieses Thema ein. Und wenn Sie das getan haben, können Sie sehen, dass dies weggelassen wurde. Was ich also tun werde, ist einfach rückgängig zu machen, damit wir die Größe erhalten. Schon wieder. Es stellt sicher, dass sich das Symbol in einem Rahmen befindet, dem MacBook Pro-Rahmen. Und um sicherzustellen, dass unsere Designer responsiv sind, klicken Sie einfach auf diesen speziellen Rahmen. In Ordnung? Im Moment wirst du den Teil mit den Einschränkungen nicht sehen. Sie werden den Teil zur Größenänderung sehen , da wir das automatische Layout verwendet haben. Verwenden Sie also einfach die rechte Maustaste, verwenden Sie eine Rahmenauswahl und Sie können sehen, dass ein neuer Rahmen gebildet wurde. Also kann ich diesen Rahmen einfach in Menüelemente umbenennen. Und jetzt werden Sie sehen, dass dieser Rahmen uns Einschränkungen auferlegt. Jetzt kann ich sagen , dass ich auf der X-Achse möchte, dass diese Menüelemente ganz rechts bleiben. Und auf der Y-Achse sollte es an der obersten Seite bleiben. Wenn ich jetzt versuche, die Größe meines Rahmens zu reduzieren, werden Sie feststellen, dass die Menüelemente nicht komprimiert werden. Vielmehr wurde mein Symbol komprimiert. Also werden wir sehen, wie wir dieses Symbol auch reparieren können. Also nochmal, klicken Sie mit der rechten Maustaste darauf. Verwenden Sie die Rahmenauswahl. Ändern Sie den Namen des Rahmens. Wir können das in ein Symbol ändern. Ikone. Sie können das Logo sehen. Du kannst das einfach in No-Go umbenennen . In Ordnung, wenn Sie das getan haben, bleiben Sie links und oben. Wenn ich jetzt versuche, die Größe meines Rahmens zu reduzieren, können Sie sehen, dass mein Logo nicht komprimiert wird. In Ordnung, so haben wir es möglich gemacht. Der nächste Schritt, den wir wollen, ist ein Titeltext und ein Fließtext. Und darunter wollen wir einen Button. Und außerdem möchten wir, dass auf der rechten Seite ein Bild platziert wird. Dafür werde ich Text verwenden. Und weißt du was? Ich verwende einfach ein Textfeld. In dieses Textfeld füge ich die Sachen ein , die ich bereits verwendet habe. Also werde ich diesen Text kopieren, dem Sie heute Ihre eigene Geschäftsreise beginnen können. Fügen Sie das hier ein, stellen Sie sicher, dass es dieses Auto Wet verwendet. Und der nächste Schritt, den wir wollen, sollte ich sagen, der nächste Schritt, den wir wollen. Das stellt sicher, dass es 36 Pixel sind. Wenn Sie möchten, dass dieser Titel 40 hat, können Sie das auch tun. Mutig zu sein. Das kannst du auch tun. Du willst einen anderen Schriftstil. Mach weiter, mach das. Das werde ich nicht tun. Wählen Sie einfach dieses aus. Stellt sicher, dass es diesen Teil berührt. In Ordnung? Achte darauf, dass es klebt. Dieser besondere Teil. Wir erstellen ein weiteres Textfeld. Von diesem Teil bis vielleicht, sagen wir diese Position wird der Rest des nächsten eingefügt, das ist mein Körper. Also wähle das aus. Schon wieder. Wir nehmen 36. Sie können Ihre Stile verwenden, Sie können, Sie können Stil speichern, und Sie können ihn in anderen Teilen Ihres Designs verwenden. Mach das normal, regelmäßig. Ja, das ist es. Also werde ich einfach sicherstellen, dass dieses Textfeld eine automatische Höhe hat. Also machen wir das. Und stellen wir einfach sicher, dass es einen gewissen Abstand gibt , der den Abstand zwischen Ihrem Titel und dem Hauptteil rechtfertigt . Ordnung, der nächste Schritt, den wir machen werden , ist , dass wir unseren Button benutzen. Um eine Schaltfläche zu erstellen, verwende ich also kein rechteckiges Feld. Vielmehr werde ich ein Textfeld verwenden. Also werde ich einfach die Texte verwenden, die jetzt beginnen. Und damit es wie eine Schaltfläche aussieht. Warum verwenden wir? Zuallererst, warum verwenden wir dieses Textfeld als Schaltfläche und nicht als rechteckiges Feld , damit wir unsere Schaltfläche responsiv gestalten können. Also was ich tun werde, ich werde dieser Schaltfläche ein automatisches Layout hinzufügen . Ich wähle das einfach aus. Ich werde ein automatisches Layout hinzufügen. Jetzt wird die Option, ein automatisches Layout direkt zu den Textwerken hinzuzufügen , nicht mehr angezeigt . Zuerst müssen Sie die Rahmenauswahl hinzufügen. Verwenden Sie also einfach die Rahmenauswahl. Und jetzt sehen Sie eine Option zum Hinzufügen eines automatischen Layouts. Stellen Sie anschließend sicher, dass es sich um eine Mittellinie handelt. Und dann sorgen Sie für eine gewisse Polsterung, ob Sie möchten oder nicht. Für dieses Design werde ich also eine horizontale Polsterung bereitstellen. Von der linken und rechten Position aus wollen wir also 30 Pixel Abstand und von oben und unten V1 15 Pixel Abstand. Ich habe das gemacht. Fügen wir nun eine Farbe hinzu. Ich möchte also, dass die Farbe genau das ist, ein positiver Call-to-Action-Button. Diese Farbe sieht also gut aus und die Textfarbe wäre Byte. Also wählen wir das aus. Wenn Sie einen Randradius hinzufügen möchten, können Sie das auch tun. Versuchen wir also, auch einen Grenzradius hinzuzufügen . Lassen Sie mich also 20 hinzufügen. Sobald ich das getan habe, was ich tun kann, kann ich einfach das auswählen. Ich werde es platzieren. Und Sie können sehen, dass der Abstand zwischen diesem Haupttext und meiner Schaltfläche 61 Pixel beträgt, und der Abstand zwischen meinem Titel und Text beträgt ebenfalls 61 Pixel. Also lassen wir es einfach so. Und ich werde sicherstellen , dass die Einschränkungen links oder rechts sind. Es bleibt am äußersten linken Teil. Und es ist tatsächlich eine Einschränkung, es ist tatsächlich eine feste Breite. In Ordnung? Sobald Sie das getan haben, was meine ich mit responsiv? Aber dann habe ich den responsiven Button gemacht , ja, natürlich. Also, wenn ich das verlängere, lass mich das einfach erweitern. Sie können sehen, dass der Text, der jetzt gelehrt wird, immer an der Position des Massenmittelpunkts bleibt, egal um wie viel die Größe meines Buttons vergrößert oder verkleinert wird, viel die und der Abstand konstant gehalten wird. Das ist es also, was es im Grunde bedeutet. Ordnung, der nächste Schritt, was wir tun wollen, ist, dass ich, wenn ich, zuerst versuchen werde, diesen Frame umzubenennen. Also benenne ich diesen Rahmen einfach in Button um. Dieser als Fließtext. Also Rhenium zwei, Körper. Als Nächstes. Dieser als Titeltext. In Ordnung, wählen wir alle drei aus. Im nächsten Schritt möchten wir sicherstellen, dass die Einschränkungen links und rechts ausgewählt sind. In Ordnung? Und jetzt wollen wir eine Rahmenauswahl hinzufügen. sobald Sie sie in einem Frame hinzugefügt Was werden wir tun, sobald Sie sie in einem Frame hinzugefügt haben? Wir werden sicherstellen , dass es sich an die linken und rechten Einschränkungen hält . Im nächsten Schritt, in diesem zweiten Rahmen, haben wir unsere Texttags und Titel-Tags. Wählen Sie also einfach den Titeltext aus. Und in diesem. Wählen wir zunächst den gesamten Rahmen aus. Tun. Lassen Sie uns auch ein automatisches Layout hinzufügen. Wir fügen ein automatisches Layout hinzu. Sobald wir das getan haben, stellen Sie sicher, dass die Einschränkungen, jetzt werden Sie das nicht links und rechts sehen können. Also benutze einfach links. Sobald Sie das getan haben, wählen Sie Ihren Titel aus. Und im Teil mit den Einschränkungen hier für meine horizontale Einschränkung, sollten Sie für meine horizontale Einschränkung, die horizontale Größenänderung, den vollständigen Container verwenden. Warum sollten wir nun einen vollen Container verwenden? Also, wenn ich versuche, meinen Rahmen zu verkleinern , wirst du diesen Begriff sehen. Gerade jetzt. Du wirst die Änderung nicht sehen. Also, wenn ich diesen vollen Container auswähle, wenn ich sicherstelle, dass , weißt du, er verwendet diesen. Okay? Ändern wir dies auch auf eine feste Breite. Wenn ich jetzt versuche, die Größe meines Rahmens zu verringern , werden Sie nicht sehen können , dass dieser Titeltext an die Größe meines Rahmens angepasst wird . Also, was werden wir dafür tun? Wir wählen unseren Titeltext aus und stellen sicher, dass er auf Vollcontainer eingestellt ist. Und auf der Y-Achse ist es auf Hub contains gesetzt. Warum enthält Hub nun? Das zeige ich dir in einer Minute. Das wollen wir also im Scheitelpunkt. Wir wollen, dass dies wieder ein Füllbehälter ist. Sobald wir das getan haben, stellen Sie sicher, dass dieser eine feste Breite hat. In Ordnung? Wählen Sie den gesamten Rahmen nach links und erneut nach rechts aus. Und dann der nächste Teil, was wir wollen, ist, dass Sie Ihren Rahmen auswählen und versuchen, die Größe zu ändern. Und jetzt können Sie die Titeltexte sehen und der Scheitelpunkt passt sich der Größe meines Rahmens an. Es reduziert also seine Größe. So würde es auf Mobilgeräten aussehen, richtig. Nun, was meine ich mit Hub, enthält Ihre Größenänderung. Was bedeutet diese Eigenschaft im Grunde? Also sagen wir meinen Fließtext, ich kopiere diesen Text und habe das noch ein paar Mal so platziert . Und das, bis es auch eine Taste hat, es hält diesen Abstand ein, 61 Pixel Abstand von hier und von hier. Das enthält Eigenschaften, die im Grunde genommen funktionieren, wenn Sie über die Größenänderung sprechen. In Ordnung, so erstellen Sie also Ihr responsives Design. Bisher haben wir nur noch getan, ob Sie ein Bild tatsächlich verwenden möchten. Wenn Sie also ein Bild verwenden möchten, haben wir keinen solchen Speicherplatz für Bilder. Wir können also unseren Titel auswählen und ihn so formulieren. Wir können unseren Fließtext auswählen und die Höhe, die Höhe unseres Textfeldes, vergrößern . Ja, das würde cool aussehen. Im nächsten Schritt wollen wir ein Bild importieren. Mit Hilfe meines Unsplash-Plugins kann ich also tatsächlich jedes Bild verwenden. Versuchen wir also, ein Bild zu vermitteln, sagen wir, das mit dem Geschäft zu tun hat. Also werde ich das auswählen. Ich werde nach einem Unternehmer suchen. Und hoffentlich sollte ich jemanden sehen, der tatsächlich versucht, sie seinen Kunden zu präsentieren . Also dieser sieht gut aus. Und das ist ein wirklich gutes Bild , das wir in unserem Design verwenden können. Sobald dieses Bild importiert wurde, können wir die Größe mit dem Größenänderungstool ändern. Also werden wir die Größe ändern. Die Größe stellt nur sicher, dass sie richtig zu unseren Inhalten passt. Warum kann ich das nicht in meinen Netzen leasen ? Ordnung, dieses Bild muss sich also in einem MacBook Pro-Rahmen befinden. Also werden wir versuchen, dies in einen MacBook Pro-Rahmen zu legen. Es ist da drin. Versuchen wir erneut, uns anzupassen. Und jetzt würde es gut aussehen. Ja, das sieht gut aus. Achte nur darauf, dass es bei diesem Teil bleibt. In Ordnung. Wir können auch sicherstellen, dass dies in Bezug auf die Y-Achse mittig ausgerichtet ist. Das haben wir getan. Es ist jetzt in der Mitte. Als Nächstes ändere ich das einfach in Bild. Und um dieses Bild responsiv zu gestalten, stelle ich sicher , dass die Einschränkungen zwei sind, links und rechts. Wählen Sie also einfach dieses Bild stellen Sie sicher, dass die Einschränkungen links und rechts sind. Und wir werden versuchen, die Größe zu reduzieren , um zu sehen, ob es richtig funktioniert oder nicht. Sie können also sehen, dass unser Bild auch responsiv ist und dieser Text auch responsiv ist. Jetzt sehen Sie möglicherweise eine Art Überlappung zwischen diesem Text und dem Bild einfach weil der Datenraum größer ist als das, was wir hätten verwenden sollen. Und das ist der Grund, warum du dieses Zeug siehst. So würde es also auf meiner GoPro 14 Zoll aussehen. Sie können also am Ende einfach das Rasterlayout entfernen. Und so würde Ihre Website aussehen. 29. (27) Animationen & Prototyping in Figma: In Ordnung Leute, jetzt , da ihr alle gelernt habt , wie man ein Mini-Projekt erstellt, lasst uns weitermachen und sehen, wie wir mit Figma interaktive Flows erstellen können. Wenn Sie nun Designs in Figma erstellen, ist es wichtig, dass Sie dem Kunden oder dem Benutzer tatsächlich das Feld geben , in dem er die Software tatsächlich verwendet, nicht nur den Designteil. Also brauchen wir ein paar Animationen für diese Flows, oder? Damit der Benutzer das Feld bekommt, okay, dieses Design ist interaktiv. Wenn ich auf diese Schaltfläche klicke oder wenn ich den Mauszeiger über diese Elemente bewege oder wenn ich auf einige Objekte schiebe, sehe ich einige andere Dinge. Das werden wir also in der heutigen Vorlesung lernen. Das ist es, worum es beim Prototyping geht. Dafür erstelle ich einfach einen neuen Rahmen in der Größe des iPhone 14. Lassen Sie uns also schnell ein paar grundlegende Dinge erstellen. Ich werde einen Text verfassen, der besagt, dass dies Prototyping-Protokolltypisierung ist. Versuchen wir, die Mitte auszurichten. Okay, in Bezug auf meine X-Achse, nicht auf die Y-Achse, denn wir wollen, dass diese oben ist. Der nächste Schritt, den wir wollen, ist, ein einfaches rechteckiges Feld von vielleicht ungefähr dieser Größe zu erstellen . Und stellen wir auch sicher, dass dies mittig ausgerichtet ist. In Ordnung? Wenn du etwas Strich oder Farbe hinzufügen möchtest, mach das, aber das werde ich nicht tun. Im letzten Schritt wollen wir ein paar Knöpfe. Also ich werde das sagen, sagen wir mal Klick, klick hier, klick hier. Und wir wollen, dass dieser Text etwas enthält, weißt du, 2020 sieht viel kleiner aus. 24 würde gut funktionieren. Also 24, das war's. Lassen Sie uns diesem Text ein automatisches Layout hinzufügen. Klicken Sie also mit der rechten Maustaste auf Auto-Layout hinzufügen. Stellen Sie sicher, dass dieser Button etwas gepolstert ist. Also, was meine X-Achse angeht, gebe ich das als, sagen wir mal, ich bin Wendy. Und Y-Achse, das heißt von oben und unten I15. Also lasst uns weitermachen und das tun. Lassen Sie uns dieser Schaltfläche auch etwas Farbe hinzufügen. Ich könnte etwas hinzufügen wie, sagen wir, einen gelben Knopf. Ein helleres Gelb. Okay, lassen Sie uns dem auch etwas Strich hinzufügen. Also füge ich einen Strich und einen schwarzen Strich hinzu. Ja, das sieht gut aus. Und stellen Sie einfach sicher, dass dies richtig ausgerichtet ist. Okay, der nächste Schritt, das ist mein einziger Frame des iPhone 14. Jetzt möchte ich, dass sich die Farbe dieser rechteckigen Box ändert, wenn der Benutzer diese bestimmte Tanglebox umkreist. Nun, wenn du Webentwicklung lernst, musst du das in CSS machen, wir haben die Hover-Effekte, aber wir wollen solche Dinge tatsächlich in Figma anzeigen . Wie können wir das dann machen? Dafür wähle ich einfach meinen gesamten Rahmen aus. Ich mache eine Kopie dieses Rahmens. Und ich stelle sicher, dass ich im Kopierrahmen die Farbe der rechteckigen Box habe , die ich tatsächlich anzeigen möchte, sagen wir ein leuchtendes Rot. Wenn ich also den Mauszeiger über dieses rechteckige Feld bewege, möchte ich, dass sich die Farbe meines rechteckigen Feldes von grau zu, sagen wir, rot ändert . Versuchen wir also zu sehen, wie es passieren wird. Dafür. Konzentrieren Sie sich auf das Fenster mit den Konstruktionseigenschaften. Oben sehen Sie drei Optionen. Entwerfen, prototypisieren und prüfen. Also geh einfach zum Prototyp. Wählen Sie das Gerät aus, das Sie tatsächlich verwenden. Wählen Sie das Objekt aus, für das Sie möchten . Wenn an diesem bestimmten Element eine Aktivität stattfindet, wird die Änderung angezeigt. Sie können also einfach sehen, dass wir hier das Plus-Symbol haben. Ziehen Sie einfach den Rahmen , an dem wir die gewünschte Änderung vornehmen möchten. Wie Sie sehen können, haben wir die Art von Aktion, die dieses Objekt ausführen sollte. Wenn ich also auf dieses rechteckige Feld tippe, wird das nächste Bild, das iPhone-Voting , angezeigt. Wenn ich das Objekt ziehe, wenn ich von links nach rechts oder von rechts nach links schiebe , wird meine Änderung so angezeigt. Wenn ich den Mauszeiger über das Objekt bewegen würde, wird die Änderung angezeigt. Versuchen wir also einfach zu sehen, was passiert, wenn ich einfach auf das Objekt tippe. Also lasse ich das einfach so wie es ist. Ich möchte, dass dies zu meinem iPhone navigiert, iPhone 14 zum Framen. Wenn Sie alle dort ein vorhandenes Designprojekt verwenden , haben Sie möglicherweise auch andere Rahmen. Gehen Sie also einfach zum Drop-down-Menü und stellen Sie sicher, dass Sie den richtigen Rahmen auswählen. Sobald Sie das getan haben, können Sie die Registerkarte Animationen direkt im Popup-Fenster mit den Interaktionsdetails sehen . Sie werden die Animation sehen. Im Moment ist es also ausgewählt, sich aufzulösen. Anfänglich könnte es auf Instant ausgewählt werden. Das heißt, wenn Sie einfach auf dieses oder dieses bestimmte Element klicken oder einfach darauf tippen können . Und B wird sofort angezeigt. Oder es wird keine Spezialeffekte geben. Wenn Sie Spezialeffekte anzeigen möchten, müssen Sie dieses Drop-down-Menü auswählen und die gewünschte Animation auswählen. Also wenn ich auflösen wähle, dann würde unsere Animation so aussehen. Wenn ich das zu schlau auswähle, animieren Sie. So würde es aussehen. Wenn ich einziehen wähle, dann sieht es so aus. Versuchen wir, uns jede einzelne Animation anzusehen indem wir den Mauszeiger darauf bewegen oder besser gesagt in dieses rechteckige Feld tippen. Sobald Sie also Ihre Animation ausgewählt haben, Ihren Rahmen, Ihr Element, all das Zeug. Klicken Sie einfach oben auf dieses Plus-Symbol. Du kannst also einfach präsentieren. Figma wird in einem neuen Tab geöffnet und Sie sehen das Gerät , das Sie ausgewählt haben. Wie Sie sehen können, haben wir diese iPhone-Abstimmung. Sobald ich auf dieses rechteckige Feld klicke, kannst du jetzt sehen, dass ich diesem rechteckigen Feld schwebe. Sobald ich darauf klicke, wird diese rote Farbe angezeigt, oder? Das ist es, was hier passiert. Ich kann einfach zu meinen Interaktionen zurückkehren. Ich kann wählen, anstatt zu tippen, um sagen zu lassen, dass ich den Mauszeiger bewegen möchte, dann soll uns diese Änderung angezeigt werden. Wenn ich das also aktualisiere und sobald ich den Mauszeiger darüber schwebe , oder besser gesagt, ich sollte es erneut laden. Wenn ich nun den Mauszeiger über dieses rechteckige Feld bewege, sehen Sie rote Farbe. Sobald mein Cursor das rechteckige Feld verlässt, befindet er sich in seinem ursprünglichen Zustand. Das ist es, was Schweben eigentlich bedeutet. Dies ist ein sofortiger Effekt. Lassen Sie mich von Instant zu, sagen wir, ich wechsle von Instant zu Dissolve. Jetzt würdest du sehen, wie die Animation aussehen wird. Die Farbe löst sich von Grau zu Rot auf. Lass es mich dir einfach zeigen. Also, wenn ich hier rübergehe, können Sie sehen, dass Guillotine zum Lesen ist. Wenn ich meinen Cursor nach draußen bewege, löst sich die Farbe langsam wieder in Grau auf. Das ist es, was es im Grunde tut. Gerade jetzt. Wir haben nichts mit unserem Button gemacht. Sobald ich also darauf klicke, sehen Sie möglicherweise einige Farbänderungen auf dem rechteckigen Feld, das eine hellblaue Farbe hat. Aber das ist im Grunde nur, um uns mitzuteilen, dass Sie für dieses Element keine Maßnahmen ergriffen haben. Wenn Sie Ihrer Schaltfläche, die hier ist, eine Aktion hinzufügen möchten , können Sie einfach zurückkehren, um Ihr Element auszuwählen, und ziehen Sie es hierher. Und dann kannst du auf Fass sagen. Und dann können Sie einfach wählen, welche Animation Sie möchten. Nehmen wir an, ich will dieses Rutschen. Dann kannst du das machen. In Ordnung? Wenn Sie das wollen, anstatt einer Verzögerung von, Sie wissen schon, 300 Millisekunden, möchten Sie die Verzögerung auf etwa 100 Millisekunden ändern . Dann kannst sogar du das tun. Aus welcher Richtung gleiten wir jetzt? Von rechts nach links, von links nach rechts, von oben nach unten, von unten nach oben, was auch immer Ihnen am besten passt, Sie können das auswählen und die Animation wird angewendet. Also lass uns zurückgehen. Und wir können von rechts nach links wählen. Und lassen Sie uns versuchen, das auszuführen. Wenn ich jetzt mit der Maus über mein rechteckiges Feld gehe, können Sie sehen, wie sich die Farbe ändert. Oder was ist, wenn ich auf diesen Button klicke? Sie können sehen, dass die Änderung tatsächlich so aussieht. So umgeht man diese Dinge also. In Ordnung? Nun, wenn du das willst, wenn ich auf diesen Button klicke und es sollte wieder in den ursprünglichen Zustand zurückkehren, dann kannst du das auch tun. Ändern Sie einfach den Text anstelle von Click Here, um beispielsweise auch die Texte umzubenennen. Ähm, sagen wir, geh zurück. Was Sie also tun können, Sie können wählen, zurückgehen. Und das wäre einfach diese Schaltfläche auszuwählen. Ziehen Sie zurück zum vorherigen Frame. Und besser gesagt, ich sollte sagen , dass dies eine Interaktion wäre. Das wäre eine Interaktion. Und wir können auch eine weitere Interaktion hinzufügen. Jetzt geht diese Interaktion von dieser Schaltfläche zu meinem vorherigen Status. Navigieren Sie also auf der Registerkarte zum iPhone 141. Wenn du willst, dass das schiebt. Das kannst du sogar tun. Jetzt hast du auch die Kurve. Das heißt, wollen wir, dass die Animation leichter ein- und aussteigt, leichter ein- und aussteigt. Wenn Sie nun ihr eigenes CSS haben , müssen Sie über all die Dinge Bescheid wissen. Ich muss mich nicht wiederholen. Dies ist nur eine Art, wie Sie Ihre Animation tatsächlich darstellen. In Ordnung? Es gibt also auch eine andere Möglichkeit , Ihre Animation zu präsentieren. Und was ist Animation? Im Grunde genommen ist Animation eine Möglichkeit, Ihre Bilder darzustellen. Was ist Video? Video besteht im Grunde aus Bildern, weißt du, Tonnen von Bildern, die in einer Sekunde auf deinem Bildschirm gerendert werden, was dir die Illusion gibt dass es sich tatsächlich um ein Video handelt. Video ist nichts anderes als eine Gruppe von Bildern, Gruppe von bewegten Bildern, wie ein Bild, in dem sich eine Person direkt hier befindet. Im zweiten Bild ist die Person hier drüben, dann hier drüben. Wenn diese drei Bilder kombiniert werden und sie Ihnen mit einer bestimmten Geschwindigkeit gezeigt werden, tatsächlich die Illusion, dass die Person tatsächlich Distanz eins, Entfernung b, geht. Das ist also Ihre Animation. Im Grunde. Es geht nur um die Bilder und du versuchst herauszufinden , wie die Krümmung meiner Animation aussehen sollte ? Möchtest du, dass es eine lineare Animation ist? Lockerung ist out und all das Zeug. Sie können also einfach das auswählen, was für Sie am besten funktioniert. Also werde ich es einfach halten. Ich werde das auswählen, was ich bisher ausgewählt habe , und ich werde meinen Prototyp ausführen. Wenn ich also zurückgehe, können Sie sehen, kann ich zu meinem vorherigen Bild zurückkehren. Wenn ich mit dem Mauszeiger schwebe, können Sie sehen, dass ich Rot bekomme, ich bekomme diese rote Farbe und ich erhalte auch ein anderes Textfeld. Wenn ich klicke, kannst du sehen wie die Animation so aussieht. So umgehst du also deine Animationen und machst Prototypen in Figma. 30. Wireframing in Deutschland: In Ordnung Leute, jetzt ist es an der Zeit, dass wir verstehen, was Wireframing und UI UX Design sind. Wireframe ist eine digitale Skizze eines Designs. Als UI- oder UX-Designer müssen Sie also Wireframes erstellen , damit Kunden oder Ihr Unternehmen oder vielleicht Ihre Kollegen Ihre Ideen schnell visualisieren können . Wireframe stellt also nur das Gesamtbild einer Idee dar, und es ist sehr wichtig, dass Sie lernen, ob Sie eine Website oder eine Anwendung entwerfen möchten . Alles in allem hat Wireframe also im Allgemeinen keine Gestaltungselemente. Wenn Sie versuchen, eine Anwendung oder eine Website zu erstellen, springen Sie einfach nicht direkt in den Designstil ein. Vokale Ischämie wird welche Art von Topographie verwenden, welche Art von Schriftfamilie und all das Zeug. Nein, das ist nicht das allererste, was Sie behandeln. Als Erstes erstellen Sie ein Wireframe. Wireframe enthält im Wesentlichen den gesamten Inhalt Sie hauptsächlich auf dieser Webseite oder in diesem bestimmten Abschnitt Ihrer Bewerbung behandeln werden . Das ist es also, was dein Wireframe im Grunde bedeutet. Um ein Beispiel zu geben. Für die gesamte Vorlesung werden wir eine Wireframe-Anwendung für Instagram erstellen . Wenn du also tatsächlich zu Instagram gehst und dir eines deiner Freundesprofile ansiehst, kannst du einfach ein beliebiges Bild auswählen und du wirst den Benutzernamen oben finden. Sie werden den Standort finden. Wenn die Person den Standort markiert hat, das Bild selbst, das Symbol, das Benutzerprofilsymbol. Dann siehst du unter dem Bild den Benutzernamen, den Kommentar, dann die Bildunterschrift, die Symbole wie Kommentieren, Senden, Speichern und all das Zeug. Bevor wir also direkt reingehen, sollten wir herausfinden, welche Art von Schriftfamilie wir verwenden werden, welche Art von Farbschema wir verwenden werden. Zunächst versuchen wir, den Inhaltsteil dort zu visualisieren , wo genau das Bild platziert werden soll. Ob wir wollen, dass es zentriert ist, ob wir etwas Polsterung wollen, ob wir eine andere Ausrichtung wollen. Wo sollte mein Nutzername angezeigt werden? Oben, unten, wo es angezeigt werden soll. Okay, dann haben wir andere Icons und Instagram wie dein Home-Icon-Suchsymbol. Dann gibt es eine, ich weiß nicht, was sind die Symbole, die wir haben? Wir haben unser eigenes Profilbildsymbol , über das wir zu unserem Profil gelangen. Dann gibt es ein Leck oder ein Feedback-Symbol, glaube ich. Dann hast du noch ein paar andere Sachen. Du hast auch die Karussellbilder und Instagram, also kannst du einfach rüberrutschen und oben links, oben rechts, tut mir leid, du würdest das anhand der Anzahl der Bilder sehen, bei welchem bestimmten Bild du dich gerade befindest. Nehmen wir an, die Person, die Sie tatsächlich auf Instagram haben , hat drei Bilder auf dem Sonnenschirm gepostet. Sie können also einfach wischen und zum ersten, zweiten und dritten wechseln. Und es wird im oberen rechten Bereich angezeigt und so weiter. Das werden wir also in dieser Vorlesung tun. Lassen Sie uns also schnell einen Rahmen in der Größe des iPhone 14 erstellen. Und im nächsten Schritt werde ich das vergrößern, werde ich das vergrößern sodass ihr alle sehen könnt, dass 75% gut aussehen. Im nächsten Schritt ist es wichtig, dass Sie Raster verwenden, wann immer Sie versuchen , ein Design oder ein Drahtmodell zu erstellen , ein Design oder ein Drahtmodell zu erstellen. Also werden wir das Layoutraster hinzufügen. Jetzt ändern wir das vom Grid-System zum RO-System. Warum also reihen und sie nicht anrufen? Einfach weil wir eine mobile Anwendung erstellen. Wenn wir es jetzt mit mobilen Anwendungen zu tun haben, haben wir nicht viel Nässe. Wir haben viel Körpergröße. Wenn wir es also mit viel Höhe zu tun haben, haben wir es mit Reihen zu tun. Wenn wir viel Nässe haben, haben wir es mit vielen Säulen zu tun. Damit werden wir uns also befassen. Wählen Sie also einfach Zeilen aus, wählen Sie gut aus, zählt die Zeilen. Und jedes Handy hat seine eigene Benachrichtigungsleiste, oder? Dabei würde es die Zeit, den Batterieprozentsatz dort, den Mobilfunkdienst, dass er das Netzwerk nutzt, die Netzwerkstärke anzeigen den Batterieprozentsatz dort, Mobilfunkdienst, dass er das Netzwerk nutzt . Und unten im mobilen Bereich, auf dem mobilen Display, würden Sie die Symbole Home Back und Task Manager sehen. Aus diesem Grund wollen wir eine gewisse Marge. Lassen wir also etwa 50 Pixel Rand übrig. Und die Dachrinnengröße scheint mir fair zu sein. Also belasse ich das bei 20 Pixeln und schließe einfach und wir lassen es so wie es ist. Im nächsten Schritt verwenden wir diesen Punkt ganz unten hier, wo ich meinen Cursor bewege. In diesem Teil wollen wir die Navigationssymbole. Lassen Sie uns also schnell eine rechteckige Box mit genau dieser Größe erstellen . Also erstelle ich einfach eine rechteckige Box. Und ich werde sicherstellen, dass die Breite auch dem Layoutraster entspricht. Und das ist der nächste Schritt. Wir werden sicherstellen, dass wir wissen, wie viele Hektar die Haussuche hat, das echte Saigon, ich glaube, da ist ein scharfes Symbol. Und das letzte ist dein eigenes Profilbild. Also fünf kann ich sagen, erforderlich. Ordnung, also dafür, was ich tun werde, werde ich einfach mein Font Awesome Plugin verwenden. Wenn Sie also im Font Awesome-Plugin kein Symbol haben , nach dem Sie suchen , können Sie einfach das Stiftwerkzeug verwenden, um Ihr eigenes Symbol zu erstellen. jedoch In den meisten Fällen finden Sie jedoch kein Symbol, das in diesem speziellen Plugin nicht verfügbar ist. Also lasst uns einfach suchen, wen ich kann, und ich werde danach suchen. Und hier sehen Sie das Home-Symbol. Also lass uns das Symbol einfach hierher bringen. Wo ist mein Symbol? Wo genau gehe ich hin? kann ich finden. Wo ist mein Eigen? In Ordnung, es wurde also hier übergeben. Wir werden das verschieben. Im nächsten Schritt wollen wir das Suchsymbol. Bringen wir einfach unser Suchsymbol mit. Jetzt weiß ich nicht, warum es so lange dauert dieses Symbol zu bringen. Also Suchsymbol. In Ordnung, wir haben unser Suchsymbol. Den nächsten wollen wir. Ich glaube nicht, dass sie das Reels-Icon und diese Schrift Awesome wären . Stattdessen können wir das Zaunsymbol verwenden. Also würden wir so etwas wirklich bekommen. Du kannst einfach Film eingeben. Wir können dieses Symbol vorerst verwenden. Im nächsten, nächsten Schritt wollen wir Shop-Artikel. So scharf. Das sieht gut aus. Also verwenden wir dieses Symbol, einen Shop-Artikel oder diesen, dieses spezielle Symbol wird im Allgemeinen auf Instagram verwendet. Also löschen wir einfach diesen. Und für das Profilbild wird eine Kreisform verwendet , damit Sie sich im nächsten Schritt keine Gedanken darüber machen müssen Die anderen Symbole, die wir verwenden würden, das Symbol, das Kommentarsymbol und das Duftsymbol sowie das Speichersymbol. Bringen wir also einfach alle Icons mit. Jetzt habe ich alle Icons hinzugefügt. Der nächste Schritt, den wir tun werden, ist, dass wir all diese Symbole an gleichen Stellen verwenden . Also zieh einfach diesen Teil hin und her. In Ordnung, ziehen wir das einfach. Stellen Sie sicher, dass die Breite und Höhe 30 Pixel mal 30 Pixel betragen. Und das sieht gut aus. Ordnung, versuchen wir, dieses Zentrum in Bezug auf die Y-Achse auszurichten , nicht auf die X-Achse. Oder es tut uns leid, wir können es einfach hier lassen. Ordnung, im nächsten Schritt wollen wir das Suchsymbol. Also klicken wir einfach 30 mal 30 auf dieses Suchsymbol. Bringen Sie einfach all diese Symbole mit und dann werden wir es versuchen, dann werden wir versuchen, sie tatsächlich in den richtigen Abständen zu platzieren. Also 30 T. Dann dieser, nochmal, es muss 30, 30 sein. Lass es uns hier benutzen. Und schließlich wollen wir eine kreisförmige Form haben. Also benutzen wir das einfach. Okay, 38, 38. Widerrufen Sie das. Also mach dir darüber keine Sorgen. Lassen Sie uns einfach wieder eine Ellipse mit einer Größe von 30 mal 30 erstellen. Und wir geben eine Füllfarbe von vielleicht einem dunkleren Farbton. Dieser Farbton sieht gut aus. Und wir stellen sicher , dass der Abstand dieser Ellipse von diesem Punkt aus gleich ist. Um das zu tun, was ich tun werde, werde ich in diesem Fall meine Umschalttaste oder eine andere gedrückt halten. Ich kann sie einfach alle zusammen auswählen. Dieser, dieser, dieser, dieser und dieser. Und ich kann sie so ausrichten , dass sie gleiche Abstände einnehmen. In Ordnung, jetzt kann ich einfach 12 ganze Dinge auswählen. Ups, ich kann einfach 123 auswählen, das ganze Zeug. Und bewegen Sie es einfach so, dass es vertikal ausgerichtet ist. Okay, so sollte unsere Navigation, die unterste Navigation, aussehen. Den nächsten Schritt wollen wir. Oben wollen wir das Symbol, das das Rückwärtspfeilsymbol ist. Das Rückwärtspfeilsymbol erfordert dies ebenfalls. Bringen wir also einfach dieses Symbol mit. Wir können also Zurück-Pfeil sagen. Ja, dieser, das ist es, wonach ich gesucht habe. Platzieren wir es einfach hier drüben. Und der nächste Schritt, den wir wollen, ist wiederum 30 mal 30. Stellen Sie also sicher, dass alle Symbole 30 mal 30 groß sind. Dieser. Ist auch 30 mal 30. Dieser ist auch 30 mal 30, 30 mal 30, 30 mal 30, 30 mal 30. In Ordnung, cool. Dieser sieht mit 30 mal 30 zwar nicht so toll aus, aber das werden wir umgehen. Also mach dir darüber keine Sorgen. Im nächsten Schritt wollen wir sicherstellen , dass das Bild zum Großteil zum Teil passt. In Ordnung? Also, ähm, weißt du, es gibt eine Bildunterschrift, da ist diese Bildunterschrift, es gibt einen Kommentarbereich. Sehen Sie sich alle Kommentare und Bildunterschriften an. Dann haben wir ein Bild. Also werden wir diesen benutzen , damit wir wissen, dass das weg muss. Dadurch kann der Benutzer zurückkehren. Ordnung, dann stellen Sie in dieser Zeile, insbesondere , sicher, dass wir das Symbol, das Profilbild, den Benutzernamen haben . Darunter haben wir den Standort und die drei Punkte. Ich glaube, das wäre es. Dann werden wir von diesem Punkt bis vielleicht, sagen wir zu diesem Punkt, oder vielleicht zu diesem Punkt, unser Image beibehalten. Also dieser Punkt auf diesen Punkt, von hier bis hierher. Lassen Sie uns also einfach eine rechteckige Box erstellen. Von diesem Punkt bis ungefähr, darüber. Nein, das sieht gut aus. Dieser sieht gut aus. Lassen wir es also einfach so belassen , damit wir wissen, dass wir darüber sprechen. Das ist unser Bild. Okay, der nächste Schritt, wir möchten, dass diese Zeile unseren Like-Kommentar und diesen Speichern-Button sendet. In Ordnung, also verwenden wir einfach diesen. Stellen Sie sicher, dass dies richtig ausgerichtet ist. Dieser ist auch richtig ausgerichtet. Herz-Symbol. Wählen Sie das Gesagte hier aus. In Ordnung. Stellen Sie sicher, dass Sie dieses auswählen. Genau hier. Wählen Sie dieses hier aus. In Ordnung? Das sieht jetzt gut aus. In Ordnung. Achte nur darauf, dass es mittig ausgerichtet ist. Also kann ich einfach diesen auswählen. Herz-Symbol. Und jetzt ist mein Herzsymbol auch richtig ausgerichtet. Cooles Zeug. Jetzt der nächste Schritt hier drüben, wir wollen, wir wollen den Namen der Person, den Namen der Bildunterschrift, die Kommentare und all das Zeug. Also machen wir das. Und ganz oben hier, Begriff V1, was wollen wir? Wir wollen diesen Begriff. Lass mich das kopieren. Machen Sie eine Kopie hier. Jetzt kann ich bitte so einstellen, dass angezeigt wird, dass ich über die Person spreche. Stimmt es? In Ordnung. Im nächsten Schritt muss dies richtig mittig ausgerichtet sein. Ja. Lassen Sie uns einen Blick auf den Text werfen , der Inter ist und gut aussieht. Wir sagen Nutzername. Der Benutzername sollte halbfett sein. Also wechseln wir von normal zu halbfett. Und unter diesem Text wollen wir einen weiteren Text, nämlich den Standort. Wenn wir also über Tag sprechen, taggen Sie Ihren Standort. Und wir kopieren das, ändern es auf normal, oder? Ja, das sieht gut aus. Der nächste Schritt, den wir wollen, ist das Drei-Punkte-Symbol, das Optionssymbol. Ähm, wir haben versucht, für das Plugin zu finden, ob wir, okay, wir haben keine Optionen. Vielleicht können wir drei Punkte sagen. Wir haben drei Punkte, also werden wir das verwenden. Stellen wir sicher, dass es richtig passt. Und auch in Bezug auf andere Icons. Es ist richtig ausgerichtet. Jep. Und achte nur darauf, dass das auch 30 mal 30 ist. 30 mal 30. Oh, hoppla. Das muss gesperrt werden. 30. 30. Okay, das sieht nicht gut aus. Versuchen wir, die Originalgröße zu verwenden. Dieser sieht gut aus. 30 mal 8,7, was auch immer es ist. Und es stellt sicher, dass dies die Entfernung ist, die es zurücklegt. In Ordnung, cool. Dieses Wireframe sieht wirklich gut aus. Der nächste Schritt, wenn wir wollen, dass das schwarz ist, weißt du, wir werden, wir werden es als schwarze Farbe behalten. Und in diesem Bild oben rechts. In diesem Teil werden wir auch ein weiteres kleines rechteckiges Feld erstellen , das angibt, auf wie vielen Bildern wir uns tatsächlich befinden. Stellen Sie also sicher, dass diese Box diese Farbe hat. Diese Farbe, oder? Ähm, stell sicher, dass es in dieser Zeile bleibt. Oder besser gesagt, lassen Sie uns einfach dieses löschen, es wird ein Textfeld angezeigt, und wir werden eins von 31 mal drei sehen. Fügen wir dem ein automatisches Layout hinzu. Sobald wir das automatische Layout hinzugefügt haben, stellen wir sicher, dass der Abstand aus allen Richtungen nur 55 aus all diesen Richtungen beträgt . Trotzdem ist es viel zu groß. Machen wir also drei daraus. In Ordnung, und wir geben dem eine Füllfarbe. Füllen Sie also eine graue Farbe aus. Ja. Dieser sieht gut aus. Wenn Sie einen Grenzradius hinzufügen möchten, machen Sie das. Wireframing erfordert jedoch unbedingt einen beliebigen Randradius. Also lassen wir das einfach so wie es ist. Hier drüben. Wir können erneut drei Punkte hinzufügen, um sicherzustellen, dass wir sehen , dass dies ein Sonnenschirm ist. Also können wir einfach eine Kopie davon machen. Und wir können die Farbe ändern. Ich kann es einfach in der Mitte platzieren. Stellen Sie nur sicher, dass wir anstelle von Schwarz die Farbe Blau haben. Nur um zu zeigen, dass sie Cortisol verwenden. Also blaue Farbe. Und das sieht gut aus. Am Ende wollen wir. Hier können wir Instagram sagen. Du kannst Instagram im Schriftstil verwenden. Und hier drüben, was werden wir tun? Wir sagen, zuallererst nehmen wir das, richtig. Lass mich einfach die Mitte ausrichten, etwa so. Dann verwenden wir Textbox. Okay, Textbox, dieser Teil mag es, wird sehen, dass das dieser Person gefällt. Und lass uns das einfach irgendwohin hierher bringen. Dieser Teil. Wir können den gleichen Text verwenden. Also kopiere das einfach und platziere es hier. In Ordnung. Siehst du, geliked nach Nutzernamen und sagen wir mal 20 anderen, oder? Wendy, andere. Cool. Das wollten wir. Im nächsten Schritt wollen wir die Bildunterschrift. Also nochmal, lass uns einfach diesen Benutzernamen im Schriftstil verwenden , oder? Wir können den Benutzernamen einfach hier platzieren. Nochmals eine Kopie des Textes. Für die Bildunterschrift können wir nun den Lorem Ipsum-Text verwenden. Ich kann also Untertitelbindestrich sagen und dann kann ich das Lorem Ipsum verwenden. Also werde ich einfach das Lorem Ipsum-Plugin verwenden. Lassen Sie uns also einfach Phi-Sätze generieren. Und es hat keine fünf Sätze bewertet. Achte nur darauf, dass es zum Auto passt, verstecke dieses Zeug. Eher sollte ich das sagen. Ich verkleinere das nur. Und ich ändere die Größe. Ich ändere die Größe meines Textfeldes. Diese Textfeldseiten müssen gekürzt werden. Und stellen Sie nur sicher, dass es die automatische Höhe einnimmt. Nochmals, zoomen Sie das. Einige dieser Dinge müssen möglicherweise in der Bildunterschrift gelöscht werden. Sie können die Größe dieses Teils einfach ändern. Sie können die Bildunterschrift hier platzieren. Lassen Sie uns diesen Teil der Bildunterschrift löschen, diesen großen Teil. Und wir können sagen, lesen Sie mehr. Lesen Sie mehr. Und wir können auch einige Ellipsen hinzufügen , um sicherzustellen, dass wir das auch wirklich meinen. Wir können einfach den Teil Mehr lesen auswählen. Wir können die Füllfarbe in eine graue Farbe ändern, etwa so. In Ordnung. Lesen Sie mehr und unten verwenden wir den Kommentarbereich. In Ordnung? Wir können also sagen Alle Phi-Kommentare anzeigen. Und schließlich möchten wir auch das Datum angeben. Ordnung, also was ich dafür tun werde, lassen Sie uns einfach die Größe dieser Symbole verringern. Ich finde, dass 30 mal 30 viel zu groß ist. Reduzieren wir also auf 2020. Nein, das wäre viel zu klein. 25, aber diese 25 sehen gut aus. Achte also einfach darauf, dass dieser richtig passt. In Ordnung, lassen Sie uns das ganze Zeug auswählen. Bring es irgendwohin hier drüben. Und am Ende wollen wir das Datum. Wir können also gleich hier sehen , dass wir das Datum auswählen können. Also sagen wir vor zwei Tagen. Also vor zwei Tagen, so etwas. Und so würde dein Instagram-Wireframe wie eine exakte Nachbildung davon aussehen. Wie cool ist das? Am Ende können Sie einfach Ihren Rahmen auswählen. Sie können einfach das Gitter entfernen. Und so sieht dein Instagram-Wireframe tatsächlich aus. Und bevor wir diese Vorlesung tatsächlich beenden, möchte ich noch ein paar andere Dinge hinzufügen , von denen ich denke, dass sie einige Änderungen bewirken könnten. Das würde bedeuten, einige horizontale Linien hinzuzufügen. Also wähle einfach all diese Sachen aus. Bitte setz dich irgendwo hier hin. In Ordnung. Fügen wir nun eine Linie hinzu, nur eine einfache Linie, die diesen Abschnitt unterteilt. In Ordnung? Eine einfache horizontale Linie. Achte nur darauf, dass die Strichfarbe grau ist. Diese Farbe. In Ordnung, ich setze mich bitte irgendwo hier hin. In Ordnung, machen wir eine Kopie davon. Und wo werden wir es einfügen? Genau hier. In Ordnung. Irgendwo hier. Und noch einer, welcher Ort, der sich freuen würde, diese Wüste zu hören. So sieht dein Instagram aus. Lass mich einfach rauszoomen , damit du richtig sehen kannst. Und so würde dein Instagram-Wireframe tatsächlich aussehen. 31. (30) Exportieren von Dateien in Figma: Ordnung Leute, jetzt , wo wir gelernt haben wie man Wireframes für unser Design erstellt, schauen wir uns auch an, wie wir sie in verschiedene Formate exportieren können und welches Format für unseren Anwendungsfall besonders geeignet ist. Ich wähle also einfach meinen Rahmen aus, wann immer Sie eines Ihrer Designs exportieren möchten. Stellen Sie nur sicher, dass Sie den gesamten Rahmen auswählen. Also wähle das einfach aus. Und in ihrem Bereich mit den Designeigenschaften scrollen Sie einfach bis zum unteren Teil, dort finden Sie den Export. Anfänglich. Es wäre so. Klicken Sie also einfach auf das Plus-Symbol und Sie finden die Exportmethode. Jetzt gibt es verschiedene Formate, in denen Sie Ihre Figma-Designdatei exportieren können. Nun, das sind PNG, JPEG, SVG und PDF. Nun, was bedeutet P&G eigentlich? Warum sollte ich mein Design in ein PNG-Format exportieren? PNG steht also für Portable Network Graphics. Es ist ein Bitmap-Bildformat, das im Allgemeinen für die Übertragung von Bildern über das Internet verwendet wird . Gehen Sie also nicht näher darauf ein, was PNG ist, was ist dieses Bitmap-Format? Verstehen Sie nur, dass es sich um ein verlustfreies Dateiformat handelt, was bedeutet, dass die Bildqualität nicht beeinträchtigt wird, wenn das Bild komprimiert wird. Okay, wenn ich also versuchen würde, eine PNG-Datei per E-Mail zu senden, sagen wir, und Sie alle wissen, dass es eine gewisse Obergrenze gibt. Es gibt eine Größenbeschränkung die Dateien, sodass nur etwa 25 Mega-Dateien mit Ihrem Gmail oder einem der E-Mail-Dienstanbieter, den Sie verwenden , gesendet werden können Ihrem Gmail oder einem der . In diesem Fall kommt P&G ins Spiel, weil Sie die Dateigröße reduzieren können und die Qualität nicht beeinträchtigt wird. P&G macht also einen guten Gebrauch, wenn Sie Ihre Dateien im Internet teilen möchten. An zweiter Stelle steht das JPEG-Format. JPEG steht für Joint Photographic Group. Wenn Sie nun dieses gemeinsame fotografische Gruppenbild komprimieren , führt dies zu einer kleineren Dateigröße, verringert aber auch die Bildqualität. Es ist also kein idealer Weg um Ihre JPEG-Dateien tatsächlich über das Internet zu teilen. Im Allgemeinen passiert, dass, wenn Sie eine Datei, JPEG-Datei, in Ihrem System etwa ein Megabyte groß sind. Und Sie versuchen, das mit einer von Ihnen verwendeten Instant-Messaging-Software oder Instant-Messaging-Anwendung zu senden Instant-Messaging-Software . So etwas wie, sagen wir WhatsApp. Wenn Sie also eine Datei senden, besteht die Möglichkeit, dass WhatsApp die Dateigröße generell reduziert oder komprimiert, sodass die Datenübertragung einfacher ist . Wenn Sie also JPEG-Dateien senden, werden die Dateien komprimiert und der Empfänger erhält ein Bild von schlechter Qualität, und Sie möchten nicht, dass das passiert. Daher werden JPEGs im Allgemeinen verwendet, wenn Sie Ihr gesamtes Design drucken möchten oder wenn Sie es für fotografische Zwecke verwenden. Verwenden Sie also PNG, wenn Sie die Dateien ins Internet senden möchten, JPEG, wenn Sie tatsächlich einige Dinge drucken möchten. Dann kommt das SVG-Format. Jetzt ist SVG eigentlich Ihre skalierbare Vektorgrafik. Jetzt sind Grafiken nicht an eine bestimmte Auflösung gebunden. So könnte dieser spezielle Rahmen 1920 mal 20 Pixel breit sein, SVGs sind jedoch nicht an eine bestimmte Auflösung gebunden. Es ist eine XML-basierte Vektorgrafik, was bedeutet, dass Sie jedes Element groß oder klein machen können , ohne an Klarheit zu verlieren. Wann sollte man nun eigentlich SVG verwenden? Nehmen wir an, Sie versuchen, mit Figma ein neues Symbol zu erstellen . In diesem Fall wird SVG also zu einem großartigen Verwendungszweck. Wenn Sie also dieses SVG-Format an einen Frontend-Entwickler weitergeben , dann, wenn der Frontend-Entwickler das Zeug tatsächlich in HTML oder React codiert . In dieser Zeit, in der der Entwickler Ihr Symbol verwenden möchte , ist das SVG-Format ein großartiger Anwendungsfall, da SVG sehr klein ist und keine bestimmte Auflösung hat. Und am Ende haben wir das PDF-Format. Pdf ist sehr beliebt , da es keine spezielle Hardware oder Software benötigt , sondern auf jedem System läuft. Pdf steht im Grunde für Pitcher Documented Format. Daher verwenden wir im Allgemeinen PDFs, um unsere Assets zu teilen, die wir in Figma gespeichert haben. Und ich bin hier drüben. Möglicherweise sehen Sie auch, dass wir verschiedene Skalierungsoptionen haben , wenn x 1x2x, Sie fragen sich vielleicht, was das bedeutet? Im Allgemeinen wurde es standardmäßig auf eins x gesetzt. Wenn ich auf x wähle, wird die Qualität verdoppelt. Wenn ich zwei für x auswähle, ist die Qualität am höchsten, aber auch die Dateigröße ist groß. Wenn ich also versuchen würde, das herunterzuladen, lassen Sie mich diesen iPhone 14-Rahmen für X und dann in das PNG-Format exportieren . Dann zeige ich das einfach in der Mappe. Und lass mich dir das zeigen. Wie viel Datei belegt es? Größe der Datei. Es werden also ungefähr 100,103 kb Speicherplatz belegt. Lassen Sie mich Ihnen zeigen, wie das Bild aussieht. So sieht das Bild also tatsächlich aus und dies ist eine unangemessene Methode, um jede Datei, die uns interessiert, zu senden. So arbeitet man also eigentlich herum. Sie exportieren Systeme, wann immer Sie möchten, senden Ihre Dateien tatsächlich an Ihre Kunden und vielleicht an Kollegen und solche Dinge. In diesem Fall verwenden Sie also diese verschiedenen Dateiformate.