Figma Fundamentals: Eine Einführung in das UI-Design

1. Einführung: Hallo Leute, Mein Name ist Peter und willkommen in der Klasse. gleich zur Sache zu kommen, wenn Sie etwas im Leben meistern wollen, ist es wirklich wichtig dass Ihre Grundlagen und Grundlagen klar sind. Und genau das tun wir in diesem speziellen Video, indem die Grundlagen von Figma erlernen. In diesem Kurs beginnen wir also mit dem Nötigsten, um ein Figma-Konto zu erstellen. Dann wollen wir die Oberfläche von Pigma erkunden, wo wir uns diese Woche eingehend mit dem Ebenenbereich, meinen Tools und dem Eigenschaftenfenster befassen, alles mit einigen relevanten Beispielen. Abschließend werden wir das gesamte Wissen, das wir durch die Erstellung einer ständigen Landingpage gewonnen haben , einschränken. Also Leute, am Ende dieses speziellen Kurses werdet ihr eine klare Vorstellung davon haben, was Figma ist und was das potenzielle Figma ist. Und Sie werden sich zu 100% sicher sein, mit Figma ein grundlegendes Design zu erstellen. Das ist also ein allgemeiner Überblick darüber , was diese spezielle Klasse gefragt hat, und zu dieser speziellen Klasse gehört noch viel mehr , was das nächste Gremium gefragt hat. Also vielen Dank fürs Zuschauen und ich hoffe wirklich, euch im nächsten Video zu sehen. 2. Erste Schritte mit Figma: Also Leute, in diesem Video und seht, wie wir mit Figma anfangen können. So können wir ein Konto bei Figma erstellen. Dieses Video ist also für absolute Anfänger , die noch kein Figma-Konto haben. Wenn Sie also bereits ein Konto haben, kann ich dieses spezielle Video wahrscheinlich überspringen. Um also ein Konto bei Figma zu erstellen, gehen Sie erneut auf die URL www dot figment are cool, die Sie direkt zu dieser besonders schönen Website führt. Das ist also ein wirklich informativer und gut konstruierter Vorteil. Ich schlage vor, dass ihr euch diese spezielle Website anschaut, um zu sehen, was Figma einzigartig macht. Was sind die verschiedenen Funktionen und vieles mehr. Wenn Sie also bereits ein Konto haben, können Sie direkt zur Anmeldung gehen und sich mit Ihren Anmeldeinformationen anmelden. Wenn Sie also kein Konto haben, können Sie entweder erneut auf Get Started klicken, eine E-Mail und ein Passwort eingeben, ein Konto erstellen, dasselbe überprüfen und schon kann es losgehen oder , um die Dinge zu vereinfachen, Sie können sich direkt bei Google anmelden. Das ist also ungefähr der Teil der Kontoerstellung. Also werde ich mich jetzt anmelden, da ich bereits ein Konto habe. Also Leute, im Moment sind wir im Figma-Dashboard und wie Sie sehen können, haben wir ein paar Projekte, an denen ich gearbeitet habe. Sie können von hier aus auch eine neue Designdatei erstellen. Sie können auch eine vorhandene Datei aus anderen Tools importieren . Moment greifen wir im Grunde über ihre Webanwendung auf Figma zu und alle anderen Daten werden im Grunde in der Cloud gespeichert und nichts wird den lokalen Speicher Ihres Computers übernommen. So können Sie auch Figma und Desktop-Anwendung erhalten. Sie können hier auf Ihr Anzeigenlogo klicken und auf Desktop-App abrufen klicken, um Figma auch auf Ihren lokalen Computer herunterzuladen. Das ist also das grundlegende Dashboard. Lassen Sie uns also auf eine neue Design-Datei klicken, um eine neue Datei zu erstellen. Also Leute, das ist Figma hat Interphase. Machen Sie sich also keine Sorgen, wenn Sie nicht verstehen, was die Dinge sind werden wir uns im Grunde genommen eingehend den kommenden Videos werden wir uns im Grunde genommen eingehend mit den verschiedenen Abschnitten befassen. In diesem Video meinte ich nur, wenn Sie ein absoluter Anfänger sind, wollte ich Sie nur dabei wenn Sie ein absoluter Anfänger sind, unterstützen, mit Figma zu beginnen, ein Konto zu erstellen, sich das Dashboard anzusehen und ein neues Projekt zu erstellen. Das ist also alles über dieses spezielle Video. Vielen Dank fürs Zuschauen und wir sehen uns im nächsten Video. 3. Figma: Also Leute, in diesem Video werde ich euch eine Benutzeroberfläche oder Ansicht von Figma geben . Im vorherigen Video haben wir also ein neues Projekt erstellt. Und wie Sie sehen können, ist die Benutzeroberfläche von Figma ziemlich einfach und auch sehr leicht zu verstehen. Und dann Die im Gesicht sterben ist hauptsächlich in vier verschiedene Abschnitte unterteilt. Links siehst du hier den Ebenenausschnitt. Wann immer Sie also ein Objekt oder Bild hinzufügen, können all diese Dinge in Form von Ebenen angeordnet werden, genau hier im linken Bereich. Tatsächlich können Sie die gesamte Struktur Ihres Projekts sehen , indem Sie sich nur den Ebenenbereich ansehen. Das ist also ungefähr der letzte Abschnitt. Und oben sehen Sie hier den Werkzeugbereich. Und Figma hat vergleichsweise weniger Tools. Aber all diese Tools sind mehr als ausreichend, um im Grunde jede Art von Design zu erstellen. Und das ist das Schöne an Figma. Die Dinge sind ziemlich einfach, aber Sie verfügen über ausreichend Tools und Ressourcen, um Ihre Idee im Grunde in ein richtiges Design umzusetzen. Und unten hier siehst du die Leinwand. Kurz gesagt, dies ist ein Ort, an dem wir im Grunde das Design erstellen. Und rechts sehen Sie hier den Einstellungsbereich oder den Eigenschaftenbereich. Hier passen wir ein Objekt grundsätzlich individuell an. Dieser Abschnitt ist also wieder in Design, Prototyp und Inspektion unterteilt . Aber wir werden höchstwahrscheinlich nur beim Designbereich bleiben . Also Leute, das ist im Grunde ein allgemeiner Überblick über das einzelne Figma. In den kommenden Videos werden wir jeden Abschnitt aufgreifen und uns eingehend mit ihren Funktionen befassen, während es in den kommenden Videos verschiedene Tipps und Tricks, bewährte Praktiken und all diese Dinge bewährte Praktiken und all diese Dinge gibt. Das war's für dieses Video, und wir sehen uns im nächsten Video. 4. Figma: Also Leute, lasst uns in diesem Video einen Blick auf die verschiedenen Tools werfen , die Stigma bietet. Lassen Sie uns verstehen, was sie sind und welche verschiedenen Funktionen sie bieten. Das erste, was ich hier im Bereich Tools schreiben kann, ist im Grunde das Hauptmenü , das einige grundlegende funktionale Abneigungen bietet eine gute Damenansicht. Das Typische, was wir auf jeder Art von Website sehen können. Das nächste Tool hier ist im Grunde genommen das Verschiebewerkzeug, wie der Name schon sagt. Es wird hauptsächlich verwendet, um Dinge und die Leinwand zu bewegen. Wenn ich also z. B. eine Symbolstruktur direkt hier auf der Leinwand habe, kann ich sie mit dem Verschiebewerkzeug auf der Leinwand bewegen. Das ist also ungefähr das Move-Tool. Und wir haben auch dieses Tool in der Größenordnung erwischt. Was ist also der Unterschied zwischen dem Move Tool und dem Scale Tool? Wir werden gleich über andere Unterschiede oder Tests sprechen. Das nächste Tool hier ist also im Grunde der Rahmen Das Frame Tool ist eines der wichtigsten Werkzeuge hier in Figma. Im Moment klicke ich also auf das Frame Dole in Richtung Einstellungsbereich. Es werden wieder viele von ihnen Bleeds angezeigt , wie das von Frame Them Blade für Telefon, Tablet und Desktop, oder du kannst hier auch einen Rahmen in benutzerdefinierter Größe erstellen. Wir können also sehen, dass wir hier auf der Leinwand einen Rahmen haben . Iframe kann also als separates Dokument betrachtet werden, auf dem unser Design im Wesentlichen aufbauen wird. Also hier kann ich auf diese Spule in der vier Ecke klicken, falls sie von der Ecke fällt. Und ich werde es anklicken und die Größe ändern und entscheiden, sagen wir eins. Was hatte ich vor, die Tools hier zu verwenden , um die X- und die Y-Achse zu ändern , sind die Breite und die Höhe genau hier aus den Einstellungen, die sie abrufen können. Wenn ich also eine vordefinierte Vorlage haben möchte, kann ich wieder die Rahmenöle auswählen. Ich kann die Tastenkombination F verwenden. Und ich kann ein beliebiges aus für die vordefinierte Vorlage auswählen. Und das wird direkt auf meiner Leinwand sein. Das betrifft also das Frame-Tool. Wann immer wir uns also mit unserem Design beschäftigen, werden wir es im Grunde für einen Desktop, ein Handy oder ein Tablet entwerfen . In diesem Fall sind diese vordefiniert. Vorlagen sind vordefinierte Rahmen, die sich als nützlich erweisen. Das war es also, das Rahmenwerkzeug. Und wir haben auch ein zweites Stück. Lassen Sie mich also das Slice-Tool anhand eines Beispiels erklären . Also lass es mich einfügen. Also hier haben wir ein einfaches kleines Design hier. Ich habe also bereits ein Slice-Tool ausgewählt und werde diesen speziellen Abschnitt hier definieren . Ich habe im Grunde diesen speziellen Teil des Designs verwendet und sie können dich im Grunde genau hier in die Richtung sehen. Und wenn ich auf Exportieren klicke und hier Vorschau auswähle, kannst du sehen, dass FIC-Mäuse nur den Bereich exportieren , den ich geschnitten habe. Wenn ich also dieses Segment ändere, positioniere es erneut, sodass sich die Vorschau entsprechend ändert. Wenn wir also nur einen bestimmten Teil des Designs exportieren möchten , bieten sich Folien an. Ich kann den Bereich definieren , den ich exportieren möchte. Und nochmal, komm hierher, um auf Vorschau zu klicken und den entsprechenden Teil auszunutzen. Das betrifft also das Slice-Tool. Und jetzt kommen wir zum dritten Punkt auf der Liste. Das sind die Formen. Und ich denke, More bietet Formen wie Rechtecke, Linien, Erwachsene, Ellipsen, Polygone , Sterne und viele andere Dinge. Und all dies sind selbsterklärende Designs ich auswählen möchte und ich kann sie einfach auf die Leinwand ziehen und sie sind drin. Und wann immer ich ein Objekt hinzufüge, z. B. ein Rechteck, sieht man hier diese Coyer-Kanten, die verwendet werden, um die Größe von Knoten oder Kreise darin zu haben, was im Grunde verwendet wird, um den gesamten Radius , also einen Randradius, zu machen. Ich kann es nach innen oder außen bewegen. Entsprechend wird der Radius der Grenze grundsätzlich vergrößert oder verkleinert. Das ist also ungefähr das. Und genau hier im dritten Tool haben wir auch ein Bild abgespielt. Wenn ich also darauf klicke, habe ich im Grunde darum gebeten, ein Bild auszuwählen. Wenn sie ein Bild auswählen, weitere Taste, ziehen Sie sie hierher. Wenn Sie also die Mittelwerte vergrößern, wird das entsprechende Bild auch entsprechend verkleinert, um es auszurichten. Das ist also eine coole Sache. Wenn ich es also ändere, können wir auch sehen, wie die Musik entsprechend geändert wird . Also auch hier kann ich die Größe des Bildes ändern. Außerdem ist es ein Grenzradius. Und wenn ich das Bild direkt hier in den Einstellungen auswähle , klicke ich erneut auf das Bild und führe grundlegende Farbkorrektur auch eine grundlegende Farbkorrektur oder eine grundlegende Bearbeitung für die Medien durch. Ich kann auch ein Bild auswählen. Ich kann das Bild ersetzen. All diese Dinge können auch hier gemacht werden. Das betrifft also das Tool „Bild platzieren“. Es kann sich als nützlich erweisen, wenn Sie mit Websites arbeiten , auf denen Sie die Hauptfächer ändern und sofort einige grundlegende Dinge tun möchten . In all diesen Szenarien ist das Tool Place Image praktisch. Jetzt sind wir noch nicht gekommen. Das Stiftwerkzeug ist, wie der Name schon sagt, auch ziemlich selbsterklärend. Es wird hauptsächlich verwendet , um einige benutzerdefinierte Designs zu erstellen. Sie können einige Designs , die Sigma standardmäßig nicht anbietet, mit dem Stiftwerkzeug erstellen. Und wir haben auch das Biegewerkzeug, das verwendet wird, um sozusagen eine Krümmung zu erzeugen, schärfere Kanten. Klicken Sie darauf und das erzeugt eine Krümmung. Außerdem haben wir einen Griff, mit dem Sie den Winkel für die Biegung grundsätzlich ausrichten können . Wenn ich also erneut auf den Kreis klicke, kehrt er zur vorherigen Struktur zurück. Das betrifft das Stiftwerkzeug und das Stiftwerkzeug hier. Und wir haben auch Papa Paint Bucket. So kann ich einen Bereich auswählen und ihm eine Farbe zuweisen. Das geht also alles in den Farbeimer. Und außer dem Stiftwerkzeug haben wir auch den Stift, und wie der Name schon sagt, hilft er einigen allgemeinen Dingen auf der Leinwand. In Ordnung, und lassen Sie mich es einfach auswählen. Und lass es uns löschen. Und wir haben auch r d x2, dem ich das Textwerkzeug auswählen, auf eine Stelle im Canvas klicken und erneut indirekt. Also hier kann ich den Text auswählen und genau hier in den Einstellungen kann ich eine ganze Reihe von Dingen in Bezug auf den Text anpassen. Ich kann den Texttyp ändern. Wir haben viele verschiedene Texttypen von Telefonen gehört , auf denen Figma vorinstalliert ist. Und ich kann auch einige benutzerdefinierte Schriftarten hinzufügen. Also werde ich Poppins hinzufügen. Hier kann ich die verschiedenen fett gedruckten Parameter auswählen. Ich werde das extra fett machen, das wiederum die Größe der Texte ändert . Hier können viele Dinge getan werden. Hier können Sie also sehen, dass wir unsere verschiedenen Parameter haben , wie die X-Achse, die Y-Achse, die Breite, die Höhe, all diese Dinge können ebenfalls geändert werden. Und wann immer wir das so schreiben, kann ich Alt auf meiner Tastatur drücken. In diesen Fällen sind Fenster auf dem Mac Optionen, und dadurch wird der Cursor in einen Schieberegler umgewandelt. Das, und ich kann den Wert nach links oder rechts verschieben , um die Größe zu erhöhen oder zu verringern. Z.B. Ich kann den Text auswählen und komme hier zur Größenauswahl Ich drücke die Wahltaste auf meiner Tastatur. Ziehen Sie erneut nach rechts oder links , um den Text zu vergrößern oder zu verkleinern. Dies ist eine kleine symbolische Abkürzung für Rumba, sodass diese Werte viel schneller geändert werden können. Das bezieht sich also auf den Text. Schauen wir uns nun an, was der Unterschied zwischen dem Werkzeug Verschieben und dem Skalierungswerkzeug ist, das wir nicht besprochen haben. Wenn ich also auch hier die Skalierung nach rechts auswähle, skaliere ich im Grunde den Text und der Text in anderen Inhalten darin skaliert ebenfalls mit. Im Fall des Move-Tools wird dies jedoch nicht passieren oder der nächste Bereich wird in der Größe geändert. Jetzt die Texte darin um eins zu erhöhen, um die Textgröße zusammen mit der Größe seiner Ränder oder seines Bereichs zu erhöhen, kann ich das Skalierungswerkzeug verwenden. Sie können auch sehen , dass die Standardgröße auch in Griechenland entsprechend ist. Das ist also der Unterschied zwischen dem Werkzeug „Verschieben“ und dem Werkzeug „Skalieren“. Hier habe ich Papa und Werkzeug, das normalerweise verwendet wird, um Dinge zu bewegen. Und wir haben auch die Ressourcen, mit denen Sie auf Komponenten, Plug-ins und all diese Dinge zugreifen können . Und wir haben den Kommentar hier auch zu leicht verstanden. Das übliche Dual ist also grundsätzlich praktischer , wenn Sie in einem Team arbeiten, insbesondere mit mehreren Personen Sie können einen Kommentar hinzufügen, z. B. wenn Sie eine bestimmte Person möchten, aber die Farbe des Textes ändern, können Sie auf den Text klicken. Nachdem ich das übliche Tool ausgewählt habe, kann ich einfach Hard Change, Textfarbe und Plazenta hinzufügen . Hier kannst du also sehen, dass mein Name hier im Grunde genommen reinkommt. Wenn sich also eine andere Person demselben Projekt anmeldet, können Sie meinen Befehl hier sehen und darauf antworten und den Kommentar im Grunde auch lösen. Also ja, das betrifft das gemeinsame Tool, also das sind einige der Tools, die Figma anbietet. Wie Sie sehen, sind diese Tools in unserer Lektion Nummer, aber sie sind mehr als ausreichend, um eine Idee im Grunde in ein Design umzuwandeln. Das ist ein ziemlich grundlegender Überblick über die verschiedenen Tools , die Figma anbietet. Dann hoffe ich, dass ihr ein grundlegendes Verständnis der verschiedenen Tools und der verschiedenen Funktionen der einzelnen Tools habt. Das ist also alles für dieses spezielle Video, und wir sehen uns im nächsten Video. 5. Übersicht über das Objektfeld: Also Leute, lasst uns in diesem Video einen Blick auf den Immobilienbereich von Papa in Figma werfen. Also möchte ich sofort einen Rahmen auf der Leinwand erstellen. Dafür verwende ich also die Tastenkombination , die darin besteht, die F-Taste auf der Tastatur zu drücken. Und ich ziehe einen einfachen kleinen Rahmen Model Canvas hinein. In Ordnung? Und ich kann auch die Farbe der Leinwand ändern , sodass Sie zwischen der Leinwand und dem Rahmen selbst unterscheiden können . Und danach füge ich auch eine Ellipse hinzu. Also kann ich darauf klicken und eine Ellipse hinzufügen. Oder ich kann die Abkürzung 0 verwenden. Und lass mich eine Ellipse zeichnen. Also nur ein kurzer Tipp für dich. Wie Sie jetzt sehen können, die Ellipse im Grunde genommen erweitert, wobei die Breite und die Höhe gekauft werden. Das heißt, es ist eine Art Freiflussobjekt. Um also eine perfekte Ellipse zu erhalten oder um im Grunde genommen die Höhe und die Breite gleichzeitig zu ändern , kann ich die Shift-Taste auf der Tastatur drücken. Und wenn ich es jetzt ziehe, wären sowohl die Breite als auch die Höhe im Grunde miteinander verknüpft und sie dehnen sich im gleichen Verhältnis aus. Das ist also ein kleiner Tipp für dich. Und jetzt kann ich die Hilfslinien verwenden, um dieses spezielle Objekt an der Mitte des Rahmens auszurichten . Und lassen Sie mich auch die Farbe der Ellipse ändern. Jetzt haben wir ein kleines Design auf der Leinwand. In dem Moment klicke ich in den Eigenschaftseinstellungen auf diese bestimmte Ellipse diese bestimmte Ellipse. Ich habe viele Einstellungen gehört , die ich für dieses spezielle Objekt am Hund ändern kann . Hier können Sie die verschiedenen Ausrichtungswerkzeuge wie Ausrichten, Links, Ausrichten, Zentrieren, Rechts ausrichten, unter der Oberseite ausrichten und all diese Dinge sehen Links, Ausrichten, Zentrieren, Rechts ausrichten, . Dies kann sich also als nützlich erweisen, wenn Sie ein bestimmtes Objekt an einer bestimmten Position innerhalb der drei Lichter ausrichten möchten . Jetzt habe ich es in Back to Center nicht gelernt. Und direkt darunter haben wir unsere Einstellungen, die uns helfen können , die Position des Objekts zu ändern. Z. B. I. Kann die Position in Bezug auf die X-Achse und die Y-Achse ändern . Wir können hier auch manuell Werte eingeben. Und hier kann ich sowohl die Breite als auch die Höhe erhöhen oder verringern. Moment sind also sowohl die Breite als auch die Höhe miteinander verknüpft , wie Sie an diesem speziellen Beschränkungsprofil sehen können . Wenn ich es also deaktiviere, können Breite und Höhe einzeln geändert werden oder sie haben individuelle Auswirkungen. Wie Sie gerade sehen können. Hier kann ich das Objekt grundsätzlich drehen. Da es sich also im Grunde um eine Ellipse handelt, haben wir eine andere Breite und Höhe. Moment können Sie sehen, dass hier tatsächlich eine gewisse Rotation tatsächlich eine gewisse Rotation stattfindet, wenn wir auch den Mauszeiger über ihnen bewegen. Sie können hier einen kleinen Punkt sehen. Das ist also der Bogen. Wenn ich also darauf klicke, kann ich im Grunde einen Bogen angeben. Oder noch einmal , einfach klicken und ziehen, damit ich auch hier einen Wert angeben kann. Das kann also sehr nützlich sein, besonders wenn wir Kreisdiagramme und so erstellen. Das kann sehr nützlich sein. Und wir haben auch einige andere Tools, die uns helfen können, einen genauen Bogen zu erstellen. Das ist es also, das betrifft das Bogenwerkzeug. Und direkt darunter haben wir auch Einschränkungen. Wie Sie jetzt sehen können, ist die Einschränkung sowohl auf die obere als auch auf die linke Seite gesetzt. Sie können eine kleine Linie sowohl von oben als auch von links sehen . Wenn ich also den Rahmen auswähle und wenn ich mich von rechts hier bewege , kann man sehen, dass im Grunde nichts passiert. Aber als ich versucht habe, den Rahmen hier von links zu bewegen , sieht man , dass das Objekt nach links oben gerichtet ist, also oben und links. ich jedoch den Rahmen ändere, wird das Objekt oben links fixiert, z. B. wenn ich das Objekt auswähle und wenn ich die Einschränkung auf Mitte, Mitte, Mitte und Mitte ändere . Du wirst also sehen, selbst wenn ich den Rahmen ändere, wird er fest oder lose sein und das ist kostenlos. Das betrifft also Einschränkungen. Einschränkungen sind also im Grunde sehr praktisch, insbesondere in Bezug auf responsives Phi-Webdesign wenn wir angeben möchten , wie ein Objekt in welcher Reihenfolge platziert werden soll. In solchen Szenarien spielen Einschränkungen eine wirklich wichtige Rolle. Entweder indem Sie auf diese Schaltfläche klicken, können Glykane und die genannten Beschränkungsöle klicken und im Grunde die erforderliche Einschränkung festlegen. Das bezieht sich auf den Abschnitt Einschränkungen. Also weiter, hier sind wir noch nicht dazu gekommen, den Abschnitt zu füllen. Wenn Sie also auf den Füllbereich klicken, können Sie im Grunde die Farbe des Objekts ändern. Ich kann hier im Grunde von einfarbig wechseln oder verschiedene andere Optionen oder verschiedene andere Optionen verwenden, die wir für den linearen Verlauf haben, wobei Sie die Farbe des gewünschten linearen Farbverlaufs angeben können . Wir anatomieren es auch wieder. Auch hier haben wir ein paar Grundeinstellungen , die sind so genial. Auch grundlegende Tools oder Bildbearbeitungswerkzeuge. Ja. sind auch viele verschiedene Optionen Hier sind auch viele verschiedene Optionen verfügbar. Und auch hier können wir die Farbe in verschiedenen Einheiten wie Hex, RGB angeben . Es gibt auch mehrere Optionen, um die Datensatzfarbe anzugeben. Und hier können Sie die Opazität der Farbe angeben. Also hier kann ich die alte Funktion verwenden, um auch die Opazität zu erhöhen oder zu verringern. Und ich kann auch immer höher verdienen. Direkt darunter habe ich diese Aktienoption. Wenn ich also auf Plus klicke, wird hier ein Strich hinzugefügt, ich kann die Farbe des Strichs ändern, z.B. wenn ich einen grünen Strich haben möchte, kann ich das hier hinzufügen. Ich kann stattdessen angeben, wo ich den Schlag haben möchte, Erkenntnisse und Daten oder außerhalb. Hier kann ich die Dicke des Strichs angeben, ihn vergrößern oder verkleinern. Und ich kann auch mehrere Striche hinzufügen , indem ich auf die Plus-Symbol-Idee klicke. Und wenn ich hier auf die drei Punkte klicke, kann ich quasi den Stockstyle auswählen. Wenn ich Solid oder Dash wollte. Oder ich kann die gestrichelte Lücke angeben. Ich kann den Join angeben. Ob es scharf sein muss, Stimmung. Viele Optionen sind auch hier in der Aktienoption verfügbar . Das ist also alles, worum es in der Truck-Sektion geht. Also lass mich es einfach entfernen. Und direkt darunter haben wir den Effektbereich. Also klicke ich auf das Plus-Symbol. Und standardmäßig haben wir für den Herbst den Schlagschatten. Gerade jetzt. Wenn wir genauer hinschauen, haben wir genau hier einen leichten Schatten. Wenn ich also hier auf dieses spezielle Symbol klicke, habe ich mehr Optionen, um den Schatten anzupassen. Geben Sie also erneut die X-Achse an. Geben Sie erneut die Y-Achse an, z. B. um das Blut zu erhöhen oder zu verringern. Und hier kann ich auch die Farbe angeben. Also kann ich entweder manuell die Farbe angeben, die ich für das Publikum haben möchte. Hier können Sie auf Jetzt dieses spezielle Stiftwerkzeug klicken. Oder Sie können auch die Tastenkombination drücken, das ist i. Und Sie können sehen, dass wir jetzt das Stiftwerkzeug haben. Und hier können Sie zu Innocent of Color gehen , die Sie möchten, und eine pixelgenaue Farbe erhalten. Im Moment hat es also Elektroden, bestimmte Objekte. Wir haben also das gleiche Bild von dem subtilen , geistlichen Gebrauch, den es verkauft hat. Reduzieren Sie also die Sortierlisten, um sie ein wenig zu verwischen, und erhöhen Sie sowohl die X-Achse als auch die Y-Achse. Und nimmt auch zu. Aber das sind tolle, so kleine Anpassungen, die wiederum, im Grunde genommen, auch die Schatten verbessern. Wir haben auch welche anderen Optionen, wenn Sie auf den Dropdown-Pfeil klicken , z. B. unsere innere Schattenebene, Unschärfe, Hintergrundunschärfe und verschiedene Optionen und erneut auswählen. Das bezieht sich also auf den Abschnitt Effekte. Und schließlich sind wir zum Exportbereich gekommen. Wenn wir es also von hier und hier aus auswählen, geben Sie die Größe an, die zu x wandert. Wenn Sie also z. B. Ihr Bild oder den entworfenden StartIndex wählen, wenn Sie für x wählen, wird es die Komfortzone sein , die viermal so groß ist wie die Originalgröße. Das betrifft also die Kriterien für die Standortauswahl. Und hier können Sie das gesamte Format auswählen , in das Sie exportieren möchten. Und er kann auch eine kleine Vorschau darauf bekommen , wie das Design aussehen wird. Und Sie können auf Exportieren klicken und es wird heruntergeladen. Also danke Leute. Das ist im Grunde alles über die Benutzeroberfläche von Figma. Ich hoffe, ihr habt eine grundlegende Vorstellung von Dingen für Ehefrauen, verrückte Dinge, die ihr dort verwenden könnt, wo sie sind, und eine allgemeine Idee, die euch helfen kann , auf bequeme Weise in ihrem eigenen Figma zu navigieren. Das war's also Leute. Und wir sehen uns im nächsten Video. 6. Gestalten einer Landingpage: Also Leute, in den vorherigen Videos haben wir gesehen, was Figma ist. Welche verschiedenen Tools bietet das Surfen, wo können wir auf sie zugreifen und was machen sie? Aber wir haben noch keine praktischen Dinge gemacht. In diesem speziellen Video werden wir also all das Wissen, das wir gewonnen haben, in die Praxis umsetzen. Mein Gebäude, eine Landingpage wie diese. In diesem Video werden wir also diesen speziellen Landestrand bauen. Daher werden alle in diesem speziellen Video verwendeten Assets werden alle in diesem speziellen Video im Bereich Projekt und Ressourcen aufgeführt. Sie können von dort aus darauf zugreifen. Wenn wir also noch mehr Zeit sehen, lassen Sie uns mit dem Bau dieses speziellen Projekts beginnen. Also Leute, ich habe hier bereits ein neues Projekt erstellt. Der erste Schritt besteht also darin, dafür im Grunde einen Rahmen zu erstellen. Ich drücke die Tastenkombination F auf meiner Tastatur, um das Rahmenwerkzeug auszuwählen. Und ich werde einen Rahmen oder meine Leinwand zeichnen. Und danach gehe ich zu den Eigenschafteneinstellungen und ändere die Breite und Höhe. Die Breite wird 2560 betragen und die Höhe wird ein Viertel für Null sein. Das ist also die Größe, an der wir arbeiten werden. In Ordnung. Lassen Sie mich es zur Mitte hin ausrichten. Lassen Sie uns nun den Rahmen auswählen und seine Hintergrundfarbe ändern. Also hier komme ich zum Feldbereich und lass uns ihn auswählen. Hier. Ich verwende einen linearen Gradienten. Also werde ich es von fest auf linear ändern. Und lassen Sie mich hier auch den Griff anpassen. In Ordnung. Wählen wir nun den ersten Griff aus, das ist der linke Griff. Und ich ändere die Farbe wieder auf dunkel und wähle den richtigen Griff aus. Und ich werde es gleich hier schaffen. Und ich erhöhe die Deckkraft auf Maximum oder Light und Liberals oder einfach auf einen Schieberegler. Jetzt haben wir einen linearen Gradientenhintergrund. Und lassen Sie mich auch ein bisschen weiter nach rechts gehen. Jetzt sieht es gut aus. Also werde ich jetzt im Grunde ein rechteckiges Objekt rechts neben diesem bestimmten Freiraum hinzufügen . Dafür drücke ich Alt auf meiner Tastatur, um das rechteckige Werkzeug auszuwählen. Und ich werde hier im Grunde ein Rechteck für Dollar zeichnen. Auch hier wähle ich das Rechteck und gehe hier zu einem anderen Abschnitt. Und ich möchte den Hintergrund radial ändern. Und wieder möchte ich es etwas dunkler machen. Wählen Sie den obersten Griff aus. Ich werde das eine dunkel und das andere ein bisschen hell machen . Passen Sie den Griff und die Position ein wenig an. In Ordnung. Und wir nehmen hier auch einige geringfügige Anpassungen vor. Lass mich etwas mehr Licht holen. Das sieht jetzt gut aus. Jetzt haben wir also genau hier einen radialen Gradienten zum rechten Teil des Rahmens gemacht genau hier einen radialen Gradienten . Und jetzt ist es an der Zeit, im Grunde einige Bilder hinzuzufügen. Hier. Ich habe hier schon ein paar Bilder hinzugefügt. also ziemlich einfach, diese Art von Bildern zu bekommen Es ist also ziemlich einfach, diese Art von Bildern zu bekommen. Es gibt tatsächlich eine Erweiterung. Moment bin ich also bei einem Logitech-Beamten. Wiederhole. Das sind also die Bilder, für die wir dieses spezielle Video verwendet haben , aber Sie können nicht direkt mit der rechten Maustaste klicken und sie speichern und verwenden, sonst funktioniert es nicht wirklich mit Sigma. Hier können wir also im Grunde eine Ausstellung namens as fat can batched already meet nutzen . Wenn ich also diese bestimmte Erweiterung auswähle, kann ich die aktuelle App auswählen. Das heißt, wenn ich darauf klicke, zeigt diese Erweiterung jetzt alle Bilder an , die auf dieser speziellen Webseite präsentiert werden . So kann es sie direkt anklicken und im PT PNG-Format herunterladen . Dies ist also ein praktisches Tool, mit dem Sie qualitativ hochwertige Bilder von offiziellen Websites wie dieser herunterladen können qualitativ hochwertige Bilder von offiziellen Websites wie dieser herunterladen von offiziellen Websites wie dieser denen die Produktbilder von hoher Qualität sind. Das ist also ein kleiner Tipp für dich. Lassen Sie uns nun im Grunde die Hauptfächer zur Leinwand hinzufügen . Das ist eine Art Rahmen. Dies ist das Hauptheldenbild. Platziere es gleich hier drüben. Stimmt es? Beachten Sie, dass Sie diese Bilder auch rechts neben dem Heldenbild hinzufügen . Der Hintergrund sieht irgendwie viel heller aus, also lass mich ihn einfach etwas dunkler machen. Und das sieht gut aus. Ich platziere sie gleich hier drüben. Also um es zu verringern. Jetzt haben wir also im Grunde den Medius hinzugefügt und unsere Gruppierung vorgenommen. Wenn wir uns jetzt unser fertiges Projekt hier ansehen , können Sie sehen, dass wir diese spezielle Maus in einem schönen Ring haben. Lassen Sie uns nun diesen speziellen Effekt erzeugen. Lassen Sie mich dafür ein wenig hineinzoomen. Und ich werde uns alle auf meine Tastatur setzen , um das Ellipsenwerkzeug auszuwählen. Und ich werde einfach so eine Ellipse zeichnen. Lass es mich hier drüben platzieren. Jetzt möchte ich zum Feldbereich gehen und die Füllung von hier entfernen. Dazu möchte ich nun einen Strich hinzufügen und die Dicke auf zwei erhöhen. Und ich wähle hier die Farbe als gräuliche Farbe aus. Und ich möchte den Hintergrund oder den Strichtyp zwei linear ändern . Lassen Sie mich hier einige geringfügige Anpassungen vornehmen. Mach es ein bisschen heller. Und ich möchte es so drehen und das lassen, oder einfach seine Position, damit es gut aussieht. Lassen Sie uns also einige geringfügige Anpassungen vornehmen. Machen wir es ein bisschen kleiner. In Ordnung, das sieht wirklich gut aus. Spielen Sie mit dem linearen Farbverlauf, um ihn ein bisschen realistischer zu gestalten. In Ordnung. So, jetzt haben wir unsere defekte Maus ja bekanntlich erstellt , das sieht richtig gut aus. Jetzt sind wir damit fertig. Jetzt erstellen wir auch all diese jetzt schlechten Links dort drüben. Ich drücke T auf meiner Tastatur und lasse mich hier klicken. Der erste da drüben ist also quasi ein Schritt rüber. Und ich wähle die Standardwindeln aus, um die Schriftgröße auf 24 zu ändern. Und ich möchte auch die Farbe des Telefons auf diesen bestimmten Wert ändern. Jetzt kann ich die Alt-Taste auf der Tastatur gedrückt halten und klicken und ziehen. Und damit wird eine exakte Kopie dieses speziellen Textes erstellt. Und das nächste Byte löscht den Shop-Business-Support . Lassen Sie uns jetzt diese Links richtig signalisieren. Diese Richtlinien sind also wirklich nützlich, um sie zu platzieren. Diese Elemente befinden sich an der richtigen Position mit ausreichendem oder gleichbleibendem Abstand. Stimmt es? Jetzt haben wir die Nav-Links hinzugefügt. Bringen wir es auch ein bisschen höher. Und eine andere Sache, die ich mache, ist, dass ich das Geschäft sagen und seine Farbe auf Weiß ändern möchte . Es ist also so, als ob wir uns gerade in der kurzen Beta befinden. Die Nav-Links sind also in Ordnung. Wählen wir es aus und bewegen uns ein wenig nach rechts. Und lassen Sie uns auch eine weitere Kopie davon erstellen. Nima passt. Und lassen Sie uns eine weitere Kopie erstellen. Das Windows-Logo. Hier habe ich zwei Icons. Wird direkt hier kopiert und eingefügt. Stimmt es? Ja, sie sehen dort auch gut aus. Lassen Sie mich also auch ihre Position leicht anpassen. In Ordnung, sie suchen jetzt nach Defined. Die schauen irgendwie ein bisschen ab. Sie sind nicht perfekt ausgerichtet. Lassen Sie mich sie also einfach auswählen und aneinander ausrichten. Sieht ziemlich flach aus. Nose füge auch das Logo hier drüben hinzu. Produkt. Und bringen Sie diese dann auch leicht nach rechts. Jetzt sehen sie ziemlich gut aus. Wir haben tatsächlich die obere Navigationsleiste sowie ein Such-Login sowie das Logo erstellt. Und jetzt ist es an der Zeit, den Textinhalt genau hier wieder hinzuzufügen . Und dann ein Plus B , um MX Master drei einzugeben. Und dann werde ich ausgewählt und ändere die Handyhülle auf Großbuchstaben. Und ich werde auch unsere Schriftgröße um 200 erhöhen. Und ich möchte auch die Kühnheit in Kühnheit ändern. Und dann setz dich gleich hier hin. Auch hier möchte ich auf diesen bestimmten Text klicken , während ich die Alt-Taste drücke. Ich werde eine Kopie erstellen. Macht eine Mix-CD. Um also die Größe auf 30 zu setzen, werde ich eine deformierte Fettschrift auf normal setzen und den Buchstabenabstand vergrößern. Ich werde es direkt über der Hauptlinie Gesund platzieren. Okay, lassen Sie uns nun auch diese spezielle grundlegende Beschreibung des Produkts hinzufügen . Also nochmal, sogar ein Plus, die D-Taste auf der Tastatur. Und lass uns das hier einfügen. Hier. Wir haben den Stil bereits vom vorherigen Projekt geerbt. Also haben wir nur die Farbe des Textes geändert. Lass es uns gleich hier einfügen. Was wir jetzt brauchen, ist der Überprüfungsteil. Also nochmal, plus auf der Texttastenkombination T und dann 50 plus Bewertungen eingeben. Wir müssen auch einige Sterne hinzufügen. Lassen Sie mich also den Bereich Formen oder die Auswahl oder das Sternwerkzeug etwas vergrößern . Und ich füge diese Dunkelheit hinzu und sie werden sich zusammenschließen. Es ist gut für 30 oder Lockett. Zuallererst möchte ich die Breite nicht auf 35 ändern , oder? Und lassen Sie uns eine Kopie erstellen. Also werde ich ein paar Mal die Warteschleife drücken , um fünf davon zu machen. Machen wir hier etwas Platz. Und ich möchte den letzten Stern auswählen und ihn etwas dunkel machen , damit dieses spezielle Produkt hervorgehoben wird , das eine , damit Vier-Sterne-Bewertung hat. Und lassen Sie mich sie einfach auswählen und gruppieren und direkt hier platzieren. Lassen Sie uns nun diesen speziellen Preisbereich sowie die Schaltfläche In den Warenkorb legen. Also das gewünschte im Preisbereich, 99,999 Dollar wird die Größe erhöhen, um es gleich hier drüben zu platzieren. Lassen Sie uns auch dieses Rechteck hier hinzufügen. Und ich werde einen Text hinzufügen, der zu schützen ist. Lassen Sie mich seine Größe reduzieren. Dann möchte ich ein Team, das diese speziellen Rechtecke in eine dunkle Farbe einfärbt. Ich möchte die Schriftfarbe auf Weiß ändern. Wir verringern auch die Tiefe. Und lassen Sie uns auch die Kanten abrunden. Stimmt es? Lassen Sie uns nun diesen bestimmten Text perfekt zur Mitte dieser bestimmten Schaltfläche hin umreißen , sodass ich beide auswähle und die vertikalen Mittelpunkte auswähle. Und das wird diesen speziellen Text perfekt auf die Mitte dieses bestimmten rechteckigen Elements ausrichten diesen speziellen Text perfekt auf . Und lassen Sie mich sie auch gruppieren. Und lass es uns gleich hier drüben platzieren. Das sieht auch ziemlich gut aus. Hier können Sie also sehen, dass der Hintergrund etwas leer oder undeutlich aussieht. Deshalb habe ich dieses spezielle M hinzugefügt, das eine Art Textüberlagerung darstellt, die die Leere des Hintergrunds ausfüllt. Also fügen wir das jetzt auch hier hinzu. Dafür füge ich einen Text hinzu, der M max ist. Und lassen Sie uns die Größe auf 200 oder vielleicht sogar mehr erhöhen . Und lass es mich gleich hier platzieren. Ich möchte den Bolus auf Fett ändern. Und ich drücke auf die öffnende eckige Klammer, um sie hier nach hinten zu bringen . Und ich wähle den Text aus und entferne die Füllung von hier. Und ich möchte einen Strich hinzufügen und Strichfarbe wird ein bisschen hell sein. In Griechenland. Die Dicke beträgt zwei. Lassen Sie mich die Opazität etwas reduzieren. Und das wird den Hintergrund perfekt ein bisschen reichhaltiger machen. Lassen Sie mich das auswählen und diese nach oben bringen. Bringen wir es ihm ein bisschen näher darauf zu. Nun, das sieht eigentlich ziemlich gut aus. Hier. Ich finde, das sieht ein bisschen gut aus. Das ist also nochmal, das könnte die Tiefe sein. Auch hier denke ich, dass der Hintergrund nach rechts hin etwas dunkler sein muss . Bringen wir es also mit mehr Dunkelheit. Das sieht jetzt ziemlich gut aus. Wir haben fast den gesamten Prototyp in unserem Projekt nachgeahmt . Hier können Sie sehen , dass wir zwischen links und rechts unterscheiden. Wählen wir dazu den Rahmen aus, gehen Sie zum Feldbereich und wählen Sie den Linkshänder aus und erhöhen Sie die Helligkeit der Farbe leicht. Und das wird genau hier zu einer Differenzierung führen . Das war's also Leute. Das war also ein kleines Tutorial oder ein praktisches Beispiel, wie wir ein Design im Grunde zum Leben erwecken können. Ich hoffe also, dass ihr aus diesem speziellen Video etwas lernen konntet . Wie ich bereits sagte, verfügbaren Ressourcen alle verfügbaren Ressourcen oder auf alle Ressourcen zugreifen, die im Bereich Projekt und Ressourcen verfügbar sind Ressourcen zugreifen, die im Bereich Projekt und Ressourcen können Sie von dort aus auf alle verfügbaren Ressourcen oder auf alle Ressourcen zugreifen, die im Bereich Projekt und Ressourcen verfügbar sind. Das war's also Leute, danke, viel Y2 und wir sehen uns im nächsten Video. 7. Schlussbemerkung: Das war's, Leute. Sie sind am Ende des weiblichen Fundamentalglases angelangt. Und das zeigt, wie viel Leidenschaft Sie für das UI-Design haben. Und ich hoffe wirklich, dass ich den Wert bieten konnte , nach dem wir gesucht haben, und teilt uns bitte im Bewertungsbereich mit, was denkt ihr über den Kurs? Das war's also, Leute, bis wir uns wieder mit einem weiteren großartigen Pigment oder einer Rückenbeatmung treffen einem weiteren großartigen Pigment oder einer Rückenbeatmung , die Johnson signiert.