Figma für Webdesign UI und UX: Die Grundlagen

1. EINFÜHRUNG: Hey da und willkommen zu diesem Kurs, der dir das Wesentliche der Zusammenarbeit mit Figma beibringen wird. Hey, da bin ich Chris Baron, ein professioneller Web - und App-Designer sowie ein meistverkaufter Instruktor. In diesen paar Stunden wirst du lernen, wie du in kürzester Zeit mit Figma aufstehen kannst. Und das ist ohne vorherige Erfahrung. Unser Ziel ist es, sich an das Programm zu gewöhnen und dabei Spaß zu haben. Deshalb habe ich mir alle möglichen Aktivitäten und Übungen ausgedacht , damit du deine Fähigkeiten verbessern kannst und , damit du deine Fähigkeiten verbessern kannst gleichzeitig etwas Lustiges und Interessantes machst. Figma ist das Neueste für Webdesign- und mobile App-Design-Projekte. Es wird schnell zum Industriestandard. Es ist also eine großartige Sache zu lernen, eine neue CD zu haben. Figma konkurriert in einigen anderen Programmen mit Adobe XD Skizze . Um diesen Kurs zu absolvieren, lernen Sie alles , was Sie darüber wissen müssen, einschließlich der Grundlagen zur Installation was ist meine Meinung als Profi? Ist es gut genug? Ist es besser als Adobe XD und all diese anderen Programme? Jetzt, am Ende dieser paar Stunden, wird eine Meeting-Website fertiggestellt, eine Collage. Sie werden wissen, wie man Belastungen und Textebenen entwirft, und Sie haben ein gutes Verständnis für die Grundlagen und Figma. Dinge wie man Elemente maskiert, wie man mit Farben arbeitet, aber auch fortgeschrittenere Dinge wie das Arbeiten mit Rastern, Effekten aller Art, Komponenten und Entwürfen. Schließlich ist dieser Kurs Teil einer Serie und dies ist der Beginn Ihrer Reise. Nachdem dieser Teil erledigt ist, sollten Sie mit den nächsten Schritten fortfahren, damit Sie Figma beherrschen können. Und damit lasst uns das Wort bekommen. 2. Was ist Figma und ist besser als andere Designprogramme?: Hey da, das ist Kresse, weniger über Figma reden. Figma ist ein kostenloses Designprogramm, mit dem Sie fantastische Web - und App-Design-Projekte erstellen können. Also Websites, Android-Apps und iOS-Apps. Jetzt, da ich sage, dass es kostenlos ist, ja, es ist kostenlos und keine wesentlichen Einschränkungen für den kostenlosen Plan. Den Vergleich können Sie sich hier ansehen. Grundsätzlich können Sie keine Sachen innerhalb eines Teams teilen, aber das ist wirklich nicht unbedingt erforderlich. Wenn du ganz alleine arbeitest, bist du der Gute her. Mehr dazu in einem anderen Video. Nun, das nächste, was Sie über Figma wissen müssen , ist, dass es eine Menge Hype gibt. Die Leute sprechen über Figma und wie großartig es ist. Es hat eine ernste Dynamik. Und das sehen Sie hier zumindest in Bezug auf die Animation Ihrer Designs, die als Prototyping bezeichnet werden. Jetzt scheint Figma wie verrückt zu werden. Warum lieben Designer Figma so sehr? Nun, ich kann nicht wirklich sagen, dass es eine bestimmte Sache gibt, aber lassen Sie mich Ihnen meine Ansicht sagen. Nummer eins, ich mag die Tatsache, dass mehrere Personen gleichzeitig in Figma im selben Projekt arbeiten können . Das ist total genial. Um fair zu sein, machen das auch andere Programme . Zum Beispiel, Adobe XD, das zweite, was mir gefällt, können Sie Figma in Ihrem Browser verwenden. Ja, das hast du gehört, oder? Sie können fast jeden Browser starten, sich kostenlos anmelden und an die Arbeit gehen. Ihr Computer muss nicht allzu mächtig sein. Sie benötigen mindestens Windows 8.1 oder macOS Sierra, aber das sollte kein Problem sein. Nun, das war's. Nichts mehr dazu. Ein Vorschlag, bitte installieren Sie das eigenständige Programm. Das werden wir in diesem Kurs verwenden. Bitte pausieren Sie das Video, erstellen Sie ein kostenloses Konto und laden Sie das Programm herunter. Auch hier können Sie es in Ihrem Browser verwenden, aber ich verwende es lieber als Programm. Ich zeige Ihnen nicht, wie Sie sich anmelden können weil es so ist, als würde man sich für Gmail anmelden. Es ist alles super einfach, unkompliziert NADH. Der dritte Grund, warum ich Figma mag , ist , dass es für Anfänger ziemlich einfach zu bedienen ist, aber es wurde entwickelt, um die größten Projekte der Welt zu bewältigen . Denken Sie an Projekte wie Lyft oder Uber. Denken Sie an Apps mit vier oder 500 Bildschirmen. Figma kann damit umgehen, kein Problem. Darüber hinaus können Sie mit Figma schnell Änderungen an Hunderten von Bildschirmen vornehmen. Das ist die wahre Macht von Sigma. Es wird tatsächlich vom Rubens-Designteam benutzt. Nun, bevor wir vorankommen, Figma in Ihrem Browser hat Figma in Ihrem Browser gegen Big Man ein eigenständiges Programm. Es gibt keinen Unterschied zwischen ihnen. Ist das gleiche Programm die gleichen Funktionen? Wenn Sie lieber in einem Browser arbeiten, ist das völlig in Ordnung, aber ich halte die Dinge gerne getrennt. Obwohl es keine Unterschiede gibt, empfehle ich erneut die eigenständige Version des Programms. Lassen Sie uns als Nächstes über Figma gegen Photoshop, Illustrator, Sketch, Adobe XD und so weiter sprechen. Erstens sollten Sie Figma nicht mit Photoshop und Illustrator vergleichen . Diejenigen von Adobe-Programmen sind unglaublich leistungsfähig, aber für etwas anderes gebaut, ganz anders. Photo Shop ist ein unglaublich vielseitiges Programm. Es kann viele Dinge tun, aber weil es so fähig ist, ist es auch unglaublich langsam. Es ist wie ein Kreuzfahrtschiff voller Dinge für Ihren Genuss. Aber weil es so viel bietet, ist es sehr schwer, es zu umgehen und es ist nicht gerade die Definition von Geschwindigkeit. Um es gut auszudrücken. Illustrator wieder ähnlich wie Photoshop. Es ist ein fantastisches Programm. Ich liebe es, aber es geht darum, mit Vektoren zu arbeiten. Bei Figma hingegen dreht sich alles um Webdesign und Designprojekte. Das war's. Das gesamte Programm dreht sich um diese beiden Arten von Projekten. Und weil es sich auf diese beiden Dinge konzentriert, ist es schneller, einfacher zu lernen, aber in dieser Hinsicht ist es auch unglaublich mächtig. Jetzt Einkommen Adobe XD und Sketch, die direkte Konkurrenten zu Figma sind. Diese beiden Programme machen das Gleiche, aber welches ist besser mit C? Das ist nicht die richtige Frage. Es gibt kein bestes Programm. Bmw drei Serien gegen Mercedes, C-Klasse im Vergleich zum A4. Welches ist der beste? Das neueste iPhone im Vergleich zum neuesten Android, das ist am besten. Pepsi oder Cola, was am besten ist. Es ist eine Frage der Präferenz. Sicher, dass unsere Unterschiede, aber am Ende des Tages tun sie alle das Gleiche. Nun ist zu beachten, dass Figma kostenlose Skizzen von 9 USD pro Monat ist. Xd kostet zum Zeitpunkt dieser Aufnahme etwa 10 US-Dollar pro Monat. Und Adobe XD verfügt über eine VBD-Grid-Funktion, die absolut großartig ist. Aber figma hat ein automatisches Layout und wie Sie sehen können, ist es eine sehr lange Liste von Unterschieden. Aber wie ich bereits sagte, gibt es keinen klaren Gewinner. Und das werden wir noch mal sagen. Es gibt viele Unterschiede, aber darüber müssen Sie nicht nachdenken. Vertrauen Sie mir, obwohl es sich um direkte Konkurrenten handelt, kann ich Ihnen nicht sagen, welcher am besten ist , weil es eine subjektive Sache ist. Darüber hinaus habe ich einen Webdesign-Kurs in Photoshop und einen Webdesign-Kurs in Adobe XD. Am Ende des Tages spielt es keine Rolle, was Sie verwenden werden. Was zählt, ist, was man damit machen kann. Das sage ich noch einmal. Es spielt keine Rolle, mit welchem Programm Sie arbeiten möchten. Kunden ist es egal, dem Entwickler ist es egal, der Design-Community ist es egal. Ich zeige Ihnen, wie Sie das Design für die Programmierung vorbereiten können, und das wird für alle Beteiligten funktionieren. Der Coder muss Figma nicht mit Adobe XD mit Photoshop lernen . Der Client muss die Quelldatei nicht öffnen und damit herumspielen. Das wird nicht benötigt. Aufgrund dieser Dinge kannst du also benutzen, was du willst. Wenn Sie sich für Figma und Freude entscheiden als Pepsi und BMW. Das ist großartig. Wenn Sie sich für etwas anderes entscheiden, ist es das Gleiche, es macht keinen Unterschied. Also mach dir bitte keine Sorgen und frag dich nicht , welches besser ist. Fragen Sie sich stattdessen, welches bevorzugen Sie? Und wenn das aus dem Weg ist, pausieren Sie bitte das Video und stellen Sie sicher, dass Sie Figma als eigenständiges Programm installiert haben als eigenständiges Programm installiert weil wir gerade an die Arbeit gehen. Danke. 3. Der welcome in Figma: Hallo und willkommen zu dieser Vorlesung. Lasst uns Figma öffnen und uns daran gewöhnen. So sieht das Programm zum Zeitpunkt dieser Aufnahme aus. Anfangs gibt es viel zu sehen, aber lassen Sie es uns vereinfachen. Um ein neues Projekt zu erstellen. Sie können hier in der Entwurfsdatei oben rechts klicken. Sobald Sie darauf klicken, werden Sie zu Ihrem neuen Projekt weitergeleitet. Keine Fragen, kein Setup. Große Zusammenführungen bringen uns direkt hinein. Nun, kurz, wenn Sie von Adobe XD oder dem Photoshop kommen , können Sie Ihre Projekte in Figma nicht öffnen. Gerade jetzt. Figma kann nur Skizzendateien öffnen und das war's schon. Sie können also mit Ihren vorherigen Dateien nicht wirklich aus einem anderen Programm kommen . Okay, lass es mich schließen, damit ich dir eine andere Möglichkeit zeigen kann , ein neues Projekt zu erstellen. Und das ist mit Kontrolle und wo man sich an N für neu erinnern kann. Das ist also Kontrolle. Und in diesem Kurs sind wir nur an Designdateien interessiert. Also ignoriere bitte diese andere Option wird nicht benötigt. Wenn Sie diese Option nicht sehen möchten, aktivieren Sie einfach dieses Kontrollkästchen. Okay, gehen wir zurück zum Hauptbildschirm oder zum Begrüßungsbildschirm. Hier kann er Ihre letzten Projekte sehen und Sie können diesen Abschnitt ändern, indem Sie hier klicken. Ich empfehle diese Thumbnail-Version. Sie werden nicht dieselben Projekte auf Ihrem Ende sehen da diese spezifisch für mein Konto sind. Dieses Layout kann sich im Laufe der Zeit ändern, also mach dir keine Sorgen, wenn deins nicht genau so aussieht. Hier haben wir zum Beispiel einen Vorlagenbereich, aber wir können ihn einfach schließen, falls Sie Ihr Profil, Ihre Einstellungen überprüfen oder sich abmelden möchten . Das kannst du jetzt von hier aus machen. Okay, gutes Zeug. Jetzt lass mich dir das wichtige Zeug zeigen. Figma ist sehr groß in seiner Community. Klicken Sie hier und Sie erhalten ein völlig neues Layout. Im Grunde genommen haben Sie hier eine Menge kostenloses Zeug, Plugins, Werbegeschenke, Dinge, die Ihnen mit Ihren Wireframes helfen , jede Menge Sachen. Sie haben hier eine Suchleiste für den Fall , dass Sie etwas Bestimmtes suchen. Es gibt all diese Kategorien hier. Ich weiß, dass dich das erschrecken könnte. Es ist viel zu nehmen, aber wisse, dass hier nichts wesentlich ist. Dies sind Dinge , die dir helfen könnten, nachdem du mehr Erfahrung auf deinem Gürtel gemacht hast. Dies sind Ressourcen, die Sie möglicherweise zu einem schnelleren und effizienteren Designer machen , aber später sollten Sie sich als Anfänger nicht auf sie konzentrieren. Stattdessen schlage ich vor, dass Sie die Prinzipien des Webdesigns lernen. Und nachdem Sie eine solide Grundlage haben, können Sie damit beginnen, diese Dateien zu erkunden. Schon wieder. Einige von ihnen sind nett, aber nicht am Anfang. Wie gehen wir jetzt zurück zum Hauptbildschirm? Nun, wenn du hier klickst, wird nichts passieren. Was Sie tatsächlich tun müssen, ist hier auf diesen Pfeil zu klicken. Das bringt dich zurück. Wir haben also Neuerscheinungen, Entwürfe und Community. Oh, übrigens, das ist in Beta. Es kann sich also ändern, wenn Sie sich dieses Video ansehen. Wenn das der Fall ist, mach dir keine Sorgen, die Funktionalität wird dieselbe sein, okay? Und wenn du in der Community bist, kannst du zurückgehen, indem du hier klickst. Stellen Sie sicher, dass Sie sich dieses Highlight ansehen, das ich aufgrund dieser blauen Farbe unter dem aktuellen Tab kenne. Wenn Sie versehentlich auf ein Teamprojekt geklickt haben, erhalten Sie ein anderes Layout. Apropos Vorstellungen, Figma ermöglicht es Ihnen , mit mehreren Designern gleichzeitig in derselben Datei zu arbeiten . Lassen Sie mich mein Setup schnell neu anordnen. Ich habe das eigenständige Programm auf der einen Seite und meinen Browser auf der anderen Seite. Stellen wir uns vor, dass dies ein anderer Designer ist. Wenn ich meine Maus bewege, kannst du sie auch hier sehen. So ist es also, als würde mit mehreren Personen in derselben Datei arbeiten. Aber das ist nicht jedermanns Sache, also werden wir uns nicht darauf einlassen. Apropos Dinge, die wir nicht zu viel abdecken werden, war diese andere Sache, die Feigenmarmelade genannt wird. Wir können es hier oben rechts sehen, aber auch wenn wir Control N drücken und das Kästchen unten nicht ankreuzen. Ganz schnell. Die Eiermarmelade ist ein Whiteboard , mit dem Sie Ihre Ideen skizzieren können. Lass mich dir zeigen , wie das aussieht. Es ist im Grunde ein Ort, an dem Sie Ideen brainstormen, Dinge skizzieren, eine Struktur für Ihre Projekte erstellen und so weiter können. Aber denken Sie, dass Jam ein separates Werkzeug ist, das für unsere Webdesign-Arbeit nicht unerlässlich ist, also werden wir nicht darauf eingehen. Jam eignet sich hervorragend für Online-Meetings , bei denen mehrere Personen etwas besprechen möchten. Es funktioniert direkt in Ihrem Browser. Es ist intuitiv, daher ist es einfach, damit anzufangen. Aber da wir nicht Teil eines Teams oder Unternehmens sind, wird es wieder zur Seite stellen. Ich weiß, dass du vielleicht neugierig bist, aber dafür gibt es eine Zeit und einen Ort und es ist nicht jetzt. Vertrau mir dabei. Okay. Machen wir eine kurze Pause und wir machen in einer Sekunde weiter. 4. Erste mit Figma: Willkommen zurück. Lasst uns an die Arbeit gehen. Aber ich ermutige dich, die meisten Videos anzuschauen, besonders ihre Hände zweimal. Das erste Mal, dass du zuschaust. Versuche nicht mitzuarbeiten. Sehen Sie sich einfach an und verstehen Sie, was los ist , wenn Sie am Ende des Videos kommen, es neu starten und erneut ansehen Diesmal halten Sie so oft wie nötig inne, um mitzuarbeiten. Dies ist bei weitem die beste Art zu lernen. Versuchen Sie also nochmal nicht, bei Ihrer ersten Besichtigung mit mir zu arbeiten. Machen Sie das stattdessen beim zweiten Mal, wenn Sie sich das Video ansehen. Und bitte benutze dein Handy nicht. Es ist viel zu klein und du wirst nicht verstehen , was los ist. Okay, lass uns anfangen. Bitte erstellen Sie ein brandneues Projekt mit Kontrolle und oder indem Sie hier klicken, scheint alles so leer zu sein. Aber lassen Sie uns ein zweites Projekt erstellen, indem wir dasselbe Hotkey-Steuerelement verwenden. Und okay, schauen wir uns mal mal hier an. Unsere Projekte werden als Tabs angezeigt. Wenn wir zu unserem Hauptbildschirm zurückkehren möchten, können wir hier auf dieses Home-Icon klicken. Einfach so. Wechseln Sie zwischen den Projekten. Klicken Sie einfach auf die Namen. Im Moment heißen beide Untitled. Um diesen Fokus hier in der Mitte der Seite zu ändern. Klicken Sie hier und jetzt können wir es umbenennen. Ich nenne es Kress Won. Wechseln Sie nun zum anderen und benennen Sie es um, um auch zu drücken. Also Projekt 1 und Projekt 2, richtig? Erstellen wir nun ein Rechteck, indem wir R, R für das Rechteckwerkzeug drücken, oder Sie können einfach hier klicken. Sie können sehen, dass dieses Tool das ausgewählte ist, da es dieses blaue Highlight hat. Jetzt ziehen wir eins. Es ist grau auf Grau, also funktioniert das nicht. Lasst uns diese Farbe ändern. Dies geschieht immer von dieser rechten Seite aus. Dieses Panel ändert sich basierend auf dem ausgewählten Bereich. Wissen Sie, das Rechteck ist ausgewählt , weil es dieses blaue Highlight hat. Wenn wir irgendwo anders klicken, beachten Sie, dass wir hier nur sehr wenige Möglichkeiten haben. Okay? Wähle das Rechteck aus und auf der rechten Seite findest du Phil dort. Bitte klicken Sie auf dieses Quadrat, übrigens nicht auf die Buchstaben, auf das Quadrat, auch bekannt als Swatch. Okay, das öffnet den Farbwähler. Dies ist der Farbwähler. Wählen Sie eine beliebige zufällige Farbe aus und drücken Sie dann die Escape-Taste oder die Schließen-Schaltfläche. Wenn Sie jedoch auf die Zeichen klicken, können Sie den Farbcode manuell eingeben . Das ist auch in Ordnung, aber das wollen wir gerade nicht. Okay. Jetzt haben wir ein rotes Quadrat in Chris, um zu den Tabs und dem Kopf zu gehen, dieses X-Symbol, um es zu schließen. Das ist wirklich wichtig. Wir sparen einfach die ganze Arbeit, die wir einfach verlieren. Es würde passieren. Hör zu, es ist alles in Ordnung. Klicken Sie auf das Home-Icon. Und im letzten Stich werden Sie Cress sehen, dies ist das erste in der Liste, weil es das letzte Projekt ist, an dem wir gearbeitet haben. Wenn Sie es öffnen möchten, doppelklicken Sie darauf. Der erste wesentliche Punkt ist also, dass Figma genau wie bei jedem Browser mit Tabs arbeitet. Wenn Sie zwischen den Registerkarten wechseln möchten, klicken Sie darauf. Der nächste wesentliche Punkt Figma spart immer Ihre Arbeit, sodass Sie Control S oder einen anderen Hotkey nicht verwenden müssen. Figma speichert alles automatisch. Aber das bringt die Frage auf, wo wird das Projekt gespeichert? Nun, sie sind nicht auf deinem lokalen Computer. Alles wird in der Cloud gespeichert. Deshalb ist Figma großartig. Wenn Sie sich auf einem anderen Computer anmelden, haben Sie Zugriff auf alle Ihre Dateien. So können mehrere Personen an demselben Projekt arbeiten. Da ist alles in der Cloud. Im Internet hat jeder Zugriff darauf. Denk darüber nach. Wenn sich die Datei auf Ihrem Laufwerk befindet, müssten andere Personen eine Verbindung zu Ihrem Computer herstellen , und das ist nicht cool. Da sich die Datei jedoch auf dem Server im Internet befindet, kann jeder darauf zugreifen. Das heißt, wenn Sie ihnen erlauben, ist die Cloud natürlich sicher, schnell und sehr einfach zu gewöhnen. Der Nachteil ist, dass Sie einen Internetzugang benötigen. Jetzt ist es nicht das Ende der Welt. Wenn Sie auf einem Flug sind oder Verbindung für die paar Stunden getrennt werden. Sobald Sie wieder online sind, wird das Projekt erneut in die Cloud hochgeladen. Aber sagen wir, du arbeitest nicht gerne so. Vielleicht sind Sie es gewohnt, Dateien zu speichern. Sie haben diese PSD auf Ihrer Festplatte. Sie können es kopieren, auf ein USB-Laufwerk einfügen, per E-Mail senden und so weiter. Nun, die Sache ist, dass jeder in die Cloud wechselt. Photoshop hat diese Option auch. Adobe XD ist groß in der Cloud. Sogar die Skizze machte den Wechsel sehr deutlich, dass die Cloud die Zukunft ist. Mein Rat, bekämpfe nicht dagegen, auch wenn du dich gerade nicht wohl fühlst, probiere es aus. Solange Sie die Projekte anständig benennen. Und Sie können die Miniaturansichten sehen. Sie sollten in der Lage sein, sie schnell zu finden, aber für den Fall, dass Sie einfach nicht damit umgehen können. Bitte klicken Sie hier auf das Figma-Logo. Gehe von hier aus zu File. Wählen Sie nun Lokale Kopie speichern aus. Auch hier empfehle ich das nicht, aber weiß, dass du es schaffst. Hier und da gibt es noch ein paar Details, aber lasst uns in ein Projekt einsteigen, um uns die Hände schmutzig zu machen. Lasst uns an etwas arbeiten. 5. Die besten Möglichkeiten, dich in Figma zu bewegen: Willkommen zurück. Sprechen wir über die besten Möglichkeiten, sich fortzubewegen und Figma. Gehen Sie zuerst auf die Registerkarte „ Letzte Dateien“ und klicken Sie mit der rechten Maustaste auf diese beiden Projekte, die wir zuvor erstellt haben. Um das Projekt zu löschen, klicken Sie einfach mit der rechten Maustaste in der Liste darauf und wählen Sie den Sprung aus. Okay, nur für den Fall, dass Sie einen Fehler gemacht haben, können Sie immer zu Entwürfen gehen und von dort aus haben Sie einen gelöschten Abschnitt. Okay? Lassen Sie uns nun eine brandneue Datei erstellen, um Land zu kontrollieren, welche Methode Sie bevorzugen, und lassen Sie uns an die Arbeit gehen. Anfangs weiß ich, dass alles so leer erscheint. Jedes Projekt beginnt mit einem Frame. Das ist das erste, woran du dich erinnern musst. Rahmen ist wie eine Kunsttafel oder eine Leinwand, aber es gibt nur das bisschen anders in Figma ist ein Ort, an dem Sie alle Ihre Textbilder hinzufügen, im Grunde genommen Ihren Inhalt Das ist alles im Rahmen. Mach dir keine Sorgen um die Definition. Während wir arbeiten, kriegen Sie es bald. So fügen Sie einen Rahmen hinzu. Bitte drücken Sie F, um die gerahmte Wand zu aktivieren oder klicken Sie einfach hier. Oh, übrigens, macht hier ein anderes Tool namens Slice Dwell, aber das wollen wir nicht. Okay, wir haben das Frame Tool ausgewählt und das rechte Panel hat sich gerade geändert. Sie haben viele Optionen , die sehr gut organisiert sind. Telefon, Tablet oder Desktop und so weiter. Und Sie können auf die Namen klicken, um sie zu öffnen oder zu schließen. Und wenn Sie auf einen von ihnen klicken, sagen wir iPad Mini, wird der Rahmen automatisch hinzugefügt. Sie können es auch im Ebenenbedienfeld sehen. Sehen Sie dieses Symbol hier , das wie ein Hashtag aussieht. Das ist ein Frame, um es zu löschen. Tippen Sie einfach auf die Entf-Taste und das war's. Okay, gehen wir zum Desktop-Bereich und wählen das erste Element aus dieser Liste aus, das auch Desktop genannt wird. Wir können die Größe genau hier sehen. Es ist 1440 bis 1024, dann hast du es. Jetzt ist das Problem, meisten Webdesign-Projekte mit einem Frame beginnen sollten , der 1920 bis 1080 ist. Deshalb empfehle ich dringend die Größe am besten zu ändern, indem Sie diesen Teil hier verwenden. W steht für das Netz, und h steht für Höhe statt 1440, klicken Sie hier. Und jetzt kannst du 1920 tippen. Das Gleiche gilt für die Höhe, nach der wir suchen, dann 80. Jetzt hat sich der Rahmen erweitert und wir können ihn nicht sehr gut sehen. Hier ist was du tun musst. Vergrößern oder verkleinern. Bitte halten Sie die Steuerungstaste gedrückt und benutzen Sie Ihr Mausrad. Wenn Sie rückwärts scrollen, zoomen Sie heraus. Wenn Sie vorwärts scrollen, zoomen Sie heran, nachdem Sie es einige Male getan haben, wird sich natürlich anfühlen. Bitte benutzen Sie Ihre linke Hand, idealerweise Ihren kleinen Finger, um die linke Steuerungstaste auf Ihrer Tastatur zu halten . Benutze jetzt deine Schriftrolle. Bitte mach folgendes. Bewegen Sie Ihre Maus in die Koordinate des Rahmens und zoomen Sie hinein. Wie Sie sehen können, hilft Ihnen dies wirklich, sich auf diesen Bereich zu konzentrieren. Verkleinern Sie jetzt heraus und bewegen Sie sich in eine andere Ecke. Das Gleiche. Vergrößern Sie, indem Sie nach dem Wort scrollen. Ich weiß, das scheint sehr grundlegend zu sein, aber vertrau mir, es ist wichtig, dass du praktizierst. Du kannst nicht vorwärts gehen, bis du dieses Zeug beherrschst. Es gibt noch eine Sache, die Sie verwenden müssen, und das ist die Leertaste. Sagen Sie das mit Zoom dann in eine Ecke und mit sehr zufrieden mit der Zoomstufe. Aber jetzt wollen wir in die andere Ecke gehen. Das nennt man Schwenken. Schwenken herum. Halten Sie die Leertaste gedrückt und Mauszeiger wechselt zu einer Hand. Wenn Sie die Leertaste loslassen, geht sie zurück zu den Standarddaten, Die gut verschoben, also halten Sie die Leertaste, klicken Sie auf Halten und bewegen Sie sich von Koordinate zu Koordinate, von Seite zu Seite zu Seite, nach oben und unten. Indem Sie es schaffen, diese beiden einfachen Techniken zu beherrschen, schaffen Sie eine sehr solide Grundlage. Das ist dein Alphabet. Dies ist Ihre grundlegende, grundlegende Mathematik. Bitte lerne es. Das gibt es nicht zu umgehen. Um es zu wiederholen, halten Sie die Steuertaste gedrückt und zoomen Sie mit der Maus ein- oder heraus und halten Sie die Leertaste gedrückt, klicken und halten Sie gedrückt, um sich von Seite zu Seite zu bewegen , um zu schwenken und zu schwenken. Okay, bitte starte ein leeres Projekt und übe es, denn die nächste Vorlesung wird eine Übung sein. 6. Übung: So kannst du Elemente move: Willkommen zurück. Dies ist unsere erste Übung. Hier ist was ich möchte, dass du machst. Bitte laden Sie diese Datei herunter, die als erste Übung diese FIG bezeichnet wird. Wenn du es findest, zieh es bitte in Figma. Du solltest ein blaues Highlight sehen. Das ist ein gutes Zeichen. Lassen Sie es fallen und die Datei wird importiert. Wenn Sie nicht gerne ziehen und fallen lassen, tun Sie dies bitte. Gehe zum Tab „Home“. Von der rechten Seite sehen Sie dieses Icon hier, direkt unter Ihrem Avatar. Klicken Sie darauf und Sie können nach dieser Datei suchen , diese auswählen und das wird dasselbe tun. Du wirst es öffnen. Das empfehle ich, okay? In diesem Projekt sehen Sie zwei Frames im Ebenenbedienfeld. Der erste heißt Small Frame und der zweite, großes Gehirn. Und das ist im Grunde deine Aufgabe. Sie müssen auf diesen Rahmen auf der rechten Seite vergrößern, eines dieser Symbole auswählen und es dann in den großen Rahmen verschieben. Wie Sie sehen können, müssen Sie die Leertaste verwenden, um herum zu schwenken, und Sie müssen vergrößern und verkleinern. Ich möchte, dass der Sitz zu Icons in jeder Ecke des großen Rahmens ist. Das ist Ihre Aufgabe. Stellen Sie sicher, dass Sie sie nacheinander bewegen. Betrügen Sie nicht. So macht es keinen Spaß. Und bitte verschiebe die Frames nicht zusammen, lass sie so wie sie sind. Nun, eine letzte Sache, Sie werden feststellen, dass der kleine Rahmen noch einen weiteren Rahmen enthält. Es nennt sich gerahmt zu. Ich will nicht, dass das in den großen Rahmen verschoben wird, nur das Icon. Sieh dir an, wie du das schaffen kannst. Wenn Sie jetzt etwas vermasseln, fast alles, können Sie immer mit Control Z mehrere Schritte rückgängig machen. Okay, wenn du fertig bist, exportiere bitte den großen Frame als PNG und teile ihn auf der Plattform, damit ich es sehen kann. So können Sie in Figma exportieren. Wählen Sie den großen Frame aus, indem Sie auf diesen Namen klicken. Bitte beachten Sie, dass Sie dies nicht auswählen werden, wenn Sie einfach hineinklicken . Klicken Sie also oben links oder verwenden Sie das Ebenenbedienfeld. Klicken Sie einfach dort. Okay, beweg dich jetzt Patienten auf die rechte Seite des Bildschirms. Die letzte Option hier heißt Export. Es ist ausgegraut, aber Sie können darauf klicken. Von hier aus. Wir haben ein paar Möglichkeiten. Wir werden mit einem X und B und G zufrieden sein . Angenommen, wir sind mit dem Training fertig, können wir diesen Knopf drücken und wir werden dieses Fenster bekommen. Ich speichere gerne Dinge auf meinem Desktop. Ich denke, das ist großartig. Okay, klicke auf Speichern. Und das wird sein , dass bitte zwei Icons in jeder Ecke des großen Rahmens arbeiten . Wie du sie arrangierst, das liegt ganz bei dir. Was ich gerne hätte, ein schönes Layout zu sehen. Fahren Sie nicht mit dem Kurs fort, denn im nächsten Video zeige ich Ihnen, wie Sie ihn lösen können. Bitte halten Sie inne und arbeiten Sie. Ich danke dir vielmals. Viel Spaß damit. 7. Die Übung und einige Tipps lösen: Hallo und willkommen zurück. Hast du die Übungen alleine gemacht? Wenn nicht, stoppe bitte das Video sofort. Ich weiß, es scheint so einfach zu sein und ich bin mir sicher, dass Sie verstehen, was Sie tun müssen, aber Sie müssen üben. Geschwindigkeit erfordert eine ganz andere Übung. Okay, hier ist eine Lösung und ein paar Tipps, um ein bisschen schneller zu sein. Die reguläre Methode besteht darin, ein wenig zu zoomen und auf das erste Symbol zu klicken. Verkleinern Sie jetzt ein wenig heraus und verschieben Sie es in den großen Rahmen. Es spielt keine Rolle, ob Sie es in einer einzigen Bewegung oder andererseits tun , Sie könnten es in mehreren Schritten tun. Sie zoomen wieder hinein, wählen einen aus und verschieben es dann an den linken Bildschirmrand. Halten Sie die Leertaste gedrückt, klicken Sie auf Halten und schwenken Sie nach links. Jetzt beweg es nochmal. Und wenn nötig, mach das noch ein paar Mal. Wenn Sie jetzt das zweite Symbol platzieren, schlage ich vor, dass Sie auf diese roten Linien achten. Diese helfen Ihnen, die Dinge präzise auszurichten. mir egal, wo Sie die Icons in die Ecke des Rahmens platzieren , aber ich würde sie gerne ausgerichtet sehen. Okay, das ist die übliche Arbeitsweise und ich schlage vor, dass Sie die Übung mindestens zweimal auf diese Weise machen. Okay, gib jetzt eine Alternative aus. Sie können Ihre Zoomstufe auf einen Punkt einstellen , an dem beide Frames auf demselben Bildschirm angezeigt werden. Jetzt schnapp dir den Kleinen und bewege ihn direkt neben den großen. Das wäre Betrügen und ich ermutige dich nicht , auf diese Weise für diese spezielle Übung zu arbeiten. Die Idee ist zu lernen, wie man - und herauszoomen und herumschwenken kann, aber das wird die Dinge viel einfacher machen und wir können ein paar andere Dinge lernen. Hier ist noch ein Tipp. Wenn Sie klicken und ziehen und ein Rechteck erstellen, wählen Sie einige der Symbole aus dem kleinen Rahmen aus. Prüfen Sie das Ebenenbedienfeld. Sehen Sie, wie das Häkchen im Chevron jetzt hervorgehoben ist. Das ist gut. Wenn Sie jedoch auf das ganze Ding klicken und ziehen, wählen Sie jetzt den gesamten Rahmen aus. Der entscheidende Punkt ist , dass Sie mehrere Elemente auswählen können , indem Sie das Feld herausziehen. Wenn die Moore betteln, wählen Sie den Rahmen selbst aus. Stellen Sie also sicher , dass Sie sich das notieren. Okay, jetzt ist noch eine andere Art zu arbeiten. Ich wähle das Minus aus und ziehe es über den großen Rahmen. Beachten Sie, dass Figma es sofort im Ebenenbedienfeld bewegt. Das ist genial. Wenn Sie also eine Schicht über Regen bewegen, wird sie sie verschlucken. Bitte notieren Sie sich das. Okay, jetzt füge ich schnell das zufällige Rechteck hinzu. Beachten Sie das Ebenenbedienfeld. Dies befindet sich über beiden Frames. Aber wenn ich es über den Großen schiebe, nun, los geht's. Es folgt einfach weiter. Und wenn du es nach draußen bewegst, ist Figma klug genug, um es aus diesem Gehirn zu entfernen. Übrigens, falls Sie sich nicht sicher sind, ob sich dieses Rechteck innerhalb des Rahmens befindet, können Sie dies einfach tun. Klicken Sie hier, um den Rahmen zu schließen. Das macht dieser Pfeil. Jetzt können wir sehen, dass dieses Rechteck nur herumschwebt. Es ist kein Teil eines Frames. Aber was ist, wenn wir es in den großen Rahmen ziehen, indem das Ebenenbedienfeld verwenden, wenn wir das von hier aus tun, nun, hier ist das Ding. Das tut es. Verschieben Sie es im Ebenenbedienfeld, aber nicht auf der eigentlichen Arbeitsfläche. Sie können das Highlight hier sehen. Das ist nicht allzu großartig. Aber wir können noch eine Sache machen. Zoomen Sie zu einem Punkt heraus, an dem Sie den großen Rahmen sehen können. Konzentriere dich jetzt hier auf die rechte Oberseite. Klicken Sie auf diese beiden Symbole, das zweite und das fünfte. Und einfach so sitzen die Rechtecke genau in der Mitte des Rahmens. Nun, wie hilft uns das? Nun, wir können das Minussymbol auswählen, und sobald es sich im großen Rahmen befindet, können wir dieselben Ausrichtungswelten verwenden. Dieses Mal benutzen wir eine Zeile, richtig? Und nachdem das erledigt ist, richten Sie unten aus, zoomen Sie in diese Ecke, dann los geht's. Okay, jetzt wiederhole den Vorgang. Die Sache ist, dass Sie möglicherweise eine Überlappung bekommen. Das ist keine große Sache, denn dies ist eine großartige Möglichkeit, Ihre Pfeiltasten auf Ihrer Tastatur einzuführen , wobei dieses Symbol ausgewählt ist, halten Sie die Umschalttaste gedrückt, und tippen Sie auf die linke Pfeiltaste. Dies verschiebt das Symbol und die 10-Pixel-Inkremente. Wenn Sie sich also mit 20 Pixel nach links bewegen möchten , sind das zwei Registerkarten. Eins in cooles Zeug. Der wesentliche Punkt ist , dass Sie, wenn Sie ein Element auswählen , das sich innerhalb des Rahmens befindet, die Ausrichtungswerkzeuge verwenden können, um es schnell innerhalb des Rahmens neu zu positionieren. Das sage ich noch mal. Figma weiß, dass sich das im Rahmen befindet. Dies bedeutet, dass wir die Ausrichtungstools verwenden sie einfach so neu positionieren können. Eine weitere Sache, die Sie beachten sollten, ist, dass wir über das Ebenenbedienfeld zu weiteren Symbolen wechseln. Das ist nicht die beste Wahl, aber hören Sie mich an. Jetzt. Nehmen wir an, wir wollen die Ausrichtungsbohrungen verwenden. Diese funktionieren nicht wie erwartet, da zwei Elemente ausgewählt sind. Und das liegt daran, dass Figma zwei Elemente ausgewählt sieht, wenn Dinge, die wir untereinander ausrichten wollen. Also mein Rat, mach es einfach einzeln, wenn Icon und benutze dann die Ausrichtungstools und dann das zweite Symbol. Und wieder sind die Ausrichtungstools fast fertig. Gehen wir schnell zum nächsten Symbol, das ein anderes Gehirn hat. Das ist etwas, dessen man sich bewusst sein sollte. Hier ist das Ding. Zuvor sind wir über das Icon gegangen, geklickt und es wurde einfach ausgewählt. Aber hier wird das nicht funktionieren. Prüfen Sie das Ebenenbedienfeld. Ich klicke auf den Hintergrund, um die Auswahl aufzuheben. Okay, jetzt gehe ich über das Icon und klicke darauf. Und beachten Sie, dass der sekundäre Frame tatsächlich ausgewählt ist. Um zum Icon zu gelangen, müssen wir darüber doppelklicken. Jetzt hat sich der Rahmen geöffnet und wir können unser Ding mit dem Icon machen. Lass uns das nochmal machen. Falls Sie einen Rahmen innerhalb eines Rahmens haben und sich eine Ebene befindet , die Sie auswählen möchten. Sie müssen klicken und dann doppelklicken, um das Level zu senken. Vergewissern Sie sich, dass Sie das Ebenenbedienfeld im Auge behalten , um zu wissen, was los ist. Es ist keine große Sache, aber Sie müssen sicherstellen, dass Sie die richtige Bank ausgewählt haben, okay, am Ende des Tages sehe ich das gerne von Ihnen. Alle sterben Nachteile gut ausgerichtet. Stellen Sie sicher, dass Sie sich dieses Video noch einmal , um alle wichtigen Konzepte wirklich zu verstehen. Danke und viel Spaß damit. 8. Entdecke Figma’s die Benutzeroberfläche und warum Profis verwendet: Willkommen zurück. Wenn Sie Figma öffnen, sieht es aus wie ein grundlegendes Designprogramm. Lassen Sie uns neue Projekte eröffnen, damit wir uns die Schnittstelle ansehen und wirklich verstehen können , wo Figma glänzt. Okay, hier sind wir. Das Projekt ist völlig leer, also gibt es nicht viel zu sehen, aber nehmen wir es von oben. Wir haben immer das Home-Icon hier, mit dem wir auf diesen Bildschirm zurückkehren können. Wir möchten das vielleicht tun, um ein anderes Projekt zu eröffnen. Was sehen Sie sich vielleicht den Community-Tab neben dem Home-Icon an, wir haben unsere Projekt-Registerkarten. Dieser Teil ist Ihrem Browser sehr ähnlich, daher gehen wir zur Symbolleiste über. Hier fängt an zu denken, dies ist ein super einfaches Programm. Und das liegt daran, dass wir so wenige Tools haben. Das erste Icon zeigt uns viele Optionen. Hier haben wir unser Hauptmenü und wir können viele Dinge tun. Aber hier ist das Ding. Du wirst es nicht allzu oft benutzen. Die meisten dieser Optionen haben Hotkeys, die viel einfacher zu bedienen sind. Niemand kommt hierher, um eine neue Datei zu erstellen , stattdessen verwenden die meisten Leute Control N. Denken Sie also daran. Wir werden dieses Menü nicht allzu oft benutzen. Okay, neben diesem Hauptmenü haben wir ein paar Tools und das sind in der Tat nur eine Handvoll davon. Das erste ist das Move-Tool, und das macht genau das, was Sie glauben, dass es tut. Es bewegt Dinge herum, sich in Schichten oder in den Rahmen von Glukose oder was auch immer ausgewählt wird. Darunter haben wir das Maßstabswerkzeug. Das ist großartig, wenn Sie die Größe ändern möchten und wir darüber einen Vortrag haben. Der nächste hier ist der Rahmen zu Wand. Diese Art von sieht jedoch aus wie ein Hashtag-Symbol. Es ist nicht der Fall. Wie Sie sehen werden, ist dies tatsächlich ein sehr nützliches Tool. Darüber haben wir auch einen vollständigen Vortrag. Weiter haben wir die klassischen Formen, Rechteck, Linie, Pfeil, Ellipse, die Werke. 95 Prozent der Zeit verwenden Sie das Rechteckwerkzeug. Das ist nur ein grundlegendes Webdesign-Zeug. Am Ende dieser Liste haben Sie die Möglichkeit, ein Bild in Figma zu bringen. Wie Sie sehen können, wird dadurch das Browse-Fenster gestartet. Wähle ein Bild aus und schon kannst du loslegen. Und natürlich haben wir darüber auch einen engagierten Vortrag. Okay, bitte beachte, dass die letzten beiden Welt hier die erste ist. Es ist also am besten, dass Sie sich ein paar Hotkeys merken, zum Beispiel für Rechteck. V für das Move-Tool ist nicht so toll, aber Sie sollten sich daran erinnern. V für das Verschiebewerkzeug oder klicken Sie einfach auf diesen kleinen Pfeil und wählen Sie den nützlichsten aus. Und das ist in diesem Fall das Rechteckwerkzeug. Als nächstes haben wir das klassische Stiftwerkzeug, aber wir werden es nicht wirklich verwenden, da die meisten unserer Icons und Grafiken aus dem Internet kommen werden. Das Textwerkzeug ist genau hier, Hotkey P, Es ist sehr einfach. Wort plus ein paar andere Tools hier, die, um ehrlich zu sein, nicht allzu großartig sind, das nicht so interessant ist. Okay, lasst uns den Rahmen und dann ein Rechteck nach dem Zufallsprinzip hinzufügen . Nur damit wir uns auf unseren Bildschirmen etwas ansehen können. Vielleicht eine Textebene zwei. Okay? Jetzt sehen Sie im Ebenenbedienfeld diese Elemente. Sie haben alle verschiedene Symbole. Während wir fortfahren, werden Sie bald anfangen, sie zu lernen. Wenn Sie etwas ausgewählt haben, werden Sie im rechten Bereich Eigenschaften für diese bestimmte Ebene angezeigt . Zum Beispiel können wir hier die Schriftfamilie, die Größe, die Farbe usw. ändern . Wenn wir jedoch das Rechteck auswählen, gibt es weniger Optionen. Und wenn wir irgendwo anders klicken, wird die Auswahl aufheben und dann wird es in diesem Panel nur um sie gehen. Hier ist das Ding. Nimm das Rechteck noch einmal. Dieses rechte Panel ist auf den Entwurfsmodus eingestellt. Und das siehst du hier oben. Es gibt auch einen Prototyp-Modus , mit dem Sie ein Design interaktiv gestalten können. Darauf werden wir uns nicht wirklich konzentrieren, besonders im ersten Teil. Und hier gibt es auch einen dritten Modus, inspizieren. Dies gibt Ihnen ein bisschen CSS-Code und das ist im Grunde für Programmierer nützlich. Wichtig ist, dass Sie sich an den Entwurfsmodus halten. Okay, jetzt mach weiter, das Nächste. Sie haben die Zoomstufe genau hier. Und das ist etwas, das man sich ständig ansehen sollte. Das wichtige Teil sind diese Hotkeys genau hier, insbesondere Shift One, Umschalt Z. Sie müssen sich nicht an sie erinnern, da Sie sich immer auf das Knurren der Kontrollen verlassen können , aber wissen, dass dies genau hier verfügbar ist. Und wieder ist es ziemlich wichtig, auf die richtige Zoomstufe zu zoomen. Als nächstes ist das Wiedergabesymbol welche Präsentationszwecke , wenn Sie Ihr Design ohne Ablenkungen, ohne Werkzeuge und was nicht überprüfen möchten Ihr Design ohne Ablenkungen, . Das ist auch schön, wenn Sie einen interaktiven Prototyp haben. Aber das wird hier am Anfang nicht der Fall sein . Wenn Sie in der Benutzeroberfläche weitermachen, ist dies Ihr Avatar. Meins ist C für die Kress. Ohne mehrere Personen in einem Projekt, das gleichzeitig aktiv ist, werden Sie sehen, dass ich hier Handtücher habe. Und schließlich der Teilen-Button. Dies ist wirklich nützlich , wenn Sie Ihre Arbeit zeigen möchten oder andere Designer einladen möchten mit Ihnen an derselben Datei zu arbeiten? Die Freigabefunktion ist großartig, da Sie das Design als Link per E-Mail oder was auch immer senden das Design als Link per E-Mail oder was auch immer und dann weiter daran arbeiten können. Wenn Sie die PNG-Datei senden, ist das wie ein Snapshot, und das ändert sich offensichtlich nicht. ist also am besten, den Link zu teilen da Sie weiter daran arbeiten können. Und wenn der Client den Link öffnet, haben Sie möglicherweise das große Problem behoben. Okay, in der Mitte der Benutzeroberfläche, oben, findest du ein paar Icons, sehr mächtig sind und sie ziemlich oft benutzen werden. Wie immer werden separate Vorträge über sie haben. Schließlich gibt es auf der linken Seite eine Registerkarte namens Assets. Was unsere Nutzer, die das Beste aus Figma machen möchten. Das ist ziemlich wichtig. Aber wenn du den Anfang hattest, nicht so sehr. Ich erkläre alles später. Wisse einfach, dass wir hier einen separaten Tab haben. Kein Tor. Jetzt kann jedes Design in mehrere Seiten aufgeteilt werden. Dies ist nützlich, wenn Sie ein großes Projekt mit Dutzenden oder sogar Hunderten von Bildschirmen haben. Denken Sie an ein Webdesign-Projekt mit 20 Seiten plus Tablet-Version sowie an die mobile Version, dann eine Android-App und dann an der iOS-App, das ist ein riesiges Projekt, also tun Sie es brauche eine Möglichkeit, es zu organisieren. Nun, das kannst du über Seiten machen. Um ehrlich zu sein, gibt es mehrere Möglichkeiten riesige Projekte zu organisieren, aber Seiten sind definitiv ein Teil davon. Okay, jetzt gehen wir einen Schritt zurück und konzentrieren uns auf das Wesentliche. Die Hauptstärke von Figma, was Figma fantastisch macht, ist die Fähigkeit, Ihre Arbeit zu skalieren. Mit diesen grundlegenden Tools und einigen erweiterten Funktionen können Sie eine Arbeitsweise erstellen, mit der Sie schnell Dutzende von Bildschirmen erstellen können. Dies ist die wahre Kraft von Figma, die Fähigkeit, große Projekte ohne Kopfschmerzen und mühelos zu erstellen . Auch für Anfänger ist das nicht allzu wichtig. Wir werden in diesem Kurs keine 100-seitigen Projekte erstellen, aber am besten wissen Sie von Anfang an über die Stärken von Figma. Auch hier benutzt Uber es, links benutzt das. Und einige andere große Unternehmen sind große Pfannen oder Pigma. Aber für uns ist es jetzt wirklich so wichtig. Okay, wenn das gesagt wird, lasst uns weitermachen. 9. Gestalte deine erste Mini-Website: Willkommen zurück. Wir haben eine praktische Aktivität, bei der ich möchte, dass Sie meine Schritte bei Ihrer zweiten Betrachtung befolgen. Beim ersten Mal schauen Sie sich bitte einfach an und verstehen Sie, wie ich diese Übung angehen kann. Das zweite Mal sehen Sie sich das Video bei Pause so oft an, wie Sie mitarbeiten müssen. Bitte versuchen Sie nicht, der ersten Besichtigung mitzuarbeiten. Ziel ist es, eine Mini-Website unter Verwendung all dieser Elemente zu erstellen . Das Wichtigste, bitte viel Spaß damit. Überhaupt kein Druck. Ich weiß, dass es sehr früh im Kurs ist, aber ich möchte Ihnen zeigen, wie einfach es ist, wenn Sie den richtigen Ansatz haben. Beginnen Sie mit dem Ebenenbedienfeld. Beachten Sie, was wir hier haben, ein Logo, einige Elemente für das Hauptmenü, eine Belastung, ein Foto, ein Hauptmenü-Hintergrund und so weiter. Die Dinge sind also ziemlich organisiert. Fangen wir mit dem Logo an. Wo unsere Logos normalerweise auf den meisten Websites platziert sind. Ist es oben rechts? Ist es ganz unten? Nein, natürlich nicht. Das Logo wird normalerweise hier oben links platziert. Klicken Sie also darauf, um es auszuwählen und ziehen Sie es an die Stelle , wo genau. Nun, es spielt derzeit keine Rolle. Okay, was ist jetzt mit dem Hauptmenü? Wo findet man das normalerweise? Wenn Sie sich nicht sicher sind, öffnen Sie einfach Ihren Browser und schauen Sie sich einige Ihrer Lieblingswebsites an. Normalerweise befindet sich das Hauptmenü rechts neben dem Logo. Bitte bewege sie eins nach dem anderen, so. Und Sie werden feststellen, dass Stigma darauf trainiert ist, uns mit diesen roten Linien zu helfen , und es ist völlig in Ordnung, so zu arbeiten. Nehmen Sie sich Zeit damit. Kein Druck. Sobald Sie sie grob angeordnet haben, etwa so, klicken Sie bitte an eine beliebige Stelle auf der Y-Oberfläche und ziehen Sie eine Box heraus. Okay, so können wir sie alle auswählen. Jetzt können Sie sehen, dass dies im Ebenenbedienfeld der Fall ist. Überprüfe das noch mal. Okay, benutze dieses Icon hier, um sie unten auszurichten. Dies arrangiert sie schnell. Es ist ein bisschen schneller. Okay, noch ein Schritt, klicke hier, und du hast eine Option, die als Idee bezeichnet wird, was im Grunde bedeutet, sie für mich aufzuräumen. Und einfach so sieht das Hauptmenü ganz nett aus. Wenn du wirklich genau sein willst, kannst du das tun. Beweg das aus dem Weg. Wählen Sie übrigens sowohl das Logo als auch das Hauptmenü aus. Und jetzt können Sie dieses Symbol hier verwenden, welches zentriert ist dann optional, aber es sieht ein bisschen besser aus. Wählen Sie als Nächstes das weiße Rechteck aus und verschieben Sie es nach oben. Dieses Grau funktioniert offensichtlich nicht so gut. Also lasst uns auf die rechte Seite gehen und es wird nach etwas Schönerem suchen. Ich mag leuchtende Farben. Also denke ich, dass ich zum Beispiel mit diesem gehen werde. Das sieht besser aus, aber ein großartiger Text ist offensichtlich jetzt. Okay. Also hier ist was wir tun können. Wählen Sie alle diese Elemente wie folgt aus. Okay, von der rechten Seite, suche nach diesem grauen Farbfeld. Hier ist es. Klicken Sie darauf und öffnen Sie den Farbwähler, mit dem Sie relativ einfach arbeiten können. Weiß wird so viel besser sein. Und in der Tat ist es großartig. Schließen Sie dieses Panel und zentrieren wir sie nun noch einmal nur zur sicheren Maßnahme. Benutze dieses Icon hier. Wenn Sie sich nicht sicher sind, welcher welcher ist, probieren Sie sie einfach aus und verwenden Sie dann Control Z, um rückgängig zu machen. Erkunden. Sei neugierig, das ist die Essenz. Okay, für den Button bewegen Sie den Text darin. Wenn du genau hinsiehst, siehst du Figma. Wir versuchen dir zu helfen LK. Wenn das erledigt ist, wählen Sie bitte das Rechteck und öffnen Sie die Farbauswahl erneut. Wir wollen die gleiche Farbe. Beachten Sie, dass Figma uns wieder zu Hilfe kommt. Wir haben die Option „Entf“ genau hier. Aber wenn Sie es nicht sehen können, können Sie dieses Icon auch hier verwenden. Klicken Sie auf das Hauptmenü und das war's schon. Wir haben die gleiche Farbe, aber was ist mit dem Text? Nun, wir müssen es weiß machen. Natürlich gibt es keine andere anständige Option. Okay? Die Dinge laufen gut voran. Okay, wähle das Bild aus und bring es auf. Stellen Sie sicher, dass Sie den gesamten Rahmen sehen können damit Sie ihn richtig ausrichten. Das ist perfekt. Okay. Wir müssen mit dem Titel und der Beschreibung umgehen. Für den Titel ändern Sie bitte seine Größe auf 40 Pixel. Das ist allerdings für das Z. Jetzt können wir es viel besser sehen für die Farbe Weiß ist. Weiß befindet sich immer oben links im Farbwähler. Geh den ganzen Weg in die Ecke. Weißt du, es ist reinweiß. Wenn hier FF, FF, FF steht. Also Fs für die anderen Texte, 18 Pixel bitte, das ist 18, und bitte mach es auch weiß. Ich weiß, dass das schnell erscheinen mag, aber ich möchte Ihnen zeigen, wie die Dinge einfach zusammenfallen. Okay, das Letzte, diese Gegenstände sind überall. Wo sollen wir sie hinbringen? Nun, der beste Ort ist hier auf der linken Seite. Bewegen Sie den Paypal, bis Sie eine rote vertikale Linie sehen , die in Richtung des Logos hinaufgeht. Das wollen wir. Vgl. Das ist perfekt. Machen Sie dasselbe mit der anderen Devisen-Schicht. Nehmen Sie sich Zeit damit. Ich hoffe, du siehst dir das auf einem Computer an und hoffentlich arbeitest du mit mir zusammen. Schließlich, mit der Last, bringen Sie sie einfach nacheinander an ihren Platz. Das ist vollkommen in Ordnung. Und insgesamt ist dies unsere Mini-Website. Hier ist, woran du dich erinnerst. Du musst nicht kreativ sein. Du musst die Regeln kennen. Einer von ihnen ist es sehr wichtig, Dinge auszurichten. Ich weiß, dass es langweilig sein mag, aber es ist tatsächlich wichtig für das Logo und das Hauptmenü, für die Belastung, für die Ausrichtung dieser Ebenen. Dies sind alles sehr wichtige Teile. So würde es aussehen, ohne sie auszukleiden. Ein Blick darauf, wie es aussehen würde , ohne sich auszurichten. Also das ist in Ordnung, das sieht schrecklich aus. Auch hier ist das Prinzip ziemlich einfach, aber mächtig. Richten Sie alles aus, verwenden Sie die Ausrichtung zwei Welten, okay, in Bezug auf die Farbe haben wir eine helle Farbe gewählt und der Rest war reinweiß. Reinweiß, nicht gelb, nicht grün, sonst nichts. Nur weiß für die Hauptfarbe. Es wäre nicht sinnvoll, so etwas zu wählen, oder? Es muss alles einen Sinn ergeben. Der Titel ist größer als die Beschreibung, weil er auffallen muss. Dies sind also einige der Prinzipien, auf die sich stützen werden. Wir werden in anderen Vorträgen ausführlich darüber sprechen. Aber jetzt sag mir bitte, musst du kreativ sein, um dieses Zeug in weniger als 10 Minuten zu erledigen . Wir haben eine Mini-Website erstellt, alles auf einigen Prinzipien beruhte. Richten Sie die Dinge richtig aus, verwenden Sie gute Farben, verwenden Sie das Standardlayout. Das Logo auf der linken Seite, das Hauptmenü rechts und so weiter. So werden wir arbeiten. Wir werden nicht skizzieren, wir zeichnen nicht, wir werden nicht kreativ. Wir lernen Schlüsselprinzipien wie Ausrichtung, Symmetrie, Topographie, Kontrast und schaffen zusammen großartige Dinge. Das liegt daran, dass der Kunde das braucht. Dies ist es, was Sie einstellen wird und dies wird Geld auf Ihr Bankkonto einlegen. Jetzt bitte pausieren, zurückspulen und an die Arbeit gehen. Ich möchte deine Version mit einer anderen Farbe sehen. Ich weiß, es ist ein bisschen früh, aber glaube an dich selbst, du schaffst es. Ich bin hier, um so viel ich kann zu helfen. Nimm das als eine unterhaltsame Herausforderung an. Klicken Sie am Ende auf den Rahmen und wählen Sie dann Exportieren aus. Dann noch einmal exportieren, hochgeladen, und das war's. Okay, vielen Dank und ich suche danach, als dein Design zu sehen. 10. Bearbeiten von Symbolen mit Farben und Größe: Willkommen zurück zu einer Übung. Diese Datei heißt Editiersymbole und Sie haben sie im Ressourcenordner angehängt. Wechseln Sie zur Erinnerung zur Registerkarte Home und klicken Sie dann auf dieses Symbol, um in die Figma-Datei zu importieren. Arbeiten wir an diesem Icon-Set, das wir bereits kennen. Sag, du willst die Größe ändern, oder? Wenn Sie sich nur einen Eckgriff schnappen und anfangen zu ziehen, schauen Sie sich an, was passiert. Das Symbol wird größer und wenn Sie die Umschalttaste gedrückt halten, wird es proportional größer. Aber beachte, dass es dünner wird. Und wenn du es kleiner machst, Taille kleiner, naja, wird es dicker. Und das ist eine sehr gute Chance , dass das nicht passiert. Also hier ist die Lösung. Konzentrieren Sie sich auf die linke obere Seite des Bildschirms und klicken Sie auf diesen kleinen Pfeil. Dies wird das Skalierungswerkzeug aufdecken. Das ist es, was wir mit dem Maßstabswerkzeug verwenden möchten. Jetzt können wir die Größe schnell ohne Probleme ändern. Las halten die Umschalttaste nicht gedrückt , weil Figma Nase, wir wollen die Größe aller Elemente proportional ändern. Lassen Sie mich rückgängig machen und ich zeige Ihnen, wie das auf mehreren Icons gleichzeitig funktioniert. Wählen Sie sie also aus und ändern Sie die Größe. Funktioniert wie ein Zauber. Das nächste Ding, die Farben zu ändern. Bevor wir darauf eingehen, möchte ich über etwas sprechen , das eigentlich ein bisschen langweilig ist. Ich habe diese Icons aus dem Internet heruntergeladen und es ist sehr wahrscheinlich, dass Sie immer wieder dasselbe tun werden . Webdesigner erstellen eigentlich keine Icons von Grund auf neu. Und beachten Sie, dass das seltsam klingt, aber lassen Sie mich erklären, warum das in einer separaten Vorlesung der Fall ist . Wisse nur, dass du diese Icons nicht selbst von Grund auf neu erstellen solltest . Weil wir Icons aus dem Internet herunterladen. Das bedeutet, dass wir die Arbeit anderer Leute nutzen und jeder anders arbeitet. Wenn Sie 10 Personen auffordern, Sie zu einer Verkaufsstelle zu machen, sehen Sie verschiedene Möglichkeiten, dies zu tun. Und es ist das Gleiche hier in Figma. Wenn Sie im Ebenenbedienfeld nachsehen, werden Sie feststellen, dass diese Symbole ein bestimmtes Symbol haben. Darüber möchte ich nicht sprechen. Klicken Sie stattdessen hier links neben diesem Symbol und Sie öffnen dieses Element. Wie Sie sehen können, besteht das Mülleimer-Icon tatsächlich aus vier Dingen. Diese beiden vertikalen Linien, der Umriss plus die horizontale Linie für die Führung. Nun, lasst uns zu diesem anderen übergehen. Dies hat ein anderes Symbol. Dies ist eine Gruppe. Auch das ist nicht das Wichtigste. Aber wenn wir es öffnen, ist dies das unverzichtbare Bett. Werde viele andere Dinge sehen, mehr Gruppen und die wenigen Vektoren. Und wir können eine dieser Gruppen eröffnen. Aber hier ist eine andere Gruppe, mein Gott. Also hier ist die wesentliche Idee. Jeder Designer arbeitet anders. Erwarten Sie nicht, dass Symbole auf eine bestimmte Weise gebaut werden. Einige Symbole können zwei oder drei Elemente haben, andere haben möglicherweise 20 oder 30. Es gibt keinen richtigen oder falschen Weg, dies zu tun. Okay, jetzt gehen wir zurück zu Malsymbolen. Ich wollte das nur aus dem Weg schaffen, weil ich sicher bin , dass Sie auf die verschiedenen Arten von Icons stoßen werden. Okay. Wenn wir einfach auf den Papierkorb Dan klicken, sehen wir unten rechts ein graues Farbfeld , falls Sie es nicht sehen, bewegen Sie Ihren Cursor in diesem Panel und scrollen Sie dann nach unten. Dies bedeutet, dass wir darauf klicken und das gesamte Icon einfach so ändern können. Es ist eine andere Farbe. Lassen Sie mich zu Control Z rückgängig machen. Da wir Zugriff auf jeden Baustein haben, können wir einen von ihnen auswählen, sagen wir den Umriss, und diese Farbe nur ändern. Und da gehst du. Nun, für diesen Mülleimer sieht das nicht so toll aus , um ehrlich zu sein, aber versuchen wir es mit der Sprechblase. Öffnen Sie es und wählen Sie den Umriss aus. Ändere das in alles, was du möchtest. Ich bin übrigens mit jeder zufälligen Farbe zufrieden. Als Nächstes wähle ich Vektor 6 und 7 aus. Ich halte die Steuerungstaste gedrückt , um beide gleichzeitig auszuwählen. Jetzt kann ich ihre Farbe ändern, um dies zum Beispiel zufällig zu sagen . Nun, okay, tolles Zeug, aber lasst uns ein bisschen innehalten. Lassen Sie uns eine kurze Zusammenfassung machen. Wenn Sie die Größe von Symbolen korrekt ändern möchten, müssen Sie das Skalierungswerkzeug verwenden. Denken Sie daran, zum Verschiebewerkzeug zurückzukehren, übrigens, Hotkey V. Wenn Sie die Farbe eines Symbols ändern möchten, können Sie das Ganze ändern oder im Ebenenbedienfeld einen Drilldown durchführen und einige auswählen seine Bausteine und ändern diese. Bevor ich dich das ausprobieren lasse, hier sind noch ein paar andere Icons. Wählen Sie die erste aus und ignorieren alle diese Ebenen und Gruppen im Ebenenbedienfeld. Konzentrieren Sie sich stattdessen bitte hier. Beachten Sie, dass wir drei Farben haben und wir haben diese Option, um 11 andere Farben zu laden. Jetzt ist hier die wesentliche Idee. Sie können entscheiden, welche Farbe Sie anpassen möchten, und klicken Sie einfach auf das Farbfeld. Sag, du magst die hellgrüne Farbe nicht. Kein Problem. Öffne den Farbwähler und beginne damit zu spielen. einfach ist es. Lass mich rückgängig machen und dir etwas wirklich Cooles zeigen. Nehmen wir an, wir öffnen alle Farben und Sie sind sich nicht sicher, ob dieses Dunkelgrau verwendet wird. Okay, das ist kein Problem. Bewegen Sie einfach die Maus hierher und klicken Sie auf dieses Zielsymbol. Und genau so wird Figma auf diese bestimmte Ebene verweisen. Sie öffnen diesen Bereich erneut und wenn Sie nicht sicher sind , wo diese Farbe verwendet wird, klicken Sie auf das Zielsymbol. Okay, hier ist eine letzte Technik, bevor du dran bist. Diese Icons stammen aus demselben Set. Nehmen wir an, wir sind kein Fan dieser goldenen, gelben Farbe. Vielleicht wollen wir es lila. Okay, kein Problem. Solange alle ausgewählt sind, klicken Sie auf das Farbfeld und ändern Sie es nach oben. Ist das nicht großartig? Ich habe diese Art von Dingen geliebt. Die Grundidee ist es zu experimentieren. Es gibt keinen richtigen oder falschen Weg. An dieser Stelle willst du einfach nur Spaß haben. Also bitte öffnen Sie diese Datei und ändern Sie diese beiden Icon-Sets. Mach mit ihnen, was du willst. Und wenn Sie fertig sind, wählen Sie sie alle aus und klicken Sie auf die Schaltfläche Exportieren. Viel Spaß und bitte poste deine Arbeit. Danke. 11. Hier kannst du so viele Anfänger:innen aufgeben: Hallo und willkommen zurück. Reden wir über etwas , das ein bisschen sensibel ist. Viele Anfänger geben ihr Lernen auf , wenn sie auf ein Problem stoßen. Wenn sie etwas nicht verstehen , sind sie frustriert. Und das verstehe ich. Und ich gebe mein Bestes, um die Dinge zu vereinfachen und auf dem Diskursserver so viel Hilfe wie möglich zu leisten. Aber in Figma ist das manchmal sehr herausfordernd und ich möchte es wirklich ansprechen. Lassen Sie mich Ihnen ein kurzes Beispiel zeigen. Du musst nicht mitarbeiten, hast nur versucht, meinen Standpunkt darüber zu verstehen, frustriert zu sein. Also hier geht's, Sie können ein Projekt auf Seiten organisieren, okay, sagen wir arbeiten an einem Redesign für die Website. Wir können eine Seite für die Wireframes haben, eine andere die Seite für die Desktop-Version, die offensichtlich benötigt wird und das wird getrennt sein. Noch eine für die Mobilversion, oder? Denn das sollte wieder getrennt sein. Das ist eine Möglichkeit, ein Projekt auf zwei Seiten zu organisieren. Klicken Sie einfach hier, um diesen Bereich zu erweitern oder zu schließen. Und wenn es erweitert ist, können Sie Seiten hinzufügen, indem Sie auf dieses Plus-Symbol klicken und es dann umbenennen. Okay? Auch hier sind alle diese Seiten Teil eines einzigen Projekts mit einem einzigen Unternehmen. Okay? Wie du deine Seiten benennst, wie du Dinge in ihnen organisierst. Das liegt ganz bei dir. Nehmen wir einfach an, Sie verstehen, wie Seiten bis zu diesem Zeitpunkt funktionieren, auch wenn Sie sie nicht vollständig verstehen, bleiben Sie einfach bei mir. Okay, hier wird es schwierig, ein Projekt zu töten, das ich vom Community-Tab heruntergeladen habe . Sieh dir das an. Wir haben so viele Seiten, ein einfaches Deckblatt, dann eine Anleitung mit acht Frames. Du kannst sie hier sehen. Aber dann noch eine Seite, vier Komponenten, dann eine Seite, die hier nur als Teiler verwendet wird , um Dinge zu organisieren. Dann geht es immer weiter Avatar-Akkordeon, Banner und so weiter. Es gibt unzählige Seiten. Dadurch dreht sich dein Kopf. diesem Grund geben Anfänger auf. Wenn die Dinge so kompliziert werden, fühlt man sich einfach überwältigt und frustriert. Deshalb möchte ich mir einen Moment Zeit nehmen und Ihnen sagen , dass diese Ebene der Organisation von Dingen für die Profis, für Poweruser, für diejenigen, die dies bereits für die Lebenden tun. Und sie wollen die Zeit maximieren. Wenn Sie bei Uber oder auf dem Handy oder HB arbeiten, müssen Sie so Dinge einrichten. Aber hier ist das Ding. Wenn Sie nur ein paar tausend Dollar pro Monat verdienen möchten oder Ihre eigene Website neu gestalten möchten, ist diese Art von Dingen nicht erforderlich. Sie müssen nicht auf diese Detailgenauigkeit eingehen. Ich verspreche dir, dass dies nicht das Wesentliche ist. Vertrau mir. Die Idee ist, dass dies einige erweiterte Funktionen in Figma wie diese Art des Organisierens abdecken wird einige erweiterte Funktionen in . Aber mein Plan ist es, dich zum Laufen zu bringen, bevor du rennst. Wenn wir uns auf das fortschrittlichste Zeug in Figma konzentrieren, werden Sie sehr wahrscheinlich aufgeben. Und ich möchte diese erweiterten Funktionen so klar wie möglich sein . Sie werden dich nicht zu einem guten Designer machen . Das sage ich noch mal. Diese fortschrittlichen Techniken und Workflows sind kein großer Teil Ihrer Stiftung als Webdesigner, diese ausgefallenen Dinge sind die letzten fünf oder zehn Prozent, die Kirsche auf Ihrem Kuchen. Also mach dir bitte keine Sorgen, wenn du etwas von diesem Kurs nicht verstehst, sieh weiter zu und ich verspreche dir, du wirst es bekommen. Und wenn du nicht zum Discord-Server kommst und lass uns in Echtzeit darüber reden. Auch hier ist dieser Akkord ein Chatraum wie WhatsApp oder Facebook Messenger, aber er ist nicht privat. Es ist mit einer Reihe anderer Schüler, die alle das Gleiche durchmachen wie Sie. Sie also bitte sicher, dass Sie dem Server beitreten. Es ist völlig kostenlos. Und wenn du das nicht willst, stelle einfach Fragen auf der Plattform und ich werde die Dinge klären. Denken Sie daran, es ist in Ordnung, von Anfang an nicht absolut alles zu verstehen. Sieh dir mindestens die Hälfte des Kurses an und du wirst sehen , dass alles viel sinnvoller wird. Vielen Dank, dass Sie Patienten haben, und ich hoffe, dass Sie bisher eine Fünf-Sterne-Lernerfahrung haben. Bitte schreib mir oder die Ansicht. Es hilft mir wirklich, mir ein Lächeln ins Gesicht zu zaubern. Okay, lass uns weitermachen. Ich danke dir vielmals. 12. Der größte Unterschied in Figma gegenüber anderen Programmen: Willkommen zurück. Lassen Sie mich Ihnen sagen, was ich für eines der größten Dinge halte , an die Sie sich in Figma gewöhnen müssen, sagen Sie, Sie möchten einen Button hinzufügen, oder? Wie macht man das normalerweise? Nehmen wir an, in Photoshop oder Adobe XD, was eigentlich die meisten anderen Designprogramme sind, erhalten Sie normalerweise das Rechteckwerkzeug und ziehen eine Form wie diese. Bitte arbeite übrigens nicht mit. Dann bekommst du das Lehrbuch oder das Typenwerkzeug und du fügst etwas hinzu. Schließlich wählen Sie beide Ebenen aus und zentrieren Sie dann mit den Ausrichtungswerkzeugen den Text innerhalb der Form. Als Bonus können Sie diese beiden Ebenen in einem Ordner gruppieren , um die Dinge zu organisieren. Das mag dir natürlich erscheinen, hilft Figma aber nicht zu arbeiten. So solltest du nicht arbeiten. Wenn Sie den Leuten zeigen möchten, dass Sie Figma überhaupt nicht benutzt haben, ist dies ein klares Give-Away. Dies sagt den Leuten, dass man nicht wirklich weiß, wie man Figma benutzt. So sollten Sie tatsächlich mit Frames arbeiten, nicht mit Rechtecken oder den Gruppen. Lassen Sie mich Ihnen ein Beispiel nennen. Hier ist ein Frame, 1920 bis 1080. Sagen wir, wir haben ein Webdesign-Projekt gestartet und wir brauchen den Header für das Hauptmenü. Wählen Sie das Rahmenwerkzeug aus und fügen Sie eines in dieser Region direkt über diesen beiden Ebenen hinzu. Nicht perfekt. Und es ist wahrscheinlich, dass es nicht perfekt sein wird. Fühlen Sie sich frei, sich an die Kanten zu bewegen und die Größe anzupassen. Gehen Sie von hier aus zu füllen und klicken Sie auf eine beliebige Stelle in dieser Region. aus der Farbauswahl Wählen Sie aus der Farbauswahl eine beliebige Form aus. So funktioniert Figma am besten. Sie fragen sich jedoch vielleicht warum. Warum müssen wir Frames verwenden? Jetzt um es kurz zu halten? Dies hilft Ihnen, Ihre Designelemente viel besser zu steuern , und es ist auch einfacher, reaktionsschnelle Versionen zu erstellen. Es wird Ihnen auch bei Ihrem Prototyping helfen. Das Animieren des Designs geschieht im Grunde, wenn Sie Ihre Bildschirme interaktiv gestalten möchten, ohne zu programmieren. Frames, beste Tänzerin, ich weiß, dass das ein bisschen komisch erscheinen mag weil Sie denken, dass Frames genau wie Kunsttafeln von Photoshop oder Adobe XD sind wie Kunsttafeln von Photoshop oder , aber das sind sie nicht. Und noch eine Sache kannst du einen Rahmen in den Rahmen legen. Dies ist in Figma normal und ist die empfohlene Art , in anderen Programmen zu arbeiten, ist nicht der Fall. Die wesentliche Idee ist also das. für die meisten Ihrer Designelemente Verwenden Sie für die meisten Ihrer Designelemente Rahmen, nicht das Rechteckwerkzeug. Ganz nah an dieser Idee. Bitte benutze keine Gruppen. Es besteht keine Notwendigkeit für Gruppen, da wir alle Elemente intelligenter organisieren können. Nun, du hast gerade gesehen, dass es ein Beispiel ist. Wir haben den Rahmen über diesen beiden Textebenen hinzugefügt und jetzt befinden sie sich darin. Wenn wir also das Ganze bewegen wollen, können Sie den Rahmen greifen und tun, was Sie wollen. Wie Sie sehen können, bewegt sich alles ohne die Gruppe. Ich werde Ihnen viel mehr Vorteile zeigen, während wir fortfahren. Aber ich wollte so klar wie möglich sein, Rahmen, keine Rechtecke und Gruppen. Schließlich haben wir einen Filmrahmen hinzugefügt. Beachten Sie jedoch, dass dies keine separate Ebene im Ebenenbedienfeld erzeugt. Wir haben nur den Rahmen und diese Textebenen. Das ist ein bisschen merkwürdig, wenn Sie von anderen Designprogrammen kommen , aber Sie werden sich bald daran gewöhnen. Machen wir eine kurze Pause. 13. So erstellst du Buttons in Figma: Willkommen zurück. Ich habe dir gesagt Frames der beste Weg sind, um in Figma zu gehen, nicht Rechtecke oder Gruppen. Lass uns direkt hineinspringen, damit ich dir zeigen kann, wie du arbeiten sollst , um den Button und Pigma zu erstellen. Okay. Schnappen Sie sich das Textwerkzeug. Ja, das hast du gehört, oder? Das ist der erste Schritt. Tippe was immer du willst. Ich sage meinen Knopf. Als Nächstes haben Sie zwei Hauptoptionen. Sie können mit der rechten Maustaste darauf klicken und Auto-Layout hinzufügen wählen. Das ist also Option eins. Obwohl Layout oder was die meisten Leute heutzutage tun , ist Verschieben a dasselbe. Also fügst du wieder deine Tags hinzu und klickst dann die Umschalttaste als Nächstes, geh zum rechten Bereich und klickst auf „Ausfüllen“. Die Standardfarbe ist Weiß. Öffnen Sie also den Farbwähler und ändern Sie ihn auf alles, was Sie möchten. Dies ist die Grundlage Ihrer Last. So soll man arbeiten, sieht gerade nicht so grau aus, aber lasst uns etwas Leben hineinbringen. Quadratische Kanten sind langweilig, also runden wir sie ab. Dies geschieht, indem Sie diesen Teil hier verwenden. Lass uns mit einem hohen Wert gehen. Sagen wir 25. Vielleicht gefällt dir die Farbe nicht oder vielleicht ergibt der Text keinen Sinn. Kein Problem, es zu ändern. Sie können einfach hier unter Auswahlfarben klicken. Du hast das zur Verfügung. Wenn Sie den Rahmen ausgewählt haben, denken Sie bitte daran, die Escape-Taste zu drücken, um ihn zu schließen. Alternativ können Sie das Ebenenbedienfeld verwenden. Das ist auch eine Option. Klicken Sie hier, um den Rahmen zu erweitern, und jetzt können Sie den Text auswählen. Manche Leute finden es merkwürdig , dass es keine Hintergrundebene gibt. Es gibt kein Rechteck an sich. Prüfen Sie das Ebenenbedienfeld, oder? Es gibt nur die Textebene und das liegt daran, dass den Rahmen selbst eine Füllung angewendet wurde. Betrachte es als eine Art. Also keine einzelne Ebene für die Füllung ist völlig normal und Figma, jetzt ist die Frage, warum sollten wir Shift sie verwenden also obwohl Layout ohne Belastungen, nun, wir haben ein paar interessante Funktionen. Wählen Sie zunächst die Textebene aus und vergrößern Sie ihre Größe, sagen wir 30 Pixel, oder? Beachten Sie, wie das Rechteck größer wird. Das ist eine Sache. Das ist also ein Vorteil durch die Verwendung des automatischen Layouts, der Rahmen ändert seine Größe automatisch. Als Nächstes wählen Sie bitte den Rahmen aus. Dies ist ein sehr wichtiger Schritt. Wählen Sie also den Rahmen aus. Und von diesem Teil hier namens Auto-Layout ändern Sie diesen Wert auf 20. Dies wird Polsterung genannt und ist der leere Raum innerhalb der Last. Je größer die Polsterung, desto größer der Knopf. Wenn Sie einen sehr kleinen Wert verwenden, wie einen oder zwei , wird dieser Text erstickt und das wollen wir nicht. Aber wenn wir beispielsweise größere Werte verwenden, wird unser Button nicht nur breit sein, sondern auch groß sein. Und das ist nicht großartig. Also hier ist was wir tun können. Klicken Sie hier auf dieses Icon auf der rechten Seite. Auf diese Weise können Sie die Polsterung an allen Seiten individuell mit 24 oberen und unteren Feldern einstellen individuell mit 24 oberen und unteren Feldern und das für die Seiten belassen. Okay. Das ist viel mehr so. Das ist ein Knopf. Das ist also ein weiterer Vorteil der Verwendung des automatischen Layouts, aber wir sind noch nicht fertig. Sieh dir dieses blaue Icon hier an. Dies sagt uns, wo die Textebene platziert wird, um sie zu verstehen, vergrößern Sie sie von der unteren rechten Ecke. Beachten Sie, wie der Text oben links bleibt. Das ist es, was das kontrolliert. Und wir können es zum Beispiel hierher oder hier verschieben. Aber offensichtlich wollten wir genau hier in der Mitte, einfach so. Das bedeutet also, dass wir viel Kontrolle über die Last haben. Dies bedeutet, dass wir die Ausrichtungswerkzeuge für ein Rechteck plus eine Textebene nicht ständig verwenden müssen. Deshalb ist die Verwendung von Frames so viel besser. Lass uns das noch einmal machen, diesmal mit einem Icon zu meiner Quelle für Icons ist flach icon.com. Bitte beachten Sie jedoch, dass dies ein Abonnement erfordert. Das ist nicht kostenlos. Das Format, nach dem wir suchen, ist SVG. Das funktioniert am besten mit Figma. Sie haben das Symbol übrigens angehängt, also können Sie es per Drag & Drop ziehen. Okay, jetzt möchten Sie die Größe vielleicht nur ein bisschen ändern. Das übernehme ich schnell. Okay, jetzt, hier ist die wesentliche Wette. Wenn wir auf Halten klicken und es hierher ziehen, sehen Sie, dass es ein Highlight gibt. Lasst es uns geschehen lassen. Und hier ist die Magie. Wir können den Abstand zwischen dem Symbol und der Textebene steuern , indem wir den Rahmen auswählen. Jetzt von rechts in jedem Wert, den Sie möchten, sagen wir 15. Tolles Zeug, das ist großartig. Also lass mich das nochmal machen. Ich ziehe das Icon noch einmal in Figma und mache es kleiner. Als Nächstes gebe ich das Typ-Tool und schreibe hier etwas. Wählen Sie nun beide Ebenen aus und klicken Sie auf Umschalttaste a. Die Ausrichtung wird wahrscheinlich nicht korrekt sein. Aber öffne die Polsterung und zentriere sie. Schönes Zeug. Das ist ziemlich einfach, aber bitte arbeiten Sie an Ihrer zweiten Betrachtung mit, um Schritt zu halten. Okay, jetzt fügen wir eine Füllung hinzu und machen sie zu einer zufälligen Farbe. Ich bewege mich ziemlich schnell, aber natürlich solltest du dir Zeit damit nehmen. Passen Sie nun bitte die Koordinaten aus diesem Teil hier an. Verwenden Sie den gewünschten Wert das Symbol und den Text in Weiß zu ändern. Das mache ich aus Auswahlfarben. Auch hier wird der Rahmen ausgewählt. Nun, für die Distanz, lass uns mit etwas wie 20 gehen. Und für die Polsterung denke ich, dass ich etwas wie 34 an den Seiten benutzen werde. Das ist allerdings verrückt. Und dann für oben und unten, und das ist unsere Last. Jetzt gibt es natürlich noch viel mehr, was wir tun können, aber machen wir Schritt für Schritt. Bitte unterbrechen Sie den Kurs und erstellen Sie Ihre eigenen Buttons. Ich möchte, dass Sie den Eckenradius, die Polsterung, die Farben ändern die Polsterung, die Farben und vielleicht ein paar andere Symbole ausprobieren. Wenn Sie fertig sind, wählen Sie den großen Frame aus und exportieren Sie ihn. Wenn Sie mehr als drei Knöpfe haben. Wenn Sie nur einen oder vielleicht zwei Schaltflächen haben, können Sie diese einzeln exportieren. Um das zu tun, genau wie die Frames und klicken Sie auf Exportieren. Es ist auch ein Spickzettel beigefügt, nur für den Fall, dass Sie schnell überprüfen möchten, was ich in dieser Vorlesung behandelt habe. Denk dran, viel Spaß damit. Es gibt keinen Druck. Probieren Sie einfach die Dinge aus. 14. Die Grundlagen der Arbeit mit Farbe: Willkommen zurück. Lassen Sie mich Ihnen zeigen, wie Sie in Figma mit Farben arbeiten können, die wesentlichen Punkte übrigens in der nächsten Vorlesung, die wir auf fortgeschrittenere Dinge eingehen werden . Okay, fang mit jedem zufälligen Frame an. An dieser Stelle können Sie den Bereich Ausfüllen verwenden, um diese Rahmenfarbe zu steuern. Es gibt keinen Unterschied zwischen der Füllung für diesen Rahmen und der Füllung für ein Rechteck, lassen Sie mich zum Beispiel eines hinzufügen. Bitte öffnen Sie den Farbwähler damit wir diesen Teil erkunden können. Die linke obere Seite ist reinweiß. Das ist FF, FF, FF. Insgesamt sechs Fs. Und auf der gegenüberliegenden Seite haben wir reines Schwarz und das sechs Nullen, 0000, 0000, 0000. Warum sehe ich diese Charaktere? Diese machen den Hex-Code aus. Der Hex-Code ist das, was Webentwickler verwenden, um unsere Designs zu einer voll funktionsfähigen Website zu machen. Du sagst ihnen nicht, dass du die dunkelblaue Farbe für den Button willst. Stattdessen sagst du, du willst d 0 sechs, CA. Sie können sehen, dass dies ein Hex-Code ist weil es genau hier steht. Ich habe nie etwas anderes für Webdesign-Zwecke verwendet. Wenn Ihr Kunde beispielsweise einen bestimmten Farbcode für seine Marke hat , ist DHL berühmt für sein Gelb. Sie können das in FFC eingeben, siehe 0000, einfach so. Und wenn Sie Farbschemata im Internet nachschlagen, können Sie Hex-Codes für jede einzelne Farbe erhalten. Geben Sie sie einfach ein, wenn Sie sie mit Control V einfügen. Als Nächstes können Sie die Deckkraft verringern , indem Sie diesen Schieberegler hier verwenden, obwohl ich Ihnen das nicht allzu oft empfehle. Es ist keine gute Idee. Nun lass mich das abschließen und den Roman hinzufügen, die Form. Hier ist das Ding. Nachdem Sie eine Farbe festgelegt haben, können wir sie hier in den Dokumentfarben sehen. Das ist groß, dass ich versuche uns zu helfen. Wenn wir diese rot machen und dann zum Beispiel die dritte Form hinzufügen wollen, würde eine Vermutung passieren. Wir werden diese Armbanduhr hier hinzufügen lassen, als sie ist. Und wenn wir anklicken, nimmt es diese Farbe auf. Apropos, dies wird als Pipettenwerkzeug bezeichnet und hilft Ihnen, Farben von überall auf der Leinwand auszuwählen . Wie Sie sehen können, gibt es oben rechts einen Vergrößerungseffekt . Das ist Figma, ich bearbeite dieses Video nicht. So können Sie Farben mit Präzision aufnehmen. Das funktioniert großartig auf Fotos, aber wir werden später Zeit haben, das zu erkunden. Gehen wir hier zu dieser Bar. Bisher haben wir mit Volltonfarben gearbeitet, aber Sie können auch Farbverläufe hinzufügen. Die Sache ist, dass dieses Linear das einzige ist, das ich empfehle. Die anderen, ich benutze sie vielleicht weniger als 5% der Zeit. Mit einem linearen Farbverlauf erhalten Sie zwei Enden, die Sie steuern können. Im Moment arbeite ich daran. Wenn ich fertig bin, kann ich zu diesem gesammelten übergehen und jetzt kann ich damit spielen, falls es halb voll ist, erhöhen Sie einfach die Deckkraft so. Bitte zoomen Sie hinein und lassen Sie uns mit diesem Farbverlauf herumspielen. Um ehrlich zu sein, all diese Anpassungen, wie die Anpassung des Übergangs hier und all das. Nun, du wirst es nicht allzu oft machen. Das ist die Wahrheit. Aber ich möchte, dass Sie wissen, dass Sie die vollständige Kontrolle darüber haben , was hier vor sich geht. Zum Beispiel können Sie eine dritte Farbe hinzufügen. Sieh dir dieses leere Quadrat an. Wenn Sie klicken, fügen Sie einen weiteren farbigen Punkt hinzu. Und wenn Sie es entfernen möchten, klicken Sie einfach darauf und drücken Sie dann die Entf-Taste. Also nochmal, Sie werden nicht wirklich alles tun , was in Webdesign-Projekten geöffnet wurde, sondern wissen, dass es verfügbar ist. Okay, eine letzte Sache, Sie können den Winkel des Farbverlaufs so ändern. Schnapp dir einfach ein Ende und bewege es dann. Um ehrlich zu sein, verwenden Sie hier nur zwei Arten von Farbverläufen. In den meisten Webdesign-Projekten werden Sie zwei Arten von Farbverläufen verwenden , vertikal und horizontal. Dies sind die einzigen beiden , die tatsächlich im modernen Webdesign verwendet werden , um sicherzustellen , dass der Farbverlauf vollkommen gerade ist. Ich mag es, es an einer seiner Kanten auszurichten, so dass die letzte Option in diesem Dropdown-Menü das Bild ist. Wenn Sie darauf klicken, erhalten Sie dieses karierte Muster. Dies bedeutet, dass Sie ein Bildjahr und diesen Teil ziehen können, oder Sie können hier klicken, um zum Suchfenster zu gelangen. Das Tolle daran ist, dass Sie einige Schieberegler haben , um das Bild anzupassen. Um fair zu sein, ist das nicht gerade Photoshop, aber das ist für die meisten Menschen mehr als genug. Also nochmal, das ist ziemlich tolles Zeug. Aber lasst uns wieder Farben verwenden. Das Tolle an diesem Teil ist, dass Sie diesem Bild eine weitere Füllung hinzufügen können . Klicken Sie einfach auf das Plus-Symbol. Standardmäßig wird die Deckkraft auf 20 Prozent gesenkt. Und so können Sie hinzufügen, dass wir das Bild sind oder noch besser den Farbverlauf hinzufügen. Stellen Sie sich zum Beispiel vor, Sie möchten unten weißen Text hinzufügen, aber vielleicht ist dieser Teil nicht dunkel genug, sodass Sie diesen weißen Text nicht wirklich lesen können. Um es also oben nach unten für die Deckkraft zu fixieren , gehen Sie mit 80%. Möglicherweise möchten Sie es anpassen, damit der obere Teil nicht betroffen ist. Und insgesamt haben Sie einfach so eine tolle Wirkung. Zur Zusammenfassung wird dies Color Picker genannt, und dies ist der Hex-Code. Sie können Farbcodes eingeben , die Sie aus dem Internet erhalten können. Aber denken Sie daran, dass es immer sechs Zeichen sind. Sigma hilft Ihnen bei diesen Dokumentfarben, aber erst nachdem Sie sich zu einer Farb-App verpflichtet haben, verwenden Sie sie tatsächlich. Sie können die Deckkraft einer Farbe von hier aus verringern. Und Sie können die Art des Fehlers von diesem Teil hier ändern , mein Rat bleibt bei linearen Gradienten, da sie so viel besser aussehen. Sie können mehrere Farben stapeln indem Sie dieses Plus-Symbol hier verwenden. Und Sie können die Deckkraft auch von diesem Ort aus ändern, 01. Das letzte, was ich vergessen habe zu erwähnen, du kannst dich immer ausblenden, indem du auf dieses Symbol klickst. Wenn Sie also nicht sicher sind, ob Ihr Farbverlauf in Ordnung ist, schalten Sie ihn aus und sehen Sie, was ist. Und das sind die Grundlagen des Arbeitens mit Farbe. Lassen Sie uns als Nächstes sehen, wie die Profis arbeiten. Wir sehen uns in der nächsten Vorlesung. 15. Wie du mit Farbe arbeitest wie ein Profi: Willkommen zurück. An dieser Stelle kennen wir die Grundlagen der Verwendung von Farben in Figma, aber so bringen wir dies auf die nächste Stufe. Sagen Sie, dass dieser spezifische Blauton den Kunden sehr wichtig ist, oder? Stellen wir uns diesen Fall einfach vor. Das bedeutet, dass wir es wahrscheinlich während des gesamten Designs verwenden werden, oder? Wir werden es benutzen und viele Orte. Anstatt sich jetzt auf Dokumentfarben zu verlassen oder das Pipettenwerkzeug zu verwenden, sollten Sie Folgendes tun. der rechten Seite von Fell. Du wirst diese vollen Kreise sehen. Klicken Sie auf dieses Symbol und das öffnet Farbstile. Derzeit gibt es hier nichts, aber klicken Sie auf das Plus-Symbol auf der rechten Seite. Figma bittet uns, es zu nennen und es zeigt uns sogar die Farbe genau hier. Und einfach so haben wir unsere erste Farbe in anderen Farben Stil. Wenn Sie die Auswahl aufheben, indem Sie auf eine leere Region klicken, sehen Sie, dass sich dieser Eintrag hier oben rechts befindet. Wenn Sie nun die gleiche Farbe verwenden möchten, sei es auf einer Textebene, auf einem Rahmen, auf dem Rechteck, wo immer Sie einfach hier klicken können, und das zeigt Ihre Farbstile. Klicken Sie darauf und es wird tot sein. Lassen Sie mich das noch einmal machen. Sie fragen sich vielleicht, warum ist das wichtig? Warum ist das so revolutionär? Nun, Konsistenz ist der Schlüssel. Sie möchten sicherstellen, dass Sie absolut überall genau denselben Farbcode verwenden . In einem Projekt ist das nur eine Seite. Das scheint ziemlich einfach zu sein. Aber stell dir vor, du hast 20, 40, vielleicht 100 Bildschirme, zu denen du gehen musst. Dort glänzt das wirklich. Lassen Sie mich diese Elemente schnell greifen. Ziehen Sie das Verschieben-Werkzeug aus, indem Sie ein Feld herausziehen, auf die Kreise klicken und einen der Stile auswählen. So können Sie Ihr Design schnell, sehr schnell aktualisieren . Und wenn Sie die Dinge wechseln möchten, klicken Sie einfach hier und wählen Sie das andere aus. Einfach und einfach zu bekommen. Lassen Sie mich nun vom Community-Tab zu einem Freebie wechseln . Hier haben wir eine App mit vielen Schaltflächen, aber stell dir vor, wir haben gerade Feedback bekommen und es ist schlechtes Feedback. Nun, so solltest du arbeiten. Ich habe momentan nichts ausgewählt, also kann ich die Farbstile aus dieser Datei sehen. Es gibt zwei von ihnen, Haupt- und Sekundärknopf. Klicken Sie mit der rechten Maustaste auf den ersten und wählen Sie Stil bearbeiten. Sie können seinen Namen, die Beschreibung und die Eigenschaften ändern , aber ich möchte den Farbcode ändern. Klicken Sie hier und verwenden Sie den Farbwähler. Wenn Sie damit zufrieden sind, schließen Sie es einfach ab und sehen Sie, wie Sie alle diese Bildschirme in nur einer Aktion schnell aktualisieren können. Und das ist ein ziemlich kleines Projekt. Lassen Sie mich auch das Grün aktualisieren. Also ist nichts ausgewählt, richtig? Dann klicken wir mit der rechten Maustaste, um den Stil von unten zu bearbeiten , klicken Sie hier, um die Farbauswahl anzuzeigen. Und jetzt kannst du dein Ding machen. Okay, das ist der Weg zurück zum ersten Projekt. Hier müssen Sie ein Update vornehmen. Siehst du, du solltest diese Farben niemals nach dem nennen , was sie gerade sind, wie Rot, Grün, Blau oder was auch immer. Geben Sie ihnen stattdessen einen Beschreibungsnamen wie Hintergrundfarbe, Aktionsfarbe, Überschrift, Primärfarbe und so weiter. Und das liegt daran, dass der gelesene Name keinen Sinn ergibt, wenn wir es hinzufügen und dies zum Beispiel in einen grünen Farbton verwandeln . Benennen Sie es erneut in etwas um, das universell ist, wie Hauptlast, sekundäre Schaltfläche, Hintergrund und so weiter. Aber bevor wir enden, was ist, wenn Sie nicht mehr möchten, dass die Ebene die gleiche Farbe hat? Nun, es gibt hier keinen Fülleintrag mehr , weil Sie diesen Farbstil zugewiesen haben. Im Grunde sind diese also verknüpft, aber Sie können sie jederzeit lösen, indem Sie hier klicken. Bitte beachten Sie , dass Sie dieses Kettensymbol nur sehen werden , wenn Sie den Mauszeiger darüber bewegen. Okay, jetzt taucht es auf. Klicken Sie darauf, und das wird sein, dass die Form dieselbe Farbe bleibt , aber jetzt erhalten Sie Zugriff auf Ausweisung und Sie können es nach Belieben ändern. Lassen Sie mich eine andere Ebene auswählen. Sie könnten auch dieses Minussymbol verwenden, aber das entfernt die Füllung und Sie könnten Ihre Form verlieren, wenn Sie nicht vorsichtig sind. Sieh mal was ich meine. Wo ist es? Wir haben es immer noch hier, aber es ist völlig transparent. Zur Zusammenfassung sollten alle Unternehmen ein Farbschema haben. Wenn Ihr Kunde dies nicht tut, müssen Sie sich selbst einen ausdenken. Wir haben einen separaten Vortrag darüber, wie Sie mit verschiedenen Farbschemata arbeiten und sich diese einfallen lassen sollen . Angenommen, Sie haben ein paar Farben, die Sie verwenden möchten, fügen Sie sie Ihren Farbstilen hinzu. Dies geschieht, indem Sie dieses Symbol rechts an der Füllung verwenden, darauf klicken und dann das Plus-Symbol verwenden. Denken Sie daran, es entsprechend zu benennen basierend darauf, wie oder wo es verwendet wird. Nennen Sie es nicht aufgrund seines aktuellen Aussehens. Bevor wir gehen, lass mich zurück zu diesem Freebie wechseln und ich lösche beide farbigen Stile. Also fangen wir bei Null an. Stellen wir uns vor, wir haben diese Datei gerade heruntergeladen und es gibt keine Stile, den Sprecher, oder? Okay, kein Problem. So solltest du arbeiten. Ich halte die Strg-Taste und gehe zu einer dieser Tasten. Ich werde Control verwenden, weil ich dadurch auf diese Ebene einen Drilldown durchführen kann . Egal ob es sich innerhalb des Frames befindet, wird eine Gruppe welche mehrere Frames in mehreren Schleifen haben. Deshalb halte ich die Kontrolle gedrückt, Okay, als nächstes halte ich weiterhin Kontrolle und dann füge ich die Verschiebung hinzu. Und dies ermöglicht es mir, mehrere Ebenen aufzunehmen. Das ist also Control und Shift. Einfach so. Jetzt, wenn alle ausgewählt sind, können wir jetzt zu diesem Symbol kommen, das Plus-Symbol klicken und einen neuen Farbstil erstellen. Im Allgemeinen richten Sie Ihre Farben zu Beginn des Projekts ein. Aber falls Sie auf diese Situation stoßen, wissen Sie jetzt, wie Sie damit umgehen müssen. Stellen Sie sich vor, ein Mitarbeiter schickt Ihnen diese Akte einfach, oder? Aber vielleicht haben Sie es wieder aus dem Internet heruntergeladen. Nun, okay, probier es aus und sieh dir an, wie es dir geht. Das sollte nett und lustig sein. 16. So fügst du Bilder hinzu: Einzelbilder vs. Rechtecke: Willkommen zurück. In dieser Vorlesung möchte ich Ihnen zeigen, wie Sie Ihren Projekten Bilder hinzufügen können. Erstens, wo können Sie qualitativ hochwertige Bilder erhalten , die völlig kostenlos sind? Zum Glück haben wir unsplash.com. Dies ist der Ort für schöne Bilder. Benutze sie wie du willst, sie sind völlig kostenlos. Als Nächstes möchte ich dir zeigen, wie du mit ihnen in Figma arbeiten solltest. In der ersten Reihe haben wir ein paar Frames und darunter haben wir einige Rechtecke. So empfehle ich dir zu arbeiten. Verwenden Sie nun das Hotkey-Steuerelement Umschalttaste K, das ist die Umschalttaste auf dem Mac. Und das öffnet ein Browserfenster. Wenn Sie sich nicht an Control Shift K erinnern können, gehen Sie bitte zur Symbolleiste und Sie finden diese Option unter den Formwerkzeugen. Unter dem Rechteckwerkzeug unten wähle ich die Bilder aus, indem ich die Steuerungstaste gedrückt halte und darauf klicke. Jetzt wird Figma für eine Sekunde nachdenken, wird zögern, denn das sind riesige Bilder über 4000 Pixel. Du musst also ein schlechter Patient sein. Weißt du, Figma ist bereit, wenn dein Cursor so aussehen wird . Wir können sehen, dass wir drei Bilder geladen haben. Jetzt bleibt nur noch , auf die Frames zu klicken , wenn Sie eintragen. Großartig. Wiederholen wir den Vorgang, aber diesmal verwenden wir die Rechtecke. Steuern Sie also Shift K, genauso wie die Bilder, damit Sie einen schönen Vergleich erhalten können. Und sofort sieht man , dass es einfacher ist , damit zu arbeiten. Das empfehle ich. Diese Bilder sehen viel besser aus, weil sie besser passen. Das ist der erste wesentliche Punkt. Wenn Sie Bilder in Rechtecken platzieren, passen Sie besser an. Wenn wir das Ebenenbedienfeld überprüfen, beachten Sie die Unterschiede. Die Bilder haben die Rechtecke gewissermaßen ersetzt. Das liegt daran, dass sie als Füllung festgelegt werden. Also bekommen wir drei Schichten, keinen Sex. In Bezug auf Frames. Wir haben drei Frames und drei Bilder. Wir haben also ein bisschen mehr Sachen und das ist nicht ideal. Aber warum sollten Sie sich um Frames kümmern? Nun, wenn Sie die Kontrolle haben, klicken Sie auf das Bild so, Sie erhalten ein Highlight der Kanten. Sie können die Größe jetzt ändern. Das heißt, wenn Sie verkleinert sind und Sie auch das Ebenenbedienfeld verwenden können , um die Bilder auszuwählen und dann die Größe zu ändern. Beachten Sie nur eine Sache, bei der Sie die Umschalttaste gedrückt halten müssen während Sie die Größe ändern, damit Sie die Bilder nicht verzerren. Sonst könntest du so etwas haben. Und offensichtlich wollen wir das nicht. Halten Sie also die Umschalttaste gedrückt oder verwenden Sie das Skalierungswerkzeug Okay, das ist also die Sache mit Frames. Die Bilder sind nicht als Fells festgelegt. Sie passen auch nicht, aber sie sind einfacher zu skalieren. Gehen wir zur zweiten Zeile über, die hier wieder die bevorzugte Option ist , falls Sie das Bild anpassen möchten, mein Rat ist, dass Sie hier auf Bild beschneiden klicken. Dies ist der einfachste Weg und das empfehle ich. Jetzt kannst du es nach oben oder unten bewegen, links und rechts und so weiter. Und natürlich kannst du die Größe auch ändern. Aber hier ist der Kicker. Lassen Sie mich viel hineinzoomen. Sie können die Größe des Rechtecks oder des Bildes ändern. Das ist also eine ordentliche Unterscheidung. Das Rechteck oder das Bild, CDs blaue Symbole. Diese zeigen Ihnen die Kanten des Rechtecks. Wenn ich also so nach innen ziehe und dann klicke ich Escape, um zu verpflichten. Nun, das Rechteck ist sich jetzt bewusst. Okay, lass mich die Ernte noch einmal aktivieren. Wenn ich an den Rand des Bildes gehe, sehen wir diesen Pfeil auf was Gott, Sir. Jetzt können wir die Größe ändern, aber bitte noch einmal die Umschalttaste gedrückt halten. Jetzt ist das kleine Problem, dass Sie diese Situation finden, in der sich diese Kanten irgendwie überlappen. Also weißt du vielleicht nicht was was ist, oder? In diesen Fällen hilft mein Rat, wenn Sie das Bild verschieben , bis Sie deutlich als Kanten sehen können, es wirklich, auch viel zu vergrößern. Um jetzt neu zu fassen, wenn Sie Bilder platzieren möchten, sind Rechtecke ein bisschen besser als Frames. Verwenden Sie Control Shift K und klicken Sie darauf, seien Sie auf Rechtecken, Kreisen oder was auch immer. Wenn Sie ein Bild bearbeiten möchten , das sich innerhalb des Rechtecks befindet, verwenden Sie das Zuschneide-Symbol oben auf dem Bildschirm. Wenn Sie die Größe ändern möchten, vergewissern Sie sich, dass Sie die blauen Symbole verstehen , die das Rechteck umrissen. Okay, also nochmal blau für das Rechteck. Okay? Eine Sache: Sie können auch auf ein Bild doppelklicken , um es in Bezug auf den Belichtungskontrast anzupassen, und so weiter erhalten Sie diese Schieberegler. Bitte beachten Sie jedoch , dass wenn dieses Panel geöffnet ist und Sie es schließen möchten, nicht einfach so auf den Canvas klicken. Verwenden Sie stattdessen die Escape-Taste. Also lass mich das nochmal machen. also mit einem Bild innerhalb des Rechtecks Wenn Sie also mit einem Bild innerhalb des Rechtecks darauf doppelklicken, öffnen Sie dieses Fenster. Um es zu schließen, können Sie natürlich das X-Symbol verwenden oder besser noch die Escape-Taste verwenden. Grad. Eine letzte Sache, die Sie wissen sollten, sagen Sie, dass Ihnen dieses Bild nicht gefällt und Sie ein weiteres hinzufügen möchten. Klar. Die meisten Leute ziehen es vor ein neues Foto von ihrem Desktop über ein vorhandenes Foto zu ziehen. Aber das funktioniert in Figma nicht wie erwartet. Wie Sie sehen können, befindet sich das Bild nicht in das Rechteck. Stattdessen müssen Sie Folgendes tun. Sie müssen die vorhandene Form auswählen und Sie werden feststellen, dass die Füllung auf Bild eingestellt ist. Gehe jetzt zu deinem Desktop oder zu welchem Ordner du willst. Nimm dein Foto, aber dieses Mal lass es hier fallen. Sehen Sie dieses Highlight. Dies bedeutet, dass das bestehende ersetzt wird. Einfach so. Lassen Sie es mich jetzt noch einmal auf einem neuen Rechteck machen. Also ein einfacher, grundlegender, richtig? Ziehen Sie nun ein Bild, aber lassen Sie es nicht auf den Canvas fallen. Lassen Sie es stattdessen hier in diesem kleinen Bereich fallen. Jetzt ist es in der Tat ein bisschen zu klein. Was also tun kann, ist dieser Doppelklick in ein Bild und dieses Panel öffnet sich. Jetzt kannst du das Foto hier fallen lassen. Und weil dies größer ist, kann dies für die meisten Menschen einfacher sein. Insgesamt. So fügen Sie Ihrem Projekt Bilder hinzu. Kontrolliere Shift K auf einem Rechteck, du kannst auch einen Rahmen verwenden, aber meiner Meinung nach ist es nicht so gut. Also Rechtecke ist es. Danke. 17. Eine Galerie / Collage in Figma erstellen: Willkommen zurück. Stellen wir unsere Fähigkeiten auf die Probe, indem in Figma eine schöne Galerie oder eine Collage erstellen. Hier ist was ich möchte, dass du machst. Ich möchte, dass du dich das erste Mal selbst und das zweite Mal machst, dass du es machst. Bitte, sowohl die Zeit in den Kommentaren als auch Ihr Design. Beginnen Sie mit jedem Frame, jeder Größe, da ich möchte, dass Sie seine Breite und Höhe im Eigenschaftenfenster ändern . Wir suchen 1920 bis 1080. Fügen Sie als Nächstes jedes zufällige Rechteck Das ist das Interessante. Sag, wir wollen drei Spalten, oder? Du kannst benutzen, was immer du willst, aber ich benutze drei. Wie stellen wir sicher , dass das Rechteck breit genug für eine gute Passform ist? Nun, hier ist das Ding im Breitenfeld, du kannst etwas Mathematik machen. Geben Sie also 1920 Slash 3 ein, das ist 1920 geteilt durch drei. Und das wird uns 640 geben. Und jetzt können wir Kopien dieser Form erstellen und wir wissen, dass es passt, richtig? Sie können Control D verwenden, um Kopien zu erstellen, D wie doppelt, aber das wird die Kopie direkt über der ersten platzieren. Also hier ist ein besserer Weg. Was ich vorschlage, ist, dass Sie die Alt- oder Wahltaste auf einem Mac gedrückt halten , auf eine Kopie klicken und ziehen. Nun funktioniert das in den meisten Designprogrammen und ich freue mich sehr über Worte in Figma 21 mehr Zeit. Aber dieses Mal möchte ich, dass du auch Alt und Shift hältst. Umschalttaste wird die Kopie in einer vollkommen geraden Linie verschoben . Das ist also großartig. Okay, das Problem ist, dass wir die Kanten unserer Formen nicht sehen können. Bitte wählen Sie Alt V aus und fügen Sie einen Strich hinzu. Dies ist direkt hier unter „fill“ verfügbar. Der Schlaganfall ist sehr einfach zu bedienen. Sie können die Farbe so einstellen , dass der Farbwähler genau gleich ist. Und das bedeutet, dass wir eine Volltonfarbe, einen Farbverlauf oder sogar ein Bild als Strich haben können. Wir wollten reines Weiß, obwohl mein Rat ist, dass du es etwas dicker machst. Bitte beachten Sie jedoch, dass Sie Ihre Pfeiltasten auf Ihrer Tastatur verwenden müssen , um diesen Wert zu ändern. Ihre Mausscrolle funktioniert hier nicht. Okay? Jetzt können Sie auch die Positionierung hochschalten. Im Moment ist es nach innen eingestellt. Ich bin damit ziemlich zufrieden, aber du kannst eine andere Einstellung wählen. Wenn Sie Center wählen und einen Wert wie sechs Pixel haben, werden drei von ihnen innen und drei von ihnen außen platziert . Das bedeutet also Zentrum. Als Nächstes müssen wir weitere Zeilen hinzufügen. Lassen Sie uns also genau die gleiche Technik anwenden. Also alles, um eine Kopie zu erstellen und zu verschieben, damit es in einer geraden Linie geht. Also alle Umschalttaste ziehen. In diesem Fall habe ich keine Mathematik weil ich Ihnen eine Alternative zeigen möchte. Jetzt, da wir neun Formen haben, wählen Sie bitte alle aus. Falls Sie den Rahmen auswählen, drücken Sie bitte die Eingabetaste. Beachten Sie übrigens diesen Unterschied. Jetzt habe ich die Shapes ausgewählt. Aber wenn ich so eine große Kiste zeichne, okay, jetzt dieser Rahmen, der diesen Top-Kasten genannt wird ausgewählt ist und das ist nicht gut, das wollen wir nicht. Wenn also der Rahmen ausgewählt ist, drücken Sie einfach die Eingabetaste und das erfasst alle Ebenen, in denen sie ausgewählt werden sollen. Okay, wir ziehen jetzt her und ziehen nach unten. Du wirst Figma fühlen. Wir versuchen Ihnen dabei zu helfen, den Rand des Rahmens zu finden. Okay, schön. Jetzt passt das. Okay, jetzt ist es an der Zeit, ein paar Fotos hinzuzufügen, zu unsplash.com zu gehen und ein paar davon herunterzuladen. Ich habe das bereits gemacht, also lass mich Control Shift a verwenden, um sie hinzuzufügen. Warten Sie noch einmal eine Sekunde, bis Figma sie verarbeitet. Es ist normalerweise ziemlich vorbei. Okay, klicke jetzt auf jedes Rechteck. Dies ist eine Übung der Geschwindigkeit. Die Techniken sind ziemlich einfach. Alt Shift, Drag, Control Shift K, und das ist darüber nichts ganz Besonderes. Oder natürlich kannst du etwas Mathematik machen. Aber ich möchte, dass du dich so schnell wie möglich bewegst und eine schöne Collage erstellst. Jetzt würde ich gerne ein paar Bilder aus Ihrem eigenen Land sehen . Mal sehen, ob du welche finden kannst , was Spaß machen sollte. Und falls der weiße Strich nicht funktioniert, wählen Sie bitte alle Ebenen wie folgt aus. Sieh dir doch mal an. Der Rahmen ist nicht ausgewählt. Die Formen sind es. Okay. Ändern Sie nun die Farbe des Strichs in alles, was Sie möchten. Sie können auch die Dicke einstellen, vielleicht die Position. Nun, es ist am besten, dass Sie dies jetzt tun, weil Sie sehen können, wie sich die gesamte Galerie auswirkt. Probieren Sie es aus und posten Sie Ihre eigene Collage. Auch hier würde ich gerne Fotos aus Ihrem anderen Land sehen . Habe einen und vergiss nicht, deine Arbeit und deine Zeit zu posten. Danke. 18. So maskierst du in Figma: Willkommen zurück. Wir wissen, wie man Bilder zu Figma Control Shift K oder Drag & Drop Off-Fotos in der gefüllten Region hinzufügt Figma Control Shift K oder , entweder im rechten Bereich oder in diesem Bewertungsbereich. Das sind also die Hauptoptionen. Aber lass mich dir etwas anderes zeigen, von dem du wissen musst und das ist Maskierung. Sagen wir, du willst einen Avatar machen. Ein sehr häufiges Thema in Webdesign-Projekten. Beginne mit einer Ellipse, einem Kreis. Das finden Sie unter dem Rechteckwerkzeug. Ziehen Sie einen heraus und halten Sie die Umschalttaste gedrückt, während Sie Leasing erhalten. Und das wird dir einen perfekten Kreis geben. Ziehen Sie als Nächstes ein beliebiges Bild darüber. Ich habe schon eins vorbereitet. Jetzt wird es anfangs riesig sein, zumal es von unsplash.com stammt. Dies wird nicht als beabsichtigter Film hinzugefügt. Okay, das ist eigentlich eine gute Gelegenheit, Ihnen beizubringen, wie Sie neben dem Punkt schnell die Größe eines riesigen Bildes ändern können, aber es ist eine gute Gelegenheit. Wir wissen also, dass wir die Verschiebung halten müssen damit wir das Bild nicht richtig verzerren, zerquetschen oder ähnliches. Okay, jetzt hilft uns Shift dabei. Wenn Sie jedoch die Alt-Taste oder die Wahltaste auf einem Mac gedrückt halten , können Sie die Größe des Bildes von beiden Enden aus ändern. Wenn Sie also an diesem Koordinatenpunkt arbeiten, wird der andere diesem Beispiel folgen. Das ist also Alt und Shift, um es zu verkleinern, es ist eine schnellere Art zu arbeiten. Okay, jetzt zurück zu den Hauptthemenmasken, bitte vergewissern Sie sich, dass sich der Kreis unter dem Foto befindet. Das ist sehr wichtig, wird jetzt sonst funktionieren. Wählen Sie nun beide aus und hatten dieses Symbol aus diesem oberen Bereich. In genau so hast du größer als Mask. Wenn Sie das Ebenenbedienfeld überprüfen, sehen Sie, dass Sie jetzt eine Maskengruppe haben. Und es enthält natürlich zwei Dinge, das Foto und den Kreis. Wenn Sie auf das Foto klicken, können Sie die Größe des Bildes ändern, bewegen usw., im Grunde genommen völlige Freiheit. Dasselbe gilt, wenn Sie zur Ellipse wechseln. Obwohl totale Kontrolle. Ist das besser als Control Shift K zu verwenden? Nun, es liegt wirklich an Ihnen und Ihren Vorlieben, aber beachten Sie sie Vorteil, sagen Sie, dass Sie eine große Textebene haben. Dies wird in Airbus 300 gezeigt. Eine massive, massive Größe, 300, ist also absolut riesig. Jetzt ziehe ich ein anderes Bild über diese Textebene und wiederhole die Aktion. Ich erstelle eine Maske, indem ich hier klicke. Und wie ich bereits sagte, haben wir die totale Kontrolle, um das Bild zu bewegen , um den Effekt zu drehen und so weiter. Und die Textebene lebt noch, sie ist immer noch editierbar. Das einzige, was Sie tun müssen, ist das Textwerkzeug zu greifen. Sie müssen keinen bestimmten Layer auswählen lassen. Sie können tatsächlich etwas ganz anderes auswählen , wie diesen Avatar. Jetzt aktiviere ich das Textwerkzeug und gehe hierher. Okay, jetzt bearbeite ich den Text nach was auch immer, vielleicht so etwas, und das war's. Um es zusammenzufassen, können Sie jede Art von Ebene jeder Art verwenden, sei es die Form einer Textebene oder eines anderen Bildes, und sie als Maske verwenden. Wichtig ist, dass Sie diese bestimmte Ebene unter das Bild platzieren und dorthin gelangen. Nun, hier ist ein weiterer Vorteil der Verwendung von Masken im Vergleich zur Steuerung Shift K-Technik. Sie können dieser Maske mehrere Ebenen hinzufügen und diese werden beispielsweise in allen Kreisen versteckt . Beachten Sie, wie das funktioniert. Im Ebenenbedienfeld. Wir können sehen, dass sich dies erstreckt. Das sagt uns, dass all diese Ellipsen auch Teil der Maske sind. Grundsätzlich wird alles, was Sie dieser Gruppe hinzufügen , auf diese Weise handeln. Wenn Sie zum Beispiel einen neuen Kreis wünschen , der nicht versteckt ist, müssen Sie ihn außerhalb dieser Gruppe platzieren. ehrlich zu sein, werden wir bei anderen Webdesign-Arbeiten nicht zu viele Fälle wie diesen begegnen. Aber es ist wichtig, die Prinzipien der Maskierung zu kennen. Falls Sie jemals einen Skill-Test in einem Interview bekommen, wissen Sie jetzt, wie das funktioniert. Und damit lasst uns fortfahren, aber bitte übe das, was ich dir gerade gezeigt habe. 19. Hier sind die 3 Arten von Text in Figma: Willkommen, willkommen. Mal sehen, wie wir mit Text arbeiten können. Wir behandeln die Grundlagen und wie zuvor im nächsten Video werden wir weiter fortgeschritten sein. Es gibt zwei Möglichkeiten, Text in Figma hinzuzufügen wenn Sie auf diese Weise klicken und mit der Eingabe beginnen können. Und die zweite, auf die Sie klicken können, ziehen Sie ein Feld heraus und beginnen Sie dann mit der Eingabe. Ich füge etwas Text mit Control V ein, also füge ihn einfach ein. Dies sind zwei verschiedene Möglichkeiten, Text hinzuzufügen. Jetzt lass mich nochmal klicken. Wenn Sie eine Textebene starten und die Bearbeitung beenden möchten, können Sie auf eine andere Stelle klicken. Und wie Sie sehen können, wurde der Text gespeichert. Oder lass mich das nochmal machen. Sie können auch die Escape-Taste drücken und der Text bleibt unverändert. Jetzt weiß ich, dass der Escape-Schlüssel in anderen Programmen den Text entfernen könnte, aber hier ist das nicht der Fall. Das ist also dein erster wesentlicher Punkt. Escape ist dein Freund, sei es in der Farbauswahl, wenn du Text hinzufügst oder wenn du mit einem anderen Panel arbeitest. Zurück zum Absatztext, also derjenige mit der Box, die wir gezeichnet haben, können wir einen Griff greifen und ihn bewegen. Dies ermöglicht es Ihnen, es so breit oder so schmal zu gestalten , wie Sie möchten. Jetzt haben wir hier ein paar Möglichkeiten. Wenn wir auf diesen mit dem Namen Auto klicken, wird der Text so breit sein, wie er sein muss , um in eine einzelne Zeile zu passen . Wir wollen diese Kerbe nicht hier und nicht im Allgemeinen, um ehrlich zu sein. Okay, jetzt lass mich die neue Textebene durch ein Feld hinzufügen. Beachten Sie, welches Symbol standardmäßig gedrückt wird, es ist dieses, feste Größe. Wenn man darüber nachdenkt, ergibt es tatsächlich Sinn. Wir haben die Kiste gezeichnet, richtig? Wir, der Benutzer, der Designer, haben das wahrscheinlich so groß gemacht, weil wir das brauchen. Auch die dritte Option, sie haben eine feste Größe. Im Grunde sagt das Figma, hey, das ist die Größe, die ich will. Okay, jetzt gibt es hier eine andere Option namens Auto Hide. Dies ist sehr nützlich, denn wenn wir Kisten zeichnen, sind wir ehrlich gesagt ziemlich schlampig . Wie Sie sehen können, gibt es hier unten ziemlich viel Leerraum. Und das ist nicht cool. Lass mich dir zeigen warum. Angenommen, ich füge dem Canvas eine andere Form hinzu. Okay, jetzt mit diesen beiden Seite an Seite, sagen wir, ich möchte, dass ich sie unten richtig ausrichten möchte. Schau mal, was passiert. Figma sieht diese Textebene als so groß. Für uns, besonders wenn wir die Auswahl abheben, gehen wir davon aus, dass dies alles ist. Wie Sie sehen können, ist das ein ziemliches Problem. Hier ist ein weiteres kurzes Beispiel. In Figma können Sie Entfernungen messen, indem Sie die Alt-Taste gedrückt halten und den Cursor bewegen. Also gibt es die ALT-Taste und dann den Cursor bewegen. Wenn wir also die Textebene ausgewählt haben und wir Alt gedrückt halten, bewegen wir die Maus über das Rechteck. Nun, Figma wird uns die Distanz zeigen. Cool wie erwartet. Das ist vorhersehbar. Das ist das Schlüsselwort hier. Vorhersehbar. Aber schau was passiert, wenn wir das Rechteck darunter legen. Wenn wir die Messung überprüfen. Dies ist offensichtlich nicht richtig. Das ist eine Überraschung und das ist nicht gut. Technisch gesehen ist das richtig, aber es ist nicht das, was wir erwartet hatten. Die Lösung besteht also darin, die automatische Höhe und die automatische Höhe zu wählen . Okay? Ich weiß, dass ich fünf Minuten damit verbringe, aber es ist wichtig, falls Sie jemals erklären müssen , was diese zusammenfassen müssen. Die erste ist am besten für einzelne Textzeilen geeignet, die normalerweise kurz sind. Der zweite ist im Allgemeinen der nützlichste als Feld oder nur basierend auf dem Text. Und der dritte ist die Fälle in denen Sie genau wissen, welche Größe Sie wollen. In meinen eigentlichen Projekten beginne ich mit einer zufälligen Box. Also die dritte Option, nachdem ich meine Texte basiert, wechsle ich dann zu auto hide, und das würde ich empfehlen. Zeichnen Sie also erneut ein zufälliges Feld und wechseln Sie dann zu „Auto Hide“. Bevor wir gehen, sprechen wir über Schriftfamilie, Schriften und Schriften, all das Wörter. Nun. Der erste hier ist die Schriftfamilie. Roboto ist eine Schrift - oder Schriftfamilie, die mehrere Schrift- oder Schriftfamilien enthält. Sie meinen einfach das Gleiche. Ich sage das noch mal, Schrift und Schriftfamilie, sie sind das Gleiche. Um die Unterschiede zwischen einer Schriftart und der Schriftfamilie zu verstehen , denken Sie über Folgendes nach. Du bist Teil einer Familie oder? Das können mehrere Personen in Ihrer Familie sein, vielleicht nur eine Person, das ist auch in Ordnung. Trotzdem hast du eine Familie. Verwenden Sie jetzt spezifisch eine Schriftart. Du bist die ganze Familie ist eine Schrift- oder Schriftfamilie. Aber die Einzelpersonen, zum Beispiel Ihre Mutter oder Ihre Brüder oder Ihre Systeme, das sind Schriften. Dies bedeutet also auch, dass der Albedo eine Schrift - oder Schriftfamilie ist. Und Roboto bold ist eine Schriftart, die Teil dieser Schriftfamilie ist. Die meisten Menschen tauschen diese Wörter oft aus, als würden sie dasselbe meinen. Schrift und Schrift. Das ist nicht richtig wegen dem, was ich gerade beschrieben habe. Wenn man sie verwechselt, ist es nicht das Ende der Welt, um ehrlich zu sein. Sie werden deswegen nicht in den Entwurf eines Gefängnisses gesteckt. Aber wieder, um zusammenzufassen, mehrere Schriftarten, Make-up der Schriftfamilie obwohl Bordeaux kursiv, Roboto, Light, Roboto, fett. Das sind alles Schriften. Sie sind Teil der Schriftart-Familie Roboto. Okay, jetzt kennst du die Unterschiede und wir können weitermachen. Danke. 20. Entdecke die Eigenschaften der Textebenen: Willkommen zurück. Werfen wir einen Blick auf diesen Teil des Eigenschaftenfensters und sehen, was auch immer das Bett tut. Mehr noch, ich werde dir meine Best Practices erzählen. Das wird also nicht nur eine grundlegende Tour sein. Okay? Jetzt wissen wir, dass dies das Feld für die Schrift ist. Wir haben Roboto genau hier, um es zu ändern, tippen Sie einfach etwas anderes ein. So arbeiten die meisten Bros. Sie öffnen diese Liste nicht wirklich, dann scrollen Sie wissen, stattdessen tippen Sie einfach etwas wie MOSFETS und ihr Ego Montserrat ein. Machen wir jetzt einen schnellen, schnellen Umweg. Wie bekommt man diese Schriften? Jetzt benutzen die meisten Leute Google Fonts, aber hier ist ein Tipp. Es ist wichtig, dass Sie Ihre Schriftarten basierend auf der Stimmung des Projekts auswählen. Stell dir zum Beispiel vor, du gehst an den Strand, oder? Würdest du einen formellen Anzug tragen? Natürlich nicht. Was ist mit der Hochzeit? Würdest du die Shorts und Flip-Flops tragen? Auch hier natürlich nicht. Jede Situation ist anders und erfordert ein anderes Aussehen. Ihre Webdesign-Projekte auch. Deshalb musst du dir etwas Zeit nehmen und darüber nachdenken, was am besten funktioniert. Einige Schriftarten sind elegant, andere verspielt, einige von ihnen sind ernst, streng. Dies bedeutet also, dass dies keine schnelle Entscheidung sein sollte. Nachdem Sie sich entschieden haben, müssen Sie die Schriftart herunterladen, indem Sie hier klicken. Der Prozess ist ziemlich einfach. Sie erhalten das Zip-Archiv , das extrahiert werden muss. In diesem Ordner. Sie werden einige Dateien finden, die in C-Windows-Schriftarten kopiert werden müssen . Und das war's. In einigen Fällen möchten Sie möglicherweise Big Map neu starten , um sicherzustellen, dass diese Anleihen Ihnen zur Verfügung stehen. Mein Rat ist, dass Sie dieses spezielle Archiv herunterladen , das größten Teil der Haftung von Google Pons enthält. Es ist absolut riesig, also bedenken Sie das bitte. Okay, das ist es, wonach du suchen musst. Dies ist eine sehr beliebte Seite und Sie können ihr mit 100 Prozent vertrauen. Okay, der nächste Teil in Figma und diesem Eigenschaften-Panel wird das Gewicht oder den Stil genannt. Einige Schriften haben einen einzigen Stil. Wenn Sie zu Google-Schriftarten zurückkehren, sehen Sie die Anzahl der Stile, die hier in diesem Teil angezeigt werden. Mein Rat, verwende immer Anleihen, die mindestens drei Stile haben. Das ist also leicht, regelmäßig und fett, zum Beispiel mindestens drei von ihnen, oder? Weiter, hier legen Sie Ihre Größe fest. Dies ist in Pixeln, obwohl es tatsächlich nicht erwähnt wird. Sie können die Maus nicht verwenden, um sie nach oben zu ändern, aber Sie können Ihre Werte manuell eingeben, oder wie die meisten Personen dies tun, verwenden sie die Pfeiltasten nach oben oder unten. Plus Shift. Shift ändert diesen Wert in Schritten von 10 Pixeln. Das ist also ganz nett. Okay, hier ist das lustige Zeug. Die Zeilenhöhe. Dies ist entscheidend für meine Webdesign-Projekte. Dies steuert die Höhe des vertikalen Abstands zwischen den einzelnen Zeilen. Lassen Sie mich Ihnen zeigen, dass ein sehr niedriger Wert den Text in Frage stellt. Es ist, als wäre jemand drauf getreten. Schreiben Sie, ein großzügiger Wert lässt es sich locker anfühlen. Jetzt sollten diese beiden Extreme vermieden werden. Stattdessen sollten Sie diese spezifische Formel verwenden, die Schriftgröße multipliziert mit 1,5. Wenn das also 12 Pixel sind, bedeutet das, dass die Zeilenhöhe 18 betragen sollte. Falls Sie keine Mathematik machen möchten, können Sie auch einen Prozentsatz wie 150 Prozent eingeben. Ich bevorzuge Pixelwerte. Also nochmal, das ist das 1,5-fache der Schriftgröße. Sie können immer je kleiner der Multiplikator verwenden, wie 1.4 oder 1.3. Aber ich liebe Ein-Punkt-Pi. Das ist höchstens der Sweet Spot , den ich für x verwende, aber das ist in ganz bestimmten Situationen , die zusammen abdecken werden. Mein Rat bleibt bei 1.5 und du wirst loslegen. Als nächstes folgt der Buchstabenabstand. Du solltest damit nicht spielen, außer bei Titeln , die ziemlich kurz sind. Ein paar Worte und das war's. Aber bitte änderte dieses Feld nie für die Absätze. Es ist ein großer Fehler. Nun, im nächsten Absatzabstand, das ist schön und ordentlich, aber ich kann nicht sagen, dass ich es so oft benutze. Tötet die Idee. Sag, dass wir einen Rudelblock haben, oder? Ich drücke Enter und das wird es aufbrechen. Wenn Sie jedoch die Menge an leerem Speicherplatz hier steuern möchten , können Sie dieses Feld verwenden. Beachten Sie, wie es funktioniert, obwohl wir hier keinen sichtbaren leeren Platz hatten, dieses Feld ihn eingefügt. Hier. Ich tippe zweimal darauf. Und offensichtlich werden wir diese Lücke hier bekommen. Ich drücke Enter, aber nur eins. Um diese Option zu tun, wird Absatzabstand genannt. Wir können unsere Lücken anpassen. Wieder ist es cool für Leute wie mich, aber wirst du es benutzen? Ich bin ziemlich belastet. Sie sich also keine Sorgen darüber, dass es nur etwas ist, dessen Sie sich bewusst sein sollten. Die endgültigen Optionen hier sind ziemlich einfach. Dies ist die Ausrichtung des Textes, links oder rechts ausgerichtet oder für diese wenigen Fälle zentriert. Ziemlich einfach zu verstehen. Du wirst das ziemlich oft benutzen. Aber hier ist etwas , das du nicht benutzen wirst. Dieser Teil hier ändert die Ausrichtung des Textes in dem Feld, der Haltung ist. Wenn die Box also ziemlich groß ist, können Sie sie möglicherweise unten ausrichten oder zentrieren. Aber, und es ist riesig, aber ich empfehle dir nicht, damit zu spielen. Es wird nicht benötigt. Sie werden sehen, warum das später vor Gericht der Fall ist, wir haben viel bessere Möglichkeiten. Nun denken Sie vielleicht, dass wir mit diesem Teil tatsächlich fertig sind, aber es gibt noch eine Menge mehr zu tun. Klicken Sie auf diese Punkte und sehen Sie wie viele Funktionen Pigma uns tatsächlich gibt. Außerdem ist dies ein scrollbares Fenster damit es Lasten gibt, die wir erforschen. Was ich jetzt liebe, ist die Tatsache, dass du dieses Vorschaufenster genau hier bekommst , links, mittig, rechts ausrichten. Das weißt du wahrscheinlich. Aber wenn Sie zum Beispiel nicht nur mit dem Kuchen vertraut sind, wird dieses Wort hören, das es ist, die zweite Textzeile hat größere Lücken, so dass sie einen schönen Textblock bildet. Was ist mit dem zugrunde liegenden alles durchgestrichen? einfach den Mauszeiger über sie und sehen Sie, was ist. Aber auch hier, die Wahrheit ist, ich diese Reden nicht wirklich verwende, außer für die insbesondere, alle Obergrenzen. Dies ist direkt hier unter Briefkasten verfügbar. Klicken Sie auf das erste und bemerken Sie die Änderung. Sie können sehen, dass dies durch diesen grauen Hintergrund aktiviert ist. Die Bewegung es klickt auf das Minus. Dies ist eine seltsame Wahl da Sie in den meisten Designprogrammen, wenn Sie erneut darauf klicken, hier nicht der Fall ist. Wenn Sie es also deaktivieren möchten, verwenden Sie das Minussymbol. Im übrigen überlasse ich dich, um diese Teile zu erkunden, wenn du interessiert bist. Aber mein Rat, installiere viele Google Fonts. Denken Sie daran, 1,5 für Ihre Zeilenhöhe zu verwenden und legen Sie sich nicht mit diesen anderen Dingen außer allen Kappen an. Wir haben weitaus wichtigere Dinge zu behandeln. Danke, und wir sehen uns in der nächsten Vorlesung. 21. Wie du mit Text wie einem Profi arbeitest.: Willkommen zurück. Lassen Sie mich Ihnen zeigen, wie Profis mit Textebenen in Figma arbeiten. Nachdem Sie einen Text eingerichtet haben, schauen Sie sich auf eine bestimmte Weise an, wir müssen dieses Symbol hier verwenden. Dieses Panel heißt Textstile. Und wenn Sie mitgemacht haben, ist es den Farbstilen sehr ähnlich. Klicken Sie auf das Plus-Symbol und jetzt können Sie es benennen. Im nächsten Schritt können Sie eine andere Textebene auswählen oder eine brandneue erstellen. Und anstatt mit all diesen Einstellungen herumzuspielen , können Sie dies tun. Klicken Sie hier und wählen Sie den soeben erstellten Baskischen Stil aus. Außerdem können Sie diese Stile nach Belieben organisieren. Die meisten Menschen verwenden jedoch die folgende Struktur. H1, H2, H3, manchmal H4, Körpertexte, Zitate, Links und vielleicht ein paar andere Punkte. Aber lassen Sie es uns am besten tiefer nehmen. Warum aber, warum brauchen wir so viel Vorbereitungsarbeit? Nun, hier ist das Ding. Lassen Sie mich dieses Freebie über den Community-Tab öffnen. Wir haben drei Titel hier, oder? Wenn wir auf den ersten klicken, können wir sehen, dass dies in einer Eisenbahn mit extra fett 25 Pixel angezeigt wird . Aber was ist, wenn das nächste 23 Pixel und das letzte 27 Pixel war? Wäre das okay? Nein, natürlich nicht. Das liegt daran, dass wir Konsistenz brauchen, aber wir brauchen auch Geschwindigkeit. Um sicherzustellen, dass wir beide Dinge haben, wir einen Stil eingerichtet. Wir nennen das h3 oder den Untertitel oder was auch immer Sie wollen. Und jetzt können wir diesen Stil überall anwenden. Dies ist eine einzige Seite, aber dieser Vorlesung geht es um die Arbeit professioneller Designer. Ernsthafte Projekte können 2050 haben , selbst wenn 100 Seiten oder Bildschirme sind. Wenn das der Fall ist, erinnern Sie sich vielleicht nicht daran, dass die wenn dieser Wert 22 oder 24, 26 war Leute vergessen, wenn dieser Wert 22 oder 24, 26 war, es ist normal. Deshalb haben wir die US-Textilien. Dies hilft uns, schneller zu arbeiten , aber auch konsistent zu bleiben. Nun, was diese Namensstruktur angeht, wissen Sie vielleicht nicht, was H1, H2, H3 bedeuten. Okay. Lassen Sie es mich schnell erklären. H steht für die Überschrift oder die Überschrift. Dies ist ein Begriff, der aus HTML stammt und eine Standard-Benennungskonvention ist. H1 sollte für den wichtigsten Titel auf der Seite verwendet werden . Es ist auch das größte, und normalerweise gibt es nur einen von ihnen auf der Seite. H2 ist ein weiterer Titel und oft mehrmals auf der Seite gesehen, aber es ist weniger wichtig sicherzustellen, dass es sich um sehr unterschiedliche Dinge handelt. Du solltest sicherstellen, dass es einen großen Unterschied zwischen ihnen gibt. Wenn H1 also 60 Pixel ist, sollte H2 keine 56 Pixel haben, oder? Nach Geschlecht. Nein, denn das wäre zu ähnlich. Die Leute sehen den Unterschied vielleicht nicht. Stattdessen sollten Sie etwas wie 48 Pixel verwenden. Lassen Sie mich das klarstellen. Es gibt keine strengen Richtlinien. Es gibt keine bestimmten Regeln , die Sie befolgen müssen, wenn Sie Ihren größten Titel wünschen. H1 ist also 48 Pixel, das ist völlig in Ordnung. Wenn du es größer oder kleiner willst. Nochmal, das ist total in Ordnung. Es liegt an dir. Die einzige Regel ist dies sicherstellt, dass sie unterschiedlich genug sind, insbesondere bei den ersten drei Titeln H1, H2, H3. Auch diese sollten eine andere Bedeutung bedeuten . jetzt in diesem speziellen Projekt Wenn wir jetzt in diesem speziellen Projekt die Auswahl aufheben, sehen wir, dass wir sieben Überschriften haben. Das ist ziemlich ungewöhnlich, aber wie ich gerade sagte, nenne sie wie du willst. Zum Beispiel wählte dieser Designer dieses Textstück aus dem Testimonial-Bereich, der in H6 gestaltet werden soll. Ich hätte es vorgezogen , dass dies als Körpertext bezeichnet wird. Und ich würde wahrscheinlich dasselbe für diese kurze Beschreibung hier in diesen Karten verwenden . Aber übe am Ende des Tages nicht viel Druck auf dich aus. Wenn Sie sich nicht sicher sind, wie Sie sie anrufen sollen. Benutze jede Benennung, die du willst. Testimonial-Texte zur Überprüfung von Text, Zitat, was auch immer für Sie funktioniert, solange Sie sich daran erinnern, was Sie getan haben, ist völlig in Ordnung. Jetzt gehen wir zurück zur Geschwindigkeit, bearbeiten wir die Überschrift, um die extra fett gedruckte Version zu sagen, oder? Ich werde das auf einen großen Wert ankurbeln, sagen wir 60 Pixel. Beachten Sie, wie viele Textebenen auf einer Seite aktualisiert wurden. Das ist schön zu haben, aber es gibt nichts so Verrücktes, oder? Es ist nicht allzu beeindruckend. Aber in einem 50-Seiten-Design ist dies absolut monumental. So arbeiten Profis also mit Textebenen. Sie haben ihnen das Styling in diesem Panel gespeichert und sie nutzen es, um schneller zu sein, aber auch um dadurch konsistent zu bleiben, erledigen sie die Arbeit, aber sie haben auch Bacon viel Flexibilität. Wenn der Kunde diese Schriftart hasst, können Sie die Dinge schnell ändern. Schnelligkeit, Konsistenz, Flexibilität, das sind Textilien für Sie. 22. Effekte in Figma: Schatten, Schatten und mehr: Willkommen zurück. Wer liebt keine Effekte? Habe ich Recht? Job, Schatten im Schatten verwischt die Worte, oder? Nun, Figma hat herausgefunden, beginnen wir mit diesem Design , das Sie an den Kurs gebunden haben. Lassen Sie uns die verschiedenen Beispiele beginnend mit diesem Hauptmenü. Das sieht ziemlich gut aus, oder? Aber der Kontrast ist einfach nicht da. Es ist ein bisschen schwer zu lesen. Wir könnten es auswählen. Dieser Wert steuert die Deckkraft dieser Ebene, aber hier ist ein besserer Weg, dies zu tun. Gehe zu Effekten und klicke auf dieses Plus-Symbol. Denken Sie daran, dass Sie in diesem Bereich scrollen können. Wenn Sie also keine Effekte sehen oder exportieren, scrollen Sie einfach nach unten. Jetzt erhält standardmäßig einen Schlagschatten. Klicken Sie hier und ändern Sie es. Und einfach so wurde dieses Rechteck eingefroren. Aber sag, du kannst wirklich nicht klingeln, vielleicht wegen der Aufnahme. Nun, kein Problem. Klicken Sie hier auf dieses Icon, um deren Effekt anzupassen. Dies hat ein einzelnes Feld und steuert die Stärke der Hintergrundunschärfe. Ändere es auf acht. Lassen Sie mich hineinzoomen und Sie sollten den Effekt sehen. Dies ist besonders bei iOS-Apps sehr beliebt . Dieser gefrorene Look, um das Vorher und Nachher zu sehen, können Sie hier auf dieses Symbol klicken , um zu denken, dass es ein guter Schritt nach vorn ist. Aber mein Rat ist, dass du bei Weiß oder Schwarz bleibst. Okay, versuchen wir es noch einmal. Auf dieser sekundären Schaltfläche sehen Sie, dass das Hintergrundbild etwas unordentlich ist. Auch hier ist es schwer, im Hintergrund Unschärfe zu lesen und es wird schöner aussehen. Mein Rat ist, dass du dich nicht davon mitreißen lässt. Ich würde das hier nicht hinzufügen, nur weil wir es bereits im Header verwendet haben, und das reicht. Okay, jetzt lass uns zum Haupttitel übergehen. Gleiches Sichtbarkeitsproblem. Dieses Mal kann uns ein Schlagschatten helfen, es zu aktivieren, und ja, ich denke, es ist einfacher zu lesen. Jetzt ist mein Rat, dass Sie Auswahl immer deaktivieren, um den Text ohne Ablenkungen zu sehen . Öffnen wir die Einstellungen und sehen, was los ist. X steht für Horizontal. Mein Rat ist, dass Sie es immer bei 0 belassen. Lass es mich auf etwas wie 30 ankurbeln. Mal sehen, was passiert. Der Schatten bewegt sich nach rechts. Und wenn Sie einen negativen Wert verwenden , geht es nach links. Im modernen Webdesign sind streunende Schatten der richtige Weg. So ist es am besten. Also nochmal, 0 und wenn x für die Horizontale steht, steht y für die vertikale Achse. Und dies steuert, wie weit der Schatten vom Text entfernt ist. Niedrige Werte funktionieren am besten. Eigentlich sollten die meisten Schlagschatten wirklich, wirklich, sehr subtil und kaum wahrnehmbar sein. Wenn Sie jedoch mehr auffallen möchten, können Sie die Deckkraft erhöhen. Im Moment liegt es bei 25 Prozent. Halten Sie die Umschalttaste gedrückt und tippen Sie auf die Pfeiltaste nach oben. Aber das ist die Gefahr, dass ich schon nie einen so hohen Wert nutzen würde. Also lasst es uns wieder runter nehmen. Okay, jetzt gehen wir weiter zum Hauptknopf. Hier zeige ich dir eine andere Art von Schlagschatten, diesmal einen farbigen. Benutze das gleiche Violett wie die Schaltfläche. Du solltest es genau hier haben. Aber wenn Sie den Knopf nicht einfach probieren, okay, das Pipettenwerkzeug ist fantastisch. Jetzt erhöhe das Unscharfe auf etwas wie Ben und für den Y-Wert, sagen wir sechs. Nehmen Sie schließlich die Deckkraft bis zu 50 Prozent, nur für den Fall, dass Sie nicht sehen dass die Dekodierung durchgeführt wird. Lassen Sie mich dieses Hintergrundbild aus dem Weg bewegen. Beachten Sie, wie der Knopf ausstrahlt Gewohnheit hat einen Globus. Das ist eine andere Möglichkeit, einen Schlagschatten zu benutzen, cooles Zeug. Lasst uns nun fortfahren , um die Unschärfe zu schichten. Wählen Sie das Hauptbild aus und wenden Sie es an, und Sie werden sofort sehen, was dies bei der Lesbarkeit des Textes hilft. Und natürlich können Sie die Intensität von diesem Teil hier aus anpassen . Lassen Sie mich jetzt etwas klären. Dies ist die Ebenenunschärfe und wirkt sich auf die Ebene aus , auf die wir sie angewendet haben. Dieser Button hier hat eine Hintergrundunschärfe. Der eingefrorene Effekt taucht also nur auf seinem Hintergrund auf. Das ist also der Unterschied. Ich sage es noch einmal. Die Ebenenunschärfe funktioniert auf der Ebene, auf die Sie die Hintergrundebene angewendet haben , wird nur die Ebene verschwimmen, die sich hinter dem Rechteck oder diesem bestimmten Rahmen befindet. Okay, lassen Sie mich bei dieser Vorlesung zwei Dinge sagen. Probieren Sie zuerst diese Effekte aus, um sie selbst zu sehen und zu sehen, wie Sie sie mögen. Ich empfehle auch, dass Sie versuchen, das Hintergrundbild durch ein anderes von unsplash.com zu ersetzen . Jetzt die zweite Sache, und das ist eigentlich das Wichtigste. Bitte verwenden Sie Effekte sparsam. Füge sie nicht überall hinzu. Und wenn du das tust, sei bitte subtil dabei. All diese Effekte sind nicht die Krücke. Wenn Sie den Text nicht zuerst lesen können, versuchen Sie, den Hintergrund zu verschwimmen. Wenn das nicht funktioniert, klicken Sie hier und fügen Sie das schwarze Overlay hinzu. Aber wenn Ihnen das kein sehr gutes Ergebnis liefert, ändern Sie bitte einfach das Bild. Schon wieder. Effekte sind nicht deine rettende Gnade. Sie sind keine Krücke , auf die man sich stützen kann. Sicher könntest du einen massiven Schlagschatten und Striche hinzufügen und was auch immer. Aber das wird schrecklich aussehen. Bitte verwenden Sie also noch einmal eine sehr niedrige Dosis von Stößen. Deshalb zeige ich dir zum Beispiel nicht genug Schatten. Es ist hier keine Option, aber die meisten Anfänger verwenden es zu viel und sie lassen ihre Designs so aussehen, als wäre es wieder 2005. Also nochmal, ich überspringe es einfach . Okay. Insgesamt haben Sie Spaß damit und denken Sie daran, niedrige Dosen. 23. Alles, was du über Raster brauchst.: Willkommen zurück. Reden wir über Gitter. Starte ein brandneues Projekt und füge diesen oberen Frame hinzu. Bitte ändern Sie die Breite auf 1920, da ich das immer empfehle. Zoomen Sie ein wenig heraus und sprechen wir über Hinzufügen und Verwenden eines Rastersystems. Sie es zuerst hinzufügen. Dies geschieht durch Auswahl des Rahmens wie folgt. Jetzt finden Sie in diesem Panel direkt unter dem automatischen Layout das Layout-Raster. Klicken Sie darauf und standardmäßig wird ein mobiles Raster angewendet. Offensichtlich ist dies nützlich für die mobilen Apps, iOS und Android, aber für die Webdesign-Zwecke klicken Sie bitte hier und aus dem Raster, schalten Sie es zwei Spalten nach oben. Hier sind die besten Einstellungen für das Raster für ein Webdesign-Projekt. 12 Spalten und der Rand von 360. Dies empfehle ich Ihnen dringend zu verwenden. Warum brauchen wir ein Raster? Nun, das hilft uns, die Dinge richtig auszurichten. Schließe das ab und nimm das Rechteck-Werkzeug. Stellen Sie sich vor, wir entwerfen paar Karten für einen Online-Shop, oder? 12 Spalten sind der Standard , da wir diese Zahl durch 234 oder sogar sechs teilen können . Hier füge ich ein Rechteck hinzu , das sich über vier Spalten erstreckt. Ich werde es schnell duplizieren, dann wirst du sehen, dass es ganz gut passt. Dieses Raster zeigt Ihnen etwaige Unvollkommenheiten. Lassen Sie mich das zum Beispiel ein bisschen zur Seite bewegen. Sieh dir an, wie das auffällt. Raster halten Sie auf dem Laufenden, helfen Ihnen aber auch in Figma, wenn Sie die Größe von etwas ändern möchten, z. B. für die Desktop-Version, Größe für die Tablet-Version ändern möchten. Also 12 Spalten mit warum 360 auf beiden Seiten. Nun, das ist meine persönliche Präferenz. Und hier ist der Grund. 360 mal 20 ist 720. 1920 minus 720 beträgt 1200 Pixel. Dieser Teil des Designs wird als aktiver Bereich bezeichnet, und hier sollten alle Ihre wichtigen Elemente platziert werden. Lassen Sie mich Ihnen ein kurzes Beispiel zeigen. Sag die New York Times, oder? Sehen Sie, wie viel leerer Speicherplatz auf beiden Seiten des Inhalts funktioniert. Also die 360-Marge , die wir einsetzen. Aber hier ist das Ding. Wechseln wir zu Stripe.com. Man sieht deutlich, dass eine senkrechte Linie auf der linken Seite verläuft. Die Dinge sind perfekt ausgerichtet. Okay, sonst geht nichts davon raus. Aber auf der rechten Seite, schau was los ist, was hier passiert. Warum darf dieses Dashboard-Design den aktiven Bereich verlassen? Dasselbe, wenn wir nur ein bisschen nach unten scrollen. Das ist eigentlich kein Fehler. Dieser Teil hier in der Mitte, das ist wesentlicher Inhalt. Du musst es lesen, du musst es sehen. Aber dieser Teil, der draußen ist, das ist einfach dekorativ. Es sieht gut aus, aber das ist es nicht wichtig, ist nicht wichtig. Zur Zusammenfassung sollte das Raster für Webdesign-Projekte 12 Spalten 360-Rand, einer Breite von 1920 einem aktiven Bereich von 1200 Pixel aufweisen. Sie können Designelemente außerhalb dieser gebauten 100 Pixel platzieren , aber nur, wenn sie dekorativ sind. Das heißt, wenn sie nicht gesehen werden, ist es keine große Sache. Lassen Sie mich die Dinge ein bisschen mehr erklären. Die derzeit am häufigsten verwendete Bildschirmauflösung der Welt ist 1920 bis 1080. Deshalb ist mein Rahmen 1920 und nicht 1440. Was ist etwas anderes? Jetzt war die am zweithäufigsten verwendete Auflösung. Die sechs um 768. Dies wird hauptsächlich auf Laptops verwendet, bei älteren Laptops. Hier ist das Ding. Hier ist ein 1366-Rahmen mit einem Gitter, das an diese Größe angepasst ist. Dieses Rechteck ist hier 1200 Pixel breit. Hier wird der Inhalt platziert. Und Sie können immer noch sehen, dass auf beiden Seiten ein bisschen leeres Zimmer ist. Deshalb empfehle ich 1200 Pixel für den aktiven Bereich. Selbst auf älteren Laptops wird der Benutzer die Website auf anständige Weise sehen. Ich werde also noch einmal sagen, dass wir mit 1200 Pixeln entwerfen, da dies gut in die meisten Computerbildschirme und Laptops passt , sogar ältere. Jetzt können Sie fragen, drücken Sie, was ist mit dem 960 Raster? Klar. Das ist im Grunde nur ein bisschen schmaler und leider sehen schmale Designs einfach nicht so gut aus. Die meisten Menschen bevorzugen große und immersive Erlebnisse. Nun, wenn das der Fall ist, können Sie sagen, aber Chris, warum sollten Sie bei 1200 aufhören? Warum gehst du nicht zu 1400 oder 1600? Vielleicht noch mehr. Wikipedia nimmt alle Bildschirm-Immobilien auf, ebenso Amazon oder Netflix. Aber das sind Ausnahmen und ich kann sie nicht empfehlen. Du wirst in große Schwierigkeiten geraten wenn du meinem Rat nicht folgst, wenigstens damit. Regeln sollen gebrochen werden. Klar, aber jetzt nicht. Jedes Design, das Sie veröffentlichen, stellen Sie bitte sicher, dass Sie meinem Rat folgen. 1924, der Frame 1200 Pixel für den aktiven Bereich, 12 Spalten, 360 Rand. Bevor wir enden, möchte ich, dass du das machst. Verwenden Sie Umschalttaste R, damit die Lineale links und oben angezeigt werden. Das wird also versandt sind. Klicken und ziehen Sie nun eine Hilfslinie weg legen Sie sie hier auf beiden Seiten des aktiven Bereichs. Und wenn du hier fertig bist, werde ich hier verwenden, während ich diese Videos aufnehme, ich werde das Raster die meiste Zeit ausblenden. Und selbst wenn es aktiviert ist , wird es jetzt bei 10 Prozent liegen. Stattdessen verwende ich es vielleicht bei 3% oder so ähnlich. Und das liegt daran, dass es ehrlich gesagt ablenkt. Es gibt eine Menge zu betrachten und zu entwickeln zu treffen sind. Ich möchte, dass du auf das achtest, was ich mache und dich nicht vom Netz ablenken lässt. Ich denke, das ist eine viel bessere Lernerfahrung. Um das Raster auszublenden, klicken Sie einfach hier auf dieses Symbol und das war's. Okay, das packt es ein. Bitte vergewissern Sie sich, dass Sie sich an diese Werte erinnern. 1920 und 1200 Pixel, 360 auf beiden Seiten, 12 Spalten. 24. Eine Übersicht über die Komponenten: Willkommen zurück. Lassen Sie uns schnell Komponenten in Figma abdecken. Diese geben Ihnen viel Kontrolle und Flexibilität. So läuft das. Sagen wir erstellen einen Button. Ich beginne mit einer Textebene und aktiviere dann Umschalttaste a, um das automatische Layout zu aktivieren. Dann ist es wirklich eine Frage der Präferenz. Ich aktiviere eine Füllung und wähle eine beliebige Farbe aus. Ich entscheide mich für Blau oder ähnliches. Natürlich müssen wir den Text in reines Weiß ändern. Das ergibt Sinn. Offensichtlich möchten wir es vielleicht etwas größer machen. Die Standardgröße ist viel zu klein. Okay, dann runden Sie die Koordinaten ab und so weiter. Auch hier ist diese Fliesen subjektiv, aber wie Sie sehen können, braucht es einige Aktionen, oder? Es ist nicht allzu schwierig, aber es sind viele Klicks. Jetzt, da wir einen Knopf abgeschlossen haben, können wir ihn in unserem gesamten Design verwenden, oder? Sagen Sie ein 50-Seiten-Design. Aber wie immer kommt der Kunde herein und er sagt: Hey, diese Farbe mag ich nicht, ich mag diese Last nicht. Fügen Sie ein Symbol hinzu, ändern Sie den Eckenradius und so weiter. Ändere im Grunde alles. Hier kommt das Problem ins Spiel. Wir müssen es an vielen Orten aktualisieren. Jetzt könnten wir die Farbe ändern, wenn wir Farbstile verwenden. Aber was ist mit dem Rest? Deshalb brauchen wir Komponenten. Lassen Sie mich all diese Kopien löschen. Hier ist die ursprüngliche Belastung, oder? Wählen Sie es aus und klicken Sie auf dieses Icon Komponente erstellen. Als Nächstes ziehe ich eine Kopie heraus. Sagen wir einfach, der Kunde sagt, er will quadratische Kanten. Okay, kein Problem. Da gehst du. Was ist mit der Farbe? Ändere es einfach. So einfach ist das. Aber was ist, wenn wir ein Icon hinzufügen müssen ? Nun, wir können es einfach hineinziehen und nach Bedarf anpassen. Während ich arbeite. Hier ist der Schlüssel. Der Klon auf der rechten Seite wird ständig aktualisiert. Das ist die Magie der Komponenten. Sie ermöglichen es Ihnen, eine Änderung an der ursprünglichen Komponente vorzunehmen , und dann alle Klone automatisch aktualisiert, egal wie viele sie sind. Lass mich zu einem anderen Projekt wechseln. Hier. Dies sind alles grundlegende Knöpfe. Eigentlich bestehen sie aus einem Rechteck und der Textebene. Dies verwendet also nicht einmal einen Rahmen, der alles andere als ideal ist. Aber sagen wir, der Kunde möchte den Stil dieser Schaltfläche ändern. Nun, lasst uns zunächst alle diese grundlegenden löschen , weil wir sie nicht brauchen. Stellen Sie sich vor, ein Kollege von Ihnen dieses Projekt gerade übergeben, oder? Vielleicht hast du es aus dem Internet heruntergeladen oder so ähnlich. Okay, wählen wir die ersten beiden aus und verwenden Umschalttaste acht , um das automatische Layout zu aktivieren. Dies ist optional, aber die meisten Designer bevorzugen es. Gehe als Nächstes an die Spitze von Figma und verwandle diese in eine Komponente. Schön. Jetzt könnten Sie möglicherweise Drag-Kopien wie folgt ändern. Aber wenn das Projekt riesig ist und über viele Seiten hinweg möglich ist, können Sie das nicht verwalten. Gehe also zum linken Bereich und wechsle zu Assets. Hier findest du den Button. Ziehen Sie es jetzt und legen Sie es überall sonst hin. So solltest du von Anfang an arbeiten, denkst du vielleicht, aber Chris, wenn wir ständig Dinge aus der Seitenleiste ziehen, können wir es nicht jedes Mal tun der Kunde seine Meinung ändert? Aktualisieren Sie einfach und ziehen Sie Kopien heraus. Nun, ja, natürlich, in kleinen Projekten wie diesem ist das natürlich völlig in Ordnung. Aber bei größeren ist es ein großes Kopfschmerz. Und denken Sie daran , dass Sie dies nur einmal danach tun werden , beginnen Sie den Knopf zu wechseln, finden Sie das Original und beginnen Sie noch mit der Bearbeitung, ich werde etwas ganz Offensichtliches tun , damit Sie es können siehe die Änderungen. So können Komponenten Ihnen viel Zeit sparen. Darüber hinaus können Sie den Textinhalt in jedem der Klone auf alles andere ändern , etwas eingeben, und das war's. Aber wenn Sie das ursprüngliche Styling ändern, wird dieses diesem Beispiel folgen. Es wird die Größe, die Schriftfamilie mit allem, was Sie sonst noch im Original gemacht haben, aktualisieren die Schriftfamilie mit allem, was . Und Komponenten sind nicht nur mit Knöpfen ausgestattet. Du kannst sie für fast alles benutzen , was dir einfällt. Aber lasst es uns Schritt für Schritt machen. Woher weißt du zunächst, welcher der ursprüngliche Button ist und welche sind die Klone? Nun, das Original heißt offiziell Master-Komponente. Wenn wir zum Ebenenbedienfeld wechseln , wird dieses Symbol angezeigt. Ich habe bemerkt, dass dies gefüllt ist. Dies ist eine Masse dieser Komponente, und hier nehmen Sie alle Ihre Bearbeitungen durch und sie werden auf alle Ihre Klone verteilt. Die Klone werden tatsächlich Instanzen genannt. Also auch hier sind Klone oder Instanzen dasselbe. Und das ist ihr Symbol. Dieser ist leer. Es ist also ziemlich einfach, sich für das Original gefüllt zu erinnern, leer für den Klon. Eine andere Möglichkeit, dies zu tun, klicken Sie auf einen Klon und Sie sehen diese Option hier. Gehe zur Master-Komponente. Einfach so. Sie wissen jetzt, wo Sie das Original finden können. Aber was ist, wenn Sie versehentlich gelöscht haben? Keine Sorge. Klicken Sie auf OK Darlehen und Sie sehen diese Option namens Restore component. Figma hat unseren Rücken. Okay, jetzt lasst uns innehalten und zusammenfassen. Komponenten sind eine großartige Möglichkeit, Ihre Arbeit zu beschleunigen. Wählen Sie einen beliebigen Frame, einen beliebigen Ordner oder ein Element aus und verwenden Sie dieses Symbol hier von oben. Die meisten Leute bevorzugen es, das automatische Layout zu aktivieren. schlage ich vor, dass Sie Kopien aus dem Assets-Panel gezogen haben. Das kannst du auch von der Leinwand aus machen. Aber als dieses Panel ist dieser Krieg im Grunde genommen. Wenn du sicherstellen willst, dass das in Ordnung ist, die muslimische Komponente, auch bekannt als der ursprüngliche Button. Sie können es an diesem Symbol im Ebenenbedienfeld erkennen. Oder Sie können auf einen Klon klicken und Sie haben die Möglichkeit, zur Hauptkomponente zu wechseln. Okay, wenn Sie darauf zurückgehen, können Sie Änderungen an Ihren Instanzen vornehmen und sie bleiben so, wie sie sind, selbst wenn Sie die Master-Komponente ändern. Hier ist nur ein Beispiel. Ich mache etwas fair. Ihr Freund. Ich deaktiviere die Füllung. Ich behalte einen Schlaganfall. Ich ändere die Farbe des Textes. Also nochmal, radikal anders, oder? Dafür müssen Sie nicht mitarbeiten. Übrigens möchte ich, dass Sie bemerken, dass die anderen Instanzen, also die anderen, die Klone, gleich bleiben. Gehen wir nun zum Original und ändern, sagen wir die Formularfamilie, oder? Ich schalte es auf Montserrat um. Sehen Sie, wie alles aktualisiert wird, einschließlich dieses. Ich werde auch die Größe vergrößern damit Sie die Unterschiede erkennen können. Und wieder wird es folgen, obwohl wir einige Änderungen daran vorgenommen haben. Und wenn wir unsere Meinung ändern, ist das Tolle daran, dass wir genau hier gehen können und Sie werden diese Option namens Alle Overrides zurücksetzen finden. In genau so fließt es alle unsere Bearbeitungen weg. Dies ist die Leistungsfähigkeit von Komponenten, aber das ist nur ein Überblick. Wir werden langsamer mehr über sie sprechen , wenn die Zeit reif ist. An dieser Stelle möchte ich, dass Sie mit dieser spezifischen Situation mit einem Knopf üben . Benutze dieses Projekt und folge alle meine Schritte zurück. Löschen Sie alle diese anderen Schaltflächen, verwenden Sie zuerst das automatische Layout, machen Sie es zu einer Komponente und haben Sie dann einfach Spaß damit. Sehen Sie, was Sie daran ändern können, was Sie nicht ändern können. Bitte nähern Sie sich dem mit einer entspannten Einstellung. Ich habe ein paar Dinge über Komponenten nicht erwähnt und das ist absolut beabsichtigt. Wir werden später auf fortgeschrittenere Sachen eingehen. Es gibt auch einen Spickzettel , der dem Verhältnis von Speicher beigefügt ist. Und damit bitte geh und hab Spaß. 25. Zeichnungen und Projekte in Figma: Willkommen zurück. Ich möchte mir eine Minute Zeit nehmen und die Einschränkungen des kostenlosen Plans und Figma erklären , es gibt viele Informationen zu behandeln. Und das liegt daran, dass Figma für die Projekte entwickelt wurde , die Hunderte von Bildschirmen enthalten. Deshalb ist alles , was kommt, so gottverdammt komplex. Die gute Nachricht ist, dass Sie es sich nicht merken müssen. Du musst dir nichts auswendig lernen. Lehn dich zurück und entspann dich Okay, auf dem Begrüßungsbildschirm im linken Bereich haben Sie die Möglichkeit, ein Team zu erstellen. Sie sollten das auch dann tun, wenn Sie vorhaben , im Moment alleine zu arbeiten. Ich habe Mindset bereits eingerichtet und kann mit der rechten Maustaste darauf klicken, um es umzubenennen. Jetzt können wir hier ein Projekt erstellen. Ich empfehle Ihnen, den Namen des Unternehmens zu verwenden , für das Sie arbeiten. Wenn du also neu entwirfst, sieht das gut aus. Dotnet, das ist mein Blog. Das würde ich hier schreiben. Geben Sie also einfach den Namen des Unternehmens ein. Wenn Sie auf Ihr Projekt klicken, wird es zunächst leer sein. Aber die rechte Seite erzählt dir die Geschichte des kostenlosen Figma-Plans. Sie erhalten drei Figma-Design-Dateien und das einzelne Projekt, also dieses, das wir gerade erstellt haben. Lassen Sie mich erklären, wie das funktioniert. Wie ich gerade sagte, empfehle ich Ihnen, Ihre Projekte nach dem Namen des Unternehmens zu benennen. Wenn Sie also für den Uber arbeiten, geben Sie dies ein, Sie können immer mit der rechten Maustaste klicken und das Projekt umbenennen. Okay, jetzt kannst du dir ein Projekt wie ein Brettspiel vorstellen. Alle Brettspiele haben eine Schachtel, die alle Teile zusammenhält, oder? Wenn du verschiedene Brettspiele hast, solltest du für jeden von ihnen unterschiedliche Boxen haben, oder? Und das liegt daran, dass du keine Stücke zwischen ihnen mischen willst . Das wäre absolut schrecklich, oder? Du solltest sie jederzeit getrennt halten. diesem Grund haben wir Projekte, um jede Datei, die sich auf dieses Unternehmen bezieht, in einer eigenen Box aufzubewahren . Es ist Ordnern in Ihrem Betriebssystem sehr ähnlich , oder? Angenommen, Sie haben drei Spiele auf Ihrem System installiert. Du solltest drei verschiedene Schriftarten haben, oder? Wenn Sie alle drei Gewinne in einem einzigen Ordner installieren, würden die Dateien durcheinander gebracht, und das wäre offensichtlich ein ziemlicher Albtraum. Es ist sehr sinnvoll, organisiert zu sein. Okay, das ist also ein Projekt, eine große Box oder der Ordner , der alle Dateien zusammenhält. Aber welche Dateien fließen ins Projekt ein? Figma-Design-Dateien. Diese FIG-Dateien, was bedeutet, was wir gerade mit Control N Word erstellt haben , indem wir diese dedizierte Schaltfläche oben rechts verwenden. Wenn wir nun auf die aktuelle Registerkarte gehen, sehen Sie hier viele Dateien. Stellen Sie sich vor, diese beiden sind für das OBOR-Projekt. Nun, klicke einfach darauf und ziehe sie in unser Projekt. So einfach ist das. So können Sie Dateien von der rechten Seite nach links ziehen . Lassen Sie uns nun von letzten Zeit entfernen und zum Projekt gehen. In dieser Box haben wir die beiden Dateien, die wir gerade verschoben haben. Stellen Sie sich vor, dies ist das Design für die mobile App und diese ist die Top-Version. Es ist sinnvoll, sie getrennt zu haben, weil die Projekte für dasselbe Unternehmen ziemlich unterschiedlich sind, aber auch hier verschiedene Arten von Projekten, oder? Oder vielleicht enthält einer von ihnen die Reichtum-Frames. Oder vielleicht haben Sie die Inspirationsquellen oder vielleicht einige Notizen des Kunden wären vielleicht eine Präsentation , die Sie für den Kunden gemacht haben. Große Projekte können Dutzende verschiedener Dateien haben. Wenn Sie von Photoshop kommen, können Sie sich diese wie einzelne PSD-Dateien vorstellen. Das sind sie tatsächlich, einzelne Punkt-FIG-Dateien. Anstatt sie jedoch auf Ihrer Festplatte auf Ihrem Computer gespeichert zu werden, werden sie in der Cloud gespeichert. Lassen Sie uns jetzt einen Moment innehalten, um ein Projekt zusammenzufassen. Dieser hier kann mehrere Designdateien enthalten. Diese Designdateien können fast alles sein , was mit dem Projekt zu tun hat. Der drei Figma-Plan ermöglicht es Ihnen, drei Dateien zu haben. Das war's. Okay, bin zum letzten Tab gegangen und ziehe einen anderen dorthin. Gehen Sie nun zurück zum Projekt und bemerken Sie die Nachricht, aktualisieren Sie für die unbegrenzten Designdateien. Das ist also das Limit mit den drei Figma-Plan drei Akten. Jetzt ist der Preis Abstieg, aber was ist, wenn Sie nicht bezahlen möchten? Nun, ich kann das nicht empfehlen, aber hier ist es. Wenn Sie ein beliebiges zufälliges Projekt wie folgt erstellen. Lassen Sie mich ein einfaches Rechteck mit einer hellen Farbe erstellen. Wenn Sie es jetzt schließen, wird dies automatisch gespeichert. Die Frage ist, wo nicht in letzter Zeit, lassen Sie sich nicht täuschen. Stattdessen wurde es hier unter Entwürfen gespeichert. Hier können Sie beliebig viele Dateien haben. Im Grunde genommen ist dies die Arbeit. Sie könnten möglicherweise alle Ihre Dateien hier lassen. Sie können sie nicht mit einem anderen Designer teilen , um gemeinsam daran zu arbeiten, aber Sie können sie Ihrem Kunden präsentieren und jede Datei in etwas wie Uber iOS oder Android, Uber umbenennen jede Datei in etwas wie Uber iOS oder Android, desktop und so weiter. Es ist offensichtlich nicht so gut wie nicht so gut organisiert. Aber wenn Sie nur ein Anfänger sind, ist das von Anfang an völlig in Ordnung. Und nachdem Sie ein paar tausend Dollar mit Ihrer Designarbeit verdient haben, sollten Sie auf einen bezahlten Plan upgraden, der mehr ist als diese. Darüber hinaus haben Sie die Möglichkeit, nach Ihren Dateien zu suchen, solange Sie sie richtig benennen, Sie sollten keine Probleme haben. Zur Zusammenfassung geht es darum, wie Sie Dinge organisieren. Es gibt keinen richtigen und falschen Weg, aber es gibt Best Practices. Es ist am besten, ein Projekt auf der linken Seite für jedes Unternehmen zu haben , für das Sie arbeiten. In diesem Projekt können Sie mehrere Designpfähle haben. Eine für das Newsletter-Design, eines für die Social Media 14, die iOS-App für die mobile Version und so weiter. Nun, hier ist eine Sache, die Sie für die sehr großen Projekte tun können . In diesen Akten. Sie können Seiten und Seiten haben , die Ihnen helfen, Dinge noch besser zu organisieren. Zum Beispiel in der Social-Media-Datei, was eine Menge Dinge sein kann. Sie können separate Seiten für YouTube, Facebook, TikTok, Pinterest, Instagram und so weiter haben. Stimmt's? Dies ist also nur eine Möglichkeit, ein riesiges Projekt zu organisieren , das Dutzende, vielleicht Hunderte von Bildschirmen enthalten kann . Figma kann für die größten Projekte der Welt mit Themen verwendet werden , die Dutzende von Designern, Projektmanagern, Produktmanagern, Testern, Entwicklern usw. haben Projektmanagern, Produktmanagern, . Buchstäblich 100 Tausend Dollar Projekte. Und wenn es so viele Bildschirme und so viele Leute gibt, ist dies die Art von Dingen , die dir wirklich helfen. Man muss unglaublich organisiert sein. Aber zurück in die reale Welt müssen Sie sich darüber keine Sorgen machen. Ich werde Ihnen Schritt für Schritt beibringen, um eine neue Datei und neue Seiten zu erstellen und so weiter. Also bitte habe Geduld und mach dir keine Sorgen, wenn du das alles nicht vollständig verstehst. Während wir den Kurs fortsetzen, verspreche ich, dass es immer sinnvoller wird. Aber im Moment kennen Sie die Einschränkungen des kostenlosen Plans, eines Projekts und drei einzelnen Dateien. Du weißt, dass das Kleid ein Ort ist , an dem standardmäßig alles gespeichert wird. Und dass Sie andere Designer nicht einladen können gemeinsam mit Ihnen an diesen Projekten zu arbeiten. Aber selbst bei Entwürfen können Sie Ihre Arbeit mit der Welt teilen , um sie mit der Aussicht zu zeigen. Und damit lasst uns weitermachen. 26. Hier ist Folgendes hier, damit du dich zu einem guten Webdesigner: Wenn ich darüber nachdenke, was einen guten Webdesigner ausmacht, denke ich immer über diese drei Dinge nach. Pixel perfekte Ausführung, um die Bedürfnisse des Kunden und die Liebe zum Detail zu verstehen. Wir werden ausführlich über diese Dinge sprechen. Aber ich möchte einen unglaublich wichtigen Punkt unterstreichen. Lassen Sie sich zu Beginn nicht in erweiterte Workloads verwickeln . Ansonsten gesagt: Denken Sie nicht, dass Sie automatisch ein großartiger Webdesigner werden, wenn Sie Figma auf sehr hohem Niveau lernen . Lassen Sie mich erklären, was das bedeutet. Sehen Sie, Figma ist ein unglaublich leistungsfähiges Design, das von Profis aus der ganzen Welt genutzt wird, von Freiberuflern bis hin zu riesigen Designstudios. Wenn Sie es jetzt schaffen, diese erweiterten Funktionen zu meistern, Figma, kann ich Ihnen helfen, in kürzester Zeit großartige Projekte zu erstellen . Sie können mit Designsystemen arbeiten. Sie können Assets mit einem Team teilen, sich auf Komponenten und Invarianz verlassen und Einschränkungen verwenden, um einfache Weise reaktionsschnelle Zustände zu erstellen. Wieder wirklich fortgeschrittenes Zeug. Und ich weiß, dass du diese beiden Begriffe nicht kennst. Also hier ist ein kurzes Beispiel. Ich kann das Farbschema leicht ändern, um ein paar Klicks zu machen. Diese Macht des Verstehens von Figma hat Fähigkeiten. Ich kann meine Topographie auch mit der gleichen Leichtigkeit ändern. Ich kann diesen dunklen Text in etwas lebendigeres ändern und du kannst sehen, wie das einfach funktioniert, oder? Vielleicht möchte der Kunde die Kategorien über diesem Bereich, kein Problem. Dieses Layout ist so aufgebaut , dies buchstäblich keinen Aufwand erfordert. Ich kann einen Schalter umdrehen und den Stil einer Belastung einfach so ändern . ein paar Jahren wäre dies unglaublich zeitaufwändig gewesen. Und das ist In der Oberfläche. Es gibt so viel mehr Möglichkeiten in Figma. Aber sehen Sie, ob Sie den Beginn Ihrer Reise zulassen, könnte sich Ihr Kopf drehen. Das könnte dich entmutigen. Framt die Abweichung der Komponenten mit diesen Dingen zum Teufel ein. Rahmen innerhalb von Frames mit automatischem Layout. Deshalb habe ich dieses Video tatsächlich gemacht. Um dir das zu sagen, konzentriere dich bitte nicht auf diese Dinge. Es ist großartig, sie zu lernen. Versteh mich nicht falsch. Es ist großartig, Ihr Projekt mit den fortschrittlichsten Techniken und den bestmöglichen Praktiken zu erstellen den fortschrittlichsten Techniken und . Aber es ist so einschüchternd und es könnte dich dazu bringen, aufzugeben. Deshalb wollte ich dir von diesem scheinbar komplizierten Zeug erzählen . Das wird dich nicht zu einem großartigen Webdesigner machen. Das fortschrittlichste Zeug wird dich nicht über Nacht zum Erfolg bringen. Stattdessen schlage ich folgendes vor. Bitte verstehen Sie die drei Prinzipien , die ich in diesem Kurs erwähnen werde. Pixel perfekte Ausführung, die Bedürfnisse des Kunden und die Liebe zum Detail zu verstehen. Diese haben wenig mit Figma zu tun. Wenn du dich auf sie konzentrierst und sie verstehst, wird der Rest zusammenfallen. Darüber hinaus können Sie in jedem Designprogramm arbeiten, bei Figma und Adobe XD Sketch sein und was auch immer. Aber bitte hören Sie nicht auf, etwas über Webdesign zu lernen da Sie nicht verstehen wie einige erweiterte Funktionen funktionieren. Diese Dinge sind alle optional, Abweichungen und Einschränkungen und was nicht. Sie sind kein Must-Have. Pünktlich. Du wirst sie lernen. Ich werde Ihnen etwas über sie beibringen, aber sie sind ein wesentlicher Bestandteil der Prinzipien. Also sage ich es ein letztes Mal. Lassen Sie sich von diesen erweiterten Funktionen nicht erschrecken. Sie sind nicht wesentlich, um ein großartiger Webdesigner zu werden. Du wirst sie zu gegebener Zeit lernen. Und mit diesem Druck von dir selbst können wir mit einer entspannteren Einstellung fortfahren. 27. Was kommt als Nächstes?: Hey da, das ist Chris. Herzlichen Glückwunsch, ich freue mich sehr, dass du es bis dahin geschafft hast. Ich hoffe, du hast gesehen, wie großartig Figma sein kann, deine Aktivitäten und Übungen. Aber du musst beachten, dass es noch viel mehr zum Auspacken gibt. Ich schlage vor, dass Sie mein Profil überprüfen, damit Sie die nächste Etappe Ihrer Reise beginnen können. Figma wird von den größten Unternehmen der Welt für Web - und App-Design-Projekte eingesetzt. Also mein Rat, Hitze geht, schau, worum es beim ersten geht. Es gibt viel Summen um Figma. Jeder redet darüber. Und in diesem Teil haben wir gerade an der Oberfläche gekratzt. Es gibt noch ein Drittel mehr zum Auspacken. Damit hoffe ich, dass ich dich im nächsten Teil deiner Reise sehe . Denken Sie daran, lernen Sie weiter, wachsen Sie weiter. Dies ist der Pressebaron, der sich für den Moment anmeldet.