Figma Practical Essentials: Designfilme-App-UI

1. Kurs-Einführung: Sie wollen die Grundlagen von Figma und seinen wesentlichen Funktionen von Grund auf lernen. Und wenn Sie all diese Tools schnell in die Praxis umsetzen möchten, sind Sie bei uns genau richtig. Denn was ist ein praktisches Praktikum? Wir werden eine Filmanwendung entwerfen. Es ist eine perfekte Gelegenheit , um alle grundlegenden Tools und Stigmatisierungen wie Layout, Raster, Text, Farben, Stile usw. zu behandeln grundlegenden Tools und Stigmatisierungen wie Layout, . Wir werden aber auch alle wichtigen Funktionen behandeln , einschließlich Komponenten, Varianz und Prototypen. Wenn Sie also bereit sind, die Filmanwendung zu entwerfen, warten Sie nicht und melden Sie sich jetzt für diesen Kurs an. 2. Figma Assets [Kostenlose Datei]: Also genau für diesen Kurs habe ich eine Figma-Datei erstellt, Sie dann als eigene Referenz verwenden können. Diese Datei ist sehr praktisch, da ich alle Arten von Farben, Stilen, Textilien, tollen Stilen und auch Komponenten erstelle , die Sie für dieses Projekt benötigen . Sie finden die ältesten Stile direkt hier in der rechten Menüleiste und können sie während dieses Kurses wiederverwenden. Sie können sich auch all die verschiedenen Komponenten ansehen , die ich für Sie vorbereitet habe . Einige davon werden wir ebenfalls behandeln. Außerdem gibt es eine weitere Seite , die als Design Screens bezeichnet wird. Und genau hier können Sie all die verschiedenen Designs sehen , die für diese Filmanwendung relevant sind . Insbesondere werden wir uns gemeinsam auf die Willkommensseite und den gesamten Bildschirm konzentrieren , aber Sie können auch andere Bildschirme durchsuchen und überprüfen , die ich für Sie vorbereitet habe. Dies ist eine großartige Gelegenheit, die Bildschirme für Ihre Lernpraxis zu nutzen . Und vielleicht auch, wenn Sie sie für Ihr Portfolio wiederverwenden möchten . Stellen Sie also sicher, dass Sie diese Figma-Datei nicht wollen. Ich habe den Link unter dieser Kursbeschreibung hinterlassen. Und lass uns einfach anfangen. 3. Willkommensbildschirm gestalten - Teil 1: Beginnen wir also mit der Gestaltung unseres ersten Willkommensbildschirms. Wenn Sie meine Figma-Datei verwenden möchten, können Sie sofort zum Tab Seiten navigieren und eine neue Seite hinzufügen. Also werde ich genau das Gleiche tun und diese Seite einfach Expertengröße nennen. Sie können diese Seite gerne so benennen, wie Sie möchten. Der Grund, warum ich in genau derselben Datei arbeite ist, dass ich bereits all diese Textilien, Farben, Stile und Rasterstile definiert habe. Natürlich erkläre ich alles von Grund auf, wie alles ursprünglich von mir entworfen wurde. Das erste, was wir in Figma tun müssen, wenn wir mit dem Entwerfen unserer Webanwendung beginnen, in diesem Fall für die Film-App, gehen wir zur oberen Menüleiste und wählen den Frame aus. Frame ermöglicht es uns, eine Art Bildschirm zu erstellen , den wir für unsere Webanwendung verwenden werden. Im Rahmen auf der rechten Seite haben Sie viele Voreinstellungen , die Sie für Ihre Projekte verwenden können. Also zum Beispiel, wenn Sie mit mobilen Anwendungen arbeiten , um unterschiedliche Bildschirmgrößen für iPhones, Androids usw. zu haben. Aber für unseren Fall kann ich hervorragend mit dem Desktop arbeiten. Ich schnappe mir einfach schnell diese Vorlage und klicke sie hier an. Also haben wir gerade unseren ersten Frame erstellt. Sie können dies auch in einem späteren Schritt sehen. In der rechten Menüleiste können Sie also sehen, dass die Breite 14, 40 und die Höhe 1024 Pixel beträgt. Lassen Sie uns diesen Frame schnell umbenennen. Der Name ist der Willkommensbildschirm. Das erste, was wir jetzt tun werden, ist die Füllfarbe dieses Rahmens zu ändern. Stellen Sie also sicher, dass Sie zu dem Abschnitt navigieren und dies beispielsweise manuell tun können , um die Farbe auszuwählen , die Sie für dieses Projekt anwenden möchten. Oder Sie können auch zum Stilmenü gehen und einen der Farbstile auswählen , die ich für dieses Projekt vorbereitet habe. Also genau für diesen verwende ich einen dunklen eckigen Farbverlauf , den ich einfach anwende und mit einem Klick habe ich schon diesen schönen Farbverlauf für meinen Bildschirm. Wenn Sie herausfinden möchten, wie es erstellt wurde, können Sie jederzeit auf Stil trennen klicken. Und genau hier können Sie sehen , wie dieser Gradient erstellt wurde. Also z.B. die Farbe Gold für diese violette Farbe und auch eine dunkle Farbe und alle anderen Einstellungen, die für diesen Farbverlauf gelten. Aber ich werde einfach nochmal zu meinen Farbstilen gehen und den Stil erneut anwenden , nur der Konsistenz halber. Dann schnappe ich mir ein Rechteck, im Grunde innerhalb meines Rahmens erstellt wurde. Deshalb werde ich sicherstellen, dass die Abmessungen genau denen meines Rahmens entsprechen, um genau der Größe zu entsprechen. Sie können auch sehen , dass das Rechteck in den Rahmen gehört. Achte also darauf, dass es genau im Inneren platziert ist, da du z.B. leicht erkennen kannst, wann es nicht zum Rahmen gehört. Es ist auch im Ebenenbedienfeld sichtbar. Also genau für dieses Rechteck möchte ich ein Bild anwenden. Und dafür werde ich einige Plugins verwenden , die in Figma anwendbar sind. Also genau hier in der Ressourcenflasche können wir zu den Plugins gehen und tatsächlich nach den Plugins suchen, die wir verwenden möchten. Und in meinem Fall suchen wir Unsplash. Dieser Wagen hilft Ihnen , viele kostenlose Ressourcenbilder zu finden , die Sie für Ihr Projekt beantragen können. Und wir werden dieses Plug-in so oft für Quiet verwenden . Also hier tippe ich einfach Film und finde genau das Bild , das für meinen Hintergrund gelten möchte. Und klicken wir schnell auf dieses Bild. Ich finde es sieht toll aus. Aber die Sache ist, Sie können sehen, dass das Feld für die Volltonfarbe und auch für das Bild gestylt werden muss . Lassen Sie uns diese Volltonfarbe schnell entfernen. Und ich werde die Opazität dieses Bildes auf etwa 10% verringern . Und ich finde, es sieht toll aus, weil unser Hintergrund jetzt so viel interessanter aussieht. Ordnung, der nächste Schritt wird darin bestehen, das tatsächliche Layoutraster für unseren Rahmen hier im Stil hinzuzufügen . Sie können also wieder zu den Rasterstilen gehen und sie ruhig in der Mitte auswählen. Lassen Sie uns diesen Stil schnell auspacken , um zu sehen, wie das alles funktioniert. Sie können also einen Dropdown sehen. Es gibt drei verschiedene Arten von Layoutrastern, aber für Webanwendungen werden wir immer Spalten verwenden. Die Anzahl beträgt also zehn Spalten, die Anzahl der Spalten, die Sie hier auf dem Bildschirm sehen können . Außerdem ist die Breite auf 104 festgelegt, was bedeutet, dass diese Spalte Rep, diesen Typ hat, bei dem der Abstand auf 16 Pixel festgelegt ist. Und das ist genau der Abstand zwischen den meisten Säulen, die Sie sehen können. Natürlich ist die Fünf auf die Mitte ausgerichtet. 4. Willkommensbildschirm gestalten - Teil 2: Jetzt können wir schnell alle unsere visuellen Elemente zu diesem Bildschirm hinzufügen . Also navigiere ich schnell zu den Assets und finde meine Logos. Also werde ich es einfach schnell hier in meinen Rahmen ziehen und dort ablegen. Wenn Sie sehen möchten, wie es erstellt wurde, stellen Sie einfach sicher , dass Sie diese Komponente öffnen und alle Arten von Vektorformen sehen , die ich angewendet habe, sowie den Text. Aber im Moment lassen wir es einfach so wie es ist. Und ich würde nur sicherstellen , dass es horizontal ausgerichtet ist. Und dann wählen wir Decks und geben hier einige Texte ein, die es für die Leute attraktiv machen , sich anzumelden. Stilrichtungen. Ich wähle 18 reguläre Pixel aus. Wenn wir also diesen Stil auspacken, können wir sehen, dass ich Marionetten als meinen Teich verwende. Und das Gewicht ist normal und auch die Schriftgröße , wenn es Zellen infiziert und die Zeilenhöhe 20 beträgt. Richten wir es erneut an der Mitte aus. Und ich werde die Breite zwischen diesen beiden Ebenen schnell verringern. Wenn Sie genau wissen möchten, wie viele Pixel sich zwischen den beiden Ebenen befinden, können Sie die Wahltaste auf dem Mac oder die Alt-Taste auf der Windows-Tastatur gedrückt halten. Dann wähle ich ein Rechteck aus und werfe meinen Button genau hier hin meinen Button genau hier , der zwei Spalten auf meinem Bildschirm entspricht. Ich werde auch schnell den Eckenradius auf den Wert 14 ändern den Eckenradius auf den Wert und der höchste Wert wird 54 Pixel sein. Also schnell nochmal, ich werde die Farbe auf lila ändern und gleich hier einen weiteren Text hinzufügen. Um sicherzustellen, dass mein Text genau in der Mitte dieser Schaltfläche ausgerichtet ist , wähle ich diese rechteckige Ebene und auch diese unterste Ebene aus und richte sie horizontal und vertikal aus. Lassen Sie uns abschließend schnell mit der rechten Maustaste auf die Gruppenauswahl klicken , um eine Gruppe in unserem Ebenenbereich zu erstellen eine Gruppe in unserem Ebenenbereich Wir können sie auch zu unserer eigenen Information in eine Anmeldeschaltfläche umbenennen . Ich habe hier einfach genau unten rechts abgesenkt und vielleicht verringere ich hier auch den Abstand. Lassen Sie uns auch diese Textebene nehmen und sie mit einer Tastenkombination duplizieren , die auf Ihrem Mac Strg Plus oder Command plus B ist . Also ziehe ich es genau hierher und wir werden Text ändern, der besagt, dass keine Konten vorhanden sind. Melde dich an. Ich werde auch schnell die Größe dieses Textes verringern und auch sicherstellen, dass „Anmelden“ ausgewählt ist und dass es auf den Bolzen geändert wird. Warte. Gehen wir auch schnell zu den Schrifteinstellungen und fügen Sie das zugrunde liegende Tool, unsere Anmeldung, hinzu, perfekt. Wählen wir also alle diese Ebenen aus, richten sie aneinander und klicken Sie mit der rechten Maustaste auf Ihre Maus und wählen Sie die Gruppenauswahl aus. Schließlich können wir auch alles wieder nach unserem Französisch ausrichten , nur um die Endergebnisse zu sehen. Stellen Sie also sicher, dass Sie auch Ihren Willkommensbildschirmrahmen auswählen . Und wir können dieses Layoutraster ausblenden. Und auf diese Weise können Sie genau sehen das Design aussieht und wie alles ausgerichtet ist. Perfekt Leute, das hat diesen extrem einfachen Bildschirm erstellt , aber ich hoffe, dass Sie es geschafft haben, alle Schritte zu wiederholen , die wir gerade zusammen gemacht haben. 5. Dashboard-Seitennavigation erstellen: Wir haben gerade die Gestaltung unseres ersten Willkommensbildschirms abgeschlossen. Und jetzt erstellen wir ein Dashboard, das unser erster Startbildschirm für die Film-App sein wird . Gehen wir also erneut zur oberen Menüleiste und klicken Sie auf den Rahmen. Und auch in den Frame-Voreinstellungen klicke ich auf den Desktop-Frame. Lassen Sie uns es schnell in den Startbildschirm umbenennen. Und ich werde den Farbstil sofort auf den Rahmenhintergrund anwenden . Und es wird ein dunkler Farbstil sein. Lassen Sie uns zunächst eine Navigationsleiste für die Website entwerfen. Und wir können es tun, indem wir ein rechteckiges Werkzeug auswählen und es auf die linke Seite unseres Bildschirms werfen Ich ändere die Breite auf 274 Pixel. Achten Sie darauf, es nach links und auch nach der Mitte auszurichten. Hier werde ich diese Art von Farbe auftragen. Das ist also der Hex-Code. Es ist etwas heller als unsere dunkle Hintergrundfarbe. Sorgen Sie auch für eine gewisse visuelle Trennung. Ich gehe zu den Effekten und wende tatsächlich Schlagschatten an. Also werde ich diese Farbe verwenden, die eigentlich lila ist und eine Deckkraft von 40% haben wird . Und ich werde sicherstellen, dass die Position von Null Pixeln auf der Y-Achse ist , und auch zu den Pixeln hier, auch den Unschärfewert, werde ich ihn auf 90 Grad erhöhen. Im Moment siehst du ein violettes Leuchten, das eigentlich von unserer seitlichen Menüleiste ausgeht. Keine. Nochmals, nehmen wir unser Logo und wir werden es genau an der Mitte ausrichten. Und dadurch wird auch die Position geändert um sicherzustellen, dass der Abstand von oben 40 beträgt und der gleiche Abstand von der linken Seite. Wählen wir nun das Textwerkzeug aus, in dem wir einige Textebenen erstellen werden , also die Seiten unserer Dashboards. Der erste wird also zu Hause sein. Und ich werde sofort die reguläre Schrift mit 16 Pixeln anwenden . Und du kannst den Zweck sehen. Die Zeilenhöhe beträgt 24 Pixel und die Größe ist 16. Ich werde es einfach ein paar Mal duplizieren. Jetzt muss ich nur noch den Inhalt ändern. Da wir uns auf unserer ursprünglichen Homepage befinden werden, werde ich die Gewichtung zu fett ändern. Daher ist es auch eine gute Idee, in dieser Menüleiste einige visuelle Symbole hinzuzufügen , um auch zu symbolisieren, wo der Benutzer mit meinen Assets interagiert hat. Ich habe eine Reihe von Symbolen vorbereitet, die Sie einfach per Drag & Drop hier in diesen Bereich und sie tatsächlich auf Ihr Projekt anwenden können. Wenn Sie diesen Icon-Artikel finden möchten, kommen Sie von Grund auf neu. Sie können schnell zum Plugin-Bereich gehen und Wettersymbole eingeben. Und das ist genau das Plug-in, mit dem ich in meinen Anwendungen arbeite. Also wenn du z.B. Film eintippst, siehst du genau das gleiche Symbol , das ich gerade hier angebracht habe. Der einzige Unterschied besteht darin, dass es standardmäßig schwarze Farben hat, sodass Sie das Design an Ihr Projekt anpassen müssen. Aber wie dem auch sei, lassen Sie uns all diese Symbole auswählen , indem Sie die Umschalttaste gedrückt halten. Und ich werde sie genau auf die Mitte ausrichten. Jetzt können wir also sehen, dass der Abstand 12 Pixel beträgt. Das möchte ich mit diesem Design erreichen. Und jetzt gehen wir einfach nacheinander vor und wenden die vertikale Ausrichtung exakt auf die vertikale Ausrichtung exakt auf unsere Textebene und die IP-Ebene an. Und für jedes, das ist ein Symbol, erstelle ich eine Gruppe mit Strg plus G-Tastenkombination. Sie können dies auch erreichen, indem Sie mit der rechten Maustaste klicken und auf Gruppenauswahl klicken. Jetzt können Sie sehen, dass der neue Ebenenabschnitt eine Reihe verschiedener Gruppen enthalten wird. Also werde ich all diese Gruppen auswählen und auch sicherstellen, dass ich alles aufräume. Und der Abstand zwischen all diesen Symbolen wird 35 Pixel betragen. Ich werde auch sicherstellen , dass sie auch links von meinem Logo ausgerichtet sind . Auch hier wird der Abstand 58 Pixel betragen. Und ich möchte auch einige dieser Menüpunkte trennen. Also werde ich sie zB ganz nach unten senken. Schließlich möchte ich auch diese Art von Spielern trennen, also werde ich sie hier auch ganz senken. Perfekt. Und eigentlich ist das Letzte was wir mit all unseren Menüpunkten außer unserer Homepage machen unseren Menüpunkten außer unserer werden, sie auszuwählen. Und auch in einem späteren Schritt werden wir die Opazität auf 80 Prozent reduzieren. Und der Grund dafür ist, dass ich unseren Benutzern visuell zeigen möchte , dass sie sich auf der Homepage befinden. Also, wenn wir endlich alles haben, wählen wir es aus und gruppieren es dann nach kontrolliertem Plot, Cheat-Shortcut. Und ich werde einfach schnell eine Komponente erstellen. Und diese Komponente werden wir in unserer gesamten Anwendung wiederverwenden. Lassen Sie uns diese Komponente hier schnell umbenennen und sie Site Navbar nennen. 6. Einführung in Komponenten in Figma: Um Ihnen die Komponenten kurz zu erklären , falls Sie mit ihnen noch nicht vertraut sind bedeutet das, dass wir zunächst unsere Masterkomponente haben . Sie können in Ihrem Ebenenpanel sitzen wenn wir ohne das k tatsächlich eine untergeordnete Komponente haben , die in Figma tatsächlich Instanz heißt. Wir können auch eine unbegrenzte Anzahl von Instanzen in Figma duplizieren , und das heißt, wenn ich z. B. zu meiner Master-Komponente gehe, können Sie sie auch in der Menüleiste sehen, z. B. möchte ich die Füllfarbe meines Rechtecks ändern. Sie können auch sehen, wie sich alles verändert. Es beschleunigt also wirklich Ihren Arbeitsablauf und Ihren Designprozess. So müssen Sie beispielsweise nicht zu allen Kopien Ihrer Navigationsleiste gehen und sie manuell ändern, sondern können dies mit einem Klick tun. Aber lassen Sie uns vorerst all diese Instanzen löschen und uns nur auf unseren Startbildschirm konzentrieren. 7. Designfilmbanner - Heldenabschnitt: Für unseren Startbildschirm. Also entscheide dich weiter. Ich werde ein Layoutraster anwenden, weil ich sicherstellen möchte , dass alles richtig ausgerichtet ist. Gehen wir also zu unseren Layout-Rasterstilen. Und dieses Mal wählen wir die Seitenkörnung mit 12 Spalten aus. Und Sie können sehen, dass das Raster tatsächlich weiter nach rechts verschoben ist , dass es nicht wirklich auf unsere Navigationsleiste trifft. Wenn Sie also diesen Layoutrasterstil entpacken, können Sie sehen, dass die Anzahl der Spalten 12 beträgt und alles nach links ausgerichtet ist. Der Unterschied, bevor wir alles hatten, war, dass es mehr in der Mitte des Bildschirms zu sehen war. Aber in diesem Fall müssen wir wirklich mit einer linken Ausrichtung arbeiten. Außerdem können Sie den Breitenwert jeder Spalte sehen . Der Offset beträgt 306 und der Gutterwert beträgt 24 Pixel. Jetzt möchte ich eine Opera-Navigationsleiste erstellen , die ziemlich einfach sein wird. Wir beginnen also mit einer Textebene und geben Filme ein. Also wähle ich einfach den 16. 6-fachen regulären Schriftstil. wird sichergestellt, dass es an der Seite dieses Rasters ausgerichtet ist . Lassen Sie uns die Sets-Ebene zweimal mit Strg D oder Command plus der Tastenkombination duplizieren . Hier tauchen wir in Seriendokumentationen ein. Ich wähle drei Ebenen aus und klicke auch auf Aufräumen und stelle sicher, dass der Abstand zwischen ihnen 32 Pixel beträgt. Also lass uns sie schnell gruppieren und einfach nach oben gehen oder eine SMS schreiben. Hier möchte ich einen Avatar hinzufügen, also klicke ich auf Alice. Und wenn ich die Umschalttaste gedrückt halte, zeichne ich eine Ellipse mit einem Wert von 16 mal sechs Pixeln. Diese Ellipse wird mein Avatar sein. Also werde ich wieder das Unsplash-Tool verwenden. Mit Unsplash um Allergene das Portrait zu finden , das ich für diesen Avatar bewerben möchte. Hier mit einer Textebene gebe ich wieder meinen Namen ein und achte auch darauf, dass beide zur Mitte ausgerichtet sind. wir also auch sicher , dass der Abstand zwischen diesem Text und Avatar acht Pixel beträgt. Und im Moment denke ich, dass dieser Alix im Vergleich zum Text ziemlich klein aussieht, also werde ich seine Abmessungen einfach auf den Wert von 32 Pixeln erhöhen . Und im Moment denke ich, dass es viel, viel besser aussieht. Lass uns wieder eine Gruppe bilden. Und schließlich möchte ich zwei weitere Symbole für mein Assets-Menü hinzufügen , nämlich das Glockensymbol und das Suchsymbol. Diese Elemente sind nur zusätzliche visuelle Anzeigen , die wir in unserem Stil verwenden können. wir also sicher, dass der Abstand zwischen all diesen drei Schichten 24 Pixel beträgt. Und ich werde sie alle gruppieren und sicherstellen , dass sie auch hier an der linken Seite meines Säulenrasters entsprechend ausgerichtet sind. Großartig. Jetzt können wir tatsächlich alles genau hier packen und es auch aneinander ausrichten. Also erstelle ich eine weitere Gruppe und nenne sie obere Leiste. Im Moment werde ich erneut eine Komponente erstellen, die wir in unserem Projekt wiederverwenden werden. wir also sicher, dass der Abstand zum oberen Bildschirmrand 40 Pixel beträgt. Kurz gesagt, so sieht unser Home-Dashboard im Moment aus, das meiner Meinung nach tatsächlich langsam Gestalt annimmt. Ich werde dafür meine Spalte wieder aktivieren und wir werden ein weiteres visuelles Element hinzufügen . Hier ist der Hauptfilm, den wir unseren Benutzern zeigen werden. Also werde ich jetzt ein Rechteck zeichnen und sicherstellen, dass es richtig nach sicherstellen, dass es richtig links als nach rechts ausgerichtet ist und dass seine Höhe 455 Pixel beträgt. Jetzt richte ich es genau am oberen Bildschirmrand aus. Stellen Sie also sicher, dass Ihr Rechteck in Ihren Ebenen ganz unten platziert ist , damit Sie Ihre anderen Elemente sehen können , die wir gerade zusammen erstellt haben. Jetzt deaktiviere ich das Raster und suche hier auch nach einem anderen Bild, das wir für diesen Film verwenden werden. Dieser sieht ziemlich grau aus und ich werde einen weiteren linearen Farbverlauf anwenden, damit wir mehr Kontrast zwischen den kommenden Texten und anderen visuellen Elementen und dem Hintergrund im Feld haben und anderen visuellen Elementen und . Wählen wir den linearen Farbverlauf und ändern wir einfach seine Markierungen wie folgt. Stellen Sie außerdem sicher, dass die Opazität 100% beträgt. Hier haben wir also einen viel besseren, reibungsloseren Übergang wir für dieses Element verwenden werden. Lassen Sie uns nun einen Titel für den Film erstellen, z. B. inside oder this is shift, diesen super zufälligen Namen, den ich mir ausgedacht habe. Aber du kannst auch andere Filmseiten verwenden, die du liebst. Im Moment werde ich 48 Pixel auf beide Poppins-Schriftarten anwenden . wir also auch sicher, dass es links neben meiner Opera-Navigationsleiste ausgerichtet ist . Ich werde diese Ebene duplizieren und sie tatsächlich umbenennen. Und ich werde den Textstil auf fix und pixel regular ändern . Vielleicht ist es auch eine bessere Idee, die Schriftgröße etwas zu verringern. Zu guter Letzt muss ich noch ein paar Knöpfe entwerfen. Nehmen wir unser Rechteck und zeichnen es genau hier. Und ich werde die Abmessungen auf 139 bis 54 Pixel ändern. Und auch der Eckenradius wird vier Pixel haben. Gehen wir jetzt zur Füllung und ändern sie auch, die lila Farbe. Und natürlich müssen wir einen Call-to-Action eingeben , der Watch genannt wird. Jetzt werden es wieder die 16. Pixel sein , mittlere Schriftgröße. Und wir nehmen einfach diese beiden Ebenen und richten sie aneinander aus. Diese Schaltfläche wird zu einer weiteren Komponente , die wir in diesem Projekt wiederverwenden werden. Jetzt möchte ich auch endlich einen weiteren sekundären Button erstellen , der es unseren Nutzern ermöglicht , unsere Filme zu liken und zu disken, was bedeutet, dass sie sie in ihren Favoriten speichern können. Also wähle ich das Rechteck und wenn ich die Umschalttaste gedrückt halte, zeichne ich ein Rechteck, das tatsächlich die Abmessungen 54 mal 54 Pixel hat . Und auch unser Eckradius wird vier Pixel haben. Hier. Ich schnappe mir noch einmal ein Symbol und ändere die Auswahlfarbe dieses Symbols, das einen Strich in dieses dunkle Violett hat. Lassen Sie uns noch einmal alles aneinander ausrichten und Sie können sehen , dass es sich im Grunde um ein perfektes Quadrat handelt und der Abstand von jeder Seite aus Fünftel und Pixeln beträgt. Dieses Symbol ist nur ein einfaches Grau, hat einen einfachen gravierenden Fehler. Aber ich gehe zu meinen Füllstilen und wähle einen anderen Stil aus, mit dem wir dieses Symbol viel unschärfer machen können . Lassen Sie uns auch einen Strich hinzufügen, und ich wähle einfach diese Linie in der Nähe der Füllung aus. Klicken Sie auf Control plus C, wählen Sie hier rechts aus und klicken Sie auf Control plus b, damit wir die Füllfarbe dieses Elements ändern können. Wenn Ihnen das Aussehen dieses Symbols nicht gefällt , können Sie seinen Wert auch grundsätzlich ändern. Also z.B. etwas mit Opazität oder anders herum. In Ordnung, deshalb sieht es so viel besser aus. Und jetzt schließen wir unseren linearen Gradienten. Auch hier werden wir diese Ebenen gruppieren und eine weitere Komponente erstellen , die wir umbenennen werden , die Schaltfläche „Gefällt mir“. 8. Gefällt mir-Buttons – Varianten in Figma: So sieht unser Startbildschirm im Moment aus. Ich finde, er sieht super cool aus, aber Sie können gerne andere Bilder oder andere Zellen verwenden , wenn Sie möchten, bevor wir fortfahren. den anderen Abschnitten des Bildschirms möchte ich Ihnen ein neues Konzept vorstellen, das als Varianz bezeichnet wird. Und dies ist ein weiteres Thema , das für unsere Komponenten relevant ist. Und ich werde Ihnen schnell ein Beispiel zeigen. Also schnappen wir uns diesen Like-Button. Und die Sache ist, dass ich während des gesamten Projekts verschiedene Variationen dieser Komponente haben möchte, die einer Batterie ähnelt und nicht. Ich gehe also in das Komponentenmenü und klicke auf Variante hinzufügen. Moment sehen Sie, dass es in meiner Master-Komponente zwei verschiedene Varianten geben wird, die wir gerade erstellt haben. Also werde ich dieses Eigenschaftstool grundsätzlich umbenennen. Im Gegensatz dazu wird der Unterschied hier darin bestehen , dass unser Herz voll werden wird. Das heißt also, dass das Universum genau diesen Film gerettet hat und er oder sie ihn auch retten kann. So können wir die Komponenteneigenschaft auch schnell umbenennen , sodass Sie jetzt diese Art von violettem Rechteck um unsere Varianz herum haben . Und es sieht nicht so gut aus, weil es eigentlich nicht einmal Teil des Designs ist. Also was ich tun werde, ich werde es schnell aus unserem Rahmen bewegen , nur für einen Moment. Und ich gehe im Grunde einfach zum Assets-Panel. Und genau hier, wenn Sie mit Ihrem Vermögen arbeiten, stellen Sie sicher, dass Sie auf die Übungsseite gehen. Dies ist die Seite, auf der wir gerade arbeiten. Und Sie können diesen Like-Button tatsächlich hierher ziehen. Und jetzt ist das Coole daran, dass, wenn Sie hier die Varianzeigenschaften sehen, Sie entweder von „Gefällt“ oder „Nicht“ wechseln können. Und ich finde es super toll, weil es auch unseren Designprozess beschleunigen wird. Und es wird uns sehr helfen, einige Interaktionen für unser Design in Sigma zu erstellen . 9. Trendfilme-Karten entwerfen: Ordnung, wir sind also bereit, weitere Abschnitte für diesen Startbildschirm zu definieren . Und ich werde damit beginnen, den Titel für den Bruch zu erstellen. Also schnappen wir uns unser Texttool und ich tippe Trending ein. Also hier verwenden wir 20 Pixel, halbfett, im OpenStack-Stil. Und ich werde auch darauf achten , dass der Abstand hier vom Hauptbild zu den sechs Pixeln, der auch entsprechend zur linken Seite ausgerichtet ist, mit allen anderen Elementen übereinstimmt, würde ein Vorher entstehen. Ich werde meinen Crit erneut aktivieren, weil wir Filmkarten erstellen werden, mit denen der Benutzer interagieren kann. Nehmen wir also noch einmal unser Rechteck und zeichnen es genau hier mit einer Breite von 254 Pixeln und einer Höhe von 300. Ich werde den Wert für den Eckenradius von 20 Pixeln ändern und auch den Abstand zwischen Trending und diesem Rechteck auf den Wert 16 ändern. Eigentlich sieht 24 ein bisschen besser aus. Fügen wir also auch eine Strichfarbe hinzu, die ebenfalls mit grauer Füllung versehen ist. Und wir werden ein Symbolbild für diese Filmkarte finden . Auch hier gehe ich zu Plugins und klicke auf Unsplash und finde einfach das passende Bild hier. Dieser ist also ein perfektes Beispiel. So können wir sehen, dass Hexen unser Bild und den Text haben. Ich nehme dieses Rechteck noch einmal dupliziere es mit Strg plus C. Und statt der Füllung verwende ich vorerst fest. Ich werde auch den Eckenradius ändern, was bedeutet, dass die oberen Ecken den Wert Null haben werden . Und schreib auf, genau das ist, wir werden diesen Abschnitt der Filmkarten erstellen, in wir den Text des Filmtitels und auch den Untertitel schreiben werden. Nun, NFL, ich werde auch den Radiant des Glasangestellten anwenden , damit wir viel besser sehen können , wie alles lokalisiert ist. Also schnappen wir uns unsere Textebene und wir werden einige Titel erhöhen. Also z. B. der Zug von Tokio als Beispiel. Und dann werde ich diese Textebene mit dem Sneaky-Shortcut für die Steuerungsebene duplizieren dem Sneaky-Shortcut für die Steuerungsebene und ihren Inhalt ändern. Lassen Sie uns auch diese Schriftgröße verringern. Also genau hier ist der Wert 16 Pixel mal 16. die gleiche Weise richten wir alles nach links aus und verschieben die Position etwas weiter nach unten, sodass der Wert über die Entfernung acht Pixel beträgt. Ich werde auch die Schrift ändern. Im Moment haben wir unsere Filmkarte fast fertig. Das einzige ist, dass ich noch einmal zu meinen Assets gehe und den Button „Gefällt mir“ markiert habe. In diesem Fall sieht die Schaltfläche etwas zu groß aus, also wählen wir ein Skalierungswerkzeug aus, indem wir die Umschalttaste gedrückt halten Ich werde diese Größe auf den Wert von 32 mal 32 Pixeln verringern . Perfekt. Und lassen Sie uns auch seinen Besitz ändern, um sicherzustellen, dass er 16 mal 16 Pixel ausgerichtet ist. Toll, also haben wir hier alles vorbereitet. Also lass uns die Karte einfach vertikal bewegen. Und ich werde eine weitere Komponente erstellen, die wir im Rahmen dieses Projekts wiederverwenden werden. Lassen Sie uns diese Filmkarten also schnell mit den Tastenkombinationen control plus dq duplizieren . Und ich werde diese Aktion dreimal wiederholen. Moment haben wir also vier Karten und das einzige, was wir tun müssen, ist das Bild und auch den Textinhalt zu ändern. Okay, so sind wir eigentlich fast fertig mit unserem Startbildschirm für das Armaturenbrett dieses Films. 10. Abschnitt weiter ansehen: Lassen Sie uns abschließend diesen Designbildschirm abschließen, indem wir unseren letzten Abschnitt erstellen. Als Erstes schnappe ich mir diese Trendebene und dupliziere sie mit Strg plus D, das sich genau hier befindet. Und ich benenne es einfach um, um es weiter anzusehen. Dann werde ich diese Filmkarte noch einmal duplizieren. Und vorerst werde ich es außerhalb meines Rahmens platzieren. Also, was ich tun werde, ist zunächst, diese Instanz zu trennen. Und das bedeutet, dass diese Instanz nicht mehr zu unserem Komponentensatz gehören wird . Das heißt, wenn ich zu meiner Master-Komponente zurückkehre und einige Styling-Änderungen vornehme, wird das nicht so einfach beeinflusst, sagte ich, ich kann mir diese Ebene schnappen und das Gleiche löschen, was ich mit unserer Textebene machen werde. Das einzige, was ich tun muss, ist die Abmessungen dieses Wagens zu ändern. Hier in der Breite wird es 348 sein und in der Höhe wird es 200 sein. Dann ändere ich auf die gleiche Weise die Position des Schiebereglers. Also dieser Wert, der tatsächlich an der Grenze von 16 mal 16 liegt. Moment siehst du, dass das Bild nicht mehr so gut aussieht. Es ist ein bisschen pixelig. Aber was wir tun können, ist die Bilder, die wir für unser Projekt haben wollen, auf die gleiche Weise hinzuzufügen , diese Karten. Lassen Sie uns diese Karte also noch einmal gruppieren. Jetzt benenne ich diese Karte in Movie Card horizontal um und erstelle eine weitere Komponente. Deshalb kann ich diese Komponente zweimal duplizieren und sie genau hier auf der linken Seite platzieren und sicherstellen, dass der Abstand zwischen all diesen Autos 24 Pixel beträgt. Und genau das können wir schleppen. Auch hier gilt: Wirf die Karten zurück zu unserem Startbildschirm, wie hier unten. Also nochmal, wir müssen nur sicherstellen dass unsere Inhalte hier einen Unterschied machen, Beispiel müssten wir entweder zum Unsplash-Plugin gehen oder einfach auf der Grundlage unserer eigenen Bilder arbeiten. Sie können sehen, wenn ich mein erstes Bild verwende und weil es die Master-Komponente ist, haben andere Instanzen genau das gleiche Bild erhalten. Aber wir können das Bild auch anderer Instanzen leicht ändern . Perfekt, jetzt sieht es aus wie ein wirklich cooles Dashboard, das wir für unsere Filmanwendung haben. Wenn du möchtest, kannst du auch auf diesen Like-Button gehen und die Variante auf den Like-Status ändern. Und Sie können sehen, weil ich in meiner Masterkomponente arbeite, hat sich auch hier alles geändert. Also gehe ich zu Control Z und gehe stattdessen zur Instanz und wende den Like-Button genau hier an. Gut gemacht, gerade zusammen, wir haben den Abschnitt fertiggestellt, in dem wir einen ganzen Bildschirm für unser Dashboard erstellt haben. 11. Grundlegender Prototyp und Animationen in Figma: Da wir also mit dem Entwerfen von zwei Bildschirmen fertig können wir schnell zu einem anderen Teil dieses Kurses übergehen. Was wir tun werden, ist eine sehr einfache Interaktion zwischen diesen beiden Frames. Also verbinde ich zuerst meinen Willkommensbildschirm mit meinem Startbildschirm und umgekehrt. Dafür muss ich also zum Prototypenbereich navigieren, und hier beginne ich meinen Float. Gehen wir schnell zu meinem Willkommensbildschirm. Und ich werde tatsächlich diesen Login-Button auswählen und tatsächlich mit meinem zweiten Frame verbinden. In den Interaktionsdetails haben wir alle Arten von unterschiedlichen Einstellungen für unsere Interaktion. Genau hier haben wir unseren Trigger und wir werden mit onclick arbeiten, was bedeutet, dass ich, wenn ich auf diese Anmeldeschaltfläche klicke, auch ein weiteres Animationsbild sehe. Ich werde Smart Animate verwenden. Und das ist eine super coole Animation weil sie dir einfach eine sehr gute Übersetzung zeigen kann dir einfach eine sehr gute Übersetzung zeigen weil sie zu all den ähnlichen Ebenen passt, wodurch sie auf die gleiche Weise flüssiger und glatter Gehen wir zu meiner Logout-Gruppe und ich gehe zurück zu unserem ersten Frame. Und für die Interaktionsdetails werde ich genau die gleichen Einstellungen mit dem OnClick-Trigger und der intelligenten Animate-Animation vornehmen. Also überprüfen sie schnell unsere einfache Interaktion. Wir werden hier auf der Play-Schaltfläche zu unserem Flow wechseln. Hier haben wir also unseren Präsentationsmodus , in dem wir mit unserer Produktseite interagieren können. Wenn Sie sich also nicht sicher sind, wo Sie klicken sollen, können Sie einfach auf einen leeren Bereich klicken. Und genau hier siehst du das blaue Highlight. Und das ist genau der dicke Schlamm L2, wo sich der Hotspot , also der interaktive Punkt, befindet. Klicken wir schnell auf den Login-Button. So haben wir diesen reibungslosen Übergang zu unserem Startbildschirm. die gleiche Weise klicken wir auf unser Abmelden, weil wir diese App nicht mehr verwenden möchten. Und wir kehren reibungslos zum Anmeldebildschirm zurück. Sie können also herumspielen und diesen Animationspilz komplex gestalten , aber die Idee ist sehr einfach, da Sie einfach zu Ihrem Figma-Arbeitsbereich zurückkehren und verschiedene Arten von Verbindungen herstellen. Und in Figma können Sie eine unbegrenzte Anzahl von Prototypverbindungen zwischen Frames herstellen. 12. Interaktive Komponenten in Figma: Lassen Sie uns nun über die Animation unserer Like-Buttons sprechen. Was mir also genau hier in meinem Prototyp fehlt , wenn ich mich einlogge, kann ich diese Filme nicht wirklich mögen oder ablehnen, was bedeutet, dass ich sie nicht als Benutzer speichern kann. Um das zu tun, weil wir schon einmal mit Varianz gearbeitet haben Wenn Sie sich an den vorherigen Abschnitt erinnern, können wir sie auch einfach prototypisieren. Das bedeutet, dass wir nicht mehrere Frames doppelt haben , oft können wir nur eine Verbindung herstellen und es wird perfekt für uns funktionieren. Also im Grunde stellt es sicher , dass Sie sich wieder im Prototyp befinden, wenn Sie Glück im Tab Design haben. Wählen wir nun unsere erste Variante und verbinden sie mit der zweiten Variante. Hier verwenden wir wieder Onclick Trigger mit intelligenten Animate-Einstellungen. Auf die gleiche Weise. Lassen Sie uns unsere zweite Variante, die sich von der ersten Variante unterscheidet, wie die untere Variante, mit den gleichen Interaktionsdetails verbinden die sich von der ersten Variante unterscheidet, . Und das ist im Grunde genommen so, wenn es sehr einfach ist, nur zwei Verbindungen, die in unserem Komponentensatz erstellt werden. Und genau auf diese Weise hat Who eine interaktive Komponente geschaffen. Also im Grunde ist es das. Wir können wieder in unseren Präsentationsmodus wechseln und ich melde mich auf meinem gesamten Bildschirm an. Gerade jetzt. Ihr seht hier, wie schnell ich meine Knöpfe mögen und nicht mögen kann , was für die Filmkarte mit Muskelkomponenten interagiert hat . Und wir wenden tatsächlich genau den gesamten Übergang auf andere verbleibende Karten an. Hier. Wenn ich mit Instanzen arbeite, kann ich meine Filme schnell nach Belieben liken und ablehnen, wie Sie sehen, machen die interaktiven Komponenten es so viel einfacher, weil wir in unserer Datei nur das Beben hatten, eine einfache Verbindung. Wir mussten nicht all die verschiedenen Kopien der Rahmen anfertigen. Und zwei WK diese Art der Interaktion. Ich hoffe also, dass Sie es geschafft haben all diese Aktionen zu wiederholen um für diese Verbindung, für unser Design, ein super tolles Ergebnis zu erzielen. 13. Gut gemacht! Abschließende Erkenntnisse: Herzlichen Glückwunsch, mein Freund, du hast diesen Minikurs endlich abgeschlossen. Und ich wünsche Ihnen viel Spaß beim Entwerfen dieser supereinfachen Filmanwendungen. Wir haben also im Wesentlichen die Komponenten, die Grundlagen des Layouts, das Layoutraster und andere visuelle Elemente behandelt die Grundlagen des Layouts, . Und am Ende freue ich mich riesig, dass wir es auch geschafft haben, eine sehr einfache Produktabverbindung zu erstellen und auch die Grundlagen interaktiver Komponenten zu behandeln. Wenn Ihnen dieser Kurs gefällt, stellen Sie sicher dass Sie ihn an Ihre Freunde, Kollegen und Ihr Netzwerk weitergeben. Und vergiss auch nicht, mir im Rahmen dieses Kurses eine Bewertung zu hinterlassen . Ich freue mich über all Ihr ehrliches Feedback, da ich immer versuche, meine Inhalte zu verbessern und auch sicherzustellen , dass Sie mit den folgenden Kursen zufrieden sind. Vielen Dank und wir sehen uns wieder.