Web- und Mobile-Design meistern: Figma, UI/UX-Essentials, +Mehr

1. Einführung : Web- und Mobile-Design meistern: Figma, UI/UX Essentials, +Mehr: Willkommen zum ultimativen Kurs , der es Ihnen ermöglicht, Web- und Mobildesign mit Leichtigkeit und Selbstvertrauen zu beherrschen Mein Name ist Chetan und ich bin Designerin, Fit-Designerin und programmiere Dazu dachte ich, Student persönlich und online. Und ich freue mich sehr, Dozent in diesem Kurs zu sein, egal ob Sie Anfänger sind, der sich zum ersten Mal mit der Welt des Designs vertraut machen möchte, ein Philosoph, der nach Ihren Fähigkeiten strebt, oder ein erfahrener Designer der das leistungsstarke Werkzeug von Figma erlernen möchte Dann ist dieser Kurs Ihr perfekter Begleiter. Legen Sie Ihre Sicherheitsgurte an, während wir uns auf eine aufregende Reise begeben. Das wird uns vom grundlegenden Grafikdesign zur Herstellung atemberaubender Produkte führen Als Student in diesem Kurs erhalten Sie Zugriff auf mehr als 10 Stunden an aktuellen Videoinhalten, die schrittweise Versuche, Schritt 2, interaktive Projekte, Übungen und vieles mehr beinhalten Ich werde Sie Schritt für Schritt durch den gesamten Prozess führen, während Sie mich durch diesen Kurs begleiten. Gemeinsam werden wir die Welt des X- und NI-Designs erkunden. Wir werden das Geheimnis nahtloser Interaktionen lüften und einen komprimierenden Designprozess aufdecken, auf zukünftige Projekte und Linien zugeschnitten Lassen Sie uns nun in die spannende Welt des Vex-Designs eintauchen und dabei die erstaunlichen Fähigkeiten von Figma nutzen C bis hin zu unsicherer Kreativität, während wir uns durch den Prozess der Erstellung einer faszinierenden Benutzeroberfläche und ansprechender Prototypen begeben den Prozess der Erstellung einer faszinierenden Benutzeroberfläche und Dieser Kurs richtet sich an Anfänger. Machen Sie sich keine Sorgen, wenn Sie mit Vex-Design noch nicht vertraut sind oder sich über seine Feinheiten nicht sicher Wir beginnen ganz am Anfang und führen Sie Schritt für Schritt durch das Verstehen der Aufgabenstellung bis hin zur Erstellung so persönlicher Tomsting-Frames und High-Fidelity-Markups Wir werden Elemente wie Komponentensätze, Einschränkungen und Varianten entmystifizieren, sodass Sie sich leicht in der Welt des UI-Designs zurechtfinden Mithilfe von kostenlosen I-CDs und aufregenden Plug-ins werden wir unseren Arbeitsablauf beschleunigen und interaktive Prototypen erstellen, werden wir unseren die für Benutzertests und die Zusammenarbeit mit Ihrem Team bereit sind Praktische Aufgaben werden während des gesamten Kurses verteilt, um Ihnen zu helfen, Ihre Fähigkeiten zu verbessern und ein beeindruckendes Portfolio zu erstellen Heute ist Design eine zeitlose Fähigkeit, die auch bei wechselnden Anforderungen relevant bleibt Die Grundlagen, die Sie hier lernen werden Sie noch viele Jahre begleiten, und Sie können diese Fähigkeiten anwenden , um mit jedem überall auf der Welt zusammenzuarbeiten . Und das Beste daran ist, dass Sie kein künstlerisches Genie oder Wunderkind des Zeichnens sein müssen, um sich im Design zu profilieren Wir fangen alle bei Null an, und am Ende dieses Kurses wirst du Design P. Also, wie ich mir die Kursübersicht im nächsten Video ansehe, um zu sehen, ob dieser Kurs das Richtige für dich ist. die Kursübersicht im nächsten Video um zu sehen, ob dieser Kurs das Richtige für dich ist Dieser Kurs beinhaltet alles, was Sie für die Erstellung von Figma benötigen. Melden Sie sich also jetzt an und lassen Sie uns mit dem Entwerfen beginnen Wir sehen uns drinnen. 2. Von Zero bis Figma-Hero Neuer Skillshare: Hier werden die Schüler an Bord kommen. Sie haben es an die Startlinie geschafft und ich freue mich sehr, Sie auf dieser aufregenden Reise dabei zu haben . Ordnung. Als Erstes. Lassen Sie uns diese vertikalen Dateien und Ressourcendateien herunterladen. Sie finden Dateien im Ressourcenbereich hier auf dieser Seite. Diese Dateien sind Ihre Eintrittskarte für praktisches Lernen während des gesamten Kurses. Aber zusammen mit dem Kursmaterial gibt es noch mehr Sie finden eine praktische Kurzübersicht. Wir tauchen nicht zu tief in Abkürzungen ein, aber glauben Sie mir, das sind Spieländerungen. Du wirst es nicht verpassen wollen. Drucken Sie es als kreisförmigen Favoriten aus und lassen Sie uns eintauchen. Apropos Werkzeuge, Sie benötigen Figma. In den Ressourcen gibt es einen Figma-Download-Link, um die Textop-Version zu erhalten Laden Sie Figma herunter und melden Sie sich an. Sie können auch die Browserversion verwenden. Denken Sie jedoch daran, dass Sie nicht an Ihrem Projekt arbeiten können, wenn Ihre Internetverbindung unterbrochen wird. Ich empfehle daher, die Dextop-Version zu verwenden. Egal, ob Sie wie ich Browser oder Dextrop Art verwenden, es ist alles Persönlich bleibe ich bei der Desktop-Version, aber hey, wählen Sie, was für Sie am besten funktioniert Und hier sind die Schnellköpfe. Mir wurde gesagt, dass ich mit Lichtgeschwindigkeit spreche, besonders bei all den CTs , die ich hatte. Hm. Ich liebe City W, hast du gerade gesagt? Chi heißt D Bruder, du sagst DD. Würde ich dich um einen Kaffee mit Platz für Cream Love bitten mit Platz für Cream Love Aber fürchte dich nicht. Wenn dich mein Strophenstück und mein Akzent abschrecken, drücke einfach den roten Playback-Knopf da unten, um die Geschwindigkeit anzupassen Ich klinge vielleicht ein bisschen lustig. Aber hey, was auch immer dir hilft den Inhalt besser aufzunehmen, richtig Englisch ist nicht meine Muttersprache, daher spreche ich Wörter manchmal anders aus, aber ich habe keine Angst. Es sind automatische Generator-Bildunterschriften verfügbar. Lassen Sie uns nun über Figma-Aromen sprechen. Kostenlos gegen Pike. Wir rocken die meiste Zeit unseres Abenteuers die kostenlose Version , weil es ehrlich gesagt überwältigend ist, was Sie tun können, ohne viel Zeit zu investieren Aber hey, gegen Ende unserer Reise werde ich einen kleinen Einblick in die Vorteile der Pad-Version Paul Alert, es ist ziemlich geradlinig. Hier ist der Deal, den Figma erlaubt , um die Dinge frisch zu halten. Das bedeutet ständige Upgrades, neue Funktionen und Twixs, um Ihnen das Designleben zu erleichtern Das ist zwar fantastisch für Ihre Designreise, aber mir als Ihrem Kursleiter bereitet es besser Kopfschmerzen . Aber fürchte dich nicht. Wenn sich etwas Wichtiges ändert, werde ich diese Videos entsprechend aktualisieren Und hey, behalte den Kommentarbereich unten im Auge. Für weitere Tipps oder Einblicke von Kommilitonen. Also eine Achterbahnfahrt voller Updates und Verbesserungen, ist alles Teil des Abenteuers Also gut, Ip Chit Chat. Lass uns in das nächste Video eintauchen und diese Show auf die Straße bringen 3. Figma zum Codieren von atemberaubenden Schnittstellen ohne eine Linie zu schreiben: Willkommen Studierende. Lassen Sie uns zusammenfassen, worum es bei FiMMA geht und was nicht FgMA ist Ihr Superheld darum geht, schnelle Entwürfe Es ist sehr praktisch für UX- und UI-Designer. Die Leute, die Look-and-Full-Designs kreieren , von D-Skizzen bis hin zu ausgefallenen, fast echten Websites FiMag ist dein Deckblatt. Nun, hier ist der lustige Teil. Bei FiMA geht es nicht nur darum, cooles Design zu machen. Es ist großartig, um diese Designs mit echten Menschen zu testen. Sie können Ihre Arbeit Kunden oder Benutzern zeigen, ihre Gedanken einholen und an dieser Stelle Änderungen vornehmen. Es ist wie eine superschnelle Feedback-Schleife. Aber hier ist der Haken. FipMA verwandelt Ihr Design nicht auf magische Weise in echte Websites Nein, hier kommt der Entwickler ins Spiel. FIPA gibt ihnen einige Kleinigkeiten , mit denen sie arbeiten können. Aber der Coding-Teil, noch nicht die FICA-Sache Sobald Sie also entworfen haben, heben Sie die Daumen und es ist an der Zeit, es den Entwicklern zu übergeben Sie werden mit der Magie arbeiten und Ihr Design im Internet zum Leben erwecken Aber warte, es gibt noch mehr. FMA ist nicht nur für Websites und Apps gedacht. Nein, es ist auch praktisch, um coole Dinge wie Social-Media-Beiträge und Anzeigen zu erstellen coole Dinge wie Social-Media-Beiträge und Es ist vielleicht nicht perfekt, um Sachen zu drucken, aber es wird von Tag zu Tag besser und hol dir das Die Leute benutzen Figma für alle möglichen Dinge. Es war nicht einmal dafür gedacht. Es ist quasi das ultimative Alleskönner-Tool für Designer. Da hast du es also. Figma ist Ihr Code-to-Kumpel für schnelles Entwerfen und Testen. Also bist du bereit , ihm einen Brunnen zu geben? Lass uns eintauchen und kreativ werden. 4. UI vs. UX in Figma-Designmagie erklärt: Ordnung, Leute, lasst uns in die wunderbare Welt von Y versus X eintauchen die wunderbare Welt von Y versus X Wenn ihr jetzt schon ein Profi auf diesem Gebiet seid, solltet lieber weitermachen. Aber wenn nicht, bleib bei einem Crashkurs. Es ist ein Unterschied zwischen den beiden. Die Benutzeroberfläche oder Benutzeroberfläche ist wie ein schickes Verpackungsprodukt. Es geht nur darum, wie die Dinge auf Ihrem Bildschirm aussehen und sich füllen. In der Zwischenzeit ist X oder User Experience die Reise, die Sie unternehmen, wenn Sie mit dem Produkt interagieren. Stellen Sie sich Y als einen schicken Extra-Sportwagen vor, und Vx bietet ein geschmeidiges Fahrgefühl, das Sie von Ohr zu Ohr bewegt Jetzt brechen Sie es einfach ein bisschen weiter auf. Als UI-Designer besteht Ihre Hauptaufgabe darin, die Dinge fantastisch aussehen zu lassen. Sie sind der Mastermind hinter den Schaltflächen, Menü und der allgemeinen visuellen Attraktivität des digitalen Produkts. Aber hier ist der Clou. Bevor UX auf den Markt kam, UI-Designer wie ich auf viel Innovation und Rätselraten angewiesen Diejenigen, die 60 Tage alt sind. Sicher, unser Design sieht cool aus, aber wo sie es tatsächlich verwenden, ist es freundlich. Hier kommt x ins Spiel. Ehemalige Designer nehmen diese als UI-Design und stellen sie auf die Probe. Sie sind wie Detektive der Designwelt und investieren in die Art und Weise, wie echte Benutzer mit dem Produkt interagieren. Haben Sie jemals auf die Schaltfläche geklickt und unerwartet irgendwo gelandet? Ja, das ist die Art von Dingen, auf die UX-Designer achten. In diesem Kurs werden wir uns nun sowohl auf U, Y als auch auf X konzentrieren, wir tauchen tief in das Figma Das ultimative Werkzeug zum Basteln, atemberaubende Oberfläche und Benutzererfahrung Apropos Benutzerfreundlichkeit, lassen Sie mich eine kleine Anekdote über meine jüngsten Erfahrungen mit einer neuen Rezept-App erzählen . Stell dir das vor. Ich lade die App herunter, um neue Gerichte auszuprobieren und die Terrasse ist modern und poliert Wenn ich jedoch versuche, ein Rezept zu finden, ist es, als würde ich zum Kit navigieren Ich bin bei der Suche nach der Suchleiste auf verschiedenen Symbolen gefangen und merke nur, dass sie in der Ecke aufgespürt werden Und fangen Sie mich nicht mit dem Fehlen klarer Kategorien oder der überwältigenden Verwendung heller und verstörender Farben an. Am Ende habe ich Cardp verwendet. Aber hey, jeder VX-Sup ist eine Lektion, die man gelernt hat, oder? Als Designer ist es unsere Aufgabe, nach diesen Schwachstellen Ausschau zu halten und uns zu bemühen , unser Design so glatt wie ein Knopf zu gestalten Da hast du es also x und alles dazwischen. Also, bist du bereit, A-Designs wie einen Liegenden zu rocken? Lass uns mit dem nächsten Video weitermachen und diese kreative Reise fortsetzen. 5. Baue Apps & Websites, die du lieben wirst (in diesem Figma-Kurs) Neu: Willkommen zu unserem Figma-Kurs. Egal, ob Sie gerade erst anfangen oder fortgeschrittene UX-Techniken beherrschen möchten, Sie sind hier richtig In diesem Kurs werden wir Ihre Figma-Grundlagen auf fortgeschrittenes Axe-Design übertragen und alles dazwischen behandeln Wir werden lernen, wie Sie die Leistungsfähigkeit der Figma-Funktionen von den grundlegenden bis hin zu den fortschrittlichsten Tools nutzen können, aber wir hören damit nicht Wir werden uns mit dem UIVX-Prinzip befassen und sicherstellen, dass Sie nicht nur verstehen, wie Figma verwendet wird, sondern auch, warum bestimmte Designentscheidungen Unsere Projekte sind nicht nur Übungen. Es sind Szenarien aus der realen Welt. Jedes Produkt beinhaltet einen umfassenden Umgang mit Projektzielen und Zielgruppen Anschließend werden wir die Aufgabenebene festlegen, die wichtigsten Komponenten wie die Projektdetailseite, die Überprüfung Ihres Prozesses und die Homepages identifizieren Überprüfung Ihres Prozesses und die Homepages Von dort aus werden wir mit der Erstellung von Drahtrahmen mit geringem Fettgehalt fortfahren und den Grundstein für Ihr Design legen. Hier werden Sie beginnen, die Grundlagen von UIEX zu verstehen und gleichzeitig die Pigma-Funktion eingehend zu erkunden Als Ihr Meister im Bereich Wireframing werden wir uns dem High-Fidelity-UI-Design zuwenden Sie werden lernen, wie Sie Ihr Design zum Leben erwecken und ein atemberaubendes Bild erstellen können , das nicht nur gut aussieht , sondern auch das Benutzererlebnis verbessert Als nächstes steht die Prototypenentwicklung auf der Agenda, bei der Sie lernen werden, Ihrem Design Animationen, Mikrointeraktionen und andere erweiterte Funktionen hinzuzufügen , Mikrointeraktionen und Ihrem Design Animationen, Mikrointeraktionen und andere erweiterte Funktionen hinzuzufügen Es ist entscheidend, die Psychologie hinter x zu verstehen. Wir werden untersuchen, wie Farbe, Text und Animation das Nutzerverhalten beeinflussen können. Und schließlich haben Sie die Möglichkeit, alles, was Sie gelernt haben, in realen Projekten in die Praxis umzusetzen . Aber denken Sie daran, dass wir selbst B Spoon Feeding besitzen. Sie werden dieses Projekt auf eigene Faust angehen und dabei dieses Konzept und die Techniken anwenden, dieses Konzept und die Techniken anwenden, die Sie im Laufe des Kurses gelernt haben. Was die Ressourcen angeht, haben wir alles für Sie vorbereitet. Sie erhalten eine Zip-Datei mit Symbolen, Plugins und Links zu inspirierenden und nützlichen Websites. Diese Ressourcen helfen Ihnen dabei, Ihre Figma- und UVA-Fähigkeiten zu verbessern und sicherzustellen, dass Sie für den Erfolg gut gerüstet sind Also seid ihr bereit, der Figma-Meister zu werden Ich gewinne und entwerfe gemeinsam etwas Fantastisches 6. UX Briefs und Task Flows in Figma lernen: Das zukünftige Design, heute befassen wir uns mit dem entscheidenden Aspekt der Designzusammenarbeit, Ex-Briefing und dem Taskflow Nun, ich weiß, dass sich einige von Ihnen vielleicht am Kopf kratzen und sich fragen, was in aller Welt Vx Brip ist Nun, fürchte dich nicht. Am Ende dieses werden Sie ein kurzer Export sein. In Ordnung, lassen Sie uns das aufschlüsseln. Design Grip ist wie deine Projektkarte. Es sagt allen Beteiligten, wohin sie gehen müssen und wie sie dorthin gelangen. Stellen Sie sich das als geheime Erfolgspapiere des UA-Designteams vor. Es beschreibt die Projektziele, den Umfang, das Budget und die wichtigsten Details und stellt sicher, dass alle auf derselben Wellenlänge sind. Betrachten Sie es als das ultimative Tool für die Zusammenarbeit. Aber warte mal, was genau in X Prip steckt. Es ist dein Cheat-Sit für das Projekt. Es erklärt, worum es bei dem Projekt geht. Welche Herausforderungen zu erwarten und was Sie erreichen möchten Außerdem erhalten Sie einen Einblick in Ihr Produkt und darüber , wer es verwenden wird. Lassen Sie uns es jetzt in Aktion sehen. Stellen Sie sich vor, Sie senden einen Brief und erhalten Antwort, bei der Sie sich am Kopf kratzen. Das passiert mit einem schlechten Briefing. Aber keine Angst, mit einem guten werden Sie Vorschläge bekommen , die Sie umhauen Also, was ist die geheime Quelle für den großartigen K-Brief. Es ist mehr als nur ein Stück Papier, es ist das Herz und die Seele Ihres Projekts. Es verdeutlicht auf derselben Seite, was Sie mit Gate Severn anstreben , und führt Ihren Designprozess zum Erfolg In Ordnung, lassen Sie uns über die Ergebnisse sprechen. Ein solides Ex-Briefing, damit alle gleich singen. Macht den Designprozess reibungslos wie ein Knopfdruck, konzentriert sich auf das, was wirklich wichtig ist, und spart Zeit und Geld. Also, das nenne ich Win Win. Ich weiß, dass du dich vielleicht fühlst, mach dir keine Sorgen. Wir haben eine Vorlage, um die Dinge einfach zu machen. Von der Definition des Problems bis hin zur Übermittlung Ihres Budgets und Zeitplans ist alles für Sie da Oh, und es gibt ein kleines Geheimnis, zu wissen, dass Ihre Zielgruppe entscheidend ist verstehen, wer Ihr Produkt verwenden wird. Sie finden, es passt wie angegossen. Aber hey, lernen wir aus einem Fehler: Zu wackelig zu sein, Nutzerforschung zu überspringen und zu große Träume zu haben, kann dich stolpern Aber mit einer späteren Übung werden Sie diese im Herbst wie ein Profi vermeiden Also, das ist alles über X Bra lasst uns etwas über den Ta-Flow lernen. Haben Sie schon einmal vom Taskflow gehört Er ist wie ein Fahrplan zum Erfolg in der Welt des Designs Aber hey, mach dir keine Sorgen, wenn es für dich wie eine Fremdsprache klingt, wir sind dabei, es für dich aufzuschlüsseln Was genau ist also der Aufgabenablauf? Stellen Sie sich das als Schritt für Schritt zum Erreichen von Zielen vor. Warum konzentriert sich der Benutzerfluss auf den Entscheidungen und Interaktionen Visualisieren Sie jeden einzelnen Schritt für Schritt. War nötig, um Dinge zu erledigen. Das heißt, New versucht auf der Lernplattform in die Lektion einzutauchen. Nun, ein Aufgabenablauf würde jeden Schritt, den Sie machen müssen, von der Anmeldung bis zum Vergleich der Lektionen abbilden jeden Schritt, den Sie machen müssen, von der Anmeldung bis zum Vergleich der . Aber hier ist der coole Teil. Talod fängt nicht immer von vorne an. Sie können einen bestimmten Teil des Prozesses vergrößern , solange es sich um klare Ziele auf einer Website handelt Lassen Sie uns nun über die Vorteile sprechen. Talod sind wie der Superheld von Ex Design. Sie sind sehr einfach zu erstellen daher perfekt für frühe Brainstorming-Sitzungen, in denen Sie herausfinden möchten, wie Sie ein großes Projekt angehen sollen herausfinden möchten, wie Außerdem benötigen Sie kein ausgefallenes Tool oder Design? Wissen, wie man einen zusammenzaubert. Eine Stecknadel und etwas Papier und ein Schuss Kreativität sind alles, was Sie brauchen, um Ihre Ideen zum Leben zu erwecken Wenn Sie über Spion sprechen, haben Sie ihn und Ihren Fluss beschädigt. Egal, ob Sie ein erfahrener Designer sind oder einfach nur Ihre Zehen in die Welt von x eintauchen. Tus Flow und x b eine Geheimwaffe, um Ideen in die Realität umzusetzen Bist du bereit, es auszuprobieren? Also lass uns Pin Storming machen? 7. Lo Fi vs Hallo Fi Wireframes-Design-Showdown: Hallo, liebe Design-Gigs. Heute begeben wir uns auf die Reise in die wunderbare Welt von Figma und die Grundlagen des Lo-Fi-Bilder versus High-Fidelity. Wenn Sie gerade erst anfangen, sind Sie in der L, und wenn Sie bereits ein Design-Assistent sind, sollten Sie gut zurechtkommen, denn es gibt immer etwas Neues zu lernen Okay, fangen wir mit LF-Wireframes an. Lofi bedeutet Low-Fidelity, was es im Grunde bedeutet, die Dinge in der Anfangsphase Ihres Designprozesses herrlich einfach und grob zu halten in der Anfangsphase Ihres Designprozesses herrlich einfach und grob der Anfangsphase Ihres Designprozesses Es ist, als würden Sie den Bauplan skizzieren bevor Sie mit dem Bau des Traumhauses beginnen Bei späten Wiframs dreht sich alles um grundlegende Formen, Wir sprechen hier über die nackten Knochen, Leute. Diese Wi-Frames sind im Backbone-Optio-Design gebaut. Sie helfen Ihnen dabei, das Layout zu planen, herauszufinden, wo diese Knöpfe platziert werden sollen , und die allgemeine Struktur zu skizzieren Es ist schnell, es heißt Meacy und Junge. Es ist unglaublich nützlich. Loaf Iframes sind der beste Weg für Brainstorming für Brainstorming Stellen Sie sich das so vor, als würden Sie eine Idee auf Papier bringen. Nun zur eigentlichen Seite der Dinge. Hier passiert Magie. Hohe Fertyfms sind wie die Umwandlung dieser groben Skizzen Es ist, als würde man vom Kritzeln auf der Serviette zur ausgefallenen architektonischen Darstellung Ihres Designhauses ausgefallenen Du hattest Knöpfe, die Bilder, den Text, du hast ihn wie einen Diamanten leuchten lassen Hier wird Ihr Design also wirklich lebendig. Die Auswahl ist perfekt. Jedes Detail ist sorgfältig ausgearbeitet und kommt einem echten Geschäft so nahe wie möglich, ohne eine einzige Codezeile zu berühren High-Ferty-Wireframes eignen sich perfekt für Präsentationen, einfache Tests und das endgültige Gütesiegel Ist er bereit, die Welt zu verzaubern. Lassen Sie uns jetzt über unseren Treuhänder, Figma, sprechen. Es ist der ultimative Flügelmann sowohl für L Pi als auch für sowohl für L Pi als auch Figma macht es zum Kinderspiel , mit Lo Fi zu beginnen. Sie können Ihre Ideen skizzieren, Dinge bewegen und sehen, wie alles zusammenpasst, alles einer digitalen Spielwiese Und wenn es an der Zeit ist, deine High Facility zu verbessern, hält Figma den Rücken frei Sie können Ihr Design verfeinern, allen visuellen Schnickschnack hinzufügen und interaktive Prototypen erstellen, um zu sehen, wie Ihr Meister wir dem Benutzer gegenüber fühlen In diesem Kurs werden wir uns eingehend E- und der High-Facility in Wir werden beide lernen, wie man das eine nahtlos in das andere überführt wie man das eine nahtlos in das andere überführt Wir werden Ihnen die Tools, Tricks und die geheime Quelle vorstellen, damit Ihr Design wirklich zur Geltung kommt. Denken Sie daran, es geht nicht darum, sich für eine Seite zu entscheiden. Es geht darum zu wissen, wann man die Macht beider einsetzen muss. Es ist, als hätten Sie zwei Superbögen in Ihrem Design-Werkzeugkasten. Bist du also bereit, die Welt zu erobern, also mach dich bereit für dieses spannende Abenteuer zwischen Lop Bar Frames und High Fidelity in Wir sind dabei, gemeinsam etwas Magisches an Design zu kreieren, und ich könnte nicht aufgeregter sein Wir sehen uns also in der nächsten Lektion und lassen Sie uns einen Designtraum wahr werden lassen. 8. Frames- & Designdatei in Figma Design(Interface): Designerin. Willkommen in unserem Fiigterial Heute tauchen wir ein in die aufregende Welt der Erstellung Ihrer ersten Aber bevor wir in dieses Video eintauchen, möchte ich mich kurz entschuldigen Während der Aufnahme dachte ich, ich hätte alles unter Kontrolle, was uns durch das Click-Cut-Wireframe ermöglichte Bei der Arbeit an dem Projekt fiel mir jedoch auf, dass die Datei keinen Titel hatte Als ich meine Fensterschlösser überprüfte, wurde mir klar, dass ich einen Fehler gemacht hatte Das war also mein Fehler. Also jetzt gehen wir zu FiMA und lassen Sie mich Ihnen beibringen, wie man Frames erstellt Nun, ich weiß, dass es ein bisschen verwirrend sein kann, besonders wenn Sie gerade erst anfangen, sich keine Sorgen, ich halte Ihnen den Rücken frei Ihr Bildschirm könnte also ein bisschen anders aussehen als meiner, weil Figma die Dinge auffischen soll Wenn Sie den Weg nicht finden können, keine Streuner, gehen Sie nach oben und links können Sie sehen, dass dort ein Name steht wie Mein Name ist imaginärer Und es gibt ML oder andere Dinge. Wenn wir darin mehrere Konten haben. Derzeit habe ich nur ein Konto, also ist dies mein Standardkonto. Aber nehmen wir an, wenn Sie ein Konto haben, werden Ihnen ein farbiges Logo und eine MLID angezeigt , sodass Sie das ändern können Nehmen wir an, Sie befinden sich möglicherweise in einer anderen App , weil Sie Figma ausprobieren Sie könnten sich also verirren. Was Sie also tun möchten, ist, dass Sie einfach auf dieses Home-Symbol klicken können, und Sie befinden sich in diesem Bereich. Ich weiß, dass das für Sie überwältigend sein könnte weil ich an vielen Projekten arbeite und viele Projekte erstellt habe. Das ist also mein Interface. Lass mich dir noch etwas zeigen. Hier sind die Teams. Okay. Lass wütend sein. Es ist ein bisschen verwirrend. Ich weiß. Das ist also mein Interface. Also werden wir eine neue Designdatei erstellen. Sie können also sehen, dass es eine Option namens Designdatei gibt, blau ist. Klicken Sie einfach darauf und wir erhalten unsere Designdatei. Also habe ich diesen Fehler gemacht. Also lass mich das zuerst reparieren. Unser Projektname wird also Click Cart lauten. Und es wird Version eins sein, also ist es V eins. Okay, das ist also der Name meiner App. Kommen wir nun zu den Frames. Lassen Sie mich Ihnen sagen, warum ich diese Version V One nenne , weil ich an vielen Projekten arbeite und als ich anfing, FMA zu lernen, wollte ich diese Version aktualisieren Früher sagte ich immer Finale, danach noch ein Finale Danach noch ein Finale nach dem Finale V Four, so etwas in der Art. Wenn du also Photoshop-Visier oder Grafikdesign magst , kennst du vielleicht meinen Pin. Also so etwas habe ich früher gemacht. Aber jetzt sage ich nur Version eins. Also wann immer ich etwas bedienen will, sage ich, das ist die erste Version. Ich brauche Version zwei. Ich übernehme Version zwei. Oder Sie können eine neue Datei erstellen und Version Tune umbenennen Okay, das war also die Sache mit den Namen. Lasst uns jetzt lernen, wie man Frames macht. Dieser quadratische Knopf ist also für einen Rahmen. Bedienfeld, verwenden Sie also die Tastenkombination F für Frames. Im rechten Bereich des Designfensters stehen uns also viele Optionen zur Verfügung, z. B. haben wir Telefone Tablets sowie Takes Stop, Präsentation und Uhren. Ja, wir können auch Uhren entwerfen, genauso wie Papier, soziale Medien, Passform und Archive. Ich habe viele Leute gesehen, die Figma zum Beispiel für soziale Medien verwenden, weil wir mit FDMA viele Dinge machen können Es hängt also total von dir ab. Nehmen wir an, Sie möchten Ihre aktuelle Benutzeroberfläche auf Designer oder Grafikdesigner umstellen . Sie können auch Figma verwenden. Du musst kein weiteres Schluchzen gebrauchen. Wenn du dich mit Figma wohlfühlst, kannst du das tun. Okay, jetzt lass uns mit den Telefonen weitermachen. Erstens haben wir iPhone 14 und iPhone 15. Ich weiß nicht, wann du dir diesen 212 ansiehst. Es könnte iPhone 17 16 iPhone 99 hinzufügen. Für dieses Projekt verwenden wir also IP 14 und 15 P max. Diese erste Option. Sie können auch die Auflösung überprüfen. Das sind die vier 30 in 9302. Also einfach drauf klicken und schon haben wir unseren ersten Frame. Wir können es so auf dem Bildschirm bewegen. Wenn Sie die Breite und Höhe wie bei einem Rahmen ändern möchten, können Sie dies auch von hier aus tun. Es gibt also viele Optionen, also nicht verwirren. In zukünftigen Videos werden wir also alle Optionen sehen, wie man sie benutzt, wie man sie benutzt, wie den Export von Stricheffekten und all das Okay, im Moment lernen wir in dieser Version nur etwas über Frames und ein bisschen über Benutzeroberflächen Das ist also der erste Frame. Sie können es von hier aus umbenennen. Sie können auf dieses iPhone 14 P Max One doppelklicken und einfach darauf doppelklicken, und Sie können zur Intro-Seite wechseln, sagen wir mal Okay, wenn Sie diese Oberfläche vergrößern oder verkleinern möchten , halten Sie die Taste gedrückt und verwenden Sie den Maus-Scroller Wir können dasselbe auch tun, indem wir die Strg-Taste gedrückt halten und die Plus-Taste oder die Minus-Taste verwenden Das funktioniert also genauso. Nehmen wir an, Sie möchten ein weiteres Bild hinzufügen, sodass Sie wieder zu den Frames wechseln können, und Sie können 14 bis 15 P hinzufügen, dieses Bild. Sie können diesen wählen. Oder Sie können einfach die Alt-Taste auf Ihrer Tastatur gedrückt halten, und Sie können sehen, dass einfach die Alt-Taste auf Ihrer Tastatur gedrückt halten, und Sie können sehen, sich hinter unserem Mausvorhang ein Mausvorhang befindet , und wir haben dieses Element oder diesen Rahmen dupliziert So können Sie also Duplikate erstellen oder kopieren. Sie können auch die grundlegende Steuerung C verwenden. Und nehmen wir an, Sie möchten gerade, das ist ein bisschen chaotisch Und ich möchte ein bisschen Platz. Ich möchte zu diesem Design übergehen. Sie können diesen Schieberegler verwenden, Sie können diesen Schieberegler verwenden, oder Sie können auch die Leertaste verwenden. Wenn ich die Leertaste gedrückt halte, kannst du sehen, wie sich unsere Maus in die Hand verwandelt Ich kann einfach mit der rechten Maustaste klicken und es so bewegen. So können Sie dieses Drag-One-More-Tool verwenden. Und von hier aus können Sie Seiten auch umbenennen. Nehmen wir an, ich möchte dieser Homepage einen Namen geben. Das wird also meine Homepage sein, und das wird mein Burger-Man sein. Okay, das sind also unsere Rahmen. Bei diesem Projekt werden mir bis zu sechs Frames nicht gefallen, also zoome ich ein bisschen heraus und halte die Alt-Taste gedrückt, oder wir können Strg C und Strg V verwenden . Klicken Sie mit der rechten Maustaste auf Ihren Frame und wählen Sie Kopieren, klicken Sie mit der rechten Maustaste auf diesen leeren Bereich und klicken Sie hier auf Pest Also wird es hier drüben Ungeziefer geben. Und lassen Sie mich das in diese Richtung verfolgen. Also haben wir vier. Also nochmal, Steuerung V Steuerung V. Also haben wir unsere sechs Frames. Ich nenne diese eine Kategorie. Diese wird mein Konto sein, und unsere letzte Seite wird meine Bestellung sein. Von hier aus können wir unsere Bestellungen verfolgen. Hier dreht sich also alles um Frames, und Sie können in einem Listenfeld sehen, dass wir jede Seite haben. Und wenn ich ein Element hinzufüge, sagen wir, wenn ich eine Zeile auf dieser Seite hinzufüge. Wie Sie sehen können, wurde es verschachtelt und unter dieser Intro-Seite haben wir unsere Elemente Also mach dir darüber keine Sorgen. Ich werde diesen vorerst löschen. Okay, lassen Sie uns den Schwung beibehalten. Erstellen Sie also zum Üben mehr Frames, kopieren und einfügen Sie sie wie ein Profi und benennen Sie sie entsprechend dem UA-Aufgabenablauf, und es gibt einen Profi-Tipp. Nehmen wir an, Sie arbeiten als Freelancer an einem UX-Projekt. In diesem Fall können Sie nach dem Telefon Ihres Kunden fragen. Also wie das Modell des Telefons. Nehmen wir an, er benutzt ein Samson Galaxy S 23 Ultra. In diesem Fall können Sie also eine Dimension entsprechend diesem Telefon erstellen Also werden sie es dafür lieben. Vergessen Sie zum Schluss nicht, Ihrer Datei einen Namen zu geben, denn ich weiß, dass ich einen großen Fehler gemacht habe. Klicken Sie auf diesen leeren Bereich und gehen Sie einfach zu diesem Abschnitt und benennen Sie die Datei. Derzeit verwende ich Click Cut, aber Sie können es benennen, wie Sie möchten. Und zögern Sie nicht, mehr zu entdecken. Bist du bereit für das nächste Video, also lass uns diesen kreativen Zug weiterführen? 9. Figma-Textwerkzeug und Schriftarten: Willkommen zurück, alle zusammen. In diesem Video erfahren wir alles über Text, die Tipps, die Schriftart, die Schriftgröße, P, wie man ihn ausrichtet und all das. Also lass uns tippen. Lassen Sie uns zunächst lernen, wie Sie Text hinzufügen. Es ist sehr einfach. Gehen Sie einfach zum Menü in der oberen Leiste. Und wie Sie sehen können, haben wir diesen T-Knopf. Also klicken Sie darauf und klicken Sie einfach wieder auf den Troprig. Du wirst deinen Text so bekommen. Jetzt siehst du vielleicht viele seltsame Dinge, wie zum Beispiel, dass viel Platz dazwischen ist und all das. Also werden wir das gleich beheben. Es gibt zwei Methoden, um Text hinzuzufügen. Als erstes haben wir gesehen, wie das Fahrrad auf das Menü in der oberen Leiste geklickt hat. Und wir können auch eine Tastenkombination namens t verwenden, T auf Ihrer Tastatur drücken, und Ihr Mauskarsell ändert sich in dieses Plus-Symbol, und Sie können einfach ein Feld wie dieses ziehen und Sie können viel Text hineinlegen So können wir den Text zur Seite hinzufügen oder, das ist die Seite, also können wir ihn zur Seite hinzufügen Es gibt eine Sache, die ich vergessen habe zu erwähnen. Wenn wir zum Beispiel nur Text auswählen und einfach darauf klicken, erhalten wir ein Feld, ein kleines Feld, und wir können es nicht anpassen. Danach können wir uns damit befassen, so. Aber in einigen Fällen wollen wir ein Feld, das groß und breit sein sollte, also können wir es so ziehen und eine Menge Text hinzufügen So können wir Boxen hinzufügen und testen, dass wir sie auch so anpassen können Also lass mich vorerst mit diesem ausgehen. Dieser auch. Okay, den werde ich behalten. Kommen wir nun zu der Frage, wie wir viele Dinge mit Typen machen können. Bevor wir das tun, wollen wir etwas über Schriftgesichter lernen. Also, welche Art von Gesichtern? Ein Typ „Gesichter“ ist ein Satz von Charakteren desselben Designs. Dazu gehören Buchstaben, Zahlen, Satzzeichen und CLFy Es sind Tausende von Ti-Gesichtern verfügbar. Es ist wichtig, nicht mehrere Ti-Faces zu erstellen. Dadurch kann sich Ihr Design fragmentiert und ungeschickt anfühlen. Sie müssen also vorsichtig sein, S von zwei, drei Schrifttypen auswählen und einschränken Wenn wir Wireframe entwerfen, entscheiden wir uns also meistens für grundlegende Schriften wie Ich weiß, Roboter sind langweilig, aber viele Leute müssen es, sie müssen nur die Idee haben, was das Design ist Also verwenden wir diese langweilige Schrift. Das ist Roboto. Das weiß ich, ich weiß Tut mir leid, Roboto. Tue ich Gehen wir nun zur Schriftstärke über. Eine Schrift kann viele verschiedene Arten von Kacheln oder Schriftstärken haben viele verschiedene Arten von Kacheln oder Schriftstärken , hat Roboto zum Beispiel können, hat Roboto zum Beispiel viele Stile und Schriftstärken Es ist unangenehm für mich. Man kann die Nässe durchlassen, man kann sie alle zählen, wie dünne extra leichte Bolzen, zusätzliche Bolzen, diese Art von Schriftstärke. Die Schriftstärke kann zu einer verblüffenden Topographie führen. Verwenden Sie eine große Schriftstärke, um die wichtigsten Informationen hervorzuheben , und kleinere, um weniger wichtige Gehen wir nun zur Schriftgröße über. Dies verringert den Maßstab und die Größe des Textes. Figma stellt die Schriftgröße in dichteunabhängigen Pixeln dar. Durch die Schriftgröße kann auch eine Hechi-UVA-Topographie erzeugt werden. Es ist wichtig, die richtige Schriftgröße für die richtigen Informationen auszuwählen die richtige Schriftgröße für die richtigen Informationen Stellen Sie sicher, dass Ihr Text lesbar ist und niemals unter zehn PT liegt, das sind zehn Pixel. Wie Sie sehen können, wenn ich zehn auswähle, können Sie sehen, dass die Schriftgröße zu klein ist und es ist irgendwie lesbar, aber wenn wir unter diesen Wert gehen, ist er möglicherweise nicht lesbar, also seien Sie darüber hinweg. Das würde es also für viele Leser unlesbar machen. Gehen wir nun zur Zeilenhöhe über. Okay, das ist also die Linienhöhe, die Verbindung ist 100%. Wir können es anpassen, denn sagen wir, die Zeilenhöhe steuert die Lücke zwischen Zeilen oder Text im Absatz. Die Zeilenhöhe sollte zwischen 20 und 1405 Prozent der gefundenen Größe liegen, damit der Absatz besser lesbar Wenn ich also auf 400 erhöhe, wie wir sehen, ist das komisch Aber wenn ich es bei einer 20 belasse, kann ich es manuell machen. So kann man sehen, ist besser lesbar. Wenn Ihre Zeile zu lang ist, wird es dem Leser schwer fallen, sich zu konzentrieren. Behalte das also im Hinterkopf. Okay, am Anfang des Videos sagte ich, wir haben den Abstand durcheinander gebracht Lassen Sie uns jetzt wissen, wie man den Abstand festlegt und wie man den Abstand hinzufügt Lass den Abstand den Abstand zwischen zwei Zeichen beschreiben. Dies kann für den Text von Seitenüberschriften hilfreich sein. Verwechseln Sie das auch nicht mit List. Dabei handelt es sich um den Vorgang, bei dem der Abstand zwischen zwei bestimmten Zeichen angepasst der Abstand zwischen zwei bestimmten Derzeit sind es 20%. Und wenn ich, sagen wir, sechs oder sieben, so sehe ich jetzt, dass das besser lesbar ist und es nicht so aussieht. Okay, also Absatzabstand. Der nächste ist der Absatzabstand. Okay, dafür muss ich noch einen zufälligen Text für das hinzufügen , was mit dir passiert. Okay, jetzt funktioniert es. Lassen Sie mich einen zufälligen Text wie diesen hinzufügen. Betrachte das als einen Absatz. Ich weiß, dass es kein Absatz ist, aber ich betrachte ihn als Absatz. Mit der Vorderseite nach Absatz wird der Abstand zwischen den einzelnen Absätzen festgelegt. Dadurch kann der Abstand zwischen den einzelnen Absätzen vergrößert oder verkleinert werden. Es hilft dem Benutzer, sich zu konzentrieren, indem es regelmäßige Intervalle hinzufügt, wodurch der Text sowohl lesbarer als auch lesbarer Wenn ich also den Absatzabstand so wie Sie vergrößere, vergrößert er sich auf diese vergrößert er sich So können Sie also den Programmabstand hinzufügen. Jetzt haben wir die Möglichkeit, die Größe zu ändern. Derzeit hat das Textfeld eine feste Größe. Wir können „Automatisches Gewicht“ und „Automatisches Ausblenden“ wählen. Ich habe eine FMA oft benutzt, aber ich verwende diese Option nie oft Aber wenn Sie möchten, können Sie dies verwenden, und es wird Ihren Text so anpassen Es hängt also ganz von Ihrem Design ab. Okay, der nächste ist Alignment. Dies bestimmt, wie Sie den Text auf engstem Raum verteilen . Richten Sie Ihren Text wie bei horizontalen Ausrichtungen auf der X-Achse und vertikal auf der Y-Achse Also dieser ist für die Seite und dieser ist für die rechte Seite. Ich weiß es nicht. Ich habe noch nie jemanden gesehen, der so etwas macht, wie auf der rechten Seite. Meistens befindet sich der Text auf der linken Seite oder im Pedal. Und Sie können diesen auch verwenden, um den Text auszurichten. Das sind also die grundlegenden Methoden. Und wenn du erweiterte Optionen haben möchtest , zum Beispiel wenn du weniger Aufzählungspunkte oder so gut wie „Gefällt mir“ hinzufügen möchtest, habe ich es vergessen. Lass mich gehen und nachsehen. Okay. Wenn Sie also Text in Großbuchstaben umwandeln möchten , können Sie das tun, Sie können Unterstreichungen und solche Dinge hinzufügen, und Sie können auch andere Dinge tun Wie wir die Element-Option gesehen haben. Es ist auch hier verfügbar, aber in diesem Fall haben wir einen Vorteil. Das heißt, wir können eine Vorschau sehen. Wenn ich Größe ändern wähle und zu Auto W gehe, wird uns die Vorschau davon angezeigt Ich werde sagen, wie es aussehen wird, nachdem wir diesen Effekt hinzugefügt haben. Und auch das Unterstreichen, auch der Durchbruch. Und Großbuchstaben, Kleinschreibung und all das. Sie können auch Aufzählungspunkte hinzufügen. Das sind also alle grundlegenden Text-, Schrift- oder Pipa-Einstellungen, die Sie in der Figma vornehmen können Denken Sie also an eine Sache: Der Text enthielt Ripper, mehr als 80% des Es ist wichtig, diese Texteigenschaften und ihre Bedeutung zu Das vermittelt ein gutes Verständnis der Topographie, konzentriert sich auf ihren Nutzen und stellt die Lesbarkeit immer an erste Stelle Hier dreht sich also alles um Text. Also Astrovideo. Und ich weiß, dass es noch mehr Dinge gibt, wie wir Textstile erstellen können, sowie Fließtext und all das Wir werden also lernen, dass es sich um etwas fortgeschrittenere Dinge handelt. Also werden wir diese Dinge in zukünftigen Videos lernen. Also wie Potro, und ich werde euch im nächsten sehen 10. Grundlagen von Figma SO ERSTELLST UND MODIFIZIERST DU FORMEN: Jeder in diesem Spiel lernt alles über Formen, Beispiel wie man Rechtecke, Lippen, Polykons erstellt und wie man abgerundete Ecken wie man sie hinzufügt Fangen wir also an. Okay, für die Formen können wir zum Topo-Menü gehen und auf dieses Quadrat klicken Und das erste ist, wir haben ein Rechteck, diese Linie, Pfeile, ist ein Polygonstern, und wir können auch Bilder und Videos einfügen Okay, fangen wir mit dem Rechteck an. Und ich dachte ich werde diesen Raum für Produktaufnahmen nutzen. Zum Beispiel, wenn wir zu Amazon gehen. Da ist ein riesiges Banner. Und darauf rutscht es und es zeigt ein Produkt, zum Beispiel was für ein Angebot es gibt. Also will ich das Ding machen. Oder ich mache dieses Stück für eine bestimmte Kategorie. Okay, also werde ich dieses Produktfoto hierher verschieben und es so belassen. Okay, das ist für die Folien, und jetzt wähle ich Ellipse und das Tastenkürzel lautet : Oh, Sie können es auch verwenden und für präzise Verschiebungen, wie den perfekten Kreis, halte ich die Umschalttaste gedrückt und ziehe es so Und ich werde vier davon machen. Wenn Sie auf diese Weise ein Duplikat erstellen möchten , können Sie die Alt-Taste gedrückt halten. Wenn Sie bei einem Element die Alt-Taste gedrückt halten, können Sie sehen, dass sich ein doppelter Mauszeiger befindet. Das bedeutet, dass Sie Ihr Objekt duplizieren können Klicken Sie einfach mit der Maus und ziehen Sie es so. Sie erhalten ein Duplikat. Okay, es gibt viele Methoden, mit denen Sie Steuerung C und Steuerung V verwenden können . Aber wenn ich Steuerung C und Steuerung V verwende, liegt das Objekt übereinander. Du kannst sehen, dass ich oben war. Das ist also ein bisschen verwirrend. Also benutze ich Altption. Also werde ich sie so ausrichten und erneut alle auswählen und die Alt-Taste gedrückt halten Und ziehe es so, weil ich möchte, dass es sich bei diesem Abschnitt um eine Kategorie handelt, und ich werde es so belassen. So können wir also Schiffe bauen. Also, nehmen wir an, ich möchte hier ein Überspannungsbalkensymbol erstellen. Ich kann also R drücken und ein kleines Rechteck wie dieses erstellen und es in dieser Mitte platzieren. Und ich möchte auch einen Hamburger Minu. Sie werden also vielleicht sehen, dass es in vielen Fällen ein dreizeiliges Menü gibt, das Hamburger-Menü genannt wird Wir können also mithilfe von Linien kreieren. Also lassen Sie mich das so nachverfolgen wie diese ganze Schicht. Ich zeichne zuerst nach oben und füge dann noch einen Strich hinzu. Ich weiß, dass ich zu schnell gehe, aber es ist einfach. Derzeit ist ein Schlaganfall einer. Ich werde bis zu drei gehen, damit es schwerer wird , und ich werde es so verfolgen, und noch eins. Okay, wir haben unser Hamburger-Menü und hier drüben können wir Lippen oder Suchsymbol Oder vielleicht bleibe ich vorerst so wie es ist , weil ich nicht zu schnell handeln will Also, weißt du, die Suche Barbano hat immer abgerundete Ecken Wir wollen also abgerundete Ecken, und wir haben derzeit wirklich scharfe Wenn ich den Finger drauf lege, lasse ich mir Papier schneiden. Ich weiß, dass es ein sehr schlechter Job war. Also, lass uns ein paar runde Ecken kreieren. Klicke auf dein Element. Und Sie können sehen, dass sich auf jeder Seite vier Punkte befinden. Sie können einfach darauf klicken und es im Inneren verfolgen, und es wird so abgerundet. Ich wollte nachsehen, dass wir D Ecken haben. Sie können das manuell tun, Beispiel wenn ich es auf Null setze und wenn Sie auf das Element klicken und wenn Sie in das Designfenster gehen und dort eine Option für den Eckenradius haben. Sie können einfach darauf klicken und Werte wie 15 hinzufügen , damit Ihre Ecken abgerundeter werden. Und Sie können auch abgerundete Ecken für jede Seite platzieren, der oberen Ecke, in der oberen linken Ecke. Die letzten 15, wenn ich den Wert Null hinzufüge. Wie Sie sehen können, sieht es wie eine Textnachricht aus. Du kannst das also auch so machen. Sie können auch die Alt-Taste gedrückt halten und es für einzelne Ecken so ziehen , und Sie können Ecken wie folgt zu abgerundeten Ecken machen. Vorerst bleibe ich bei Okay, also das hier ist unser Home Wireframe für unsere Homepage. Ich weiß, dass ich hier viele Dinge tun kann. Ich kann zum Beispiel eine kleine Navigationsleiste hinzufügen. Lassen Sie mich zu diesem Bereich gehen, ich kann einfach Tastenkombination R verwenden und ich werde es so verfolgen. Und ich kann vier oder fünf Elemente hinzufügen, z. B. Startseite, Kategorie, Kartenprofil, wie diese Dinge. Und was wir tun können Okay, wir können ein kleines Rechteck hinzufügen. Oh, hier. Das wird bedeuten, dass dieser für Karten ist. Ich weiß, es sieht nicht so toll aus, aber das ist der Drahtrahmen, also muss er nicht so toll aussehen. Okay. Also für den Moment ist es was es ist. Okay, wir haben also bereits gesehen, wie Text in FMA funktioniert. Wir müssen nur T oder sogar diese Taste drücken. Lassen Sie uns also etwas Text hinzufügen, so wie dieser für ein Banner ist. Kein Bruce-Banner. Okay. Also das hier ist für Banner und das ist für Kategorien, außerdem kann ich vier Quadrate zeichnen, die dann unsere Navigationsmenüs darstellen. Okay, also ich nehme fünf. Okay, so wie das. Okay, also ich habe vergessen, dir eine Sache zu zeigen, es geht um Schichten. Wir werden in zukünftigen Schichten etwas über Schichten lernen, aber das ist die grundlegende Sache, also muss ich das zeigen. Nehmen wir an, Sie zeichnen eine Form. Und lassen Sie mich das hierher verschieben. Und wenn ich Rechteck wähle und wenn ich ein Rechteck wie dieses zeichne, und wie Sie sehen können, ist unser Text verschwunden. Ich weiß, dass du jetzt in Panik geraten musst , wo es hingegangen ist und so. Aber es ist wirklich einfach, es zurückzuholen , denn in Laien können Sie sehen, das ist das Rechteck 15 und wo ist unser Text. Das ist das Banner Sie können es also von hier aus tun, aber es ist sozusagen, sagen wir, für fortgeschrittene Zwecke. In diesem Fall wählen Sie einfach das erste Element aus und klicken Sie auf die mittlere Rückseite. Und wie Sie sehen können, haben wir unser Textpaket bekommen. Sie können die Abkürzung für das quadratische Paket verwenden , das sich neben der P-Taste befindet. Wenn ich drücke, haben wir unser Textpaket. So können Sie die Ebenen anpassen. Okay, es gibt noch eine andere Option. Sie können dasselbe tun, zum Objekt gehen und sehen, nach vorne bringen, vorwärts sein, rückwärts stellen oder zurücksenden Es gibt also viele Optionen. Das kannst du machen. Sie können es auch von hier aus anpassen, wenn Sie ein Figma-Lot verwenden. In diesem Fall können Sie es dann von hier aus anpassen. Aber das ist irgendwie verwirrend. Also sage ich Abkürzung oder du kannst es richtig machen und du kannst es anpassen wie ein Set, um es nach hinten oder nach vorne zu schicken. Das wird dir also leicht fallen. Und ich habe im vorherigen Video vergessen, den Markennamen hinzuzufügen. Ich dachte an einen Markennamen namens Click Cart. Okay, also werde ich das auf die CD legen und es nach unten korrigieren. Und ich werde Ellipse verwenden , weil ich hier ein Markenlogo hinzufügen möchte Ich halte die Umschalttaste für den perfekten Kreis gedrückt. Und in diesem Kreis werden wir ein Markenlogo hinzufügen. Okay, Sie fragen sich vielleicht, was ist dieser kleine Punkt, Sie fragen sich vielleicht, was ist dieser kleine Punkt? Okay, lass mich dir eine Magie zeigen. Wenn ich das nach oben ziehe, haben wir unseren Rudelmann und er kann alle Punkte aus unserem Spiel treffen. Ich weiß, dass es ein Bett ist. Okay. Also können wir das auch machen Wir können Hohlkreise wie diesen erstellen. Wir können auch Kuchen-Chat und all das erstellen. Ist für komplexes Design. Die meiste Zeit verwenden wir es nicht, also mach dir darüber keine Sorgen. So funktioniert dieser Punkt also. Am Ende haben wir also einen hohlen Kreis, also kannst du ihn so hinzufügen. Okay, also vorerst lebe ich Azits. So können Sie also Formen verwenden , um diesen Drahtrahmen zu erstellen, wie dieses Banner, diesen Kategorienbereich sowie dieses Suchsymbol und die Linie für das Hamburger-Menü und das Quadrat für unseren Navigationsmenübereich Und wir lernen auch, wie man einen hohlen Kreis oder Pac Man erstellt Das war's also für dieses Video zu zweit. Und wir sehen uns im nächsten Wort, Kays. 11. So wählst und verwendest du Farben in figma: Willkommen zurück, Schüler. Heute tauchen wir in die lebendige Welt der Farben in Figma Machen Sie sich bereit, denn am Ende dieses Videos werden Sie die Kunst beherrschen, Ihren Designs den perfekten Farbtupfer zu verleihen Ihren Designs den perfekten Farbtupfer zu Lassen Sie uns zunächst verstehen , dass weniger oft mehr sein kann Wenn es um Wireframe geht, ist Grau zwar eine gute Wahl, aber wir sind hier, um den Regenbogen der Möglichkeiten zu erkunden, die bereit sind Um mit Farbe zu arbeiten, wählen wir das riesige Im Design-Panel haben wir diese Option namens Füllen. Im Film können wir also unsere Farben ändern. Das ist für das Licht. Das ist für den Tarke, das ist für den niedrigen Kontrast und das ist für den Kontrast Und wir können die Farbe auch von der Seite ändern , diese Farbe Apfelwein Wir können auch die Transparenz der Farbe erhöhen oder verringern Okay, also zuerst werde ich die Farbe Industriegelb wählen, weil ich diese Farbe sehr mag und der Hex-Code dafür steht, glaube ich, etwas EC Ten ist der Hex-Code für diese Farbe. Danach haben wir den Transparenzmodus, von hier aus können Sie Ihre Farbe oder Ihr Element transparent machen. Nehmen wir an, wenn ich das in den Hintergrund verschiebe, wo ist der Hintergrund? Okay, das ist also der Hintergrund. Also, wie Sie sehen können, ist unsere Farbe irgendwie transparent, transparent. Es ist nicht so, es ist transparent. Also wenn ich das zu 200% schaffe. Okay. Also momentan ify, wenn ich es zu 100% schaffe, wie du siehst, ist es unsichtbar Okay. So können Sie Farben transparent machen. Also lass mich das zuerst nach hinten schicken. Okay, das ist jetzt also eine Indifront. Nun, die nächste Option ist, dass Sie eine Farbe auswählen können , indem Sie das Pipettenwerkzeug verwenden. Das ist also das Augentropfenwerkzeug. Und wie Sie oben sehen können, haben wir diese vergrößerte Version. Wenn ich das auf den Seiten verschiebe, wird es sich ändern. Als würde es zoomen. Es ist wie eine Lupe, und wir können jede Farbe wählen Sagen wir mal, ich möchte sie alle einfärben. Lassen Sie mich zunächst das Auswahlwerkzeug auswählen. Und die Tastenkombination für das Auswahlwerkzeug ist V, und ich werde all das auswählen und dann das richtige Werkzeug auswählen. Und für die Abkürzungen. Okay, also ich werde dieses gelbe Auto wählen , wie Sie sehen können, wir haben überall Gelb. Okay. So können Sie das richtige Tool verwenden. Danach haben wir X-Code. Es gibt verschiedene Arten von Codes, vier Farben, zum Beispiel steht RGB RGB für Rot, Grün, Blau. Wenn Sie die Werte von Rot, Grün und Blau kennen , können Sie jede Farbe erstellen. Und danach haben wir CSS. CSS ist zum Beispiel für Frontend-Entwickler nützlich. Als ich auf dem College war, habe ich früher in CSS programmiert, also brauchte ich diese Art von Farben, wie diese Arten von Codes. Danach haben wir HSL. Diese sind so ähnlich wie RGB. Das sind auch Werte, die Sie eingeben können, und es kann Farbe erzeugen. Danach haben wir HSB. Aber die meiste Zeit verwenden wir XCode oder RGB, oder wenn Sie ein Entwickler sind, werden Sie CSS verwenden Lassen Sie uns vorerst mit X-Code beginnen. Okay, von hier aus können Sie auch die Transparenz erhöhen oder verringern. Du kannst das Gleiche hier machen. Danach haben wir die Farbe des Dokuments. Okay, die Farbe des Dokuments steht für, genau wie die Farbe, die wir in unseren Designs verwendet haben. Als ob wir Interesse an Gelb, Weiß, Grau, Schwarz und irgendwie Grau hätten. Das ist also die Farbe des Dokuments. Wenn Sie auf diese Dokumentfarbe klicken, erhalten Sie einige Optionen. So wie das für Arbeitsfarben ist. Ich habe zum Beispiel mehrere Projekte erstellt, sodass ich diese Farben in diesem Projekt exportieren und sie auch verwenden kann Soweit, lassen Sie uns jetzt mit diesem weitermachen. Weil ich weiß, dass diese Themen ein bisschen kompliziert sind, nicht kompliziert, aber nicht leicht zu verstehen. Deshalb werde ich ein separates oder spezielles Video dazu machen. Und es gibt auch eine Option namens Farbstile. Wir können unsere Farbpalette erstellen und sie mehrmals in unserem Design verwenden. Es wird also einfach sein. Also direkt dafür. Es wird bald ein Video erscheinen. Hier dreht sich also alles um Farben. Sie können auch Ihre Verlaufsfarbe , wenn wir diese Option wählen. Sie können die Verlaufsfarbe wählen. Lassen Sie uns vorerst mit Sonnenfarben arbeiten, und wir werden lernen, wie Sie in zukünftigen Videos Farbverläufe erstellen können Also direkt dazu. Aber denken Sie daran, dass Sie beim Entwerfen von Wireframes einfache Farben wie Grau, Weiß oder Blau verwenden Das sehen Sie vielleicht in einigen Wireframes. Die Farben sind wirklich, wirklich langweilig. Also musst du Wireframe wirklich langweilig machen. Und da haben Sie es, Leute, die Grundlagen des Hinzufügens von Farben in Figma Bis dahin, viel Spaß beim Ausmalen. 12. Striche und Aktualisierung von Standardeigenschaften in figma: Weitere Studierende heißen zurück zu unserem Designabenteuer. Und heute tauchen wir tief in das faszinierende Reich der Striche ein. Befreien Sie sich für einen Geniestreich in Ihren Entwürfen. Welcher Strich ist also die glatte Linie an den Kanten, die die Grenzen definiert und zwei zusätzliche visuelle Elemente hinzufügt zwei zusätzliche visuelle Elemente Lassen Sie uns unsere Schilder aussuchen, sollen wir. Stellen Sie sich einen Burger-Spiegel vor, ich weiß, dass Sie sich etwas anderes vorstellen, aber das ist kein Burger-Menü Das ist also das Burger-Menü. Okay, wir haben hier drüben. Also diese drei Zeilen kennen wir alle und wir lieben sie. Wir ziehen nicht nur Linien. Wir geben ihnen stilistisch abgerundete Enden , denn seien wir ehrlich. Scharfe Kanten sehen so langweilig aus. Aber es gibt noch mehr. Wir werden einige Standardeinstellungen festlegen, um Ihnen das Designleben zu erleichtern Jedes Rechteck, das du zeichnest, wird mit einem Symbol, einem Strich, einer Unterfarbe versehen, müssen es nicht mehr jedes Mal manuell machen. Lassen Sie uns also anknüpfen. Okay, wie Sie sehen können, haben wir dieses langweilige Rechteck, also wählen wir dieses aus. Derzeit hat es wirklich scharfe Kanten, und lassen Sie mich einige abgerundete Kanten hinzufügen. Also lass uns mit fünf gehen. Jetzt sieht es toll aus. Wie Sie unter dem Feld sehen können, haben wir eine Option namens Strokes. Also lass uns auf das Plus klicken. Wir nennen Stroke One, aber wir können beliebig viele zusammenzählen. Meistens entscheide ich mich für zwei, weil zwei subtil und wunderschön aussehen. Okay, wir können die Farbe des Strichs ändern . Wie derzeit ist es schwarz. Meistens kommt es mit Schwarz. Sie können die Farbe ändern. Sie wissen bereits, dass wir in den letzten Jahren gesehen haben, wie man die Farbe ändert und all das. Wenn Sie diese Farbe also nicht möchten, können Sie diese Farbe auch ändern. Danach haben wir diese Option aufgerufen, wir können unseren Strich sowohl innen als auch außen sowie in der Mitte platzieren. Wenn ich also die Mitte wähle, wird, wie Sie sehen können, die Grenze sowohl außerhalb der Grenze als auch innerhalb der Grenze berücksichtigt, und der Strich wird in der Mitte erzeugt. Danach haben wir drinnen. Es erzeugt also einen Strich innerhalb der Grenzen. Und am Ende wissen wir alle, dass es nach außen hin Striche erzeugt. Deshalb ist es draußen. Also werde ich mit drinnen weitermachen. Und das ist gegen die Zunahme von Schlaganfällen. Danach haben wir einen Schlaganfall pro Seite. Wie wir bei den abgerundeten Ecken gesehen haben, können wir bestimmten Kanten einen bestimmten Rundungswert geben. Lassen Sie mich also auf dieses Drei-Punkte-Menü klicken , damit wir viele Optionen haben, z. B. wenn Sie möchten, dass Ihr Strich gepunktet oder durchgehend sein soll Also werde ich mich für so entscheiden , weil Solid super abschneidet und die meisten von einem Solid. Und wir können auch benutzerdefinierte Elemente wie Dottil sowie ein bisschen Solid verwenden wie Dottil sowie ein bisschen Sie können sie auch anpassen. Aber meistens nutzen wir diese Option nicht so oft. Seien Sie sich dessen also bewusst. Okay, eins habe ich vergessen, dir zu zeigen, dass diese Option Schlag pro Seite heißt. Wenn ich zum Beispiel oben wähle, wird der Strich nur oben angezeigt. Wie Sie sehen können, ist der Strich also nur oben verfügbar. So funktioniert es also. Wenn Sie alle Optionen auswählen, können Sie sie auch anpassen. Aber im Moment möchte ich, dass der Strich auf allen Seiten erfolgt. So funktioniert ein Schlaganfall also. Jetzt können wir mehrere Optionen wie mehrere Elemente auswählen wie mehrere Elemente und gleichzeitig Striche anwenden. Klicken wir auf die Strich-Plus-Schaltfläche und ich gebe den Wert auf. Zwei. Und Sie können den Wert auch mit den Pfeiltasten erhöhen oder verringern. Wenn ich die Pfeiltaste nach oben benutze, so wäre der Strich größer. Und wenn ich die Abwärtstasten verwende, der Strich einen geringeren Wert. Also werde ich vorerst zwei nehmen. Okay, so können Sie Striche verwenden, aber es gibt noch mehr Optionen. Nehmen wir an, Sie möchten dieses Ding wie ein kleines Rechteck erstellen , wie eine Werbung oder eine Schaltfläche, also müssen Sie das Ganze immer wieder machen. Also wenn ich diese Dinge nicht immer wieder machen will. Ich kann also das Element auswählen , das ich standardmäßig als Set haben möchte. Also wähle ich vorerst dieses und lassen Sie uns auf den neuesten Stand kommen. Und hier haben wir die Option Standardeigenschaften festlegen, und Sie können sehen, dass der Eigenschaftsstandard aktualisiert wurde. Jetzt kann ich einfach ein Rechteck wählen und ich kann einfach dasselbe zeichnen, also in verschiedenen Größen wie diesem. Ich muss das Ganze also nicht immer wieder neu erstellen . So können Sie also einige Eigenschaften als Standard festlegen. Okay, es gibt also eine Sache, die ich dir zeigen muss , sagen wir, in den meisten I-Frames musst du gesehen haben, dass es einige Linien gibt und was so funktioniert. Und okay, lass mich wieder eine Linie wählen. Okay. Dies zeigt den Platzhalter für das Bild Wenn also jemand Ihr Wireframe durchsucht, wird diese Person es wissen An dieser Stelle müssen wir ein Bild hinzufügen, damit du es wie dieses hinzufügen kannst Okay, manche Leute mögen diese Zeilen oder manche Leute behalten ein Bild als Platzhalter In diesem Fall können Sie Event diese Zeile löschen Lassen Sie uns also ein Bild hinzufügen. Wir können zu diesem Tangle-Tool gehen, und es gibt eine Option namens Bild platzieren, und wir können auch zu dieser Figma-Con gehen, und in der Datei haben wir eine Option namens Bild platzieren Lassen Sie uns dieses verwenden und das Tastenkürzel hat, Sie wissen schon, die Form eines Steuerelements. Ich glaube, ich habe die Shortcut-Liste in den Ressourcen hinzugefügt Sie können auch darauf zugreifen. Lassen Sie uns also vorerst diesen zeigen. Und ich kann MH hier einfach hinzufügen. Sie können die Umschalttaste gedrückt halten, um eine präzise Form zu erhalten. Und ich kann das in der Mitte hinzufügen, wie Tests. Und ich kann das als Platzhalter verwenden. Aber im Moment werde ich das nicht tun. Ich werde diesen löschen und meine Zeilen behalten, weil sie mir sehr gut gefallen. Also werde ich diese Zeilen behalten. Okay, es gibt also eine Sache, die ich vergessen habe, dir zu zeigen. Wie im Shape-Video habe ich dieses Burger-Menü kreiert. Aber es gibt mehr Optionen, weil es scharfe Kanten hat und ich keine scharfen Kanten möchte. Bei Strichen erhalten wir also andere Optionen. Gegenwärtig haben wir keine, aber wir haben Sline Arrow, Triangularo, River Triangularo, River Triangularo, Less Arrow und Diamond Arrow. Und wir können den Rand der Linien auch rund oder quadratisch machen Linien auch rund oder quadratisch Wie Sie sehen können, ist das großartig, aber ich möchte, dass die Kanten abgerundet sind Also werde ich sie alle auswählen und ich werde die abgerundete wählen. Und ich zähle eins, weil es toll und ästhetisch aussieht. Oh, es gibt noch eine Sache, die ich vergessen habe, dir zu zeigen. Nehmen wir an, du willst etwas duplizieren, wir halten Alt gedrückt und wir duplizieren einfach so. Aber nehmen wir an, Sie möchten mehrere Elemente immer wieder duplizieren. Sie können die Shortcut-Anrufsteuerung verwenden. Ich weiß, dass es viele Abkürzungen gibt, aber die Abkürzungen machen uns zu FigMA-Experten Dafür können wir Control D verwenden, sodass diese Dinge immer wieder und wieder dupliziert werden diese Dinge immer wieder und wieder dupliziert und wieder So können Sie Control Short verwenden , um das Objekt zu duplizieren Aber für das Burger-Menü werden wir drei Zeilen beibehalten Ich weiß also, dass manche Leute vier Linien benutzen, aber vier Linien sehen nicht so gut aus, also werde ich mich für drei Linien entscheiden . Und wenn du willst, kannst du diese Linien auch zum Kreis hinzufügen . Aber es hängt ganz von dir ab, aber ich werde so bleiben wie es ist. Aber nehmen wir an, es gibt eine Sache wie zum Beispiel, nehmen wir an, Sie möchten die Eigenschaften eines Kreises kopieren und dieselben Eigenschaften in diese Suchleiste einfügen . Wählen wir also dieses Suchsymbol und lassen Sie mich zunächst die Eigenschaften dieses Dings kopieren. Dazu können wir zum Bearbeiten gehen und die Eigenschaften und die Tastenkombination Steuerelement C kopieren . Okay, lassen Sie uns das kopieren und hier einfügen. Steuerung. Wie Sie sehen können, haben wir alle Eigenschaften kopiert. Und wir haben keine Striche aufgetragen. Es tut uns leid. Wir haben keine abgerundeten Ecken verwendet , weil es sich abgewechselt hat Deshalb haben wir scharfe Kanten, aber das können wir hier reparieren. Oder wir können dieses wählen und die Eigenschaften dieses Rechtecks kopieren und es hier einfügen. Also werde ich vorerst die Standard-Suchleiste wählen , weil sie gut aussieht. Also, hier dreht sich alles um Schläge. Auf diese Weise lernen wir also, wie man Elementen wie Rechteck, Kreis und all dem Striche hinzufügt . Wir lernen auch, wie man die Eigenschaften von Elementen kopiert und in die anderen Elemente einfügt, und wir lernen auch, wie man dieses schön aussehende Mburger-Menü erstellt dieses schön aussehende Mburger-Menü wie man die abgerundeten Ecken dazu hinzufügt Und was lernen wir sonst noch? Äh, wir haben auch gelernt, wie man ein Bild als Platzhalter hinzufügt und welche grundlegenden Dinge wir heute lernen Also das ist richtig für Schlag eins gegen eins. Sie sind jetzt mit der Fähigkeit , Ihren Designs zusätzlichen Spielspaß zu verleihen. Seien Sie gespannt auf mehr Designzauber im nächsten Video, bis Sie weiter kreativ sind und sich einmischen. 13. Was ist der Objektbearbeitungsmodus und wie man ihn verwendet! in figma: Gc design entusias Heute führe ich Sie durch das Reich der Meisterwerke des Objektbearbeitungsmodus Du kennst den Ort mit den gestreiften Linien. Du fühlst dich vielleicht ein bisschen wie ein Design-Leveti. Aber wenn Sie sich dort jemals in einer beschleunigten Falle wiederfinden sollten, haben Sie keine Angst Ich bin hier, um dein Fluchtzauberer zu sein. Warum beschäftigen wir uns also zu Beginn des Kurses damit? Also, wenn Sie wie ich ein Doppelklicker sind, Sie vielleicht unwissentlich in dieses Gebiet gestolpert Verkleinern wir es und lernen, wie wir damit ausbrechen können. Ich befinde mich gerade im Object-For-Modus. Aus Versehen. Stellen wir uns vor, es ist versehentlich. Wenn du da raus willst, kannst du einfach auf die Noman-Zeile klicken Und Sie befinden sich außerhalb des objektiven Modus. Eine weitere Option ist, wenn ich in den Zielmodus wechsle, wird diese Leiste eingeblendet oder die Navigationsleiste wechselt in diesen Zielmodus, und Sie können Aber wenn ich in den objektiven Modus gehe und Sie sehen, dass wir einige Optionen haben, können wir unser Also momentan quadratisch, kann ich diesem Quadrat etwas anderes machen, zum Beispiel kann ich daraus einen Don machen oder ich kann die Form ändern, wenn ich auch etwas Ähnliches machen kann, sagen wir, ich möchte diese Seite darum herum machen, also kann ich es so ziehen Ich kann es nach außen oder nach innen ziehen , um diese seltsame Form zu erzeugen. Okay, nehmen wir an, Sie möchten dieses Feld entfernen. Sie können also dieses Pin-Bucket-Tool wählen, die Abkürzung ist für dieses B. Also, die Abkürzung ist für dieses B. wie Sie sehen können, verwandelt sich das Symbol oder der Cursor in diesen Tropfen. Und in diesem Dropdown haben wir einen Minus-Knopf. Als ob es ein Minussymbol hätte. Wenn ich darauf klicke, kannst du sehen, dass das Feld entfernt wurde. Aber wenn ich es erneut hinzufügen möchte, kann ich einfach darauf klicken, und standardmäßig wird Grau ausgewählt. Sie können dort auch die Farbe ändern. Sie wissen bereits, wie man die Farbe ändert. Also werde ich mich jetzt für diesen entscheiden. Okay, ich bin wirklich besessen von diesem Industriegebiet. So können Sie Objektbearbeitungsmodus verlassen Nehmen wir jedoch an, Sie möchten absichtlich in den Objektbearbeitungsmodus wechseln. Was Sie tun können , ist, dass Sie das Element oder die Form auswählen und auf diese Schaltfläche klicken können , wie auf die quadratische gepunktete Schaltfläche Sie befinden sich jetzt also im Objektbearbeitungsmodus. Sie können ein Objekt wie dieses bearbeiten. Du kannst alles damit machen, lass uns etwas Seltsames machen. Oh, ich habe P. gemacht Oh, nicht das P., das ich im Alphabet gemacht habe. Okay. So können wir also aus dem objektiven Modus herauskommen und Dinge, die Sie mit objektiver Bearbeitung mehr tun können Also werde ich dieses Meisterwerk löschen. Es erfüllt seinen Zweck. Nun seid ihr mit dem Wissen ausgestattet, was der objektive Modus ist und wie ihr ihn würdevoll hinter euch lassen könnt . Also das ist das Porto-Video, und ich werde euch im nächsten sehen 14. So verwenden Sie das Skalierungs-Tool und die Auswahl in Figma: Ordnung, Designer, lassen Sie uns das Geheimnis der Skalierung im Vergleich zum Auswahlwerkzeug in Figma Vertrauen Sie mir, es ist ein bisschen skurril, und ich habe Ihnen beim Navigieren durch die Acht den Rücken freigehalten Zunächst haben wir ein Auswahltool. Oh, das ist das P. Ich leite ein P weiter lösche ein P. Okay, es ist jetzt gelöscht. Nehmen wir dieses Rechteck und dublieren wir dieses. Wenn ich versuche, nach unten zu skalieren, indem ich die Shift-Taste gedrückt halte, wie du siehst, wird das Banner komisch Es versucht, eine Zeichenfolge zu erstellen, aber es funktioniert nicht, und es ist derzeit für Größen von acht verfügbar, also bleibt es 48. Also, wie können wir unsere Objekte oder Elemente in Figma genau verkleinern unsere Objekte oder Elemente in Figma genau Lassen Sie mich das also zuerst rückgängig machen. Gehen wir also zum Auswahlwerkzeug und unter dieser Bewegung haben wir die Skalierung. Also, wenn ich Skalierung wähle und wenn ich die Umschalttaste gedrückt halte und wenn ich sie verkleinere Wie Sie sehen können, haben wir unser Scrolling aktiviert, und Sie können auch das Gegenteil tun, also Sie können es groß oder klein machen Mit dem Auswahlwerkzeug passiert also die Magie, die proportionale Skalierung von allem, Strich und dem Typ Aber manche Leute denken vielleicht, sagen wir, Sie sind Designer arbeiten mit Photoshop oder Anova. Und lass ein paar Texte rüber. Und du denkst vielleicht, lass uns sie gruppieren. Wenn du sie gruppierst, wird es funktionieren. Ich weiß. Ich weiß es auch. Aber wenn ich sie gruppiere, sagen wir, die Fotogruppe kontrolliere. Und wenn ich versuche, sie zu gruppieren und sie zu zerbrechen oder zu verkleinern, wie Sie sehen können, sinkt sie oder sie wird groß, auf seltsame Weise, nicht so, wie wir es seltsame Weise, nicht so, wie wir Es funktioniert also nicht, wenn wir Dinge gruppieren. Und ja, dafür gibt es auch eine Abkürzung. Ich weiß, dass du vielleicht an Skalierung denkst. Aber nein, es ist ein Auswahlwerkzeug für K. Ich weiß. B ist die Logik, aber es ist berühmte Methode für das Auswahlwerkzeug und K für die Skalierung. Also für die Auswahl. Also momentan wähle ich das alles aus. Es ist also ausgewählt und K steht für Auswahl. Ich verspreche dir, dass du am Ende dieses Kurses zuschlagen und K ein Sklave sein wirst. Jetzt sind Sie mit diesem Wissen über Fähigkeiten und Auswahl gewappnet und Auswahl Gehen wir weiter zum nächsten Video. Steckt uns fest, meine Design-Kollegen. 15. Figma-Gruppen und Frames für bessere UI-Designs: Willkommen Studierende. Das heutige B wird uns tief in das Reich von Figma Erkunden Sie die Nuance zwischen Gruppe und Frames. Baggala, weil wir ein etwas komplexeres Gebiet betreten etwas komplexeres Gebiet betreten Aber fürchte dich nicht. Ich bin hier , um dich durch die Sache zu führen. Bis Sie sich durch die Grundlagen gekämpft haben und hier die Typen, Schriften, Rechtecke und Werkzeuge festgelegt haben, aber jetzt wollen wir es zu etwas mehr machen Willkommen in der Welt der Frames. Ich weiß, dass ich dieses Thema zu Beginn des Kurses einführe weil MusteringFrames eine der mtricsFMA-Herausforderungen war , und ich möchte sicherstellen, dass Sie der Zeit immer einen Schritt Lassen Sie uns zunächst die Beherrschung von Gruppen enthüllen. Nehmen wir also eine rechteckige Ellipse sowie den Stern Wie Sie im Burger-Menü sehen können, sind dies die Formen, die wir hinzugefügt haben, aber diese Dinge sind nicht organisiert, und Sie können auch alle Dinge auf der Startseite sehen , die Linien, Rechtecke, die Zeile Nummer zehn, das Rechteck zehn Es ist also etwas verwirrend und es ist gut organisiert. In diesem Fall können wir also alle auf diese Weise auswählen, und wir können versuchen, darauf zu klicken und dann einfach auf die Gruppenauswahl zu klicken. Jetzt sind sie eine Gruppe. Nehmen wir an, Sie möchten das in Richtung Interpag verschieben Du kannst es einfach so verschieben. Mit einem einzigen Klick. Sie müssen es nicht immer wieder so ziehen und ablegen, sodass Sie dies gleichzeitig tun können. Das ist also der große Vorteil der Gruppe. Dadurch wird unser Design so gut organisiert, wie Sie es im Ebenenfenster sehen können. Jetzt haben wir einen Abschnitt namens Gruppe, und das Symbol dafür ist mit einem Quadrat versehen Und darin haben wir unsere Formen. Wir können es nach Ihrem Design umbenennen. Aber vorerst werde ich so bleiben, wie es ist. Nehmen wir an, Sie möchten das organisieren, wie im Design. Sie können also einfach darauf doppelklicken und es einfach so verfolgen. Ich weiß, dass wir das gemeinsam machen können. Aber dieses Thema ist etwas fortgeschrittener, würde ich sagen. Okay, so können wir also unsere Elemente und Objekte miteinander verbinden. Okay, das ist der einzige Vorteil der Gruppierung. Sie können auch das Kurzwort Control G verwenden. Lassen Sie mich das gruppieren, klicken Sie mit der rechten Maustaste und heben Sie die Gruppierung Und wenn ich okay auswähle, heißt es jetzt Gruppierung aufheben. Wenn ich sie alle auswähle und einfach Strg G drücken kann , sind sie jetzt alle gruppiert Lassen Sie uns nun in die Frames eintauchen. Okay, jetzt haben wir diesen kleinen Navigationsbereich oder Navigationsbereich, in dem wir viele Schaltflächen haben. Derzeit habe ich nicht erwähnt, um welche Art von Tasten es sich handelt, aber stellen wir uns vor, dies ist die Home-Taste. Das ist eine Kategorienschaltfläche. Dies ist eine Bestellschaltfläche. Das ist mein Konto-Button, und das ist vielleicht der Karten-Button. Okay, also lass uns sie rahmen. Es ist derselbe Prozess. Wählen Sie alle Elemente aus und klicken Sie mit der rechten Maustaste darauf und wählen Sie den Rahmen aus. Und Sie können auch die Tastenkombination Strg G verwenden. Okay, das ist jetzt der Rahmen. Wenn ich in ein Ebenenfenster gehe, können Sie sehen, dass dies der Rahmen ist und das Symbol ebenfalls geändert wurde. Okay, wir haben also diese verschachtelten Elemente darin, und das sind die anderen Formen und Objekte Wir können dieselben Dinge tun , die wir mit Gruppen gemacht haben. Wir können sie so arrangieren oder wir können nach draußen gehen. Derzeit ist das aus dem Rahmen geraten. Wir können es gebunden arrangieren und all das. Wir können alle die gleichen Dinge tun. Aber mit Frames erhalten wir mehr Funktionen wie Clip-Inhalte und Einschränkungen. Lassen Sie mich Ihnen nun zeigen, welche Art von Funktion wir mit Frames erhalten. Ich habe also diesen Klon von Instagram. Es ist wirklich ein einfacher Klon. Derzeit haben wir also diesen horizontalen Story-Abschnitt, und ich möchte nicht, dass dieser Abschnitt so sichtbar ist wie dieser Außenrahmen. Ich kann also auf den Inhalt des Clips klicken. Und ich kann es einfach so verfolgen. Und wenn ich mir einen Prototyp ansehe, können Sie sehen, dass ich dazu in der Lage bin. Ich kann diesen auch machen. Das ist also der Vorteil von Clip-Inhalten, und am Ende ist es der Frame. Wie Sie in einem kleineren Fenster sehen können, handelt es sich also um den Rahmen. Okay, das ist die Superkraft von Clip-Inhalten, aber es gibt eher Frames, die das Konzept der Beschränkung einführen Okay, lassen Sie uns jetzt über die Einschränkungen sprechen. Okay, wir haben also diese Gruppe. Lassen Sie mich zuerst die Gruppierung dieser Gruppe aufheben. Okay, das ist jetzt ngroup und lass mich alle auswählen Lass es mich ein bisschen verkleinern. Lass es uns hierher bringen. Und ich habe auch unseren Markennamen Click Card hinzugefügt. Nun, diese Elemente sind sowohl nicht gruppiert als auch nicht gerahmt. Lassen Sie mich also alle auswählen. Und klicken Sie mit der rechten Maustaste und wählen Sie den Rahmen aus. Nun, sagen wir, ich möchte, dass dieses Element oder dieser Text auf der linken Seite auch oben sein soll. Also werde ich zu einer Sekte gehen und nach links und oben gehen. Das ist die Grundeinstellung. Jetzt wähle ich rechts und oben und dieser sollte ganz oben sein, dieser sollte ganz oben sein. Wenn ich es zum Beispiel groß oder klein mache, muss es an der gleichen Stelle auf der rechten Seite bleiben. Dieses Element sollte auf der rechten Seite bleiben und dieses Element sollte auf der linken Seite bleiben. Lassen Sie mich dieses duplizieren. Und wenn ich importiere, tut mir leid, wenn ich einen Dextop-Pitch wie diesen hinzufüge, und wenn ich ihn hier hinzufüge, wenn ich versuche, das zu erweitern , so wie Sie sehen können, kann ich mein Element immer wieder Das ist der Vorteil von Einschränkungen. Und denken Sie daran, eine Sache. Wenn Sie die Gruppierung des Frames aufheben möchten, gibt es eine Option namens Die Gruppierung ist jetzt aufgehoben. Und es hat auch mit Gruppen funktioniert, sagen wir, Sie haben ein Element Nehmen wir an, das sind die Gruppenelemente. Okay. Und wenn Sie das auch gruppieren möchten, verwenden Sie dieselbe Methode. Gruppierung wird sowohl für Rahmenauswahl als auch für die Gruppenauswahl Okay, lass mich diesen anzünden, weil wir diesen nicht benutzen. Okay, das hat es auch getan. Also das ist die Einschränkung. Ich weiß, es war ein bisschen verwirrend, wie die Beschränkung und der Inhalt des Clips. Aber wenn du es immer wieder benutzt, wirst du dich daran gewöhnen und es wird eines deiner Lieblingswerkzeuge werden. Ich weiß, dass ich dieses Thema schon früh eingeführt habe , denn je weiter Sie in FiMMA vorankommen, werden Sie überall auf Frames stoßen Sie werden aufgrund ihrer zusätzlichen Funktionen wie Einschränkung, Variante und mehr, zur bevorzugten Wahl aufgrund ihrer zusätzlichen Funktionen wie Einschränkung, Variante und mehr, , auf die wir in zukünftigen Themen in zukünftigen Videos näher eingehen werden zukünftigen Themen in zukünftigen Videos näher eingehen Nächstes Mal fragst du dich, warum das kostenlose U-Artikelschild voller Rahmen ist. Sie werden es wissen, weil Frame-Profis bei ihnen waren. Sie haben nur die Oberfläche der Rahmen und Rillen zerkratzt der Rahmen und Rillen wir vorankommen, desto toller werden die Dinge werden , nicht komplizierter Machen Sie sich jetzt die Verwirrung zu eigen, und schon bald werden Sie Rahmen schweißen wie ein Designgenie. Bist du bereit für weitere Figma-Abenteuer, weil ich es bin? Lassen Sie uns also in das nächste Video eintauchen und weitere Designgeheimnisse entdecken. Also bleib neugierig 16. Skillshare 101: Projekte einreichen und deine Arbeit präsentieren: Die kreativen Köpfe heißen zurück zur Figma Master Class. In dieser Feigen-Meisterklasse ist mein Ansatz, durch Handeln zu lernen Heute tauchen wir in den aufregenden Teil der Reise ein. Das ist das Einreichen unserer Projekte in Skillshare. Sie haben also diese Designfähigkeiten unter Beweis gestellt und der realen Welt erobert Jetzt ist es an der Zeit, dein Meisterwerk mit der Welt zu teilen. Also hier, wie du es machen kannst. Sobald Ihr Projekt abgeschlossen ist, ist es an der Zeit, es mit der Welt zu teilen. Reichen Sie Ihr Meisterwerk bei Skills ein. Inspirieren Sie andere mit Ihrer einzigartigen Kreation. Lassen Sie mich Ihnen sagen, wie Sie Ihre Projekte einreichen können. Okay, während des gesamten Kurses streue ich einige Designherausforderungen wie diese ab. Und in dieser Design-Herausforderung habe ich alles erwähnt, zum Beispiel, was Sie bei dieser Design-Herausforderung tun müssen , alle Anweisungen finden Sie hier. Außerdem gibt es ein P oben im Ressourcenbereich. Wenn wir also zu Projekt und Ressource gehen, gibt es einen Zile, der es herunterlädt und für es öffnet Und darin haben wir eine Übungsdatei für das UX- und UI-Design von Figma. Gehe zu dieser Datei Und wie Sie sehen können, gibt es kleine Designherausforderungen. Diese Design-Herausforderung wird Ihnen helfen , Figma und X-Design zu lernen Ich schätze, es gibt insgesamt 18 kleine Projekte, mehr kleine Designherausforderungen Und danach habe ich hintere Word-Projekte angehängt. Das erste hintere Projekt ist Click Cart. Das heißt, wir werden diese App entwerfen. In diesem Abschnitt müssen Sie das Projekt nur im Projektbereich einreichen. Ich lasse Sie zuerst wissen, wie Sie das einreichen können. Lassen Sie mich Ihnen von den anderen Projekten erzählen. Dann haben wir Projekt Nummer zwei. Bleib. Dies ist das Hostel, in dem Sie ein kleines Hostel buchen können , wenn Sie in einem anderen Land Urlaub machen. Dann haben wir eine App für die Lieferung von Lebensmitteln. müssen Sie App-Bots entwerfen Danach müssen Sie App-Bots entwerfen, wir haben MCA, Sie können Aflac Spotify entwerfen. Danach müssen Sie die App oder Website selbst entwerfen In diesem Projekt werde ich dir überhaupt nicht helfen. Aber für jedes Projekt habe ich alle Anweisungen gegeben, zum Beispiel, was Sie tun müssen, wo Sie sich Inspiration holen können, wo Sie sie einreichen können und welche Technik, welche Art von Feigenmatrizen Sie anwenden müssen , um dieses Projekt abzuschließen Das sind also die Feuerwort-Projekte. Das musst du tun. Lassen Sie mich Ihnen jetzt sagen, wie Sie es einreichen können. Nehmen wir an, Sie haben dieses Wireframe entworfen. Jetzt möchtest du das bei einem Ski-Share-Programm einreichen. Du willst das der Welt zeigen. Damit wir einfach Ski fahren können gibt es einen Abschnitt namens Summit Project. Leck das an. Und du kannst ein Thumilkin-Bild hinzufügen. Sie können einen Screenshot davon machen. Lass mich dir zeigen, wie du das machen kannst. Machen Sie einen Screenshot von Ihrem Design und reichen Sie ihn dann hier ein, laden Sie das Bild hier und Sie können einen Projekttitel angeben, so wie dieser Projekttitel Wire Frame ist. Sie können also einen Projekttitel wie Rahmen für den Klickkorb hinzufügen und danach eine Projektbeschreibung hinzufügen, so wie Sie es in diesem Projekt gemacht haben. Und danach können Sie einen Link davon hinzufügen, aber ich sage Link hinzufügen für Projekte auf der Rückseite, weil sich diese Projekte dann verhalten. Ich weiß, dass es viele Studenten gibt, die viel kreativer sind als ich Sie können den Bildschirm aufnehmen, z. B. wie Ihre App funktioniert, wie sie angezeigt wird, wie sie mit dem Benutzer interagiert , und ihn hier hinzufügen, und wir werden dieses Projekt auch privat machen und den Text wie Webdesign, X, Figma hinzufügen X, Figma Und danach das Projekt einreichen. Ich werde dir eine Sache sagen. Wenn Sie kleine, kleine Designherausforderungen entwerfen. Dann können Sie sie privat machen. Also kann ich sie wohl nur beobachten. Also kann ich sie nur beobachten, wie es uns in diesem Kurs geht. Und wenn ich Ihre echten Eisenbahnprojekte der Welt zeigen will , dann können Sie es einreichen, dann müssen Sie es nicht privat machen. Die Skulpturen-Community ist hier, um Sie bei jedem Schritt auf Ihrem Weg zu unterstützen. Tauschen Sie sich mit anderen Lernenden aus und tauschen Sie sich vor Kurzem aus. Ich feiere die Leistungen des jeweils anderen. Denken Sie daran, dass dies nicht nur eine Projektherausforderung ist. Es ist eine Gelegenheit für Sie, zu wachsen, lernen und Ihre Fähigkeiten einem weltweiten Publikum zu präsentieren. Also bist du bereit, dich der Herausforderung zu stellen? Lassen Sie Ihrer Kreativität noch heute bei Cm project freien Lauf. Stellen Sie sich jetzt der Herausforderung des Skulpturenprojekts und werden Sie Teil der Wron-Community von Entwicklern Ist Ihr Potenzial und machen Sie mit Ihrem Projekt ein bleibendes Haustier Ich kann es kaum erwarten zu sehen, was ihr alle kreiert. Denken Sie daran, Ihre Reise besteht darin, ein Figma-Experte zu werden. Lassen Sie uns gemeinsam etwas Magisches im Design kreieren. 17. Kursprojekt 01 Wireframe: Create erinnert uns daran, dass Projektzeit ist und wir gemeinsam in etwas Großartiges eintauchen Sie haben es also mitgemacht. Und vielleicht befinden Sie sich in ähnlichen Phase oder vielleicht ein bisschen zurück Keine Sorge, wir machen das zusammen. Egal, ob Sie auf derselben Wellenlänge sind oder ein wenig aufholen müssen, lassen Sie uns diese Freunde einbeziehen. Jetzt möchte ich, dass du es etwas nah an meinem Layout hältst. Auch wenn du denkst, vielleicht nicht da. Lass uns drüber schlecken. Warum? Nun, es hilft Ihnen, diesen Kurs reibungslos zu verfolgen. Diese Übungen sind nur der Schlüssel zur Erkundung all der coolen Funktionen, die FMA zu bieten hat Überprüfen Sie jetzt Ihre CIS-Datei, dort gibt es einen Abschnitt mit dem Namen FMA-Übungsprojekte Öffne es und los geht's. Die Anforderungen für verschiedene Klassenprojekte sind übersichtlich angeordnet Nutze nun die Fähigkeiten, die du dir bis jetzt angeeignet hast, und deine Kreation sollte einem Beispiel ähneln. Für einen genaueren Blick zoomen Sie in das PNG hinein. Es ist auch in der Übungsdatei mit den Ressourcen enthalten. Es gibt also eine große Pj-Version, die, glaube ich, Clickt Wireframe heißt glaube ich, Clickt Lassen Sie uns nun über die Anforderungen sprechen. Wir streben etwa sechs Seiten an. Die sind wie eine Intro-Seite. Das ist wirklich einfach nach der Startseite, der Burgermenü-Kategorie, meinem Konto und meinen Bestellungen zu gestalten der Burgermenü-Kategorie, meinem Konto und meinen Bestellungen Und wenn Sie kreativer werden möchten, können Sie eine Seite wie eine Tracking-Seite sowie, sagen wir, Produktdetails hinzufügen sowie, sagen wir, Produktdetails Sie können diese Seite auch erstellen. Und denken Sie daran, dass wir bei der Entwicklung von WiFre sowohl einfache Formen als auch einfache Punkte verwenden als auch einfache Punkte Verwenden Sie keine wirklich flippigen Schriften. Und nachdem Sie Ihr Projekt abgeschlossen haben, machen Sie einen Screenshot. Für PC-Leute ist es wie auf dem Printbildschirm, und für Mac-Leute ist es wohl Komaschiff Vier. Und wenn du irgendwo verloren hast, dann ist Google dein Freund. Du kannst auf Google suchen oder es ist eine Abkürzung für einen Screenshot. Und wenn Sie keinen Screenshot machen möchten, können Sie einfach ein Bild mit Ihrem Smartphone aufnehmen und es in den Projektbereich hochladen. Ich weiß, es klingt nach ein bisschen mehr Hausaufgaben, aber vertrau mir. Es ist es wert. Wir verbessern unsere Fähigkeiten, lernen die Grundlagen und werden gemeinsam besser Also Wireframe-Krieger, ich werde euch im nächsten Video sehen Also fertig gesagt, Design. 18. Die besten kostenlosen Icon-Set-Pakete für UIUX-Designer: Designerkollegen. Lassen Sie uns heute in die Schatzkammern der kostenlosen Symbole eintauchen und besprechen, wo wir sie finden können. Ich werfe dir nicht einfach den Namen der Website vor. Stattdessen werde ich Ihnen zeigen, worauf Sie beim Herunterladen von Symbolen für Ihre Figma-Projekte achten müssen beim Herunterladen von Symbolen für Ihre Figma-Projekte Mein Ziel ist die Figma-Community. In dieser Hinsicht verfügen wir über fantastische Ressourcen mit einer Mischung aus kostenlosen und Premium-Inhalten Das Internet arbeitet jedoch mit den kostenlosen Symbolen zusammen. Erkunden Sie also und finden Sie heraus, was am besten zu Ihnen passt. Gehen wir jetzt zur Figma-Community und erkunden wir einige kostenlose Symbole Okay, wie Sie sehen können, befinden wir uns derzeit in Projekten Wenn ich also nach Hause gehe, gibt es eine Option namens Explore Community, oder Sie können auch von hier aus darauf zugreifen. Und für Gemeinschaft ist das Symbol eine Art Globus, eine Art Internet-Kugel. Und von hier aus können Sie auf alle Arten von Objekten wie Icons, verschiedene Projekte und Wireframes zugreifen alle Arten von Objekten wie Icons, . Was auch immer Sie wollen, hier bekommen Sie alles. Also lass mich hier ein paar Icons finden. Also, wie Sie sehen können, haben wir hier ein paar Icons. Dies sind die Icon-Packs. Dieses enthält 1.000 kostenlose Icons. Sie können sehen, dass dieses Telefon 6.000 Icons enthält, und das ist für diese Art von Soft-Reifen geeignet, wie das Pigma Sketch oder XD und andere auch einige Schluchzreifen Du kannst sie auch nach Gratis-Pad oder Premium sortieren Gratis-Pad oder Derzeit werde ich kostenlos wählen. Du kannst Plugins auch im nächsten Video oder wahrscheinlich nach zwei Videos verwenden . Ich werde dir erklären, wie man Plugins benutzt , weil Plugins sehr einfach zu verwenden sind und du sie nur per Drag & Drop ziehen musst. Anstatt dies zu verwenden, können Sie Plugins verwenden. Okay, du kannst das auch nach beliebten und aktuellen Zügen sortieren . Meistens verwende ich beliebt. Weil wir im Bereich „Beliebt“ viele Icons bekommen , die die Leute lieben. Meistens benutze ich dieses wie Bazel und dieses Einhornmodell Soweit jetzt, lassen Sie uns mit Lünetten gehen . Ich glaube, ich verspreche es richtig. Okay. Also ich schätze, ich benutze das schon, deshalb zeigt er offenen Rauchschaum. Aber manche Leute könnten diese doppelte Option bekommen. Wenn Sie also ein Duplikat sehen, können Sie es duplizieren, aber derzeit ist es in Figma weniger geöffnet und es wird ein neues Projekt geöffnet Und darin werden wir viele Icons bekommen. Ich kann also sehen, dass wir eine Menge Icons bekommen. Das ist die Gliederung. Das sind die festen Symbole. Nehmen wir an, Sie möchten dieses Symbol wie dieses Home-Icon verwenden , können Sie es einfach wie Copy Contras kopieren und es einfach in Ihr Design einfügen Okay, wir haben also dieses Home-Icon. Wir können es einfach hier verfolgen, weil das unser Home-Bereich sein wird , wie die Home-Taste. Wie Sie sehen können, haben wir ein lila rautenförmiges Symbol auf unserem Symbol. Wie im Panel können Sie das hier verknüpfen. Das ist die Komponente. Die Komponente ist wie ein Zusatzthema. Wir werden dieses Thema in zukünftigen Videos behandeln . Stadion dafür. Denken Sie also daran, dass dies die Hauptkomponente ist und wir sie einfach direkt verwenden können , wann und wo immer wir wollen. Gehen wir jetzt und lassen Sie uns einige weitere kostenlose Symbole verwerfen. Okay, es gibt also einige Websites wie Icon Scout. Auf dieser Website können wir alle möglichen Dinge finden, die mit EIUX zu tun Das ist auch wie in der FMA-Community, aber das sind die sortierten und beliebten Vorlagen auch hier verfügbar sind. Der nächste ist die freie Auswahl. Okay. Also lass mich ein Element von hier herunterladen. Nehmen wir an, ich nehme diesen. Es gibt also eine Option namens PNG, und wir können diese herunterladen. Lassen Sie uns vorerst mit PNG arbeiten. Okay. Und lass mich auch das SVG herunterladen. Ich denke, es gibt keine Option. Aber lassen Sie mich eine SVG-Datei herunterladen. Okay, momentan bin ich auf der Icon Finder-Website. Wir erhalten also beide Optionen wie PNG-Datei und SG-Datei. Und in anderen haben wir auch andere Optionen. Aber vorerst möchte ich die SVG-Datei herunterladen. Laden wir also die SVG-Datei herunter. Und lassen Sie mich diese Dateien in unser Projekt importieren. Diese ist die SG-Datei und diese ist die PNG-Datei. Lass es mich hier drüben vorbei. Ich warte, ich habe keine Schicht gehalten, aber vorerst werde ich Schicht halten. Okay, wir haben also das PNG und wir haben auch SG. Aber mit SVG können wir viele Dinge tun. PNG ist nur ein Bild. Mit PNG kann man nicht viele Dinge machen. Aber mit SEG können Sie viele Dinge tun. Derzeit hat es diesen breiten Hintergrund. Okay, lass mich das aus dem Rahmen herausholen. Okay, wir haben also dieses G-Symbol. Mit dieser SVG-Datei können wir also den Strich erhöhen, sagen wir, ich möchte, dass der Strich fünf ist. Ich kann auch die Farbe des Strichs ändern. Nehmen wir an, ich möchte, dass es weiß ist, ich kann es auch weiß ändern und ich kann es auswählen und es wird nicht an Qualität verlieren, wenn ich es so stark erhöhe, bleibt es gleich. Aber wenn ich die PNG-Datei vergrößere, wie Sie sehen können, wird das Pixel irgendwie verschwommen, aber bei der Datei ist das nicht der Fall Okay, das ist der Unterschied zwischen PNG- und SVG-Datei. Denken Sie also daran, wenn wir Symbole verwenden. Verwende kein PNG. Ich werde sagen, verwende SVG-Dateien. Okay, hier finden Sie alle Arten von Symbolen für Ihre Projekte. Ich gebe dir alle Links in den Ressourcen. Also schau dir das an. Also das ist die UX-Bibliothek, das ist Icons Cot. Das ist die La Pannja. Und die Gratisauswahl nach dem Icon findest du bei uns. Dies sind also einige kostenlose Ressourcen Sie für Ihre Projekte verwenden können. Und diese sind völlig urheberrechtsfrei. Sie können sie direkt verwenden. Bevor Sie jedoch ähnliche Symbole verwenden, Sie daran, dass das Symbol kostenlos ist oder nicht. Nehmen wir an, Sie importieren einige Symbole aus Icon-Scout. Es wird sto sein. Die Nutzung ist kostenlos oder es handelt sich um eine kommerzielle Nutzung oder um eine persönliche Nutzung. Also mach das und benutze Accordum dazu. Das. So können Sie den Import und die Ressourcen für Icons herunterladen . Lassen Sie uns nun im nächsten Video unser Wireframe mit einigen Symbolen aufpeppen . Also bleib kreativ 19. Grundlagen von Icons in Figma: In früheren Jahren haben wir gelernt wie man kostenlose Symbole herunterlädt und wo man sie bekommt Wir haben auch den Unterschied zwischen PNG und SVG gesehen. Wir haben auch die Community und die Pigma-Community verworfen und wir haben auch einige andere Ressourcen gesehen In diesem Gebäude werden wir also tatsächlich CoS in unserem Drahtgestell verwenden Deshalb schauen wir uns unsere PMMA-Zugangsdatei an, um einige COs einzubeziehen und sicherzustellen, dass sie mit unserem bestehenden Design harmonieren Lassen Sie uns also dafür sorgen, dass sie in unserem gesamten Drahtgestell glatt und einheitlich aussehen unserem gesamten Drahtgestell glatt und einheitlich Also bist du bereit? Also lass uns reinspringen. Gehen wir also zu unserem Rechteckwerkzeug und platzieren das Bild. In dieser Access-Datei wird es also eingefaltete Clickard-Symbole geben, also schiebe sie alle auf und platziere sie eins nach dem anderen hier. Okay, das sind also fünf Symbole. Okay. Wie Sie sehen können, haben wir hier einen Ort D hinzugefügt, und das ist der Rahmen. Also lass mich dieses rechteckige Feld löschen. Okay. Lass mich das auswählen und okay. Jetzt wird der erste unser Zuhause sein. Square, ich werde mein Home-Icon platzieren. Danach werde ich die Kategorie platzieren. Danach meine Bestellung, und das ist zur Benachrichtigung, und das hier ist für unser Profil. Okay, momentan ist die Größe der Icons, ich würde sagen, die Breite beträgt 22 Punkt z Eins. Die Höhe beträgt 20 9117. Wenn ich das erhöhen oder verringern möchte, kannst du es hier ändern. Okay, sagen wir, ich möchte auf etwa 30 steigen, also kann ich einfach auf 30 gehen und es wird sowohl die Breite als auch die Höhe erhöhen. Das hängt ganz von deinem Design ab. Aber vorerst werde ich es so lassen, wie es ist, weil es großartig aussieht. Okay, also lass uns sie zuerst benutzen. Dies ist der Ausrichtungsbereich, in dem Sie alles in Figma ausrichten können Wenn Sie auf dieses Menü mit drei Balken klicken, das wie vertikale Balken aussieht, gibt es eine weitere Option wie „gebunden Es wird also gemäß unserem Design zusammengebunden, und Sie können es auf diese Weise in die Mitte bringen, und Sie können sehen, dass die Unterseite nicht so gut angepasst ist, also klicken wir auf die untere Einstellung. Und das ist jetzt angepasst. Wir können das auch in der Mitte ausrichten, so wie hier. Unser Home-Icon ist nicht so groß, also lass mich es groß machen, weil andere Icons ungefähr 35 sind und dieses etwa 27. Lassen Sie mich dieses auswählen. Dies sind die Beschränkungseigenschaften, wenn ich diese Option auswähle und wenn ich den Wert für Breite ändere, sodass hier automatisch Höhe und Größe angepasst werden. Derzeit haben alle unsere Symbole die gleiche Größe. Nehmen wir an, dieses Profilsymbol sieht klein aus Sie können es auch hier vergrößern. Bisher bleibe ich bei *** Lassen Sie mich das erneut auswählen und den unteren Teil anpassen. Sie sich also keine Sorgen, wenn wir das im Abschnitt nicht verstehen können . Ich werde ein heikles Video darüber machen. Im Moment verstehe ich nur, dass der In-Bereich dazu dient, unsere Symbole auszurichten. In diesem Video lernen wir gerade, wie man Icons importiert und wie man sie anschaut. Okay, das ist also unser Abschnitt. Lassen Sie uns also alle auswählen, wie diese Navigationsleiste, sowie die Symbole. Nun verschieben und wählen Sie alle aus, sowie dieses Rechteck und das rechte Bein, und machen sie zu einem Rahmen. Lass mich dir hier einen Zauber zeigen. Nehmen wir an, ich möchte dieselbe Navigationsleiste auch hier auf dem Burger-Menü haben. In diesem Fall kann ich einen traditionellen Schritt machen einen traditionellen Schritt Ich mache alles noch einmal. Sie können aber auch etwas anderes tun, z. B. diesen Rahmen auswählen. Wie Sie in einem Panel sehen können, ist es ausgewählt. Drücken Sie jetzt einfach C und wählen Sie das Burger-Menü. Sie müssen das Burger-Menü auswählen und es einfach hier einfügen. Wie Sie an derselben Position sehen können, haben wir diese Navigationsschaltfläche eingefügt Was das angeht, wir können es hier machen, aber Tate hat das zuerst gemacht Ich kategorisiere. Und das auch auf meinem Konto. Dile Ich habe den direkten Tiger gelöscht, also lass mich alle löschen. Ich denke, das ist kein Frame. Okay. Also lass mich auch diesen löschen, und Pasta Control und auch meine Bestellungen. Okay, so können wir unsere Symbole in unseren Drahtrahmen einfügen . Aber lassen Sie mich die Farbe ändern. Ich werde nicht mehr Einwände erheben. Okay, die Farbe wird also diese sein, weil ein Trade nicht so ästhetisch aussieht, sollte das ein Weiß sein. Und weil wir in der Bergme-Sektion sind. Ich denke also, dass wir im Bereich Burgom diese Navigationsleiste nicht benötigen, also werde ich diese löschen Okay. Okay, Bild vier ist leer. Also sind wir derzeit in der Kategorie. Also sollte die Kategorie L sein. Und das hier ist L. Lass mich dieses weiße weiße Weiß weiß machen . Und das ist mein Konto. Also dieses Profil sollte L sein und das sollte weiß sein. Das gleiche gilt für diesen. Okay, das ist also unsere Navigationsleiste. Also der Benutzer wird es in diesem Abschnitt wissen, sagen wir mal, ob er auf der Startseite ist. Das bedeutet also, dass wir uns auf der Startseite befinden , wenn wir in der Kategorie Dieses Symbol zeigt also an, sind. Dieses Symbol zeigt also an, dass wir uns danach im Kategoriebereich befinden, in meinem Profil als auch in meinen Bestellungen. Schüler, auf diese Weise können Sie Ihrem Iframe oder Ihren UI-Designs Symbole hinzufügen Ihrem Iframe oder Ihren UI-Designs Das ist also der Ford Will und wir sehen uns im nächsten 20. So installierst und verwendest du Plugins in Figma: Hallo, Design für Ias. Dabei tauchen wir in die geheime Quelle ein, die Figma so unglaublich macht Das ist Plug In. Dieses raffinierte Tool wurde von Dragals außerhalb von Figma erstellt Erweitern Sie die Funktionen der Plattform sodass Sie mehr erledigen und effizienter arbeiten Wir werden uns vorerst auf einige Plug-ins konzentrieren. Aber denken Sie daran, es gibt eine ganze Welt von Plugins, alle über die Figma-Community zugegriffen werden Es gibt also drei Optionen, mit denen wir Plug-ins verwenden können. Wie beim ersten können wir auf dieses Figma-Symbol eingehen. Es gibt eine Option namens Plugins. Dies sind einige installierte Plugins in meiner Figma. Im Moment kannst du zu dieser Schaltfläche gehen. Hier geht es um Ressourcen. Und hier können wir zu Plugins gehen und nach verschiedenen Arten von Plug-ins suchen, und wir können sie auch mit einem Lesezeichen versehen und wir können sie direkt anklicken und wir können sie verwenden Nehmen wir an, ich möchte ein Profilbild hinzufügen oder ich kann es einfach auswählen, und sagen wir, ich möchte dieses Profilbild erstellen Ich kann also einfach darauf klicken und wie du siehst, wird das Bild hinzugefügt. O Nehmen wir an, du möchtest ein Plug-in-Symbol, sodass du einfach nach dem Symbol suchen kannst. Icons, und es wird dir einige wirklich beliebte Icon-Plugins geben. Lassen Sie uns mit, sagen wir, Symbol acht beginnen. Und wir müssen nur klicken, weil es in meinem System nicht installiert ist. Okay, es ist jetzt installiert. Okay, das ist also die Schnittstelle des Icon Eight Plug In. Wir können nach dem Ich-Wunsch-Icon von Home suchen. Ich kann einfach nach Hause suchen, und wir können auch verschiedene Optionen wie die PNG p-Option wählen . Wir können auch die Farbe ändern. Wir können auch das Format der Symbole ändern. Nehmen wir an, ich möchte diese Home-Taste, damit ich sie einfach wegziehen, einfügen und verwenden kann, wann immer ich will. Das ist der Vorteil der Verwendung von Plug-In. Wir können auch über die Community auf das Plugin zugreifen. Du kannst einfach zur Community gehen. Nehmen wir an, ich möchte nur Plug-ins von Let's Picture. Sicher. Und ich kann in Plugins nachschauen. Es gibt 47 Plugins, und ich kann einfach auf Öffnen klicken. Ich kann es klären. Lass uns zu beliebt gehen. Das sind also einige beliebte Plugins, also kann ich sie einfach in meinem Figma öffnen Und wie du siehst, fragst du, wo du deine Plugins öffnen möchtest, also lass uns ohne Titel reingehen und Das ist eine ziemlich schwierige Methode. Ich habe dir bereits gezeigt , wie man Plug-ins aus den Ressourcen öffnet. Benutze das auch. Nehmen wir an, ich möchte mein Profilbild hier hinzufügen. Okay, das sieht cool aus. Ich nehme diesen. So können Sie Plug-ins verwenden. Denken Sie daran, dass die Plugins, die wir im gesamten Kurs verwenden , möglicherweise unterschiedliche Benutzeroberflächen haben, das zugrunde liegende Konzept jedoch dasselbe bleibt. Vereinfachung der Funktionen von Pigma. Plug-ins sind ein aufregender Aspekt von Figma, und wir werden in zukünftigen Videos mehr davon untersuchen Machen Sie sich bereit, um tiefer in Pixel oder Pizza Bay und andere leistungsstarke Plugins in Next to Trail einzutauchen. Wir sehen uns dort 21. Klassenprojekt 2: Die Toolbox meistern: Symbole und Plugins für leistungsstarke Figma-Designs: Hallo zusammen, willkommen zurück auf unserer Designreise. Heute tauchen wir in die wunderbare Welt von Figma ein. Wir kennen kreativ keine Grenzen. Ich hoffe, ihr seid alle so gespannt wie ich , denn wir sind dabei, eure Fähigkeiten auf die nächste Stufe zu heben Wie Sie wissen, haben wir die unglaublichen Fähigkeiten von Figma erforscht , und in der heutigen Sitzung geht es darum dieses Wissen in die Tat umzusetzen Sie haben etwas über Symbole, Plugins und die Magie gelernt, die entsteht, wenn sie zusammenkommen Lassen Sie uns das nun in der Aktion sehen während Sie Ihr eigenes Projekt in Angriff nehmen Als Erstes möchte ich, dass Sie alle überschüssigen Dateien auschecken Sie werden die wertvollen Werkzeuge der Icons finden , mit denen Sie Ihr Design aufpeppen können. Und du weißt schon nicht, wie man Plugins in Figma hinzufügt , öffne das Betrachte es als deinen Design-Spielplatz. Denken Sie jetzt daran, dass Flexibilität der Schlüssel ist. Sie können gerne mit diesen Symbolen und Plug-ins herumspielen. Denken Sie jedoch daran, dass einige Plugins die Größe Ihrer Symbole anpassen können Also keine Sorge, passen Sie sie an Ihr Design an. Nahtlos. Es geht darum, es einzigartig zu machen Um Ihnen ein wenig Inspiration zu geben, finden Sie hier eine Momentaufnahme meines eigenen Projekts. Beachten Sie, wie die Symbole und Plug-ins sowie das allgemeine Erscheinungsbild aussehen und sich anfühlen. Es ist, als würden Sie Ihrem Design einen Hauch von Persönlichkeit verleihen. Lassen Sie uns nun sehen, womit Sie kommen können. Und das ist die Anweisungsdatei in unserer FDMA-Projektübung Sie können sie durchgehen und alle Anweisungen sind hier geschrieben, und am Ende, wenn Sie Ihr Projekt abgeschlossen haben, reichen Sie mir diese Datei Sie können einen Screenshot machen oder ein Bild des Designs aufnehmen und mir das zusenden. Ich bin hier, um dir bei jedem Schritt auf dem Weg zu helfen. Wenn Sie Fragen haben, können Sie diese gerne stellen. Lassen Sie uns daraus eine gemeinsame Reise machen. Und denken Sie daran, dass wir beim Design nichts falsch machen , neue spannende Entdeckungen. Also meine großartigen Designer, lasst uns ein Spiel mitbringen und diese Rahmen in Kunstwerke verwandeln. Tauchen Sie ein in Figma, erkunden Sie die Symbole, die Macht der Plugins und lassen Sie Ihrer Kreativität freien Lauf Ich kann es kaum erwarten zu sehen, was dir einfällt. Lassen Sie uns dieses Projekt zu einem unvergesslichen Projekt machen. 22. So erstellst und verwendest du Seiten in deiner Figma-Datei: Studierende in dieser Bewerbung willkommen Wir werden uns mit dem Seitenfalten in Figma befassen Es mag ein bisschen langweilig sein, aber glauben Sie mir, es ist ein entscheidendes Organisationstool , mit dem Sie Ihre Entwurfsarbeit straff und langwierig gestalten können. Lassen Sie uns also anfangen Erstens haben Sie wahrscheinlich bemerkt, dass wir bereits eine Standardseite haben. Das ist Seite Nummer eins. Das ist eine Seite, die derzeit alle Frames enthält , die wir bisher erstellt haben, wahrscheinlich die IntervageHME-Seite, die Burger-Menü-Kategorie, Mein Konto Um diese Sache übersichtlicher und übersichtlicher zu gestalten, werden wir neue Seiten Klicken wir zum Beispiel auf diese Seitenschaltfläche und fügen wir eine neue Seite hinzu, oder wir können diese Seite umbenennen. Also lasst uns diese Seite umbenennen. Derzeit ist es Seite eins, also werde ich sie wie Click Art Mobile App umbenennen. Um es umzubenennen, können Sie einfach auf Ihre Seite Nummer eins klicken Und jetzt können wir den Namen ändern. Okay, das wird also unser Seitenname sein. Fügen wir nun einen weiteren Seitennamen hinzu. Nehmen wir an, wir möchten eine Dextp-App oder eine Tablet-App erstellen. In diesem Fall werden wir also eine neue Seite erstellen. Und dabei werden wir ein spezielles Design für Tablets erstellen . Oder lassen Sie mich das noch einmal umbenennen , weil es für Handys ist. Wenn jemand auf diese Datei zugreift , wird diese Person verwirrt sein. Was ist los? Als ob das ein Tablet ist. Ich verstehe es, aber was ist das obige? Also lass mich es in Mobile umbenennen. Okay, wir haben also zwei Seiten. Die zweite ist völlig leer, also haben wir kein Objekt darin, aber lassen Sie uns ein paar Rahmen hinzufügen. Also Tablet, lass uns Tablet wählen. Oh, es. Okay, wir sind also Surface Pro und iPad Mini Eight und iPad 11 und iPad Pro 0.12 0.9 Nehmen wir diesen etwa 12,9 Zoll. Und wir können mehrere, ich würde sagen, Seiten erstellen , zum Beispiel Alt gedrückt halten und Tublicate Nehmen wir an, wir haben sechs Seiten, ich schätze, sechs Frames in unserer App, also werden wir dasselbe tun Okay, das wird also unser Tabellenbereich sein. Also werde ich das nicht entwerfen. Ich zeige das nur zu Demonstrationszwecken, zum Beispiel, wie man Seiten benutzt. Als ob du die gesamte Tablet-App so erstellen möchtest. Sie können eine neue Seite erstellen, diese neuen Frames erstellen und eine neue Tablet-App erstellen, oder Sie können eine Desktop-ähnliche Website für dieselbe App erstellen , die Klickkarte ist Wenn Sie also daran interessiert sind, tun Sie das bitte, und Sie werden einige zusätzliche Punkte erhalten Sie können mir das auch mitteilen und Sie wissen, wo Sie das Projekt einreichen Sie können einen Screenshot davon machen und ihn im Projektbereich einreichen. Okay, lass uns jetzt zur neuen Seite übergehen und eine Seite erstellen, und eine Seite erstellen, auf der wir Karte, Tastro und Trauer hinzufügen werden Okay, das wird also unsere erste Seite sein. Lass es mich hierher verschieben. Halte es einfach. Klicken Sie einfach darauf und halten Sie es gedrückt und ziehen Sie es so. Also wird es weitergehen. Also ich Ressourcendatei, Figma-Übungsdatei Ich habe diesen Aufgabenablauf, diesen Aufgabenablauf und den Brief hinzugefügt diesen Aufgabenablauf und den Brief Sie müssen ihn also nur kopieren und hier einfügen. Sie wissen also nicht, wie Sie das hinzufügen sollen, gehen Sie zum Home-Bereich und klicken Sie auf Import. Wählen Sie einen Fromo-Computer. Okay, ich übe Datei, sie ist hier drüben , Figma, tut mir leid, klicken Sie auf Kartenbrief und tallo klicken Sie darauf, und wenn die Erweiterung fi ist Wenn Sie PNG verwenden können , aber ich sage, fügen Sie die Fi-Datei Figma-Datei Und weniger wichtig. Okay, es ist erledigt, also ist es hier drüben. Kopiere einfach all diese Dinge. Bild eins und dieses Bild zwei. Steuern Sie C und kopieren wir das in unser Hier möchte ich einfügen. Control V. Das wird unser Auftrag sein. Das wird unsere mobile App sein, und das wird unser Tablet sein. Oder wenn Sie eine andere Website erstellen möchten, können Sie auch eine neue Seite erstellen, sie umbenennen und eine Website erstellen. Ich vergünstige dich voll und ganz Okay, lass mich dir jetzt ein paar wirklich gute Beispiele für Seiten zeigen ein paar wirklich gute Beispiele für Seiten Also wenn wir versuchen, ein paar Icons aus der Community zu bekommen, also haben wir diese Datei wie Basel dupliziert und Sie können sehen, dass wir keine bekommen, wie Icons hier drüben, weil wir auf Seite Nummer eins sind und der Name der Seite Thumbnail ist Und danach werden wir Vollprofi. Und in Full Pro bekommen wir alle Icons. So können wir sie direkt in unseren Designs verwenden. Das Gleiche gilt für das Einhorn-Design Sie können zu Seiten wechseln Das erste sind Cover und das zweite sind Symbole, und wir bekommen viele, viele Symbole, und wir können sie einfach kopieren und verwenden Und es gibt noch ein Beispiel. Ich weiß, dass ich zu viele Beispiele nehme. Haben Sie Geduld mit mir, denn dieser ist der Gute. Okay, nehmen wir an, jemand ist wirklich ein Anfänger. Er weiß nichts über U X, und er hat von dieser neuen Funktion des iPhones erfahren , nämlich Dynamic Island Und er möchte diese Elemente kopieren und in seinem Design verwenden Und wenn wir flaumig sind, sehen Sie, lassen wir mich hier nicht gehen. Okay. Also auf der ersten Seite wird er das sehen. Aber er ist nicht im Seitenbereich. Sie könnten also verwirrt sein. In diesem Fall kann er einfach zu diesem Titelbereich oder Seitenabschnitt gehen und er kann auf alle Elemente zugreifen, z. B. auf den Status Hom Ba Mus, das Hintergrundbild, die Zeichenfläche und die Raster. Das sind die Raster Der Rasterabschnitt ist also wirklich wichtig. Dafür werde ich es dir in infattum beibringen. Dank Grids sind wir in der Lage, unsere Apps zu entwerfen. In infat sottum dafür. So funktionieren Seiten also. Es hilft uns, unsere Dinge in unseren Designs zu organisieren. Okay, im Laufe dieses Kurses werden wir ein einfaches Designsystem erstellen. oft als Styleguide bezeichnet, was ein weiterer Anwendungsfall für Seiten sein wird. Stellen Sie zunächst sicher, dass Sie Seiten sowohl für den mobilen Aufgabenablauf als auch für das Tippen auf Tabellen erstellt haben . Wenn Sie an diesem Tabellentyp interessiert sind, erstellen Sie ihn und erstellen einen Entwurf, und Sie wissen, wo Sie ihn einreichen müssen. Und kopiere die Persona und den Aufgabenfluss auf die In Ordnung, meine Schüler, wir sind mit den Seiten fertig. Also bleib organisiert und ich sehe dich im nächsten Video. Viel Spaß beim Entwerfen. 23. Figma Prototyping für Anfänger: Willkommene Erfahrung bei diesem Angebot, wir werden Multiversum-Roto-Typing sehen Schnall dich an, denn wir werden Interaktionen schaffen, die es uns ermöglichen, nahtlos durch unsere Frames zu navigieren Lassen Sie mich Ihnen hier einige Multiverso zeigen. Wie Sie sehen können, ist dies die endgültige Version unserer App. Ich zoome rein. Wir haben also ein paar Buttons, Bilder und all das. Das ist also die endgültige Version. Also lass mich dir ein Multiversum zeigen. Wenn wir uns derzeit also in der Designabteilung befinden, wenn ich auf Prototypen eingehe, wie Sie sehen können, ist das ein bisschen chaotisch und das Multiversum Es wird nicht als Multiversum bezeichnet. Ich nenne es Multiversum , weil es lustig klingt. Okay, das sind also Zeilen, die wir gerade hinzugefügt haben, um mit unserer App zu interagieren Lassen Sie mich also zu unserer Haupt-App übergehen, die unser Click-Cart-App-Wireframe sein wird Derzeit befinden wir uns also im Designbereich, wenn wir uns mit einem Prototyp befassen, und derzeit ist nichts ausgewählt, also befinden wir uns im leeren Wenn wir uns also im leeren Raum befinden, können wir derzeit einige Geräte auswählen, wir wählen das iPhone 15 Pmax, wir können es ändern Wir können jedes Gerät auswählen, das wir wollen. Wir können zum Beispiel zwischen iPad, Appog und Mac Book wählen iPad, Appog und Mac Book Aber ich werde das iPhone 15 PMx behalten weil wir dieses nach Breite und Höhe sowie nach den gleichen Pixeln bewerten wollen sowie nach den Wir können das also auch so horizontal oder vertikal ändern und die Farbe unseres iPhones ist natürliches Titan. Das ist die Standardeinstellung. Sie können auch eine andere Farbe wählen, und zwar p, den Hintergrund pro Abschnitt und die Ströme, die fließen. Konzentrieren Sie sich jetzt also nicht darauf. Ich werde dir im nächsten Video zeigen, wie Flow funktioniert. Wenn ich also auf irgendwelche Seiten klicke, wie ich gerade auf Interage bin, wenn ich diese auswähle, siehst du, dass ein Punkt erscheint Es erscheint hier, hier drüben, hier drüben sowie hier drüben. Mit diesem Punkt können wir unsere Seiten verbinden. Also kann ich diese Seite so verbinden. Sie können einen kleinen Pfeil sehen, und es gibt auch einige Interaktionen. Nehmen wir an, wenn ich das eintippe, wenn ich das in das Leerzeichen tippe, wird es auf diese Seite weitergeleitet und es wird sofort angezeigt. Das sind also einige Einstellungen. Im Moment werden wir diesen Teil überspringen, weil wir im nächsten Teil diese Dinge sehen werden. Lassen Sie uns jetzt auf die Startseite klicken, das Gleiche. Menü, es wird der Kategorie und der zweiten Kategorie hinzugefügt, meinem Konto und zuletzt sind es meine Bestellungen, wir verbinden unsere sechs Seiten, und um voranzukommen, können wir einfach auf diesen Play-Button hier drüben klicken. Wir haben also zwei Optionen wie „Präsentieren“ und „Vorschau“. Wenn Sie auf die Vorschau klicken, können Sie sehen, dass dieses Menü oder dieses kleine Popo angezeigt wird Und wenn ich zufällig irgendwo auf dem Bildschirm klicke, ändert sich das, weil die Richtung gerade nichts ist Also fügen wir einfach einen Flop hinzu. Also wenn ich nochmal auf die leere Stelle klicke, dann wird es so sein Es bewegt sich einfach in unserer App. Okay, wir können es also auch von hier aus entscheiden. Also das ist der vorherige Abschnitt. Und lass mich dir eine Magie zeigen. Wenn ich also die Startseite wähle und die Farbe dieses Banners ändere und mich zum Design überlasse, müssen wir für die Änderungen zum Design gehen. Und lassen Sie mich es ändern, sagen wir, wenn ich es rot mache. Wie Sie also im vorherigen Abschnitt sehen können, ändert es gleichzeitig die Farbe. Lass mich das machen. Das ist also der Vorteil, dass wir bei der Präsentation auch dasselbe bekommen. Lassen Sie mich also auf den aktuellen Abschnitt eingehen. Es wird einige Zeit dauern. Es hängt ganz von Ihrem Design ab. Derzeit sind wir also auf der Titelseite, nicht auf der Titelseite, sondern auf der Startseite. Lass mich es zurücksetzen. Also für den Reset ist es R. Es erscheint hier. Wenn ich auf das leere Feld klicke, gehen wir danach auf die Startseite nach dieser Kategorie. Das gilt für diese Kategorie, das M-Konto und die Bestellungen. So funktioniert der Prototyp also. Wenn Sie auf diesen leeren Bereich klicken, haben wir die Möglichkeit, diese App zurückzusetzen, und wir können auch von hier aus navigieren, z. B. auf Seite zwei, drei, 4506, Wir können es auch von dieser Schaltfläche aus hin und her schalten es auch von dieser Schaltfläche aus hin und her Wir können auch Kommentare hinzufügen. Und wenn wir in diesem Abschnitt mehrere Flows haben, können wir auch diesen auswählen. Derzeit haben wir einen Flow, also wird ein Flow angezeigt. Nehmen wir an, Sie präsentieren diese App Ihrem Kunden und möchten diese Live-Version mit Ihren Kunden teilen. In diesem Fall können Sie dies wählen und Sie können mich mit einem Slotlight beleuchten, indem Sie auf die Punktlinie klicken Es wird deinen Anweisungen folgen. Danach haben wir den Prototyp geteilt. Sie können unseren Prototyp sowohl mit Ihrem Kunden als auch mit Ihren Freunden teilen . Sie können hier einige Änderungen vornehmen, Sie können einige E-Mail-Anzeigen hinzufügen, damit sie erfahren wie Ihre App funktioniert und wie sie interagiert Option, wir bekommen einige Größen, so wie es derzeit bei 100% liegt. Okay, derzeit ist es bildschirmtauglich. Wir können einen Bildschirm wählen, der zu 100% passt. Wir können hier auch einige Einstellungen deaktivieren, und das ist für Reziten Okay, das ist also die Oberfläche des Pro-Present-Bereichs Und so funktioniert der Prototyp in Figma. Auf diese Weise lernen wir, wie man das Gerät sowohl in den Topf als auch in den horizontalen Körper stellt Wir können auch die Farbe des aktuellen Abschnitts ändern. Wir haben nichts über den Flow gelernt, als Nächstes werden wir etwas über Flow lernen. Also gib es dafür an. Und wir werden erfahren, was wir sonst noch gelernt haben? Okay, wir werden etwas über diesen aktuellen Abschnitt erfahren. Das ist also die Grundlage des Prototyps, aber im Vergleich dazu sieht es wirklich einfach aus. Prototyping ist wirklich einfach. Ich weiß, es sieht ein bisschen chaotisch aus, aber Prototyping ist eines der einfachsten Dinge, die wir in UI UX tun können Denn als schnelle Übung ist dies kein Projekt, sondern nur eine schnelle Ich schlage vor, dass Sie die Prototypverbindung unterbrechen und eine bestimmte Interaktion für die Schaltfläche einrichten. Nehmen wir an, Sie entwerfen diese Seite und nehmen wir an, Sie möchten, dass diese Schaltfläche etwa so funktioniert wie diese Schaltfläche eine Kategorie anzeigt. Sie können dieser Kategorie also beitreten und einfach damit spielen. Es ist also nur eine Übung, kein Projekt. Du kannst es für einen Doktortitel machen. Nehmen wir an, du beherrschst etwas und trittst irgendwo anders wie diesem bei und du weißt nicht, wie du das löschen Du kannst einfach zu diesem Prototyp gehen und du siehst, dass der Interaktions-Tab „Mein Konto“ ist. Klicke einfach auf dieses Minus, aber es wird bei seinem pH-Wert gelöscht. Oder Sie können auch die Löschtaste drücken. Es wird auch gelöscht. Das ist also die Zusammenfassung der Grundlagen des Prototypings in Figma Im nächsten Video werden wir also einige Schritte weiter gehen und Animationen mithilfe von Transition hinzufügen Schauen Sie sich also im nächsten Video an, um mehr Prototypen für zu erhalten. 24. Figma Prototyping und Übergänge (Easing): Wir kommen zurück zu y x designer. In diesem Video werden wir lernen, wie unseren Drahtrahmen prototypisieren können. In der Vergangenheit haben wir gelernt, wie wir unsere Dinge prototypisieren können, aber es waren keine Details. Wir verbinden unsere Seiten einfach so. Wenn du das nicht wie den Prototyp löschst , kannst du das löschen. Okay, also in diesem Fall werden wir diese Dinge von Grund auf neu machen. Wenn Sie nicht wissen, wie Sie das löschen können, wählen Sie einfach dieses Prototyp-Kabel und klicken Sie auf Ihrer Tastatur auf Löschen So löschen Sie den Prototyp-Draht. Ich nenne es Draht. Okay, derzeit sind wir also im Prototypenstadium. Wenn Sie sich im Design-Panel befinden, gehen Sie einfach zu Ptype und ich möchte zuerst einen Prototyp für diesen erstellen Also okay, das muss also wie beim Typ sein. Okay, lassen Sie mich das zuerst löschen , weil es für einige Studenten verwirrend sein könnte. Okay. Also lass mich das in die Länge ziehen. Hier. Okay. Jetzt haben wir also etwas Platz. Also lass mich auf die andere Seite klicken und lass mich dem beitreten. In diesem Abschnitt zwischen den Seiten gibt es also keine Schaltflächen oder Elemente, auf die geklickt werden kann können wir also Dafür können wir also einfach auf eine beliebige leere Stelle tippen Es wird zur Startseite navigiert. Wie Sie sehen können, navigiert es zur Startseite und die Animation bewegt sich Sie können jedoch jede Animation einstellen. Sie können festlegen, wie die Animation aufgelöst, bewegt, verschoben und wieder herausrutscht. Vorerst werde ich Dissol wählen, weil Dissol wie eine einfache Animation ist Und für Wireframe sollten wir normale Animationen wählen , nicht so Während wir an einer echten App an dieser echten App arbeiten, werden wir verschiedene Arten von Animationen auswählen. Behalte das im Hinterkopf. Also entscheiden wir uns für Auflösen. Danach haben wir rein raus und hinten raus. Wir haben viele Animationstypen, sodass wir jeden von ihnen auswählen können, und wir bekommen auch eine Vorschau, wie es aussehen wird, wenn wir auf dieses leere Feld klicken. Und danach können wir auch die Animationszeit einstellen, die derzeit von Difult std. gestrandet Wir können sagen, dass Tausendtausend 1 Sekunde sind. Es hängt also ganz von Ihrem Design ab. Okay, also ich will hier nichts Faszinierendes sehen. Gehen wir jetzt zur Startseite. Und das ist das Burger-Menü. Lassen Sie uns also dieses Burger-Menü mit dieser Burger-Menü-Seite verbinden. Also möchte ich durch diese beiden Burger-Menüs navigieren. Und erinnere dich an eine Sache. Wie bei der vorherigen Prototyping-Sache haben wir einige Animationen wie Dissolve hinzugefügt Es wird also genauso sein weil Mar die Animation nicht zurücksetzt Es behält die alte Animation und die alten Einstellungen dafür bei. Also müssen wir es ändern. Wenn du es ändern willst, musst du es ändern. Also ich möchte, dass das zum Burger-Menü gehört, und das sollte es auch sein. Nehmen wir an, wir gehen hinein und die Animation sollte so von links sein, und wir können Easin einstellen und Easing Out Bei Leichtigkeit kommt es schnell und so geht es langsam. Wenn ich Ease Out wähle, steht es erster Stelle und passe es langsam an. Ich weiß, dass es verwirrend ist. Sie können die Zeit einfach in Millisekunden einstellen und Sie können diese Dinge wie in Zeitlupe sehen, damit Sie den Punkt verstehen Okay, also für diesen Schritt gehen Sie rein und das wird die Animation sein. Okay, also lass uns das schließen. Okay, danach habe ich das hingekriegt. Wenn ich darauf klicke, sollte es auf die Startseite gehen , weil wir von der Startseite aus dorthin gegangen sind Okay, bis jetzt wird meine Animation nach außen verschoben und sie wird so nach rechts verschoben. Okay, ich werde die Zeit 300 behalten, weil 300 an Note verlieren. Wenn ich 1.000 oder 2000 wähle, wird es sehr langsam sein. Okay, wir müssen also viele Prototypen erstellen , wie wir diese beiden Kategorien prototypisieren müssen , danach Bestellungen, danach mein Konto und nach diesem Profil. Okay, lassen Sie uns diesen beiden Kategorien beitreten. Danach haben wir meine Bestellungen. Okay. Ich habe nichts eingestellt. Okay, lass mich das zuerst einstellen. Ich werde die Einstellung beibehalten Ich werde sie aufgelöst lassen. Ich will keine ausgefallenen Animationen für das Wireframe. Wir werden uns die gesamte Animation und die Mikrofoninteraktion in zukünftigen Videos ansehen, da Wireframe keine ausgefallenen Dinge erfordert Okay, also werde ich einfach all den Dingen beitreten und das Video beschleunigen Okay, ich habe wohl eine Seite vergessen . Es sollte einen Bereich für die Benachrichtigungsseite geben, aber ich glaube, ich habe vergessen , dass er leer ist. Ich lasse das Ding so wie es ist. Ich werde das mit nichts verbinden. Es gibt also einen Zaubertrick. Du willst all diese Dinge nicht immer wieder machen. Wie beim Kategorienbereich müssen wir alles immer wieder zusammenfügen. In diesem Fall können wir also genau das tun , als müssten wir diesen ersten löschen. Ich weiß, dass du es richtig gehört hast. Du musst diesen löschen. Dieser auch und dieser als 12, und wir können einfach diesen Frame kopieren und auf die Kategorie klicken. Du musst auf diesen Obernamen klicken und ihn einfach einfügen. Und es wird hier drüben am selben Ort sein und der Prototyp wird derselbe sein wie mit dem Konto und mit meinen Bestellungen Also müssen wir nur die Farbe dieser Icons ändern. Für wen sollte es Weiß sein, weil wir in der Kategorie sind, also wählen wir diese Farbe als Industriefarbe aus , genauso wie bei dieser Okay, ich bin in den Objektbewertungsmodus gegangen. Es. Und das ist mein Konto. Mein Konto wird also industriell sein. Sie können jede gewünschte Farbe wählen. Das ist meine Lieblingsfarbe, also wähle ich diese. Okay. Ich ging wieder zu Einspruch White. Meine Befehle, es wird dieser sein. Okay, also so wird es aussehen. Also, wenn ich zum Prototyp übergehe, wird es so aussehen. Wenn ich darauf klicke, kannst du sehen, dass alle Dinge miteinander verbunden sind. Wir müssen diese Dinge nicht immer wieder tun. Wir müssen all die Dinge wie Home Shop nach Kategorien zusammenfügen , meine Bestellungen immer wieder. Ich werde damit schnell weitermachen. Auch hier in Bergamo habe ich einige Dinge hinzugefügt, wie zum Beispiel eine Brieftasche, ein Angebot, einen Shop, einen Coupon und ein Klickautogeschenk Also habe ich keine Seiten für sie entworfen. Also, wenn du willst, kannst du sie entwerfen, aber ich dachte, wenn ich das entwerfe, wird das Projekt sehr, quasi riesig werden und es wird überwältigend sein . Also lassen wir es kurz halten und diese Elemente hinzufügen, damit unser Design besser aussieht. Okay, wir können uns wieder dem Berg-Menü anschließen. Okay, wir sind fast fertig. Lassen Sie mich die Vorschau unserer App überprüfen und bewerten. Lassen Sie mich es noch einmal vorstellen. Okay, also die aktuelle Festplatte klicken auf Cut und auf der ersten Seite haben wir nur die Tab-Animation eingestellt. Wenn ich zum Beispiel auf ein leeres Feld tippe, wird es zur Startseite weitergeleitet. Okay. Also lass mich auf diese leere Stelle tippen. Okay, es funktioniert. Die Animation ist aufgelöst. Wenn ich jetzt so auf den leeren Bereich klicke, wird mir angezeigt, welche Dinge anklickbar sind In diesem Fall sind die Kategorien anklickbar oder anklickbar sowie mein Konto und der Gehen wir also zur Kategorie. Die Animation ist also aufgelöst. Ich habe die Animation bereits so eingestellt, dass sie aufgelöst wird. Und wenn ich Bergman wähle, Bergman, habe ich Bergman nicht eingestellt Also lass mich wieder nach Hause gehen. Okay, Heimat ist kein Staat. Also so funktionieren Prototypen. Und während wir durch unsere App scrollen, wissen wir, welche Dinge miteinander verbunden sind oder welche nicht Also mein ältester und danach wieder mein Account. Und Heimanimation ist kein Status. Also lass mich das Zuhause wieder für alle einrichten. Okay. In jedem F, den ich nach Hause schicke. Okay, lass es mich nochmal versuchen. Also, wenn ich Home drücke, okay, es funktioniert jetzt. Und du hast auf Burger-Menü geklickt. Im Burgermenu erhalten wir also einige anklickbare Artikel wie Home Show by Category in meinen Bestellungen So sieht Multiversum-Prototyping aus. Okay, so kannst du deine Icons mit den UR-Seiten verbinden, genauso wie das Home-Icon mit der Startseite. Entschuldigung, nicht zu Hause. Das Kategoriesymbol zur Kategorieseite, Toccon zur Go-Seite, Mic zu meinem Konto und andere Mikrointeraktionen. Das ist nur eine Grundvoraussetzung Ich weiß, es sieht wirklich überwältigend und futuristisch aus, aber es ist nur eine Grundvoraussetzung, wir müssen die Symbole nur mit O-Seiten verbinden , kleine Mikrointeraktionen Das ist die Sache mit dem Prototyping. Ich weiß, dass wir viele Dinge behandeln müssen , wie Mikrointeraktion, Animation und Tastenanpassung und all das Wir werden diese Dinge also bei zukünftigen Ausschreibungen sehen. Also ich sehe Porto bi und ich werde euch im nächsten sehen 25. Figma im Testen eines Prototyps mit Figma Mirror: Schüler, in diesem Stück werden wir uns etwas ansehen, das Figma-Spiegel genannt wird Es ist eine Figma-App. Sie können Ihre App zum Beispiel auf Ihrem Handy testen. Lass uns zum Playstore oder App Store gehen, wenn du Apple verwendest. Also ich benutze Presto, also gehe ich zu Presto, und es gibt eine App Sie können nach einer Figma suchen und sie nach der Installation einfach öffnen Und nach dem Öffnen melden Sie sich mit demselben Konto an, das auf Ihrem PC angemeldet ist Nach dem Login sehen die Schnittstellen also so aus. Und derzeit haben wir viele Projekte in meiner App. Sie können also sehen, dass es Optionen gibt. Wie beim ersten gibt es oben links eine Play-Schaltfläche. Das heißt, es ist der Prototyp. Also können wir einfach darauf klicken. Derzeit verwenden wir Clickard Version eins. Das ist also der Prototyp. Also lass uns darauf klicken. Wir gehen zu demselben Prototyp auf dem mScreen, den Sie gleichzeitig sehen können, dass die Fliardp-Klickkarten-App sowohl auf unserem PC als auch auf meinem Smartphone geöffnet ist auf unserem PC als auch auf Okay, aber das Problem mit meinem Smartphone ist, dass mein Telefon einen 6,2-Zoll-Bildschirm hat und das iPhone 15 P max einen 6,69-Zoll-Bildschirm hat. Also wenn ich auf die Startseite gehe. Okay, Sie können also auf meinem Bildschirm auf dem mobilen Bildschirm sehen, die Symbole der Navigationsleiste ausgeblendet sind. Also muss ich ein bisschen scrollen, um dieses Symbol zu bekommen. Aber in Bergamo funktioniert es. Wenn ich zum Beispiel dort drüben berühre, kannst du die Animation hier sehen, und ich kann auf die Startseite, Kategorie zugreifen Aber wenn ich auf die Navigationsleiste zugreifen will, muss ich ein Datenbit verfolgen, es ein Datenbit runterzählen und danach kann ich sowohl zu den Kategorien als auch zu meinen Konten gehen . So funktioniert Figma Mirror. Es ist wirklich einfach Nehmen wir an, Sie möchten diese App mit Ihrem Freund oder mit Ihrem Kunden teilen , und Ihr Kunde weiß von keiner FO-App. In diesem Fall können Sie in Ihrer App zum Prototyp wechseln und dort die Option Prototyp teilen sehen. Bei dieser Option erhalten wir einige Optionen. Sie können eine E-Mail von ihnen hinzufügen, sie per E-Mail in diesem Abschnitt oder Sie können diesen Link einfach kopieren und ihn teilen, wo immer Sie möchten. Wie in welcher App auf Telegram oder auf Instagram, du kannst ihnen eine Direktnachricht senden, und sie können es einfach am Telefon öffnen. Aber wenn ich das versuche, wie auf meinem Smartphone, weiß ich nicht, aus irgendeinem Grund wird es einfach weiter geladen. Als ob ich das vor ein paar Tagen nicht benutzen konnte, habe ich dieselbe Leitung geöffnet, aber sie hat funktioniert, aber ich weiß nicht, was gerade passiert. Es funktioniert gerade nicht. Sie können auf dem Bildschirm sehen, dass es für immer geladen wird. Also in diesem Fall, ich weiß nicht, gibt es vielleicht Burger und das System wird gewartet. Es gibt noch eine andere Sache. Nehmen wir an, ich beschäftige mich mit Design. Ich habe es dir schon gezeigt, aber lass es mich dir noch einmal zeigen. Okay, nehmen wir an, wir sind auf der Startseite. Auf dem Handy auch auf der Startseite. Und wenn ich die Farbe dieses Banners ändere. Nehmen wir an, ich mache daraus eine blaue Rate. Sie können sehen, wie sich das ändert meiner mobilen App als auch in der Fimeter-App Es ist in Echtzeit und es ist wirklich gut, die Oberfläche so zu sehen Okay. Weil unser Kunde Informationen erhalten wird. Nehmen wir an, Sie sind im Gespräch und Ihre Kunden sagen: Okay, ich mag diese Farbe nicht, bitte ändern Sie in etwas anderes , also machen Sie sie rot. In diesem Fall können Sie einfach einen Schieberegler ziehen und Ihr Kunde wird sagen, das sieht toll aus. Okay, also sollten wir es rot lassen. Okay, das ist also der Vorteil der Puma Mirror App. Ein weiterer Vorteil ist, dass Sie, sagen wir, wenn Sie mobil sind, die tatsächliche Größe des Symbols sehen können. Nehmen wir an, die aktuelle Symbolgröße ist ziemlich gut, werde ich sagen, oder ich kann das Rechteck verkleinern. Es hängt also völlig vom Telefon ab. Derzeit benutze ich ein wirklich altes Telefon. Es wird also ziemlich matschig. Aber wenn Sie möchten, können Sie es auf Ihrem ausprobieren. Nehmen wir an, wenn Sie ein iPhone haben, können Sie es auf dem iPhone ausprobieren Und Sie können die Symbole beobachten. Nehmen wir an, auf Ihrem Handy die Symbole zu groß aus. In diesem Fall können Sie sie so klein oder groß machen. Aber momentan mag ich diese App. Die Burger-Zubereitung ist großartig und alle Optionen der Kategorie sowie das sowie das Also alles sieht gut aus. Das einzige Symbol in der Navigationsleiste ist etwas detailreich. Also können wir das ändern. Das ist also der Vorteil der Verwendung von Mirror, damit wir die App, die wir entwerfen , aus der echten Perspektive betrachten . Also, Mitschüler, das sind die Fotos, das Video, und ich werde euch im nächsten Set sehen. 26. Klassenprojekt 3: Magie des mobilen Designs: Präsentiere deine App in Figma: Ich begrüße die aufregenden Neuigkeiten meiner Schüler. Heute ist der Projekttag, und unsere Projektnummer ist wohl drei. Okay. Gehen wir also zu Projekt Tap. Ich hoffe, du öffnest diese Datei auf deinem PC. Okay. Sie müssen also zunächst die Figma-App sowohl aus dem Playstore als auch aus dem App Store herunterladen die Figma-App sowohl aus dem Playstore als auch aus dem App Store Wenn Sie ein iPhone haben , ist die App in Ihrem Land auf jeden Fall nicht verfügbar Sie können auf diese Website namens Figma gehen und sich anmelden, und es wird genauso funktionieren Testen Sie anschließend Ihr Design und stellen Sie sicher, dass das Design mit Ihrem Telefon übereinstimmt Nehmen wir an, das Symbol ist zu groß, also nehmen Sie die Änderungen vor, ändern Sie auch die Farbe sowie die Telefongröße und nehmen Sie diese Änderungen vor und überprüfen Sie Ihre App erneut auf Ihrem Telefon. Nehmen Sie danach den Drahtrahmen so auf. Nachdem Sie ein Drahtgitter wie dieses aufgenommen haben, reichen Sie es im Projektbereich ein. Nehmen wir an, Sie sind ein bisschen technisch versiert wie ich Sie können das Video auf Ihrem Handy aufnehmen und dieses Video in Geschenkdateien umwandeln Nachdem Sie das konvertiert haben, können Sie es im Projektbereich einreichen Dies ist der Link für diese Website. Sie können zu Auto Express gehen und Ihre Datei hier einreichen, und es wird einige Zeit dauern. Und nachdem ich diese bestimmte Datei erstellt habe, weiß ich nicht, wie sie heißt. Es heißt GIF, wenn es ein so genanntes Geschenk ist. Sie können diese Datei also einreichen. Nehmen wir an, Sie wissen nicht, wie man einen Bildschirm aufzeichnet. In diesem Fall können Sie einfach einen Screenshot wie diesen aufnehmen und mir diese Datei zusenden. Das ist also das Projekt Nummer drei. Als Nächstes werden wir etwas wirklich cooles Ding namens Animation sehen . Wir werden uns die Grundlagen der Animation ansehen. Und ich hoffe, du freust dich darauf, denn es ist ein wirklich interessanter Teil. Also bleib dabei und mach das Projekt, und ich wünsche dir viel Glück. Also tschüss fürs Erste. 27. Figma Smart Animate für Anfänger: Willkommen zurück bei den Studierenden. In diesem Video tauchen wir in die faszinierende Welt der Animation in Figma Bis jetzt haben wir nur von einem Seitenwechsel erfahren, aber wir sind auf der Suche nach etwas Neuem Das ist Elementübergang. Also habe ich ein paar kleine Animationen für dich gemacht. Also, wenn ich auf das Auto-Symbol klicke, passiert die Magie. Also halte bitte deine Augen offen. Also das ist die kleine Animation, die wir gemacht haben. Lasst uns also lernen, wie man diese Animation macht. Okay, wir haben also meine Bestellseite und ich möchte etwas auf dieser Seite animieren Lassen Sie mich also zuerst das Warenkorbsymbol auf dieser Seite hinzufügen. Dafür gehe ich auf Plugins und das Symbol h ein. Sie können ein beliebiges Symbol auswählen. Also lass uns nach dem Warenkorb suchen. Okay, also werde ich diesen wählen. Es hat ein wirklich gleiches Symbol im Inneren, und denken Sie daran, dass es ein PNG hat. Deshalb mag es verschwommen erscheinen. Wie Sie sehen können, sind die Kanten verschwommen. Okay, lassen Sie mich einige Seiten als Duplikate dieser Seiten erstellen einige Seiten als Duplikate dieser Seiten Okay, also wir naten, ich schätze, drei Seiten, Seite eins, Seite zwei und Seite drei Okay, lassen Sie mich die Seite zuerst umbenennen , weil sie sonst verwirrt wird Lassen Sie mich das umbenennen, sagen wir, meine Bestellung ist eins, oder wir können es wie Eins benennen. Ich werde es wissen oder jede andere Person wird es wissen. Das ist die Animation. Eine Eins. Lass mich hier kopieren und einfügen. Das wird Seite zwei sein. Du kannst es nennen, wie du willst. Animation drei, und das wird Animation vier sein. Okay, lassen Sie uns jetzt mit dem Prototyp beginnen. Aber bevor wir das tun, lass mich zuerst damit ausgehen. Oder wir können eine Sache machen, sagen wir, lassen Sie mich rein und ich probiere etwas Neues aus. Also lass mich das hinter mir lassen. Aber lassen Sie mich die Größe erhöhen. Ich halte die Shift-Taste gedrückt und die Größe ist 1205, 1205. Lass mich das auch 1205 machen. Ich weiß nicht, warum die Farbe geändert wurde. Das wird auch 1205 sein. Er sollte 1205 sein, genauso wie bei diesem Okay, jetzt kann ich an meiner Animation arbeiten. Also lass mich das zurück schicken und lass uns zum Prototyp übergehen. Okay. Aktuell sind wir also bei Animation Miles Animation One. Also lass mich dieser Seite beitreten. Auf der Registerkarte wird es etwas tun, aber wir wollen nicht, dass das auf der Registerkarte steht. Ich sollte After Delay wollen, und es sollte Animation sein. Wir müssen uns für intelligente Animationen entscheiden. Ich weiß, dass es in Figma etwas verwirrend ist, weil ich viele Softwares verwende , alles Film-Basis-SoftwareFM wir die Möglichkeit haben, Tasten einzurahmen Mit Keyframing können wir also Animationen machen. Aber in Figma haben wir intelligente Animationen. Und wir müssen uns nur für Animationen wie intelligente Animationen entscheiden Animationen wie intelligente Animationen Wir müssen keine Keyframes hinzufügen. Es entscheidet selbst. Es ist also gut, aber wenn jemand größer ist , weiß diese Person nichts über Animation. Intelligente Animation, es wird für sie ein bisschen verwirrend sein. Derzeit dauert es also 300 Millisekunden, zu Animation zwei zu navigieren , „ Intelligentes Animieren und Entschleunigung Aber okay, lass mich 100 Millisekunden behalten, aber ich will, dass diese Seite oder dieses Und dieses Warenkorbsymbol sollte hier drüben sein. Das wird mein Ding sein. Lass mich gehen und mir die Animation ansehen . Es funktioniert. Lass es mich nochmal machen. Okay, es ist also so, aber lassen Sie mich das Symbol reparieren. Ich denke, es ist ein bisschen. Ich muss es in die Mitte stellen. Jetzt wird es funktionieren. Es funktioniert. Vielleicht ein bisschen Animation hier drüben. Lassen Sie mich das jetzt nach unten bringen. Lassen Sie mich jetzt weitermachen, damit wir das einfach in diese Richtung bringen können Aber in weniger Panels können Sie unsere Bilder außerhalb des Rahmens sehen. Also müssen wir das in den inneren Rahmen bringen . Und wenn ich zum Design übergehe, kann es manchmal Clip-Inhalt sein, also können Sie es standardmäßig Clip-Inhalt sein, sodass Sie darauf klicken können Okay. Lass mich nochmal zum Prototyp übergehen und mich dem anschließen. Okay. Also navigiere zu dieser Seite Animation drei und Smart Animate. Und lassen Sie mich noch einmal auf diesen Abschnitt eingehen. Meine Befehle. Es sollte auf dieser Seite auf der rechten Seite sein, also habe ich Fehler gemacht. Lassen Sie mich überprüfen, was ich hier falsch gemacht habe. Okay, es steht also auf dem Tab. Ich will nicht auf der Registerkarte stehen. Es sollte nach der Verzögerung sein. Es wird also jetzt funktionieren. Lassen Sie mich noch einmal zu diesem Abschnitt gehen. Meine Befehle, es sollte ausgefallen sein. Okay, ich hab's. Ich habe die Millisekunde eingegeben, diese eine Millisekunde. Lassen Sie mich das auf 300 setzen. Lass es mich noch einmal überprüfen. Ich hoffe es wird wieder funktionieren. Okay, es funktioniert einwandfrei. Aber jetzt wollen wir, dass es an diesem Ort sein sollte. Also werden wir es so lassen, wie es ist, und wir werden es an diesem Tag löschen. Und lassen Sie mich wieder mitmachen. Und das sollte nach einer Verzögerung geschehen. Und Animation 300 Millisekunden. Also lass es mich noch einmal versuchen. Okay, unsere Animation ist fertig. Okay, es wird also runter, geh auf die rechte Seite. Okay, das ist unsere Animation. So können Sie also Animationen in Figma machen. Ich weiß, dass es ein bisschen verwirrend und schwer zu verstehen ist, aber wir werden in zukünftigen Videos viele Animationen machen . Also Stadion dafür. Wenn du willst, kannst du dir dieses Video immer wieder und immer wieder ansehen. Dann erfahren Sie, was die intelligente Animation ist und wie sie in Figma funktioniert Und erinnere dich an die Sache mit dem Inhalt des Clips. Wenn Sie ein Element außerhalb des Rahmens hervorheben, befindet es sich außerhalb des Rahmens. Okay, das dritte Animationselement befindet sich außerhalb des Frames, aber wir haben es nach innen gezogen Es ist also der Teil von Animation drei. Also möchte ich nur eins sagen. Zusammenfassend lässt sich sagen, dass sich die Animation in Figma einige wichtige Prinzipien dreht: Es geht darum, sicherzustellen, dass die Elemente dieselben Namen haben, Verständnis der intelligenten Rollup-Animation zu verstehen und Verzögerungen zu verwalten, um dynamische Effekte zu erzielen Animationsfunktionen von Figma mögen sich etwas klobig anfühlen, aber für die Vertikalität, die sie bietet, ist ein geringer Preis. Die Animationsfunktionen von Figma mögen sich etwas klobig anfühlen, aber für die Vertikalität, die sie bietet, ist ein geringer Preis. Also das Stadion für weitere spannende FEMA-Abenteuer FEMA-Abenteuer 28. Klasse-Projekt 4: Hauche deinem Design Leben ein: Erstelle smarte Animationen in Figma: Willkommen zurück, Schüler, macht euch bereit für eine spannende Herausforderung mit dem Klassenprojekt Nummer drei, oder vier, ich glaube, es sind vier Es wird also unsere erste Animation sein. Für dieses Projekt musst du diese wirklich cool aussehende Animation erstellen , die ich hier erstellt habe. Okay, das sind also die Anweisungen. Gehe zu meinen Bestellungen und erstelle ein paar Seiten und animiere sie. Danach können Sie eine andere Methode verwenden, wie ich die Karte verwende, aber Sie können auch ein anderes Symbol wie eine Form oder ein quadratisches Rechteck oder einen Pfeil verwenden Form oder ein quadratisches Rechteck oder einen Pfeil Das Ganze hängt davon ab, ob Sie sowohl PNG als auch Symbole und Formen verwenden können . Machen Sie danach einen Screenshot und senden Sie es mir. Wenn du Text bist, werde ich mich mögen oder du willst mich herausfordern, damit du diese Datei aufnehmen, deine Animation aufnehmen und sie in eine bestimmte Datei konvertieren kannst . Du weißt bereits, dass wir unsere Bfour in eine bestimmte Datei in Ado Express umwandeln können in eine bestimmte Datei in Ado Express Verwenden Sie also den Link hier, Sie können darauf klicken und er wird zum Auto Express weitergeleitet Danach können Sie ihn im Projektbereich einreichen Das wird also unser Projekt Nummer vier sein. Folgen Sie also allen Anweisungen und reichen Sie mir diese Animation ein. Das ist also ein Pot-Video, und ich werde euch im nächsten Abschnitt sehen. 29. Teilen und Feedback in Echtzeit mit Figma: Willkommen zurück, Designer. Heute werden wir unsere Figma-Fähigkeiten auf Arch anwenden. Sie beherrschen also die Kunst Dateien mit Ihren Kunden zu teilen, und es war ein reibungsloser Ablauf Aber lassen Sie uns jetzt über die Teamarbeit sprechen. Zusammenarbeit mit Ihrem UX-Design namens AW. Stellen Sie sich vor, Sie sind bei einem Projekt nicht allein. Bei einem Theaterstück gibt es mehrere kreative Mitspieler. Um dies reibungslos zu gestalten, tauchen wir in den Bereich der Teams und Teamprojekte ein. Nun, Sie hatten einen guten Lauf mit den Entwürfen. Eine limitierte Anzahl entwirft den Traum eines Designers. Aber hier ist der Handlungstest. Wenn Sie sich mit Kollegen zusammenschließen, ist es Zeit für eine Veränderung Stellen wir uns also ein Szenario , in dem Sie an einem wichtigen Projekt arbeiten, Ihr Team jedoch über verschiedene Plattformen verstreut ist, immer mehr Feedback erhält und verzweifelt versucht, auf derselben Wellenlänge zu bleiben Es ist also genug, um selbst den erfahrensten Designer dazu zu bringen selbst den erfahrensten Designer Haare raufen zu wollen Aber was wäre, wenn es eine Möglichkeit gäbe, nahtlos zusammenzuarbeiten, Dateien mühelos auszutauschen und alle auf dem Laufenden zu halten Deshalb stellen wir Figma-Teams vor. Sie sind eine zentrale Anlaufstelle für Designkooperationen in Nirvana Im Moment bin ich also zu Hause und arbeite an Entwürfen, also haben wir diese Option namens Es mag wie dieses Interface aussehen, aber es kann ein Projekt haben Lassen Sie uns also ein neues Team zusammenstellen. Schauen wir uns einige Vorteile der Figma P an. Mit der kostenlosen Version, wir derzeit verwenden , erhalten wir ein Projekt, drei Designdateien und drei Fijum-Dateien und drei Seiten Mit der Propionalversion erhalten wir die neuen Funktionen und auch andere Funktionen Derzeit möchten wir die kostenlose Version verwenden. Lass uns ein Team zusammenstellen und lass mich dir mein Missionar geben . Okay. Lassen Sie uns ein Team zusammenstellen Okay, jetzt fügen wir mL ID hinzu. Nehmen wir an, Sie möchten ein paar Leute hinzufügen. Also möchte ich eine Person hinzufügen. Das werde ich mit meiner anderen ID sein. Okay, du kannst dort mehrere Personen hinzufügen. Es gibt kein Limit, Sie können unbegrenzt viele Personen hinzufügen. Es wird wieder die Premier-Version angezeigt, aber ich möchte bei meinem Startup bleiben, also wähle ich das Starter Pack und wir haben eine kostenlose Version von Team. Okay, im Moment hat es also nichts. Nehmen wir an, wir arbeiten mit Entwürfen und möchten einige Teammitglieder in unser Design aufnehmen Nehmen wir an, wir arbeiten an diesem Projekt und möchten einige Teammitglieder in unser Design aufnehmen, sodass ich diese Datei einfach nachverfolgen und unserem Team hinzufügen kann , also dem imaginären Team , also dem imaginären Jetzt ist es in den Teams. Jetzt öffnen wir es. Okay, momentan ist diese Person hier nicht verfügbar , weil diese Person unsere Anfrage nicht akzeptiert hat. Lassen Sie mich also gehen, damit ich mich mit diesem Konto einloggen und die Anfrage annehmen kann. Okay, also habe ich mich mit diesem Konto angemeldet und dieses Design bekommen. Jetzt kann ich einfach jedes Element ziehen oder jedes Element hinzufügen, und ich kann tun, was ich will. Ich kann einen Punchshop hinzufügen, sagen wir, Elemente wie dieses, ich kann Farben hinzufügen. Okay. Ich gehe zuerst. Okay, also wenn ich wieder zu meinem Hauptkonto gehe, also wie du siehst, ist es auch hier verfügbar, lass mich das so machen. Okay, also ich kann diese Person auch sehen, zum Beispiel, was sie an unserem Design macht und welche Änderungen sie vornimmt. Und wir können sie auch in Echtzeit zuweisen, also, okay, ich will diese Farbe nicht, sie in etwas anderes ändern, also können wir sie so ändern. Das ist also der Vorteil von kollaborativen Teams und der Nutzung von Teams. werde ich vorerst damit aufhören, Deshalb werde ich vorerst damit aufhören, weil ich hoffe, Sie verstehen, worauf es ankommt, zum Beispiel, wie das Team funktioniert, aber lassen mich Ihnen andere Funktionen der Teams erklären. Okay, also Opfer, wir teilen uns den Arbeitsplatz wie diesen. Und dabei können wir mehrere Dateien hinzufügen. Wir verwenden jedoch die kostenlose Version, sodass wir nur drei Dateien erstellen können. Wie Sie sehen können, verwenden wir derzeit eine. Wir haben noch zwei übrig und auch drei Fix-JM-Dateien. In Share Workplace sind wir in der Lage, Dateien gemeinsam zu nutzen , Prototypen zu erstellen und Probleme gleichzeitig zu beheben. Wir können auch Thread-Kommentare in einigen Bereichen unseres Designs erstellen Person kann einfach zu diesem Rechteck gehen und einen Kommentar hinzufügen und wir können sofort und in Echtzeit eine Antwort erhalten. Wir haben auch Versionskontrolle. Danach kann diese Person rollenbasierten Zugriff erhalten, so wie wir unsere Informationen schützen wollen. In diesem Fall können wir die Rolle also zuweisen. Mit Teams sind wir in der Lage, Projekte zu managen. Auf diese Weise können wir unsere Projektvorlage, Aufgabenliste und Fälligkeitstermine organisieren und unser Designsystem zentralisieren Und nach Abschluss des Projekts können wir unser Projekt analysieren, sodass wir wertvolle Erkenntnisse aus unseren Teamaktivitäten gewinnen und Verbesserungsmöglichkeiten identifizieren können unseren Teamaktivitäten gewinnen und Verbesserungsmöglichkeiten identifizieren Aber ich schlage Ihnen eine Sache vor: Nehmen wir an, wir arbeiten alleine. Verwenden Sie in diesem Fall also keine Teams, sondern entscheiden Sie sich für die Entwürfe, weil Entwürfe einfacher sind, und bei Entwürfen können wir mehrere Seiten hinzufügen Aber wenn Sie sehen können, können wir in Teams nur drei Seiten hinzufügen In Entwürfen können wir jedoch mehrere Seiten hinzufügen, und es gibt keinerlei Einschränkungen Das Gleichgewicht zwischen kostenlosen und kostenpflichtigen Inhalten hängt also von den spezifischen Bedürfnissen und dem Umfang Ihrer Entwurfsarbeit So können Sie also ein Team zusammenstellen, mehrere Mitarbeiter zu unserem Team hinzufügen und die Funktionen des Ich hoffe, du verstehst all das. Ich werde noch einmal eins sagen. Wenn Sie so wenig arbeiten, brauchen Sie keine Teams. Aber wenn Sie mit etwa zwei oder drei Mitgliedern arbeiten, können Sie zu dieser Zeit zu Teams gehen und auf Professional Virgin umsteigen. Also das war's für Leute, und ich werde euch im nächsten sehen. 30. Figma In Echtzeit mit Multiplayer zusammenarbeiten: Heiße meine Schüler willkommen. In diesem Gesetzentwurf werden wir den Prozess der Weitergabe unserer Designs an unsere Kunden untersuchen . Nehmen wir an, das ist mein imaginärer Kunde und ich habe mein Projekt mit ihm geteilt wenn er an seinem Design weiterarbeitet, kann ich sehen, welche Art von Dingen er an unserem Design macht Nehmen wir an, er geht durch diesen Zirkus oder dieses Banner oder sagen wir dieses Pergamo, wir können all diese Dinge sehen Lassen Sie uns also sehen, wie wir unser Design mit unserem Kunden teilen können. Okay, das ist also unser Design. Das ist unser Drahtgestell, und wir haben hier auch einige Animationen hinzugefügt. Also lass uns gehen und lass uns das mit unserem Kunden teilen. Nehmen wir an, mein Kunde heißt Chetan. Das ist auch mein Name weil ich mich von einem anderen Konto aus angemeldet habe, also ist es mein Name hier, und das ist mein echtes Konto, dem ich Figma benutzt habe Okay, also ich möchte das mit Chen teilen. Ich kann diese Person hinzufügen oder ich kopiere einfach diesen Link und teile ihn, sagen wir, über die App, Gmail andere soziale Medien, die dir gefallen. Lassen Sie uns vorerst einen einfachen Browser verwenden und lassen Sie mich diesen Link einfach kopieren. So kann jeder, der den Link hat, unser Design sehen. Und diese Person erhält ein anonymes Konto wie dieses, und das ist unser echtes Konto. Aber mit dem Link kann diese Person nur das Design sehen. Er kann nicht viel tun. Er kann zum Beispiel unser Design nicht bearbeiten oder kommentieren. Aber er kann unser Design nicht präsentieren. Nehmen wir an, wir wollen uns ein Bild von ähnlichem Design machen, zum Beispiel von den Dingen, die wir beim Prototyping gemacht haben, damit er diese Dinge sehen kann Also wie bei diesem, wir haben diese einfache Animation, ein Kategoriekonto und all das erstellt Kategoriekonto und all das Lassen Sie uns jetzt unseren imaginären Client aktualisieren , mit dem ich mich mit meinem sekundären MIT anmelden Wenn sich diese Person also angemeldet hat, kann sie alles sehen, wie das Briefing, sowie die verschiedenen Arten von Seiten, die wir erstellt haben, wie für Tablets, für Mobilgeräte, sowie den Aufgabenablauf Diese Person kann nur das Design sehen. Er kann nicht bearbeiten. Nehmen wir an, die Person versucht, das zu verschieben. Das wird nicht passieren, weil wir nur die Erlaubnis gegeben haben , es anzusehen, nicht aber. Aber was er tun kann, ist, dass er einen Kommentar hinzufügen kann. Nehmen wir an, er ist neugierig auf so etwas wie diesen Zirkus. Sie können also einfach darauf klicken und Kommentare wie diesen hinzufügen. Was präsentiert der Zirkus, und du kannst es an den Hauptdesigner schicken. Das bin ich. Wenn ich also zu meinem echten Design übergehe, so als ob das ich bin, ist das mein Hauptkonto, also kann ich in meinen Kommentaren sehen, ich einen Kommentar bekommen habe und er auch hier auftaucht Ich kann einfach zu den Kommentaren gehen und sehen, welchen Kommentar ich von Ceden bekommen habe. Ich kann einfach auf diesen Kommentar klicken Okay, ich kann einfach antworten, das sind vier Kategorien Kategorie und ich kann es einfach schicken. Okay, diese Person hat also unsere Antwort erhalten, und ich kann einfach auf diese Schaltfläche „Auflösen“ klicken. Und wenn ich in die Kommentare gehe, können Sie sehen, dass unser Kommentar jetzt gelöst ist . Lass mich dir eine Sache zeigen. Mach das so. Okay, damit du in unserem Design sehen kannst , was er macht. Nehmen wir an, er bewegt seine Maus so darauf, wie auf diesem Design, das wir erstellt haben Wir können also sehen, wohin er geht , welche Dinge er durchmacht? Also mag er den Rahmen oder nicht? Nehmen wir an, wir sind beide auf Abruf und nehmen wir an, er will , dass ich diese Farbe nicht mag. Und lass mich gehen. Okay. Lass mich das nehmen. Okay, also wenn er sagt, ich mag diese Farbe nicht, kannst du das ändern? Also kann ich einfach zu meiner Figma gehen. Und ich kann einfach die Farbe so ändern. Ich kann Rot, Grün, Blau wählen , so. Das ist der Vorteil der kollaborativen Nutzung einer Figma. Die wahre Magie liegt in den kollaborativen Designfunktionen von Figma Ich habe bewiesen, dass ich das bin. Ich habe meinem Kunden gezeigt, was wir mit einer kollaborativen Funktion machen können, bei ein Benutzer ein Element manipuliert, das der andere Benutzer in Echtzeit sehen kann Es ist eine leistungsstarke Funktion für Designer, die kollaborativ arbeiten Dies hält den Designprozess organisiert und hilft Designern, das Feedback der Kunden effektiv zu verwalten. Zusammenfassend lässt sich sagen, dass das Teilen von Design in Figma ein Satz ist. Ob über einen einfachen Link für erstes Feedback oder durch die Möglichkeit, Kommentare für eine detailliertere Interaktion zu ermöglichen, die Kollaborationsfunktion der Plattform wurde durch die Kommunikation zwischen Designern und Kunden verbessert , wodurch der Prozess der Entwurfsprüfung reibungsloser und Hier geht es nur darum, Ihr Design mit Ihrem Kunden zu teilen und die Sache mit den Befehlen Weiter unten in Explore werden Teams sehen, wie Teams arbeiten. Das ist ein Hafen und wir sehen uns im nächsten, Kai. 31. Was sind Moodboards und das GEHEIMNIS zur schnellen Suche nach Inspiration für Web- und App-Design: Willkommen zurück, Designer. Im heutigen Glauben werden wir lernen, was Moodboard ist und wie Sie sich für Ihre Projekte inspirieren lassen können. Stell dir vor, du starrst auf eine leere Leinwand, dein Kopf scrollt aber vor Ideen Aber ohne eine kohärente Vision für Ihr bevorstehendes US-Projekt könnte es überwältigend sein, könnte es überwältigend sein Betreten Sie das Moodboard. Sie erstellen einen Kompass und eine visuelle Roadmap zum Erfolg Moodboards sind mehr als nur eine Collage. Sie sind mächtige Werkzeuge Sie erschließen das volle Potenzial von A Design Journey. Lassen Sie uns in die magischen Moodboards eintauchen und herausfinden, warum sie eine unverzichtbare Waffe im UX-Design sind . Zunächst zu dieser Klarheit und Fokussierung. Stellen Sie sich vor, Sie verkaufen ohne Landkarte. So fühlt es sich im Grunde genommen an, ohne Moodboards zu entwerfen fühlt es sich im Grunde genommen an, ohne Moodboards Moodboards sorgen für die nötige Klarheit und Fokussierung, indem sie die Essenz von O Project einfangen Sie definieren die Ästhetik anhand der Farbpalette, erkunden die Schrift und die Textur und legen eine konstituierende visuelle Sprache fest Diese Roadmap leitet Sie bei unserer Designentscheidung sorgt für ein einheitliches und uneingeschränktes An zweiter Stelle stehen Inspiration und Kreativität. Moodboards sind wie ein visuelles Fest für deine Seele. Die lebendige Mischung aus Bildern, Farben und Texturen entfacht Ihren kreativen Funken und beflügelt Ihre und Es ist eine ständige Inspirationsquelle öffnet Türen für neue Designmöglichkeiten und innovative Ansätze Wenn Sie mit verschiedenen Elementen experimentieren, Ihre Moodboards weiter und spiegeln die sich ständig ändernde Landschaft Ihrer kreativen Vision Drittens geht es um Zusammenarbeit und Kommunikation. Kommunikation ist der Schlüssel. Und Moodboard durchbricht die Grenzen zwischen Designern, Kunden und Stakeholdern Sie dienen als leistungsstarkes Kommunikationsinstrument setzen Ihre abstrakte Idee in Durch die Präsentation Ihres Moodboards teilen Sie effektiv Ihre Vision und stellen sicher, dass alle auf derselben Wellenlänge sind, sich an der Ausrichtung des Projekts und in dessen Erfolg investieren An erster Stelle stehen Konsistenz und gemeinsame Vision. Stellen Sie sich ein Design vor, bei dem sich jedes Element fehl am Platz anfühlt , wie eine erschütternde Zwietracht in einer Moodboards verhindern diese Disharmonie , indem sie Konsistenz und Zusammenhalt fördern. Indem Sie Ihre visuelle Rollenverteilung während des gesamten Designprozesses berücksichtigen, stellen Sie sicher, dass jedes Detail, von der Farbpalette bis zur Typografie, auf Ihre ursprüngliche Vision abgestimmt ist, sodass ein einheitliches und harmonisches Benutzererlebnis entsteht Und der letzte Punkt ist Entscheidungsfindung und Effizienz. Moodboards fungiert als Katalysator für eine effiziente Entscheidungsfindung mit einer klaren Vision, die Ihnen vor Augen liegt Treffen von Entscheidungen in Bezug auf Designelemente wird mühelos Sie planen die Gasarbeiten, vermeiden kostspielige Änderungen und steuern den Entwurfsprozess anhand der Konferenz und der Fokussierung Die Klarheit und Orientierung, die mehr Gremien bieten. Optimieren Sie letztendlich Ihren Arbeitsablauf sparen Sie wertvolle Zeit und Ressourcen Hier dreht sich also alles um die Anzahl der Boards. Schauen wir uns nun an, wie wir uns für unsere Projekte inspirieren lassen können. Die erste Website ist also Liebe auf einer Seite. Auf dieser Website können Sie sich viel Inspiration für Ihre Projekte holen . Und das Beste an dieser Website ist, dass Sie hier viele Dinge sortieren können. Sagen wir mal, ich möchte eine App entwerfen. Ich kann zu Vorlagen und Apps gehen. Sie können auch zu Ressourcen, Informationen und Hire gehen und auch eine Seite erstellen. Derzeit bin ich also in den Vorlagen und in der App. Man kann also sagen, dass ich viele Vorlagen habe. Ich kann einfach zu einer beliebigen Vorlage gehen. Nehmen wir an, entscheiden wir uns für diesen , diesen Kopf gegen einen. Darin kann ich sowohl die Schrift als auch das Bild sowie die Farbe des Hintergrunds und die Art des Designs sehen. So können Sie sich für Ihr Projekt inspirieren lassen. Sie können also auf diese Website gehen, sich alle Vorlagen und Designs ansehen und sich für Ihr Projekt inspirieren lassen. Nun, die zweite ist Voto, Ivo Voto Limits. Dies ist auch eine wirklich großartige Website zur Inspiration. Gehen Sie einfach zur Suche und geben Sie ein, was Sie wollen, wie in diesem Fall Ich will Commerce-Website, E-Commerce-Apples Commerce-App. Und wir zeigen Ihnen alle Apps. Okay, so sieht die App aus. Sie können also eine Screenshot-App und wir können diese in ein Moodboard einfügen. Als nächstes ist Dribble eine der besten Websites für EV Dris und diese Wars-Website ist eine der Das sind also die drei besten Websites Ein Design, das verwendet wurde, um sich inspirieren zu lassen Außerdem gibt es Adobe Stop. Sie können auf diese Website gehen und suchen was Sie wollen, und sich davon inspirieren lassen. Sie können dieses Bild herunterladen oder einen Screenshot davon machen. Und nachdem Sie diese Bilder und den Screenshot aufgenommen haben, sie einfach in die Figma Das ist also die Website, auf der Sie sich inspirieren lassen können. Lassen Sie mich Ihnen diesen Award zeigen. Das ist wirklich großartig. Es hat wirklich, wirklich tolle, ich würde sagen, Vorlagen und Websites, die wirklich preisgekrönt sind. Nehmen wir an, ich gehe auf eine Website. Wie Sie sehen können, ist dies eine wirklich minimalistische Website. Es hat etwas Text und all das. Und der Text ist wirklich einfach, aber attraktiv. Die verwendeten Bilder sind auch wirklich großartig. Hier dreht sich also alles um Moodboards und darum , wie Sie sich für Ihr Projekt inspirieren lassen können. Lassen Sie mich Ihnen nun ein Moodboard zeigen, das ich für mein Projekt erstellt habe, und wir werden dieses Projekt in einem zweiten Projekt erstellen . Lassen Sie mich Ihnen das zeigen. Also das ist unser zweites Projekt, und das ist das Moodboard und das Textdesign und all das. Es ist auch präsent. Ich weiß, dass es derzeit wirklich durcheinander Ich werde es in Zukunft organisieren. Aber so sieht das Moodboard aus. Äh, ich habe ein paar Screenshots und sie angeordnet, und ich habe auch das erstellt, wie die Farbpalette O für dieses spezielle Design, und das Enddesign sieht so aus Ich weiß nicht, wie ich dir so viel zeigen soll, aber das sind das Moodboard und die Farbpalette. sich also alles um Moodboards und inspirierende Websites Geh es einfach durch. Ich habe alle Links in den Ressourcen hinzugefügt und sie durchgesehen, inspirieren lassen, ein paar Bilder als Screenshot gemacht, normalerweise aufgenommen. Also bis zum nächsten Video, wir werden zeigen, wie ich die s in Moodboards organisiere. Also werde ich dich im nächsten treffen. 32. So erstellst du ein Moodboard in Figma: Wir sind kreative Köpfe. Heute tauchen wir in die Kunst der Moodboards ein. Ich werde Ihnen zeigen, wie Sie Ihren inspirierenden Screenshot in etwas Ausgefallenes verwandeln können, sowohl für Ihre persönliche kreative Reise für diese plinkenden Kunden Fangen wir also mit unseren Moodboards an. Dafür können wir in die Figma-Community gehen und einfach nach Moodboards suchen. Also lass es mich dir zeigen Okay, du kannst also in diese Figma-Community gehen. Und wenn Sie nach Moodboards suchen, erhalten Sie eine Reihe von Moodboards und Sie können eines davon auswählen Also habe ich diese drei ausgewählt, wie dieses , dieses und dieses. Das ist also das Beispiel, wie das Moodboard aussehen wird. Das ist also wie besser organisierte Moodboards. In der vorherigen Ansicht habe ich dir also mein Moodboard gezeigt. Es war wirklich durcheinander. Wenn Sie also organisieren organisiertes Moodboard erstellen möchten, können Sie dieses Tablet wählen, dieses kopieren, lassen Sie mich ein anderes kopieren Okay, lass mich das kopieren. Gehen wir zu Power Project und fügen es hier ein. Und ich kann jetzt ein Bild hinzufügen. Lassen Sie mich also zuerst ein Bild plus ein Bild verfolgen. In der Figma-Übungsdatei habe ich Moodboards hinzugefügt, sodass Sie auch einen Screenshot machen können, wenn Sie möchten, oder wenn Sie einen eigenen Screenshot haben, können wir diesen auch auswählen Öffne eins, zwei, drei. Dies ist der organisiertere Weg, aber ich werde diesen lesen. Okay, ich zeige dir meinen Weg, also den dreckigen Weg. Wenn du so wenig arbeitest, sage ich, mach es dir schmutzig. Ziehen Sie einen Rahmen wie diesen und lassen Sie mich erneut einige Bilder auswählen. Ich gehe einfach zu meinem Formtopf und wähle sie alle aus, und ich werde sie einfach hier drüben ablegen Danach werde ich es so organisieren. Das ist mein Weg. Du kannst einfach einen Frame erstellen und ihn so ablegen, und du kannst ihn Moodboards nennen Wenn du willst, kannst du zur Community gehen und auch diese auswählen Für einen organisierteren Weg. Wenn du so arbeitest, sage ich, mach es dir schmutzig und erstelle Moodboards wie dieses. Denken Sie daran, dass diese Moodboards ein wichtiges Kommunikationsinstrument sind. Sie helfen also dabei, den Kunden Ihre Designrichtung zu vermitteln. Da haben Sie es also, das schnelle und dreckige Moodboard für Ihre eigene Erkundung und die Polizeiversion für unsere Produktlinien. Machen Sie sich also im nächsten Video auf weitere Designabenteuer gefasst. 33. Klasse-Projekt 5: Inspiration Station: Aufbau eines Moodboards in Figma: Hallo, alle zusammen. Willkommen zu Projekt Nummer fünf. Das ist Mood Board. In diesem Projekt werden wir die spannende Welt der Moodboards erkunden. Lassen Sie uns für Ihr Projekt eintauchen. Als Erstes müssen Sie ein Moodboard für Ihre Benutzeroberfläche erstellen Dies ist eine visuelle Darstellung des gesamten ästhetischen Stils und der Sie möchten, dass Ihre Marke vermittelt. Sobald Sie Ihre Moodboards erstellt haben, ist es an der Zeit, sie zu präsentieren. Wenn Sie eine eigene Seite erstellen und sie Moodboards nennen können, können Sie diese Seite kopieren und zur besseren Organisation hier einfügen Dies könnte ein einfacher Screenshot-Dump sein oder etwas ausgefeilteres Beispiel wie ein ausgefeilteres Beispiel wie Nachdem Sie weitere Foren wie dieses erstellt haben, machen Sie einen Screenshot davon und reichen Sie ihn mir im Projektbereich Das wird also unser Projekt Nummer fünf sein Erstelle ein weiteres Board und reiche es bei mir ein. Das sind die Fotos von B und ich werde euch auf dem nächsten sehen. 34. Ein responsives Grid-System für Web- und UI-Design erstellen: Hallo zusammen und willkommen zurück zu den UI EX Designers Figma Cost Wir haben bisher viele Gründe behandelt. Von den Grundlagen bis hin zur Herstellung von Low-Pat-Wireframes Low-Pat-Wireframes Jetzt ist es an der Zeit, unsere Fähigkeiten auf die Probe zu stellen und mit der Gestaltung der eigentlichen Benutzeroberfläche zu beginnen Ab heute tauchen wir also in unsere High Pit Wireframes ein , also hohe Feuerrahmen Und heute werden wir auch lernen, wie wir in unserer mobilen App Spalten und Noten hinzufügen können. Also als Erstes. Also, wie Sie sehen können, befinden wir uns derzeit im Low-Fidelity-Wireframe. Das ist eine geringe Gebühr Aber auf den Seiten habe ich es Clickart Mobile App genannt, aber das ist nicht die App, also lass mich das umbenennen Doppelklicken Sie. Und ich werde das umbenennen. Klicken Sie auf Card Mobile App, geringe Gebühr. Das ist ein Wireframe mit niedriger Faidität. Okay. Du kannst es nennen, wie du willst. Ich gebe dem einen Namen. Sie können sowohl Amazon als auch Walmart benennen als auch Walmart Es kommt also ganz darauf an, dass Sie Ihnen anstelle der PLI-Karte auch einen Namen geben anstelle der PLI-Karte auch einen Namen Und wir haben diese Seite für Tablets erstellt, aber wir entwerfen keine Tablet-App Wir entwerfen tatsächlich Apps. Also lass mich das umbenennen. Ich nenne es einfach App und ob. Das ist ein High-Fidelity-Drahtrahmen. Wann immer wir also auf Wireframe umsteigen wollen, können wir einfach so vorgehen und wir können zu unserer High-Fidelity-Technologie übergehen Okay. Gehen wir jetzt zu Frames und fügen einen Frame hinzu, weil ich es dir zeigen und dir etwas über Spalten-Skripte beibringen möchte über Spalten-Skripte beibringen Es gibt Dinge, die Benutzer nicht sehen, aber wir als Designer verwenden sie, um die Anordnung von Komponenten auf dem Bildschirm einfacher und einheitlicher zu gestalten Komponenten auf dem Bildschirm einfacher und einheitlicher Wenn Sie einen Bildschirm entwerfen, haben Sie verschiedene Komponenten, die sich in ihrer Größe unterscheiden und relativ zueinander voneinander entfernt sind. Hier finden Sie also einen kurzen Überblick darüber, wie einen Bildschirm strukturieren, um beim Entwerfen schnelle Entscheidungen zu treffen. Das Erste werden die Margen sein. Ränder sind Zwischenräume, die sich zwischen dem Inhalt und den Rändern des Bildschirms befinden. Sie sind mit einem festen H definiert, normalerweise 16 Pixel, aber einige Apps verwenden 20 oder 24 Ränder. Die gesamte Größe von UI-Elementen und der Abstand zwischen ihnen werden als Vielfaches der Zahl von acht festgelegt. Sie denken vielleicht an die Zahl 8, weil es einfach ist , die meisten mobilen Bildschirme in das Achterraster zu unterteilen. Als Nächstes geht es um Dinge zwischen Rändern , bei denen es sich um Spalten handelt. Der Inhalt wird innerhalb der Spalten platziert. Dies hilft uns, zu entscheiden, wo ein Element platziert werden soll , und eine gut strukturierte Oberfläche zu erstellen. Spalten helfen Entwicklern dabei, ein einheitliches Layout für mehrere Bildschirmgrößen zu erstellen . Die häufigste Zahl ist vier, aber Sie können es auch mit sechs oder acht versuchen. Die Breite wird durch Prozentwerte und nicht durch feste Werte definiert . Und als Nächstes sind Dachrinnen dran. Dachrinnen trennen den Behälter in den Säulen. Der empfohlene Wert für Dachrinne ist ebenfalls 16 Pixel. Weniger als 16 Pixel reichen normalerweise nicht aus, um das Element visuell voneinander zu trennen Aber hey, vielleicht funktionieren acht Pixel irgendwann. Probiere es einfach selbst aus. Lassen Sie uns jetzt über die Zeilen sprechen. Es wird auch als horizontale UI-Grits bezeichnet. Ein horizontales UI-Gitter wird verwendet, um UI-Elemente wie Schaltflächen, Karten und Schalter horizontal auszurichten wie Schaltflächen, Karten und Die horizontalen Abstufungen sind auf einen Rhythmus von acht Pixeln eingestellt. Dadurch wird sichergestellt , dass der vertikale und der horizontale Abstand synchron sind. Lassen Sie uns Fragma übersetzen und fügen wir einige Noten und Spalten Wenn Sie also im Design-Panel auf Ihren Rahmen klicken, erhalten wir einen Layoutbildschirm. Klicken Sie einfach darauf Und zuerst ist es ein bisschen geschickt, zehn Pixel sind ein Raster von zehn Pixeln, aber ich möchte zuerst Spalten einrichten, also wählen wir eine Spalte Und meistens verwende ich eine Vier. Vorne kannst du sechs oder acht verwenden. Ich hänge total von dir und deinem Design ab. Der Rand sollte 16 sein und die Dachrinnen sollten 16 sein. Das sind also die Industriestandardwerte. Okay? Lassen Sie uns jetzt mit einer Reihe beginnen. Wir sind fertig mit den Spalten. Also einfach auf die Schaltfläche Plotum Plus klicken und jetzt Stangen. Also für Zeilen, und ich werde sagen, dass die Zählung automatisch erfolgen sollte , da die Zählung automatisch vorgenommen wird Und ich sollte einmal in der Mitte sein, und die Höhe sollte acht sein und die Dachrinne sollte ebenfalls acht sein Das war's also, gib den Wert ein und sieh dir dein schönes Layout an Und hier ist ein Protape. Spielen Sie ein bisschen mit Zahlen herum, vielleicht drei, sechs oder acht um zu sehen, was passiert und wie Sie es verwenden können Um das Layoutraster ein- und auszuschalten, klicken Sie einfach auf das Symbol wie hier. Wir können es so aus - und einschalten. Oder Sie können die Tastenkombination verwenden, um G für Mac und die Umschalttaste für Windows zu steuern Und hier ist Pro-Tape noch wichtiger. also keine Sorgen, wenn eine Komponente funktioniert und besser aussieht, wenn sie nicht perfekt auf ein Raster ausgerichtet ist. Grid sind hier, um Ihnen zu helfen, aber Sie müssen ihnen nicht blind folgen Wenn Sie die meisten Dinge aufeinander und kleine Anpassungen nichts kaputt machen Der Inhalt wird das Raster definieren , nicht umgekehrt. sich also alles um die Ränder, Rasterschneider, Säulen, Fußböden Ja, also so legen wir unsere Raster auf unseren Rahmen an. Also, das ist ein Fotovideo, und ich werde euch im nächsten sehen 35. So wählst du Farben aus (Color Inspiration): Willkommen Max Designer. In dieser Welt tauchen wir in die farbenfrohe Welt des Designs ein und erkunden die verschiedenen Quellen der Farbinspiration. Lassen Sie uns also damit beginnen, diese Farben in Figma zu finden, zu extrahieren und zu verwenden Zunächst einmal gibt es zahlreiche Websites, die sich Farbinspiration widmen, aber lassen Sie mich Ihnen sagen, Ju Juhad ist so etwas wie wir machen etwas Seltsames und machen etwas Nützliches Es ist die indische Welt. Okay, lass mich dir eins zeigen. Also die meiste Zeit mache ich, dass ich solche Motherboards erstelle und ein paar Rechtecke zeichne Nehmen wir an, das ist das Rechteck. Das ist ein Rechteck. Und ich gehe einfach zum Feld und wähle das Lidpipper-Werkzeug und zusätzliche Farben wie diese Und wenn ich eine Farbpalette möchte, dann kann ich zu Farben und Lidpipette gehen und diese Farbe wählen Okay? Okay, dieser. Wie Sie sehen können, extrahiere ich auf diese Weise meine Farben. Das ist der wirklich grundlegende Weg. Das ist nicht so professionell, aber du kannst es benutzen und dann funktioniert es. Lass uns noch einen Ball schießen. Okay, lass uns mit diesem gehen. Wir haben also drei verschiedene Arten von Orange. Okay, so können wir Farben extrahieren. Lassen Sie mich Ihnen nun einige Plug-ins zeigen, von denen Sie für Ihre Farbpaletten inspirieren lassen können Okay. Die erste sind Farbpaletten, diese vier Und diesen haben wir auch. Aber Figma betreibt einen Stecker nach dem anderen. Okay, wir haben also auch dieses Farbfeld Schrägstrich in der Farbpalette Okay, wir können also auch dieses verwenden. Nehmen wir an, wenn ich diesen auswähle und ihn kopieren möchte, kann ich ihn einfach kopieren und zu diesem Füll- und Schädlingsbekämpfungsprogramm übergehen. Und Sie können sehen, dass sich die Farbe jetzt geändert hat. Von hier aus können wir also eine Reihe von Farbpaletten abrufen, und es gibt ein weiteres Plugin namens Farbpaletten Und okay, es ist auch genau dieselbe Website. Wählen Sie einfach das Rechteck und eine beliebige Farbe aus und klicken Sie einfach darauf. Es wird diese Farbe zu diesem Rechteck hinzufügen. Jetzt haben Sie eine Farbpalette. Lassen Sie uns nun den proponalen Weg gehen und uns einige Websites ansehen, die Farbpaletten und einige Inspirationen für Ihre Projekte bieten Farbpaletten und einige Inspirationen für Ihre Okay. Die erste ist eine der besten, würde ich sagen, und die meisten Grafikdesigner verwenden diese Websites. Die erste ist va colors, w.com slash Colors. Wir können auf diese Website gehen und dort haben wir vier Optionen wie den Farbpalettengenerator, die Idee für die Farbpalette, das Farbrad und die Farbbedeutung Lassen Sie uns also mit dem Color Parte Generator beginnen. Nehmen wir an, Sie haben ein Bild und momentan kein Bild. Okay, wenn Sie also ein Bild haben, können Sie es hochladen und es extrahiert alle Farben und es gibt Ihnen den X-Code dafür, und Sie können es einfach kopieren und in Figma einfügen Und das kannst du als Farbpalette verwenden. Das ist also die erste Option. Lassen Sie uns danach zu den Ideen für Farbpaletten springen. Wir haben auch hier Bunjop-Optionen. Und wir können eingeben, welche Farben wir wollen. Nehmen wir an, ich möchte ein blaues Koma, Schwarz, Gelb. Okay, lass uns sehen. Also haben wir ein paar nette Farbbarats, wir haben Blau, Gelb und das, was ich getippt habe Also so oder so funktionieren diese Farbbarrats. Das nächste ist das Farbrad. Oh, das ist eines der besten, was ich sagen werde. Wenn wir zum Farbrad gehen und eine Farbe wählen, also, usw., nehmen wir Rot. Es wird dir auch die komplementäre Farbe sagen. Und Sie können sowohl in einfarbige als auch in analoge Farben wechseln als auch in Danach können Sie, wenn Sie analog wollen, drei Farben verwenden In Striic erhalten wir auch drei Farben mit unterschiedlichen Farben, und in Sottic erhalten wir Wir können diese Palette einfach kopieren und exportieren und Sie können sie in Puma eingeben und für unser Design verwenden Wenn Sie viele Informationen über eine serielle Farbe erhalten möchten , gehen Sie einfach zur Farbbedeutung und Sie können, glaube ich, den Farbnamen eingeben, dann erfahren Sie alles über die Geschichte Nehmen wir an, ich entscheide mich für diese Farbe, Amber, dann wird sie mir die ganze Geschichte dieser Farbe erzählen Wenn Sie mehr daran interessiert sind, können Sie auf diese Website gehen. Wenn Sie mehr über Farben erfahren möchten. Der nächste ist jetzt Adobclor. Es ist auch irgendwie dasselbe, aber es hat auch ähnliche Funktionen wie va aber es hat auch ähnliche Funktionen wie va. Wir drehen dieses Einstellrad und wir erhalten diese Farben, und wir können den Farbmodus RGB SG Lab ändern, wir können auch nach Bedarf des Schauspielers suchen, so wie ich es in Blau, Gelb und Grün gemacht habe , so etwas in der Art. Sie können es hier anhängen und Sie erhalten eine Farbpalette wie diese. Als Nächstes müssen Sie sie extrahieren. Wir haben also in Canva gesehen, dass wir jede Datei hochladen können . Laden wir diese hoch und sie extrahiert alle Farben daraus Wenn du mit bloßem Auge siehst, sagen wir nur zwei Farben wie blau, tut mir leid, gelb und weiß Aber mit diesem Tool können wir die verschiedenen Gelbtöne sowie Schwarzschwarz sehen . Sie können auch die Verlaufsfarbe extrahieren, da Sie die Verlaufsfarbe sehen können. Und dieses ist wichtig, das Barrierefreiheitstool. Es wird Ihnen sagen, ob diese Farbe für Ihr Design geeignet ist oder nicht. Mal sehen, ob ich etwas anderes verwende. Also lass mich diesen benutzen. Sie können also sehen, dass es gefühlt wird und die Farbe nicht zur Hintergrundfarbe der Hauptfarbe passt. Die Textfarbe passt nicht zur Hintergrundfarbe. So erfahren Sie , welche Farbe sich hervorragend für unser Design als Hintergrund für einen Text Das ist also wirklich hilfreich. Sie können zu Explore gehen, um weitere Farbpaletten wie diese zu erhalten, und wir können nach Bedarf suchen Außerdem gibt es einen Trendbereich, Sie alle Trendfarbpaletten Wenn Sie diese Sekunde herunterladen möchten, laden Sie sie einfach herunter und importieren Sie sie in Figma. Laden wir diese herunter Und lassen Sie mich das zu Figma hinzufügen. Okay. Okay, das war also das Bild, das es heruntergeladen hat. Also das ist der Farbteil. Es kommt auch mit X-Code. Sie können auch Tropo Two wählen, um diese Farbe zu extrahieren. Lass uns jetzt zur nächsten Website springen. Das ist Farbjagd. Es ist eine der beliebtesten Websites im Bereich Grafikdesign, sowohl im VX-Bereich als auch im Motivationsbereich Sie können also einfach auf die Unterwebsite gehen. Es hat bereits eine Farbpalette erstellt. Sie können es einfach herunterladen und in Figma importieren. Sie können es auch nach Farben suchen. Außerdem zeigt es einen beliebten Cromon und alle Zeiten zufällige Abschnitte Wenn du eine Farbe magst, zum Beispiel diese, und wenn du zur Sammlung gehst, wird sie dir angezeigt Du hast dieses Ding in der Sammlung. Okay, hier geht es also um Farbenjagd. Wenn Sie Farbpaletten mit Farbverlauf wünschen, gehen Sie zu Criban. Es ist auch eine der beliebtesten Websites Sie können auf diese Website gehen und diese Farben kopieren und in Ihrem Design verwenden Denken Sie daran, dass die Welt voller Farben ist und Ihr Design den Ton, die Stimmung und den Zweck Ihres Projekts widerspiegeln sollte . Ganz gleich, ob Sie sich von Websites, Farbverläufen oder vorhandenem Design inspirieren lassen von Websites, Farbverläufen , Fiber bietet das Tool, mit dem Sie Ihre Farbpalette mühelos gestalten können. Experimentieren Sie also, entdecken Sie und lassen Sie Ihrer Kreativität freien Lauf. Im nächsten Video werden wir unsere Designreise fortsetzen , also auf den neuesten Stand gebracht. 36. So erstelle ich UI-Farbpaletten in figma: Willkommen. In diesem Wow tauchen wir in die farbenfrohe Welt des Designs ein, indem wir eine Farbpalette kreieren , die als Grundlage für unsere High-Fidelity-Scheinkräuter dienen wird . Das ist also das Beispiel meiner Farbpalette. Das ist also die etwas fortgeschrittene Technik und das ist die normale Technik, die wir jetzt lernen werden. Und das sind meine Hauptfarben. Als ob das die Grundfarbe ist. Das ist die zweite Farbe, und das ist die Farbe oder Neutronenfarbe oder du kannst es Akzent nennen Lassen Sie uns also ein Farbsystem erstellen. Also bevor wir das tun, lass mich dir eins sagen. Nehmen wir an, es gibt eine beliebige Lieblings-App , mit der Sie die Farben replizieren möchten Sagen wir Instagram. Es gibt also eine Website namens Brand ***. Es enthält alle Informationen über diese Marken wie Schriftarten sowie die Farben sowie ich würde sagen, die Bilder und all das. Lass uns zu Instagram springen. Nehmen wir an, Instagram ist ein Heldentyp, und wir können zu Sagm springen und es wird uns alles sagen, wie das Logo, die Schriftart und auch die Farbe Gehen wir also zu den Farben. Sie können sehen, dass wir acht Farben haben. Und wenn Sie sich von dieser Marke inspirieren lassen möchten, können Sie einfach die Farben kopieren und in Ihrer Marke verwenden. Dies ist eine der besten Optionen, werde ich sagen. Es gibt auch die Option Tesla. Sie können in Tesla sehen und lassen Sie uns zu den Farben übergehen. Sie können sehen, dass T L wirklich Grundfarben sind. Es hat kein Profil. Das sind Farben, die wirklich einfach sind. Wie Menschen, die die Farbcodes kennen, die sie kennen werden, ist dies eine der Grundfarben. Das ist komplett weiß, das ist komplett schwarz und das ist die komplett rote Farbe. Wenn du dich für diese Farben entscheiden willst, mach es einfach. Lassen Sie uns nun zu Figma springen und unsere Farbpalette erstellen Okay, lassen Sie uns einen Rahmen zeichnen, und ich werde ihn Farbsystem nennen Bringen wir jetzt unsere Primärfarben mit. In meinem Fall werden dies meine Primärfarben für unsere Klickkarten-App Lassen Sie mich sie einfügen und diese Farbe duplizieren. Ich dupliziere so. Okay, das werden also die Hauptfarben sein. Das wird wie eine Art von Farbnuancen sein, und das wird eine Tönung sein, schätze ich Okay, also ich werde zuerst Chint entwerfen , gehen wir zu Phil, und ich werde wählen Standardmäßig ist es x, also wähle SSH SL, also wähle SSH SL, und du musst nur Shifty und Downerk verwenden, um die Werte wie folgt zu ändern Aber vorher müssen Sie einen der Parameter wählen. Wie in diesem Fall werde ich diese Helligkeit wählen und sie um zehn verringern Und das Gleiche gilt für diese Zehn. Wir können auch die Sättigung ändern. Derzeit ist es erledigt. Lassen Sie mich ein bisschen runter auf 71 gehen, das Gleiche gilt für diesen, Lichter minus zehn, und dieser ist auch die Sättigung. Ich glaube, ich habe die Sättigung hier nicht verändert. Okay, das wird also mein Bereich für Farbnuancen sein, und das wird mein gemeinsamer Bereich sein Also lass mich ihn teilen. Derzeit sind es 81 Schichten und AppAref auch diese Verstehe diesen . In diesem Fall ist die Sättigung 100, also werden wir 100 ats behalten. Wenn es in diesem Fall auf hundert geht, können Sie es ein wenig modifizieren. Wir wollen nur einen Hinweis auf diese Farbe. Ich werde auf 95 steigen. Es ist sichtbar. Kaum sichtbar. Jetzt wollen wir einige Anteile wie Schwarz-Weiß-Anteile der Primärfarbe erstellen . Lassen Sie mich diesen kopieren und lassen Sie mich die fünf davon erstellen. Das wird nicht ganz schwarz sein , ähnlich wie bei den Farben. Als ob es von dieser Farbe am dunkelsten sein müsste. Ich werde zu diesem gehen. Ich hänge total von dir und deinem Design ab. In diesem Fall mache ich es ein bisschen heller, so und wir kopieren dieses. Lass mich mehr nach links schneiden. Das Gleiche gilt für diesen. Der letzte muss weiß cremefarben sein, nicht ganz weiß auf weiß. Wenn wir weiß machen, ist es brauchbar. Lass mich es cremeweiß machen. Okay, so wie das. Okay, das wird also unsere Farbpalette für dieses UI-Design für Karten sein . So erstellen wir in Figma eine Farbpalette für unser Y-Design Und beim nächsten Mal werden wir sehen, wie man den Stil kreiert Es ist also wirklich hilfreich. Lass mich ein Rechteck zeichnen. Also kann ich es einfach in ein beliebiges Rechteck ziehen. Ich kann einfach zum Füllen gehen und meine Farbpalette auswählen, sagen wir, meine momentan sind das die verschiedenen Paletten Farbe ist also anders. Also sagen wir, das ist mein primärer Kologe, den ich mir aussuchen kann. Also muss ich nicht einfach auffüllen und dann muss ich die Farbe und den Tropfen wählen, und dann muss ich die Farbe und den Tropfen wählen den ich fallen lassen muss Die Reput-Aufgabe wird hier gestoppt. Wir müssen also nur zu diesem Abschnitt in den Stilen und in der Bibliothek gehen und Farben für unser Design auswählen Das ist ganz einfach. Das ist unser Designsystem. Oh, tut mir leid. Das ist unser Farbsystem für diese App, Clickat-App. Und hier ist ein Profi. Es ist wichtig zu beachten , dass die Farbe hilfreich sein kann, um sich mit Komplementärfarben vertraut zu machen. Sie können zum Beispiel zu Leinwandfarben oder Auto-B-Farben und die passenden Farben auswählen Dies kann dabei helfen, sekundäre und neutrale Farben zu finden sekundäre und neutrale Farben , die mit der von Ihnen gewählten Palette harmonieren Denken Sie daran, dass die Farbtheorie zwar etwas Wissenschaft beinhaltet, aber auch ein gewisses Maß an Kreativität Der Prozess beinhaltet eine Mischung aus Intuition, persönlichen Vorlieben und Experimenten können es also gerne erkunden und anpassen, bis Sie eine Farbpalette gefunden haben , die der Designvision entspricht 37. So erstellst du Verläufe in Figma: Go Maxi Designer, heute tauchen wir ein in die lebendige Welt der Farbverläufe Und glaub mir, es wird ein Knaller. Also schnall dich an, wenn wir uns auf die Reise begeben , um Farbverläufe zu schaffen, die nicht nur Radienten sind, ein Rückfall in den roten Punkt , der sie sind Ja, wir machen Farbverläufe mit einem Twist. Okay, also lasst uns zu Figma springen und Farbverläufe erstellen. Also werde ich vorerst ein Rechteck auswählen und die Umschalttaste für Rechteck gedrückt halten Um einen Farbverlauf zu erzeugen, haben wir in Phil eine spezielle Option. Gehen wir also zu Phil und wir können sehen, dass wir eine Reihe von Optionen haben, wie zum Beispiel das erste Verfärben Danach haben wir Gradient. Danach haben wir Mylose. Danach haben wir Bilder und danach das Video. Derzeit wählen wir Gradient. Und als Zutat stehen uns vier Optionen zur Verfügung: linear, radial, eckig und rautenförmig. In den meisten Fällen verwenden wir also nicht eckig und rautenförmig. Aber ich verwende oft eine lineare Methode. Also lass uns mit Linear weitermachen. Also, wir haben diese Optionen, lassen Sie mich rein. Sie werden also sehen, dass wir diese beiden Boxen bekommen. Erstens ist es die Grundfarbe. Also werde ich den Tarif wählen. Und die zweite wird eine Sekundärfarbe sein. Sie können jede gewünschte Farbe wählen. Also werde ich sagen, lass uns so Hallo sagen. Okay, derzeit ist es transparent, also können wir die Transparenzrate erhöhen damit wir hellere Farben wie diese bekommen. Und wir haben eine Art Sonnenuntergangsstimmung in unserem Studium. Wir können diese Linien einfach so für die Hauptfarbe und die Sekundärfarbe anpassen so für die Hauptfarbe und die Sekundärfarbe Wenn ich, sagen wir, radial wähle, dann kannst du sehen, dass wir diesen niedrigen Effekt in der Mitte bekommen , so wie hier. Wir können ihn sowohl von diesem Punkt aus als auch von dieser Linie aus anpassen . Schauen wir uns nun Angular an. Angle ist so. Es ist ein runder Kreis, und wir können ihn wie den Drehknopf einstellen, schätze ich, so. Die meisten Leute benutzen es nicht. Ich habe noch nie jemanden gesehen, der Angular in irgendeinem Design verwendet. Lass uns wieder Diamant nehmen. Ein Diamant ist so. Dadurch entsteht ein kleiner Diamant und wir können ihn wie d eckig einstellen. Design sind alle diese Erstellungstypen erforderlich , sodass Sie sie verwenden können. Es hängt völlig vom Design ab. Ich werde mich für linear entscheiden, weil ich so linear mag, und ich werde es so weitermachen. Okay, das wird also unser Gradient sein. Lassen Sie mich Ihnen einen Grad zeigen, den ich für dieses Stundendesign entworfen habe , den ich für dieses Stundendesign entworfen das wir in Zukunft sehen werden. Also für diesen Abschluss, den ich erstellt habe, verwende ich sowohl die Grundfarbe Rot als auch diese Popo-Farbe, also passt es zu dieser Trophäe. Also es sieht toll aus So erzeugt man Farbverläufe in Fa. Wenn Sie sich inspirieren lassen möchten, können Sie zu Gradient gehen, und es gibt eine Reihe von Optionen, die Sie wählen können. Ich weiß, dass es drei Seiten auf der Website gibt, aber das sind keine drei Seiten. Wenn ich zum Beispiel zu diesem Stil übergehe, kann ich ihn so ändern. Ich kann mehrere Farben hinzufügen. Das ist also keine dreiseitige Website. Es hat mehrere, also Millionen von Farben, Sie können es Millionen von Farben, Sie können es einfach wählen und sich von dieser Farbe inspirieren lassen und Ihren eigenen Farbverlauf erstellen. Also, meine Freunde, ihr werdet Gradientenprofi in Figma. Sie entwerfen also nicht nur, Sie kreieren eine visuelle Symphonie von Farben Also mach weiter, experimentiere, hab Spaß und ich werde dich im nächsten Video für weitere Designfreuden erwischen . Lassen Sie also Ihrer Kreativität freien Lauf. 38. Erstellen eines Farbsystems in Figma: Schüler nerven. Heute werden wir Farbstile in einer Figur wie dieser auf dem Bildschirm erstellen wie dieser auf dem Bildschirm Ich weiß, dass es Bunjob-Farben gibt, weil ich versucht habe, etwas mit Plugins zu experimentieren Aus diesem Grund wurden in meinem Design-Panel einige Banjop-Stile erstellt . Also würde ich sie lesen und wir werden alles von Grund auf neu erstellen Bevor wir das tun, lassen Sie mich Ihnen sagen, stellen Sie sich eine Welt vor, in der Sie Ihre Lieblingsfarben mühelos speichern und wiederverwenden können Ihre Lieblingsfarben mühelos speichern und wiederverwenden Achten Sie auf Konsistenz in allen Projekten und teilen Sie Ihre Designpalette nahtlos mit Ihrem Team Also gut, Bugle, denn genau das ist es, worauf wir uns konzentrieren. Farbstile sind die Eintrittskarte für eine besser organisierte und effizientere Designreise Also kein endloser Augentropfen mehr für ein Quiz, also steigen wir auf. Lass mich das nehmen , weil das zu viel ist. Ich kann 2604 Farben drin haben, also lass mich 2604 Farben löschen Okay, jetzt sieht es toll aus. Okay, um einen Farbstil zu erstellen, müssen wir nur unsere Farbe auswählen. Das ist unsere Grundfarbe, diese. Ich weiß nicht, wie sie heißt, wie Tönungsblau oder Blaugrün, oder so Wenn Sie den Namen der Farbe kennen, lassen Sie es mich bitte wissen. Vier Stile, es ist einfach, wählen Sie eine beliebige Farbe, und in diesem Fall ist dies die Primärfarbe, dies ist eine zweite Farbe und dies ist die neutrale Farbe und die Akzentfarbe. Das sind die Farben unseres Graus. Lassen Sie uns also unsere Grundfarbe auswählen, und wir können einfach auf diese Plus-Schaltfläche klicken , um einen Stil zu erstellen. Wir können das bei allem machen, wenn ich, sagen wir, mit einem Strich arbeiten möchte . Ich kann also einfach auf das vierfarbige Menü klicken und einfach eine Plus-Schaltfläche hinzufügen und schon bekomme ich einen Stil. Sit-Effekt, Smith-Port, nicht Symmet-Export, es wirkt sich auf Kontur, Füllung und Text Im Moment interessieren wir uns also Farbe. Also lass uns mit einer Füllung beginnen. Klicken Sie auf die Plus-Schaltfläche. Und ich werde es primär nennen. Aber bevor wir den Namen unserer Marke hinzufügen müssen , denn bei FMA arbeiten wir mit vielen Teams und mit vielen Projekten zusammen, also wird es durcheinander kommen, wie bei der Arbeit an neuen Projekten Also lass es mich benennen. Es werden die ersten Initialen unserer Marke sein. Das ist eine Karte mit nur einem Klick. Also werde ich CC verwenden. Tash. Primär. Und es wird einer sein. Sie können auch eine Beschreibung hinzufügen. Nehmen wir an, Sie arbeiten mit Leuten aus dem Sammelgeschäft zusammen, sodass Sie eine Beschreibung hinzufügen können , zum Beispiel, was bedeutet diese Farbe? Warum verwenden wir sie? Wo werden wir diese Farbe verwenden? Nehmen wir an, wir werden diese Farbe nur mit einem Text oder mit einem Hintergrund verwenden , sodass Sie dies zur Beschreibung hinzufügen können, damit andere Personen über diese Farbe Bescheid wissen. Okay, lassen Sie uns einen Stil erstellen. Also haben wir gerade unseren Stil kreiert. Lass mich dir eine Sache zeigen. Weniger, ich entwerfe so etwas, und ich will nicht in eine Pipette gehen , als würde ich wählen, und dann werde ich so etwas auswählen Es ist sowohl schmerzhaft als auch Zeitverschwendung. In diesem Fall können wir Stil verwenden. Selektives Element, gehe einfach zum Stil und wähle unsere Grundfarbe. Das wird dieser sein. Es ist einfach im Vergleich zu einem falschen Tool. Okay. Lass mich das machen. Wähle immer diesen und diesen und lass mich ihn umbenennen. Lass es mich dir noch einmal zeigen. Ich weiß, dass einige Leute herauskommen könnten. Ich zeige es ihnen. Okay, also wähle deine Farbe. Gehen Sie zu diesem Menü mit vier Pfeilen im Stilmenü und klicken Sie auf Plus. Nennen Sie es in diesem Fall primär zwei und erstellen Sie einen Stil Jetzt werde ich dieses Video schnell vorspulen. Okay, Rot wird eine Sekundärfarbe sein, also werde ich sie sekundär nennen, und der ganze Prozess ist derselbe. Und das wird unsere neutrale Farbe sein. Also nenne ich sie neutral, mach c neutral. Sie können es auch Akzent nennen. Dies wird auch als Akzent bezeichnet. Und das werden Grautöne für unser Design sein. Ich weiß, dass es nicht wie Grau aussieht, aber das werden unsere Grautöne für unser Farbsystem sein. Okay, wir sind mit unserem Stil fertig, aber eine Sache bleibt übrig, das ist der Farbverlauf. Ich bin mir nicht sicher, ob ich das hinzufügen soll oder nicht, aber lass uns gehen. Gehen wir und fügen das hinzu. Style und D, ich freue mich auf Capital. Gradient. Okay. Wir haben nur einen Farbverlauf, also werde ich nur einen größeren Farbverlauf verwenden. Wenn ich auf diesen leeren Bereich klicke, wie Sie sehen können, ist unser Farbsystem hier drüben. Und wir können es einfach auswählen und verwenden wann immer wir wollen und wo immer wir wollen. Wie damals, als ich Figma gelernt habe , war der Gradient-Button nicht da Wir können einen Farbverlauf als Stil hinzufügen, aber er ist hier nicht sichtbar Dafür müssen wir also in diesen Abschnitt gehen und dann unseren Farbverlauf wie folgt auswählen . Und da ist eine Sache. Nehmen wir an, Sie verwenden diese Farbe häufig, sodass Sie sie nach oben verschieben können, und es ist einfach, sie auszuwählen und beim Ändern der Farbe hin und her zu wechseln. Nehmen wir an, Sie möchten den Namen aus irgendeinem Grund ändern , Sie möchten ihm einen anderen Namen geben. In diesem Fall können Sie einfach auf eine beliebige Farbe auswählen klicken. In diesem Fall wähle ich C als Primärtyp. Also möchte ich es wie eine primäre Null nennen. In diesem Fall kann ich zu diesem Dis-Stil gehen und ihn umbenennen und ich kann sowohl die Beschreibung als auch die Transparenz ändern . So bearbeiten Sie Ihre Farbstile. Da habt ihr es also, Leute, Farbstil in A-D-Pracht. Wir organisieren nicht nur Farben. Wir kuratieren ein Meisterwerk, also Stadion für mehr Designabenteuer bis dahin viel Spaß beim Styling 39. Der einfachste Weg, um Farbpalette in Figma zu generieren (mit Plugins): Hallo, Designer, wünschten Sie sich jemals, Sie könnten erstellen im Handumdrehen atemberaubende Farbpaletten für Ihr Design Nun, heute enthülle ich zwei Geheimwaffen , mit denen Sie im Geschäft eine Farbpalette kreieren Deshalb stelle ich Material Stream Builder und Foundation Color Generator vor. Diese Plugins sind Ihre zentrale Anlaufstelle, um in einer Sekunde wunderschöne Paletten zu erstellen, sodass Sie sich auf das konzentrieren können, was wirklich wichtig ist müssen also nicht mehr auf die Verwirrung der Farben starren und keine Stunden mehr damit verbringen, die perfekte Palette zu erstellen Diese Plugins erledigen die schwere Arbeit für Sie. So können Sie in einem Bruchteil der Zeit ein auffälliges Design erstellen . Also, bist du bereit, deinen inneren Farbmeister zu zeigen? Lassen Sie uns also in diese fantastischen Plug-ins eintauchen. Okay, lassen Sie uns auf die Plugins in Figma eingehen. Sie können zur Community gehen und von hier aus nach diesen Plug-ins suchen Und wir kennen auch die Abkürzung, die hier drüben ist. Ich glaube, das nennt man Ressourcen. Dafür kannst du Shift Eye benutzen. Gehen Sie zu den Plugins und suchen diesen beiden Plug-ins und klicken Sie auf Ausführen, sodass es sich so öffnet. Lassen Sie uns zunächst mit dem Grundfarbengenerator beginnen. Dieses Plug-In hilft uns sehr. Zuvor haben wir gesehen, dass wir dieses Farbpaletten-Farbsystem für unser Design entwickelt haben. Und als wir diese Kacheln erstellten, hat es einige Zeit gedauert, und ich glaube, wir konnten dieses Farbsystem innerhalb von 10 Minuten erstellen . Aber mit diesen Plug-ins können wir Farbpaletten für nur eine Sekunde erstellen Für das Profil werde ich Material wählen. Für unser Design ist die Primärfarbe also diese. Das Stahlblau, schätze ich. Lass uns das anklicken und lass es mich hier versuchen. Klicken Sie darauf und lassen Sie uns diese Hauptfarbe wählen, diese Primärfarbe. Wie Sie sehen können, haben wir unsere Farbpalette für diese Primärfarbe. Wir können also einfach auf diese Palettenschaltfläche klicken und schon haben wir unsere Farbpalette für diese blaue Farbe. Ich kann es einfach an eine beliebige Stelle auf meinem Bildschirm ziehen und ich kann es direkt verwenden. Ich weiß, du denkst vielleicht, können wir einen Stil kreieren? Ja, du kannst einen Stil kreieren. Sie können einfach auf diese Schaltfläche im Autostil klicken und schon wird ein Stil für Sie erstellt, und er ist hier. Das Fundament ist blau. Und wie Sie sehen können, haben wir Farbpalette für unsere Primärfarbe. Und du kannst es umbenennen, sagen wir, ich möchte es in blau umbenennen. Also kann ich es einfach benennen und dann muss ich wieder einen Designstil kreieren. Also lass mich diesen zuerst lesen. Also Schnitt und C-Stil. Also, wie Sie sehen können, haben wir primäres Blau. Und es hat auch den Code oder, glaube ich, den G-Wertecode hinzugefügt . Wie Sie in den Farbstilen sehen können, haben wir den blauen Farbstil. So können wir es direkt in unserem Design verwenden. So einfach ist es, Farbpaletten und Farbstile mit nur einem Klick zu erstellen Farbpaletten und Farbstile mit nur einem Klick Gehen wir nun zum nächsten Plug-In über. Das ist Material Theme Builder. Dieses Plug-In ist genau das Gleiche, aber es hat Funktionen wie das Hinzufügen von Bildern und das Extrahieren von Farben daraus. Der Unterschied zwischen dem Foundation-Plug-In und Material Theme Builder-Plug-In besteht darin, dass wir diese Option haben, wir können ein Bild importieren, und es extrahiert , würde ich sagen, eine Farbpalette daraus und es erstellt eine Farbpalette. Und es fügt automatisch all diese Farbpaletten in unser Farbsystem ein, sodass wir sie nicht manuell wie folgt hinzufügen müssen, wie Sie sehen können. Aber ich werde sagen, benutze diesen Stecker nicht so oft, weil er dich faul macht und ihm manchmal viel fehlt. Also werde ich sagen, benutze den Foundation Plug In. Derzeit befinden wir uns also in der Dynamik. In Dynamics haben wir also die Möglichkeit, ein Bild hinzuzufügen. Wenn wir auf Benutzerdefiniert umsteigen, wird es einige Zeit dauern, da es Stile und alles, was es hinzufügt, in Farbstilen erstellt . Es braucht also Zeit. Beim Zoll können wir unsere Primärfarbe, Sekundärfarbe, Neutralfarbe und Akzentfarbe tatsächlich nach unseren Bedürfnissen wählen Sekundärfarbe, Neutralfarbe , und es werden entsprechende Stile erstellt. Okay, wir sind jetzt beim Zoll. Wir können einfach auf die Primärfarbe klicken und mich meine Primärfarbe wählen lassen. Wir haben keine Option, ich würde sagen, diese Farbe hinzuzufügen. Wir müssen also zu dieser Farbe gehen und den X-Code hinzufügen. Nehmen wir an, dies ist unsere Primärfarbe. Ist es nicht. Wenn ich mich bewerbe, wählt es unsere Grundfarbe und fängt an, einen Stil zu kreieren. Wenn ich zum Farbstil übergehe und wie Sie am Material sehen können, fängt es an, Farbstile zu kreieren. Wie Sie sehen können, die Primärfarbe und all das. So funktionieren diese Plugins. Ordnung, Designer, wir haben die unglaubliche Leistungsfähigkeit von Material Selbe Builder und Foundation Color Generator erforscht die unglaubliche Leistungsfähigkeit von Material Selbe . Und jetzt sind Sie mit der Möglichkeit ausgestattet , eine atemberaubende Farbpalette zu erstellen , die Ihr Design aufwerten wird Denken Sie daran, dass Sting the Fundamental ein Schlüssel ist , bevor Sie sich mit Plugins befassen Verstehen Sie die Grundlagen der Farbtheorie Wie bei den Komplementärfarben und der Farbenharmonie bietet dir dieses Wissen eine solide Grundlage für die Erstellung noch infizierterer Farbpaletten Und vergiss nicht, dass diese Plugins eine Geheimwaffe sind. Verwenden Sie sie, um Ihre Effizienz zu steigern und mit den verschiedenen Farbkombinationen zu experimentieren. Lassen Sie sie Ihre kreativen Mitarbeiter sein und Ihnen helfen, es sei denn, Sie sind ein Farbguru Also übe weiter, erkunde weiter und gestalte weiter. Denken Sie daran, die einzige Grenze ist Ihre Vorstellungskraft. Und hey, wenn Sie nicht weiterkommen, zögern Sie nicht, das Video erneut anzusehen, um es schnell aufzufrischen 40. Projiziere 06 Farben, Stile und Raster in Aktion!: Bist du bereit, deiner Kreativität freien Lauf zu lassen und dich auf das Designabenteuer einzulassen? Willkommen zu Projekt Nummer sechs, in dem Farben, Stile und Raster zusammenkommen, um einem Layout für mobile Apps Leben einzuhauchen Gehen Sie also weiter und wählen Sie Ihre Farbpalette. Aber wo soll ich anfangen? Schauen Sie sich diese fantastischen Ressourcen an, um sich von der Brust inspirieren zu lassen Egal, ob Sie sich für mutige Schuhe oder beruhigende Stößel interessieren, denken Sie daran, drei oder vier Farben auszuwählen die Entscheiden Sie sich für einen raffinierteren Farbstil. Lassen Sie jetzt Ihrer Fantasie freien Lauf, experimentieren Sie mit verschiedenen Farbtönen und Kombinationen, um Ihrem Design Leben einzuhauchen? experimentieren Sie mit verschiedenen Farbtönen und Kombinationen, um Ihrem Design Leben einzuhauchen Von Primärtönen bis hin zu Akzenten — jede Farbauswahl erzählt eine Geschichte Lassen Sie Ihrer Kreativität freien Lauf. Jetzt, Schritt Nummer drei, erstellen Sie ein mobiles Layout. Zeit, Ordnung auf die Leinwand zu bringen. Nutzen Sie die Kraft von Gittern, um Gleichgewicht und Struktur zu schaffen Und Schritt Nummer vier, die Erstellung einer Matte Sobald Ihr Master fertig ist, erfassen Sie ihn und teilen Sie ihn in einer Projektion Denken Sie daran, dass es so etwas wie falsches Design, Kreativität, Aufschwung und vor allem nicht Kreativität, Aufschwung und darum geht, einen zu haben Sie sind also bereit für die Herausforderung, lassen Sie uns eintauchen und gemeinsam etwas Außergewöhnliches schaffen Also viel Glück und viel Spaß beim Entwerfen. 41. Best Practices für die Auswahl von Schriftarten und Schriftarten-Paarung im UI- und Webdesign: Work Ma-Studenten, heute tauchen wir in die Welt der Schriften Die Wahl der Schrift kann eine kreative Spielwiese sein, aber sie erfordert auch Überlegung. Lassen Sie uns also untersuchen, welche Schriftart Sie zulassen, um die beliebte Option und die Magie der Schriftpaarung zu verwenden die beliebte Option und die Magie der Schriftpaarung Wie Sie sehen können, gibt es in Figma Menge von Option-A-Schriften Es enthält auch InstrutdFont. Also, welche Schriftarten können in Figma verwendet werden. So haben Sie das Designuniversum immer zur Hand und sind nicht auf zwei bestimmte Schriftarten beschränkt Wir möchten sicherstellen, dass für die gewählte Schriftart eine Wave-Version verfügbar Konvention und beliebte Wahl dafür ist die Google-Schrift. Das ist also die Google Font-Website. Okay, die font.google.com. Es ist ein wahrer Schatz an kostenlosen webfreundlichen Schriften, die Sie kommerziell verwenden können, oder? Aber Sie denken vielleicht, warum nicht einfach alle Telefone auf Ihrem Computer verwenden Nun, es ist wichtig , dass Sie sicherstellen, dass Ihre ausgewählten Schriftarten webkompatibel sind Möglicherweise haben Sie eine ausgefallene Schrift, die Sie kürzlich gekauft haben. Beachten Sie jedoch, dass für eine Website und zusätzliche Nutzung möglicherweise eine andere Lizenz erforderlich ist. Zögern Sie also nicht, bei Bedarf in Schriften zu investieren. Sie sind der geheime Austausch zum herausragenden Design. Lassen Sie uns nun einen kurzen Abstecher zu den Google-Schriftarten machen. Dies ist eine der beliebtesten Websites im Bereich Grafikdesign In den Google-Schriftarten können Sie jede gewünschte Schriftart abrufen. Wählen Sie einfach eine Schriftart aus wie „Los geht's “ und wählen Sie diese eine aus, können wir sie einfach herunterladen. Wir können die gesamte Schriftfamilie herunterladen. Wir können eine einzelne bestimmte Schriftart herunterladen z. B. wenn Ihnen nur diese gefällt. Sie können auch diese herunterladen. Wir werden die Informationen über die Schrift so erhalten. Und wenn Sie ein wenig über die Topographie und Psychologie der Schrift erfahren möchten , können Sie den Artikel lesen Es gibt noch eine andere Website namens Canva. In Canva bekommen wir auch eine Menge Artikel. Wenn Sie sich also ernsthaft mit Grafikdesign, AS-Design oder grafischer Arbeit beschäftigen, lesen Sie sich bitte diesen Artikel durch, da er Ihnen letztendlich bei Ihrem Designprozess helfen Um die Schrift zu installieren, laden Sie einfach die Datei herunter und doppelklicken Sie auf Conity. Es wird automatisch in einem System installiert. Okay, hier geht es also um Google Font. Es ist eine der besten Websites, ich sagen, aber nehmen wir an, Sie möchten, wenn es eine Infont gibt , die Sie nicht in der Google-Schrift bekommen In diesem Fall können Sie diese Website namens de font.com verwenden diese Website namens de font.com ein paar Tagen habe ich ein Video bearbeitet und wollte HS-Typ f. Also suche ich in der Google-Schrift, aber ich habe sie nicht bekommen Auf dieser Website suche ich zum Beispiel nach HS und habe diese Schrift gefunden. Und ich habe es in meinem Video verwendet und es ist völlig kostenlos. Es sagt uns auch, dass es im Handel erhältlich ist oder nicht. Dies ist auch eine der besten Websites, die Sie für Ihre Schriften verwenden können. Dann haben wir diese Website namens Fonts. Wenn du also wirklich, wirklich trainierte Dfonts haben willst , kannst du dich für diese Website entscheiden Wie in diesem Fall möchte ich diese Schrift MurmuraFont wählen Ich kann zu dieser Schrift gehen und sie herunterladen und in meinem Design verwenden Und Sie können sehen, dass die Lizenz für den persönlichen Gebrauch kostenlos ist. Wenn Sie die Schrift für kommerzielle Zwecke verwenden möchten, müssen Sie die Schrift möglicherweise kaufen. Und wir haben auch diesen Schriftbereich auf der Website und wir haben Eichhörnchen Dies sind also einige Websites mit kostenlosen Schriftarten Sie können sie einfach herunterladen und in Ihrem Design verwenden Lassen Sie uns nun mit der Schriftpaarung beginnen. Sobald Sie sich für eine Schrift entschieden haben, ist es ein kluger Schachzug, sich mit der Paarung zu beschäftigen Zum Beispiel, wenn Sie eine S-Schrift für Überschriften verwenden und eine Sans-Re-Form für Ihren Haupttext in Betracht ziehen oder umgekehrt In diesem Fall gibt es einige Websites, die Ihnen helfen könnten Also die meiste Zeit benutze ich diese Website, Schriftpaar. Ich lasse mich von dieser Website sehr inspirieren. Ich benutze diese Website oft, weil meine Kreativität manchmal nachlässt und ich etwas kreative Motivation brauche. Also gehe ich auf diese Website. Also, wie an anderen Tagen, habe ich so etwas wie ein Poster für einen Kunden entworfen . Und ich fühlte mich bei der Schrift etwas festgefahren , weil der Kunde nicht spezifizierte, welche Schriftart ich für sein Design verwenden sollte. Also ging ich auf diese Website und habe einige der Schriftkombinationen durchgesehen. Und am Ende entschied ich mich, ich glaube, es war eine einfache Schriftart Okay, ich habe mich für diesen entschieden, den Roboter und das Roboto. Und am Ende gefiel es ihm. Es sind also wirklich großartige Ressourcen. Es gibt also so wenige Websites, die ich benutze, aber nicht so sehr wie Monotype Dies ist auch eine der besten Websites für Schriftpaarung. Sie können zu, lassen Sie uns diese Schriftpaarung aufrufen . Und das ist das Schriftpaar Wir können die Schriftarten auch auf diese Weise austauschen, wir erhalten mehr Paare, und wir können einfach diese auswählen, ich kann sie ändern und wir können auch unser eigenes Paar generieren. Das ist also eine großartige Website. Danach haben wir FGA. Dies ist auch eine großartige Website. Für einen Anfänger könnte es eine verwirrende Website sein. Also werde ich sagen, vermeide es. Nehmen wir an, Sie möchten die tatsächliche Arbeit der Schrift sehen. In diesem Fall können Sie also diese Website namens Font in Use verwenden. Nehmen wir an, Sie möchten die tatsächliche Funktionsweise der Schrift sehen , also lassen Sie uns mit dieser beginnen. Ich denke, Sie können die in diesem Lehrbuch verwendete Schrift sehen. Und es zeigt Ihnen, wie sie funktioniert, nachdem sie zu ähnlichen Seiten hinzugefügt haben, und Sie können sich eine echte Perspektive von dieser Schrift verschaffen, bevor Sie sie verwenden Das spart Ihnen Zeit und Sie werden eine Vorstellung davon bekommen , welche Schriftart Sie verwenden oder welche Sie vermeiden sollten. Ich weiß, dass Sie sich vielleicht überwältigt fühlen , wenn Sie die ganze Schrift und all das sehen Ich habe dir schon gesagt, lies einfach diesen Artikel durch und lerne alles über die Schrift, wenn du es ernst mit Grafikdesign meinst Denken Sie daran, dass Schriftkombinationen mehr Kunst als Wissenschaft sind. Vertrauen Sie also Ihrem Designinstinkt. Übrigens habe ich auch alle Links in den Ressourcen hinzugefügt. Gehen Sie es einfach durch, gehen Sie zu Google Fonts oder dieser Da-Font, um sich inspirieren zu lassen, gehen Sie zu, ich werde sagen, zu dieser Fontin-Website, Sie sich einfach inspirieren und verwenden Sie Inv Design Das ist also alles über Schriften und Grundlagenvorlesung zur Topographie. Also, wir sehen uns in der nächsten. 42. Die perfekte Typografie-Skala für UI- und Webprojekte erstellen: Hallo, tolle Leute. Es ist dann hier. Es ist Donnerstag 10:30 Uhr und draußen regnet es. Ich dachte, das wäre der perfekte Zeitpunkt, um Cozy dazu zu bringen, einen Bohrplan zu entwerfen Übrigens, bevor ich anfange, weiß ich, wenn ihr nach guter Musik sucht , die ihr hören könnt, während ihr designt, es gibt diese geringe Gebühr für 24-stündigen Stream, die ich 2047 laufen lasse , während ich designe, und das hilft mir einfach , in das einzutauchen, was ich tue Wenn ihr also auf der Suche nach guter Musik seid, schaut euch das Versuchen wir nun, unser Reisedesign zu beeinflussen. Hier haben wir das Typografie-Layout eingerichtet , das wir für unser Projekt haben Wir verwenden bei all unseren Projekten dasselbe Designsystem , weil es uns hilft, die Dinge konsistent zu halten, und wir dann nicht jedes Mal das Rad neu erfinden müssen jedes Mal das Rad neu erfinden Wenn Sie sich ansehen, wie wir unsere Schriftskala eingerichtet haben, haben wir drei Bereiche: Anzeige, Überschrift und Fließtext Diese P-Typen eignen sich vor allem für Ausleihseiten und Marketing-Websites Wo Sie auf einer bestimmten Startseite suchen, stellen Sie möglicherweise fest, dass die Überschriften für den Heldenbereich viel größer sind als die Überschriften für H, die Sie in Ihrer gesamten Web-App haben werden Bei der spezifischen Gestaltung der Benutzeroberfläche versuchen wir also, einen bestimmten Stil für diese Marketing-Website und die Überschriften darauf So können wir sie extrem groß und fett formatieren, ohne dass dies Auswirkungen auf andere Überschriften hat , die wir in prominenteren Bereichen wie den UI-Seiten, dem UI-Bildschirm und der Seite innerhalb der Anwendung selbst haben UI-Bildschirm und der Seite innerhalb der Anwendung Also haben wir das getrennt, und dann werden Sie sehen, dass wir unsere Überschriften für eins bis sechs haben, und Sie werden feststellen, dass es da nur wenige Variationen gibt Wir haben das so strukturiert, dass eines für Textop bestimmt ist, und dann haben wir auch kleinere Virgin-Geräte für Tablets und Mobiltelefone Auf diese Weise können wir die gesamte Größe für alle unsere Typen auf clevere Weise verkleinern. Und es sieht auch sehr schön aus. In Bezug auf den Haupttext haben wir einige Variationen, Körperform, Bildgröße und Fotogröße. Im Allgemeinen möchten Sie mit 14 oder 16 Pixeln arbeiten , den am häufigsten verwendeten Größen, und es gibt keinen Grund, warum Sie das Rad neu erfinden sollten Behalte es also bei zwei, 14 oder 16. Dann haben Sie die Überschrift, bei der es sich im Allgemeinen nur um kleine Bildunterschriften handelt, die Sie auf der gesamten Website verwenden. Es könnte ein detaillierter Tooltip-Text sein. Es könnten ein paar hilfreiche Tipps sein , die Sie unter ein Eingabefeld legen, Dinge, denen Sie nicht wirklich zu viel Aufmerksamkeit schenken müssen. Dann haben Sie auch die Fototypen, bei denen es sich nur wirklich winzige Typen handelt, die Sie hier und da verwenden könnten Vielleicht auf dem Foto für die Nutzungsbedingungen oder die Dinge, denen Sie wirklich nicht zu viel Aufmerksamkeit schenken möchten zu viel Aufmerksamkeit schenken möchten und die nicht wirklich viel Potenzial erfordern. Jetzt, wo ihr versteht, wie wir unsere eigene responsive Schriftskala erstellt haben , werde ich euch zeigen, wie man sie in echten Projekten einsetzt. Ich habe eine konzeptualisierte Homepage für unsere Website erstellt Homepage für unsere Sie können auf dieser Homepage landen, wenn Sie diesen Inhalt importieren möchten , oder in die Tablet-Ansicht Also das wirst du tun, lass mich das zuerst durchbohren. Also, sagen wir, ob ich das hier und das hier mitbringe. Also wenn ich das kopiere und auf die Tablet-Version bringe , passt es perfekt. Ich muss mich ein bisschen anpassen, aber es passt perfekt. Okay, also ich kann das anpassen. So wie das hier. Natürlich werden Sie es kopieren und einfügen, und ich könnte das einfach kopieren und einfügen , nur um zu veranschaulichen, was ich meine. Und Sie denken sich vielleicht: Okay, nun, in den Projekten oder speziell in diesem Bereich sieht die Größe des Textes tatsächlich gut aus. Es sieht nicht wirklich übertrieben aus. Wenn es viel Freiraum zum Atmen gibt, passt es und es sieht nicht unübersichtlich aus Wie Sie sehen, passt es perfekt. Und wenn Sie dann mit einem Tablet zufrieden sind, können Sie alles in die mobile Ansicht verschieben. Und dann merkt man , oh, diese Schrift ist ein bisschen zu groß für den Bildschirm. Und Sie könnten darüber nachdenken, diese Schriftgröße zu reduzieren. Also lass mich dir eine Sache zeigen. Verschiedene Schriften haben unterschiedliche Gewichte. Also, das ist die Bon-Schrift, und diese hat die Berliner Größe, ein bisschen halbherzig Aber die Schriftgröße ist völlig gleich. Wie Sie sehen können, ist dieser 24 und dieser ist zwei. Aber dieser sieht größer aus. Also unterschiedliche Schriften haben unterschiedliche Gewichte. Und es ist zu schwierig, ein System zu haben , das für alle funktioniert. Das ist also die wichtigste Überlegung , die ihr machen müsst. Um es noch einmal zu wiederholen, sobald Sie Ihre Typskala eingerichtet haben. Dann müssen Sie sicherstellen, dass Sie die kleinere Version all Ihrer Überschriften erstellt die kleinere Version all Ihrer Überschriften Dann möchten Sie sicherstellen, dass Sie eine kleinere Version für alle Varianten des Haupttextes haben kleinere Version für alle Varianten des Haupttextes haben Ihr Text, Ihre Absätze, Ihre Bildunterschrift und Ihre Fotos. Aber eine Sache, die Sie jetzt berücksichtigen müssen , ist, dass es eine Zeit geben wird, in der Sie möglicherweise an derselben Website arbeiten. Aber eine der Seiten hat einen sehr langen Titel, und das kommt sehr häufig vor. Wenn Sie also in Betracht ziehen die Schriftgröße auf der Seite zu reduzieren, müssen Sie sicherstellen, dass dies auch mit den Seiten übereinstimmt. Dies sind also einige Überlegungen , die Sie anstellen müssen und Sie müssen mit Ihrem Team zusammenarbeiten , um herauszufinden, wie all das passt. Lassen Sie uns das jetzt wie beim mobilen Design beheben. Wie Sie sehen können, ist das etwas überladen und sieht nicht so gut aus In diesem Fall können wir also sagen, dass die Schriftgröße meiner Meinung nach 61 ist, und okay, sie ist 60. Ich glaube, ich habe es versehentlich auf eins erweitert. Okay, lassen Sie mich es auf eine Überschrift kleiner reduzieren. Also in diesem Fall werde ich etwa 34 nehmen. Weil dieser für Tablets und dieser für Handys ist. Lass mich gehen und es in 34 ändern. Und diese vier sind 24, lassen Sie mich eine mobile Kopie wählen, die, ich schätze, 14 oder vielleicht 16 sind okay. Also lass uns mit 16 gehen und lass mich 16 wählen. Okay. Und lass mich die Box erweitern. Also werde ich gut passen. Und lassen Sie mich auch diesen erweitern. Und nachdem ich die Größe geändert habe, ist dies die H-Nummer, diese könnte S zwei oder S drei sein oder diese könnte wie H vier sein. Nachdem wir also alle Überschriften und Textgrößen und Telefongrößen geändert haben, sieht es gut aus Hoffentlich macht das für euch Sinn. Also, hier dreht sich alles um Typografie und das Typografiesystem. Und wahrscheinlich werden wir im nächsten Schritt sehen, wie wir das in einem Stil machen können, wie wir es im Farbformat erstellt haben, also werden wir dasselbe für einen Text erstellen Wir müssen also nicht liken, eine Schrift hinzufügen, einen großen und einen kleinen Schnitt machen. Es wird also einfach sein , wenn wir Stil kreieren. Also jetzt macht das hoffentlich Sinn für euch. In Ordnung, Leute, wir sehen uns im nächsten. 43. Der schnellste Weg zum Erstellen von Textstilen in Figma: Willkommen zurück, Designer. In diesem Angebot tauchen wir in Figma in die Gesichtswelt der Textilien Zuvor werden wir mehr über dieses Typografiesystem erfahren , das wir für alle unsere Projekte verwenden werden Es wird ein gonales Projekt ändern, so wie die Schrift ein agonales Projekt ändern wird, aber alle Schriftgrößen werden gleich sein Textilien sind die Veränderungen im Spiel. Sie sorgen für Kohärenz und ermöglichen eine schnelle Aktualisierung der politischen Gestaltung. Lassen Sie uns also gleich eintauchen. Lassen Sie mich Ihnen ein Beispiel zeigen. Das ist also der eine Text, und ich möchte ihn mit einem einzigen Klick in etwas anderes aktualisieren . In diesem Fall helfen uns Textilien also sehr. Also müssen wir nur zu diesem Vierer-Menü gehen. Stil, und aktuell haben wir eine Menge davon. Lass mich diesen wählen, mittel. So können Sie sehen, wie ein Stil ihn mit einem Klick ändert. Lassen Sie mich das noch einmal mit diesem machen. Lass mich eins wählen. Okay, ich ändere mich jetzt. So funktionieren Textilien. Lassen Sie uns nun in die FMA einsteigen und Textilien herstellen. Okay, wir sind tatsächlich in Fa. Okay. Lass mich zu dem Typografie-Pitch gehen Ich weiß nicht, warum ich immer Topographie sage, aber es ist Okay, fangen wir mit diesem an. Aber in diesem Projekt verwenden wir nicht das Display, weil wir meistens dieses, dieses, dieses, vielleicht wahrscheinlich dieses und all das verwenden dieses, dieses, . Also vielleicht auch dieser, aber nicht dieser große. Aber wir können unsere Textilien in verschiedenen Projekten teilen. Das könnte also hilfreich sein. Also lass mich damit anfangen. Aber bevor wir das tun, lassen Sie mich das alte Textil löschen, das wir nicht verwenden werden. Okay, lassen Sie mich Ihnen zeigen, wie Sie Textilien löschen wenn wir keine Textilien in Ihrem Projekt haben möchten. Du kannst das Textil einfach mit der rechten Maustaste anklicken und zwischen den Ebenen löschen. Und es wird es sagen. Lassen Sie uns nun einige neue Textilien kreieren. Okay. Das ist für Überschriften, vielleicht sage ich Websites, Websites mit großen und fetten Überschriften wie Nachrichten Lassen Sie mich also diesen wählen. Und ich werde zuerst wählen, lass mich ändern, weil es 61 ist, und ich will 60, 60. Gehen wir zu vier Menü+D und erstellen einen Stil, und ich möchte dieser Überschrift einen Namen geben , oder wir können sie wie Anzeigenüberschrift benennen . In Zukunft werden wir also wissen, dass dies die Anzeigenüberschrift ist. Überschrift anzeigen, und ich gebe dieser Anzeigenüberschrift Null. Und Sie können auch eine Beschreibung hinzufügen und einen Stil erstellen. Okay, also haben wir unseren ersten Stil kreiert. Lassen Sie uns nun zu diesem Thema übergehen, falls sich jemand in seiner imaginären Welt verirrt hat Lassen Sie mich ihnen noch einmal zeigen, wie wir das machen. Wählen Sie also einfach eine beliebige Schriftart aus, für die Sie einen Stil erstellen möchten. In diesem Fall möchte ich diesen erstellen. Dies ist die Tablet-Schriftart Tate Pixel Extra Plot. Und in diesem Fall werde ich zur ersten Überschrift übergehen. Und wir können angeben, dass es sich um eine für Tablets handelt. Wählen Sie Texte aus, gehen Sie zu Fortnu, erstellen Sie einen Stil, Plus-Schaltfläche und eine Tabelle Überschrift eins auf dem Tablett, erstelle einen Stil. Okay, jetzt weißt du, wie man einen Stil erstellt. Also werde ich für sie alle schnell vorspulen. Okay, also habe ich dieses Design Cele entworfen. Ich habe das übersprungen, weil ich bei diesem Projekt diese eine Kopie nicht benötigen werde Wenn ich also auf die leere Stelle klicke, haben wir, wie Sie sehen können, unsere Überschriften Entschuldigung, wir haben unsere Textilien. Wie Sie sehen können, ist es unorganisiert, oder vielleicht ist es organisiert Okay, einige der Organisierten, einige von ihnen sind nicht organisiert, also schauen wir uns an, wie wir sie organisieren können Okay, Sie können also sehen, wie das Tablet auf dem Weg unter diesem ist. Also lass mich das so verfolgen. Und so können Sie sich organisieren. Derzeit ist dies eine mobile Überschrift. Hier wird es eins, zwei, drei, vier, fünf, sechs sein zwei, drei, vier, fünf, sechs und alles ist organisiert. Wenn du arbeitest, wird es so sein welche Überschrift und welche Schriftgröße ist. Und es sagt dir auch , welche Schriftgröße es ist. Derzeit ist dieser 60, das ist 48 24 und all das. Und nehmen wir an, Sie möchten etwas aktualisieren. Lassen Sie mich etwas Text wie EB-Wörter hinzufügen. Lassen Sie mich zu Textilien übergehen. Nehmen wir an, ich möchte die mobilen Messwerte aktualisieren, also können wir einfach darauf klicken, und es wird einige dieser Schaltflächen geben, diese Stilschaltfläche. Also können wir sie anklicken, und momentan ist es ein offenes Schild, also kann ich wechseln zu „ Lass uns das machen“ oder „Betron sehr viel Schluck Und wir können auch, was wir sagen. Wir können auch die vier Größen ändern. Derzeit sind es also 20. Und wir können es so 64 machen. Und jetzt ist unser Stil aktualisiert. Und wenn ich hier drüben darauf eingehe, so wie Sie sehen können, sind beide Stile auch hier aktualisiert. Also, weil wir dieses Formular gewählt haben und wir es geändert und aktualisiert haben. Also wurde auch das Hauptformular aktualisiert. Lassen Sie mich das machen , weil ich diesen Chiffriertext vorerst nicht haben möchte Okay, jetzt habe ich, was ich will. Also so stellt man Textilien her. Sie also bei der Bearbeitung dieses Prozesses daran, dass die Organisation Ihrer Textilien von entscheidender Bedeutung ist. Möglicherweise haben Sie unterschiedliche Stile für Marketingüberschriften, Informationsüberschriften oder andere Kategorien Dies trägt dazu bei, Klarheit und Konsistenz in Ihrem Design zu wahren und Konsistenz in Ihrem Design zu Und es gibt eine Sache, die ich Ihnen sagen muss. In diesem Fall habe ich das so entworfen, tut mir leid, ich habe es wie mobile Überschrift, Tablettüberschrift oder Desktop-Überschrift benannt . Es muss so sein. Sie können es einfach Überschrift eins, Überschrift zwei, Überschrift drei nennen . Sie müssen keine Angaben wie Tablet oder Handy machen. Das ist also meine erste Wahl. Ich werde sagen. So arbeite ich. Deshalb habe ich diesen Namen gewählt, diese Namen. Also, wenn Sie es einfach wie Überschrift eins, Überschrift zwei, Überschrift drei, so oder Absatz beibehalten es einfach wie Überschrift eins, Überschrift zwei, Überschrift drei, so wollen, können Sie es so benennen. Ich wünsche Ihnen viel Spaß beim Erstellen und Aktualisieren von Textilien in Figma Seien Sie also gespannt auf weitere spannende Designabenteuer im nächsten Video 44. So fügst du Lorem ipsum-Text in Figma hinzu: Willkommen an die Schüler. Auf diese Weise tauchen wir in die Welt von Entscheidender Bestandteil dieses Entwurfsprozesses. Anstatt geschlechtsspezifische Begriffe wie Playdo-Text oder Tritratoex zu verwenden , werden wir Lorm Ipsen untersuchen, eine klassische Methode zur Generierung von Text, der Englisch wieder zusammensetzt . Um unser Leben einfacher zu machen. Ich werde Ihnen ein fantastisches Plug-In namens Content Rail vorstellen . Es ist ein echter Game Changer, und wir werden es im Laufe des Kurses für verschiedene Aufgaben verwenden im Laufe des Kurses für verschiedene Aufgaben Lassen Sie uns zunächst über die Lorem PSA-Website sprechen. Es gibt eine offizielle Website für Lorem Ipsum. Sie heißt psm.com. Es hat viele Anzeigen, aber derzeit verwende ich den Breo-Browser, also bioproser alle Anzeigen, auch auf YouTube, damit du den Bo-Browser verwenden kannst Sie müssen dafür keinen Werbeblocker oder Plug-In hinzufügen Werbeblocker oder Plug-In Es funktioniert. Es funktioniert einfach. Okay, die Website ist also lipsum.com. Und Sie können einfach auf diese Schaltfläche zum Generieren klicken. Derzeit erstelle ich fünf Absätze. Und wenn ich auf „ Amon mit fünf Absätzen generieren“ klicke , werden fünf generiert Aber in diesem Fall möchte ich nur einen, also werde ich mich für einen generierten Ipsum entscheiden Und wie Sie sehen können, habe ich einen Absatz bekommen. Aber es ist ein Werkzeug in der. Ich möchte diese Menge an Wörtern nicht haben, also werde ich einfach bis zu diesem kopieren. Okay. Nehmen wir an, ich möchte Text hinzufügen, weil ich keine Ahnung habe. Was soll ich hier hinzufügen. Also vorübergehend möchte ich etwas Text hinzufügen. Also in diesem Fall werde ich Webstühle benutzen. Aber wie Sie sehen können, ist das Wort nicht umgehauen, es ist ein Quatsch in unserem Projekt Okay, lass mich zusammenfassen und lass mich so schrumpfen. Wie Sie sehen können, ist die Schriftgröße nicht großartig. In diesem Fall können wir also Farbstile verwenden, die wir im vorherigen Video gelernt haben. Wählen Sie in diesem Fall einfach den Text aus, diesen, mm und den Textstil. Und ich glaube, ich werde mich für 16 Sits Cat entscheiden. Lassen Sie mich dieses Set in der Mitte hinzufügen. So funktioniert L Epson. Aber in Figma stecken wir ein, was sehr beliebt ist und ich würde sagen, wie sie alle sind alle benutzen diesen Plugin-Inhalt, wirklich diesen, den echten Inhalt. Einfach drauf klicken. Wenn Sie diese Plugin-Einführung nicht haben, können Sie es einfach installieren. Sie wissen, wie es funktioniert Du weißt schon, zu Hause ist es ein und du kannst zum Testen gehen. Es wird das Top hinzufügen. Ich klicke einfach darauf. Irgendwann haben wir Son Plag Shder Und ich weiß, es ist ein bisschen kurz, aber ich denke, wir müssen es unterschreiben, um es größer zu machen, wenn du willst, groß oder per, wie dieses hier Ich glaube, du musst es unterschreiben. Okay, dieses Content-Plug-In hilft wirklich bei allem, wenn Sie eine Nummer in voller Länge, eine mL-ID, eine US-Telefonnummer, einen Firmennamen sowie ein Land wünschen mL-ID, eine US-Telefonnummer, Firmennamen sowie Du nennst es. Sie haben alle Arten von Platzhaltern Also, es generiert es automatisch oder vielleicht hat es all diese aktuellen Daten in seiner Datenbank Also holen sie es von hier und fügen es in unser Design ein. Wir können auch ein Bildsymbol hinzufügen und beim Hinzufügen sehen, lassen Sie mich sehen. Okay, wir können auch unser eigenes Ding hinzufügen. Okay, das ist großartig. So funktioniert Content Reel, und so können Sie, ähm, Epson von diesem Content-Ael aus verwenden . Es ist eine bahnbrechende Kombination, die Ihren Designprozess reibungsloser und effizienter macht Ihren Designprozess reibungsloser und effizienter Denken Sie daran, Ihren Kunden zu erklären , dass das Sprengen älterer Texte beabsichtigt ist, vor allem, wenn sie mit dem Konzept nicht vertraut sind , dass das Sprengen älterer Texte beabsichtigt ist, vor allem, wenn sie mit dem Konzept nicht vertraut sind. Weitere Tipps und Tricks zur Gestaltung finden Sie also im nächsten Video 45. Nützliche Text-Tipps & Tricks in Figma: Heiße meine Schüler willkommen. In diesem Video werden wir diese fantastisch aussehende Clickcard-Intro-Seite erstellen aussehende Clickcard-Intro-Seite Sie fragen sich vielleicht, wie zum Teufel er diesen Node-iPhone-Hund auf dieser Intro-Seite hatte diesen Node-iPhone-Hund auf dieser Intro-Seite Also werden wir uns auch all diese Dinge ansehen. Es gibt einige Textfunktionen. Ich habe es dir in der vorherigen Version nicht gezeigt, also werden wir auch diese lernen. Bevor wir also mit dieser beginnen, wollen wir uns mit einigen Textfunktionen vertraut machen. Okay, wenn Sie also Dinge wie Figma wie Parado entwerfen , haben Sie vielleicht ein kleines Problem, z. B. möchten Sie etwas Abstand hinzufügen oder etwas Abstand vergrößern oder verkleinern Also in diesem Fall, wie Sie das machen können. Es ist also einfach, klicken Sie auf den Text wie diesen und gehen Sie einfach zu diesem erweiterten Menü. In dieser Typeinstellung erhalten wir diese Option, den Absatzabstand. Ich weiß also, als ich Figma gelernt habe, habe ich das gemacht, wenn ich Drücken oder Parag-Abstände hinzufügen wollte, habe ich das gemacht, aber das ist keine gute Praxis Wir haben also eine funktionsspezifische Funktion für den sogenannten Absatzabstand Wir müssen es also nur nach rechts ziehen, um einen Abstand hinzuzufügen, und es nach links ziehen, um Steuern zu drücken. Lassen Sie mich in diesem Fall sagen, okay, also so sehen Sie ein Prototyp Okay, nehmen wir an, Sie haben dieses Szenario, als ob Sie gleichzeitig die Texteigenschaft ändern möchten In diesem Fall können Sie also die Universalsuche wie Cutter plus Schrägstrich aufrufen können Sie also die Universalsuche wie und nach Texteigenschaften suchen Okay, wählen Sie alle Texteigenschaften aus und es wird der gesamte Text ausgewählt, den Sie in diesem Design verwenden Und gleichzeitig möchten Sie die Texteigenschaften im Inneren ändern. Sie können das einfach aufteilen und in etwas anderes wie dieses ändern. Und Sie können sehen, dass wir gleichzeitig mit einem einzigen Klick unsere Texteigenschaften ändern können. Sie können die Frontgröße vergrößern, Sie können die Vorderseite ändern Sie können auch den Typ ändern, z. B. fett gedruckte, zusätzliche Semi-Volt. Und genauso wie die Abstände und all das. Also lass mich das machen, weil ich das nicht will. Okay. Und ich schätze, Sie sehen vielleicht die Aufzählungszahlen, aber wir sind kein ausgebildeter Techniker. Lassen Sie mich diese auswählen. Gehen wir zum Abschnitt „Hinzufügen“ und wir können unsere Aufzählungsliste einfach so verwenden. Keine Liste, Aufzählung und Nummernliste wie diese. Okay, es gibt also eine Funktion, die ich mag, aber ich benutze sie nicht oft. Nehmen wir an, Sie haben eine leere Seite und dafür haben Sie nur eine Option. Klicken Sie auf mich. Und Sie möchten einen Link hinzufügen. Also wähle das einfach aus. Und wie Sie sehen können haben wir bei Top Armo diese Option Link einfügen Und dafür können wir Control K verwenden und einfach darauf klicken und einen beliebigen Link hinzufügen In diesem Fall haben wir zuvor MSM gesehen, also werde ich WW LPS hinzufügen Und wenn ich zum Prototyp gehe, kann ich die Farbe ändern Damit der Benutzer weiß, wo ich klicken soll. Okay, also werde ich es rot machen, es rosa machen. Und lass mich zum Prototyp gehen. Okay. Und wenn ich darauf klicke, wird es zu mir weitergeleitet es wird angezeigt dass ich zum Laura Mipson weiterleiten möchte Wie Sie sehen können, fügen wir auf diese Weise Links hinzu unsere Benutzer zu unseren Websites weiterleiten Okay. Es gibt einige grundlegende Funktionen, die Sie verwenden könnten wenn Sie sich mit Google Docs oder einer grundlegenden Dokumentensoftware auskennen . Nehmen wir an, Sie möchten diesen Bolzen herstellen. Derzeit ist es fett gedruckt, aber nehmen wir an, es ist nicht fett, sondern normal. In diesem Fall können Sie es mit Control B zum Verschrauben bringen. Wenn Sie dies rückgängig machen möchten, drücken Sie erneut Strg B, es hat wieder eine normale Form. Wenn Sie kursiv formatieren möchten, können Sie die Strg-Taste für Kursiv drücken. Und wenn Sie das rückgängig machen möchten, drücken Steuerung erneut auf diese Weise. Eine andere Sache ist, wenn Sie Unterstreichungen hinzufügen möchten, verwenden Sie die Steuerung. Es wird eine Unterstreichung hinzugefügt Wie Sie sehen können, wurde es unter diesem Text hinzugefügt. Lass mich diese Kontrolle behalten. Ich weiß, dass Sie das in dieser Funktion tun können, wie in diesem Abschnitt Ich bin. Oh, hier. Du kannst diesen Vorrat auch unterstreichen. Aber wenn Sie die Abkürzung kennen, wird es einfach sein. Du musst nicht hierher gehen und das tun. Und es gibt noch eine andere Abkürzung, sagen wir, Sie möchten diese Schrift vergrößern. In diesem Fall können Sie dieses Menü aber auch Tastenkombinationen verwenden. Sie können die Strg- und Umschalt-Taste und die Taste „Größer als“ und „Kleiner als“ auf Ihrer Tastatur verwenden . Es befindet sich neben dem Quash-Zeichen neben dem Quash-Zeichen, und Sie können die Umschalt-Taste gedrückt halten Toller Pteror und weniger als ein Knopf für weniger als Dies sind also einige grundlegende Funktionen, die wir verwenden um unsere Aufgabe effizient und einfach zu gestalten Lassen Sie mich diesen löschen und unsere Benutzeroberfläche erstellen. Also lass mich das löschen. Wir haben derzeit Kritiken, und ich möchte unsere Intro-Seite gestalten Okay, also momentan werde ich zuerst wählen. Das wird unsere Hauptfarbe sein. Also werde ich eine Primärfarbe wählen. In diesem Fall wird es also dieses sein, und das wird unser Logo oder Click Cut sein. Ich füge es in die Mitte und mache eine Runde, nicht rund um den Kreis. L und Q mag das oder lass es mich zum Raster hinzufügen, damit ich weiß, ob es perfekt ist oder nicht. Okay, so. Es passt in das Raster und es kann sich zentrieren, lass es mich zurückschicken. M und unsere Karte, und lass mich das ändern , weil das unsere Sekundärfarbe ist. Okay, Sekundärfarbe. Okay, unsere Seite wurde für Phrase entworfen und ist komplett gestaltet. Also müssen wir nur Text hinzufügen, also gehen wir zum Text. Und wie heißt er? Klicken Sie auf den Einkaufswagen, damit ich es groß machen kann. Also dachte ich, acht wären perfekt. Also so. Okay, das ist also unser Design, aber ich weiß, das ist ein ziemlicher Abwärtstrend, also können wir es auswählen Lass es mich nach oben verschieben. Jetzt sieht es toll aus. Wir werden das gruppieren oder wir können es einrahmen , lassen Sie mich es rahmen. Also, wo es ist, und ich kann es niedrig nennen. Okay, das ist unsere Titelseite und ich verwende eine Schrift. Mono geradeaus. Okay. Ich weiß es nicht, aber das ist die Schrift und momentan der zusätzliche Bot und Größe 40. Das wird also unser Tropag sein wenn du eine andere Form verwenden willst, ich bin damit völlig gleichgestellt, weil es gleichwertig sein wird , also verwende eine andere Form oder ein anderes Logo oder anderes Logo oder Okay, lassen Sie mich jetzt dieses Video abschließen. Denken Sie also daran, dass ich diese Funktion häufig verwende, aber ich zögere nicht, alle verfügbaren Optionen zu erkunden. Beim Entwerfen von Fuma geht es darum die richtige Balance zwischen Funktionalität und Kreativität Experimentieren Sie ruhig und finden Sie heraus, was für Sie am besten funktioniert Also Stadion für mehr Design im Inneren im nächsten Video. 46. So fügen Sie Schriftarten in Figma hinzu und So fügen Sie fehlende Schriftarten in Figma hinzu: Willkommen zu den Wörtern im vorherigen Video, ich habe etwas vergessen. Ich habe dir doch gesagt, wir werden sehen, wie wir diesem Design diese Note hinzufügen können Aber ich habe vergessen, es dir zu zeigen. Aber als ich dieses Video neu aufgenommen habe, habe ich von einem Problem erfahren, nämlich dass ich die Schriften nicht in meinem System habe. In diesem Video werden wir sehen, wie man auf eine fehlende Schrift stößt oder wie man sie repariert. Zuallererst habe ich diese Schriftart wie SP Display, ich habe diese Schriftart in meinem System. Ich habe also keinen Fehler mit diesem. Aber wie Sie sehen können, habe ich SP Display Pro, aber für dieses Design ist derzeit Gular Italic erforderlich, aber ich habe nur Medium oder Bolt Wenn ich mich also für Bolt entscheide, wird es funktionieren. Und dafür muss ich eine Schrift herunterladen. Also ging ich ins Internet und erfuhr von dieser Website namens Pixel Berg, und sie hatte diese spezielle Formularfamilie namens SEP. Sie gehört Apple. Apple verwendet dieses Formular häufig. Wenn Sie ein iPhone haben, haben Sie dieses vielleicht gesehen. Also habe ich diesen heruntergeladen und lass mich es dir und meinen Dateimanager zeigen. Okay, das ist also die Formularfamilie, und ich muss das herunterladen Oh, tut mir leid, ich muss das eins nach dem anderen installieren. müssen nur darauf doppelklicken und es wird automatisch installiert. Also wenn ich sie alle installiere, also habe ich einige von ihnen installiert, aber damit das funktioniert, muss ich diese Software neu starten. Also lass mich unsere Figma neu starten. Denn wenn Sie etwas wie Fs installieren, müssen Sie die Software neu starten , weil dieses Programm bekannt ist, Sie haben diese Software. Sorry, das hast du falsch gemacht. Wie Sie bereits sehen können, war dies ein Fehler, aber jetzt ist unser FT installiert. Es gibt uns also keinen Fehler, aber derzeit ist es kein regulärer Fehler, und wir haben all diese regulären, also müssen wir einen regulären installieren. Aber nehmen wir an, Sie möchten keine Schrift herunterladen. Sie möchten nur eine Schrift an dieser Stelle haben. In diesem Fall können Sie also, sagen wir, zu, sagen wir, Oh hier gehen . Und Sie können alle anderen Schriftarten wählen , die auf Ihrem Bild vorhanden sind. In diesem Fall wählen wir also Prata. Und das ist Prata and Replace Font. Also ist es jetzt ersetzt. Ich weiß nicht, ob es ersetzt wurde , aber es wurde ersetzt. Also lass es mich noch einmal machen. Okay. Lass mich reingehen. Okay. Derzeit können Sie sehen, dass uns das einen Fehler gibt, aber lassen Sie uns das in etwas anderes ändern. Es gibt mir keinen Fehler. Denke an eine Sache, wenn du diesen kopierst , momentan ist er so tiefgründig. Okay, dieser Teil. Es hat sich hier geändert. Lass mich das ändern, etwas anderes wählen. Okay, also wähle diesen. Also wollte ich das sagen. Und wenn ich das kopiere und in meinem Projekt verwende , lass mich das zuerst machen, kopieren und damit du siehst, wir haben Fehler. Also wollen wir das nicht. Dafür müssen wir die Schrift installieren oder wir müssen sie durch etwas anderes ersetzen. Okay, jetzt gehen wir zu unserem Design und fügen dieses Nein zu unserem Design hinzu. Aber ich weiß, dass es meinen Fehler beheben wird. Aber ich werde es durch etwas anderes ersetzen. Okay, also haben wir hier drüben hinzugefügt. Okay, jetzt passt es. Aber wie Sie sehen können, haben wir den Fehler in unserem Design. Also werde ich es als Pro-Display durch die S-Schrift ersetzen, die ich in meinem System installiert habe. Also ersetze die Schrift. Denn wie Sie sehen können , werden keine Änderungen vorgenommen. Es sieht genauso aus. Lass mich dasselbe auch mit 32 machen. Okay. Machen wir dasselbe auch mit dieser einen S Pro-Display-Ersatzschrift. Okay, wir haben momentan also keinen Fehler. Wie Sie sehen können, ist das in den kursiven Modus geschnitten. Ich weiß nicht wie, aber in den kursiven Modus. Ich denke, wir können es ändern, aber lassen Sie es vorerst so sein. So ersetzen Sie also Ihre Schriften. Denken Sie daran, Flexibilität ist der Schlüssel und Sie können entscheiden, ob Sie bei der Originalschrift bleiben möchten der Originalschrift oder ob Sie sie herunterladen oder durch etwas anderes ersetzen können . Das schmerzt das Design. Und das war's, meine Freunde. Jetzt seid ihr mit dem Umgang mit fehlender Schrift wie R ausgestattet . Falls ihr dieses Video verletzt, lasst es mich bitte wissen und wir sehen uns im nächsten 47. Kursprojekt 07 Text und Textstil: Ist, heute haben wir in Figma ein spannendes Projekt für Sie Folgen Sie also diesem einfachen Schritt, um Ihre Kreativität und Designfähigkeiten unter Der erste Schritt ist Textil. Lassen Sie uns zunächst die Grundlage für das Par-Design mit dem Textil schaffen . Wählen Sie zwei Kräfte aus, die zu Ihrem Projektthema passen. Erstellen Sie nun einen Stil für die Überschrift und den Haupttext in Figma. Konsistenz ist hier der Schlüssel. Stellen Sie also sicher, dass Ihre Wahl Ästhetik entspricht, die Sie anstreben. Nun, die zweite ist die Intro-Seite. Also lass es mich dir in Figma zeigen. Okay, also du musst ein Designsystem wie dieses erstellen und danach unsere Intro-Seite wie Das ist also meine Intro-Seite. Jetzt ist es an der Zeit, sich mit dem kreativen Prozessdesign oder der Einführungsseite zu befassen und dabei das Textil zu verwenden Sie gerade gelernt und eingerichtet haben Fühlen Sie sich frei, wenn Sie Ihrer Kreativität freien Lauf lassen und sie mit verschiedenen Farben, Schriftarten und Layouts experimentieren Bis Sie das Design gefunden haben , das Sie anspricht. Vergessen Sie nicht, Schrift und Logo hinzuzufügen , die zu Ihrer Gesamtvision passen Und wenn Sie mit Ihrer Intro-Seite zufrieden sind, lassen Sie uns diesen Moment festhalten Machen Sie einen Screenshot Ihres Meisterwerks und achten Sie darauf, dass Ihr ausgewähltes Textil darauf Dieser Schnappschuss wird eine visuelle Darstellung Ihres Designs sein, also lassen Sie ihn zählen. Sie müssen also einen Screenshot Ihres Textilsystems wie diesen und Ihrer Intro-Seite Und ich weiß, dass du bereit bist, deine Schöpfung mit der Welt zu teilen Gehen Sie also zur Projektion und laden Sie dort Ihren Screenshot hoch. Das ist also deine Chance zu glänzen. Nehmen Sie sich also einen Moment Zeit, schätzen Sie Ihre harte Arbeit und Kreativität. Und du kannst es auch in deinen sozialen Medien wie Instagram Stories oder Twitter sowie auf Linkin teilen wie Instagram Stories oder Twitter , und du kannst mich dort auch taggen weil ich diese epischen Kreationen sehen möchte Da hast du es, ein schnelles und lustiges Figma-Projekt. Denken Sie daran, dass Beständigkeit und Sauberkeit der Schlüssel zu großartigem Design Beständigkeit und Sauberkeit der Schlüssel zu großartigem Organisation, Textleben akribisch und der Hauptbestandteil: Gestaltungselement CZ, Holz, Glück und viel Spaß 48. Grundlagen des Figma Stift-Tools und Vektor-Netzwerke: Amazon-Studenten, willkommen zurück zu einer weiteren Folge. Heute tauchen wir in das FBMA-Universum ein, um die Geheimnisse des mächtigen Stift- und Bleistiftwerkzeugs zu enthüllen Geheimnisse des mächtigen Stift- und Bleistiftwerkzeugs Bleiben Sie hier und ich werde Ihnen zeigen, wie man wie Werkzeug und Bleistiftwerkzeug Also bist du bereit? Also, lass uns loslegen. Lassen Sie uns zunächst verstehen, was ein Bleistiftwerkzeug und ein Stecknadelwerkzeug sind. Die erste ist die präzise Steuerung. Es ist unbrauchbar, wenn präzise Formen mit gerader Linie und glatter Kurve zu erzeugen, einschließlich Konfliktformen wie Logos, Icons und Illustrationen. Es bietet auch Flexibilität. Das Pin-Tool ist sehr flexibel. Es bietet Amos-Steuerelemente wie Kantenpunkte, Hinzufügen von Griffen und das Manipulieren von Pfaden für Details Bearbeitung, und es ist nicht destruktiv. Änderungen, die an einem Punkt auf dem Pfad vorgenommen werden, wirken sich nicht auf die gesamte Form aus, sodass sie einfach angepasst werden kann. Lassen Sie uns nun zum Bleistiftwerkzeug springen. Es ist schnell und freihändig. Ideal zum schnellen Skizzieren von groben Umrissen in D, insbesondere für Organistenformen oder Dank der intuitiven Freihandzeichnung, die dem herkömmlichen Stift ähnelt, ist er auch für Anfänger intuitiven Freihandzeichnung einfach zu Ich weiß, dass das Ergebnis im Vergleich zum Stiftwerkzeug eine weniger präzise Form ist , aber es kann gut sein, um die ursprüngliche Idee festzuhalten. Lassen Sie uns jetzt zum Stiftwerkzeug springen und einige dieser seltsamen Strukturen erstellen. Also lass mich das zuerst löschen und das von meinem Bildschirm entfernen , weil ich Okay nicht finde. Dafür können wir zu diesem Pin-Tool gehen, und Short ist einfach P. P, um ein Pin-Tool zu erstellen. Wir wollen etwas mit Pinto kreieren. Klicken Sie so auf den Bildschirm und wir haben mit Pintol etwas Neues erstellt Und wie Sie sehen können, bekommen wir diese Punkte und wir können sie redigieren Aber es gibt ein Problem. Als ob ich meinen Cursor auf dem Bildschirm bewege und eine Zeichenfolge daran angehängt ist. Wenn ich woanders diene, würde das einen Knoten erzeugen. Also ich will das nicht. Wenn ich diese Knotenzeichenfolge loswerden will , kann ich einfach Escape auf meiner Tastatur drücken und sie wird verschwinden Lassen Sie mich Ihnen jetzt eine Sache zeigen, Beispiel ob ich gerade in PNR und wenn ich meinen Cursor so bewege, wie Sie sehen können, befindet sich unter dem Stiftwerkzeug eine Plus-Schaltfläche Und wenn ich irgendwo darauf klicke, wird Punkt auf unserem Node hinzugefügt Ich kann diesen Punkt verwenden, um Kurve hinzuzufügen oder etwas zu bearbeiten. Ich wünschte, du hättest es erledigt, aber bevor wir das tun, lassen Sie uns einige Schichten erstellen. Okay, sagen wir, ich möchte ein Rechteck erstellen. In diesem Fall kann ich es also so verwenden. Und tut mir leid, es ist kein Rechteck. Es müssen vier sein. Okay, drei und vier. Jetzt sind wir rechteckig. Aber lassen Sie uns ein genaues Rechteck erstellen. In diesem Fall können Sie also die Umschalttaste gedrückt halten und Punkt sechs erstellen. Und so entsteht ein perfektes, präzises Rechteck für Sie. Und es gibt eine Sache. Sie können auch Füllung hinzufügen, sagen wir, wenn ich eine Füllung hinzufüge, kann ich, wie Sie sehen, die Farbe ändern. Ich kann es mit einem Farbverlauf oder etwas Ähnlichem machen. Ich kann auch Bilder hinzufügen und all das. Es ist also einfach. Ich weiß, dass es nicht sinnvoll ist den Stift zur Formgebung zu verwenden Aber lassen Sie uns einen komplexen Symbolspeicher erstellen, wenn Ihre Designs komplexe Elemente enthalten In diesem Fall haben Sie also ein Pintol. Aber ich habe selten jemanden gesehen, der Pentel im Design verwendet hat. Lassen Sie uns nun zur nächsten Sache übergehen. Nehmen wir an, Sie haben diese beiden Zeilen wie diese. Und ja, wir können Kurven hinzufügen. Lassen Sie mich Ihnen zeigen, wie man Kurven hinzufügt. Ich kann es einfach so hinzufügen. Lass es mich auch hier hinzufügen. Okay. Nun, es gibt eine Sache, die ich dir zeigen möchte. Nehmen wir an, Sie möchten diesem Punkt an diesem Punkt oder diesem Punkt an diesem Punkt beitreten . In diesem Fall können Sie also das Bleistiftwerkzeug verwenden, aber es gibt eine Abkürzung. Sie können einfach diesen Punkt auswählen und Strg J verwenden Dann wird alles zusammengefügt. Sie beide. Und es ist einfach, so. Wie Sie sehen können, hat es auch die Farbe darin gefüllt. Und es gibt noch eine andere Sache, die du tun kannst. Ich weiß, dass es viele Fische mit Stecknadeln gibt, aber das ist in deinem Wort wirklich ein Werkzeug. Lassen Sie mich das mit diesen Punkten verbinden. Das sind jetzt beide getrennt, und wenn ich dieses Tool, den Stifteeimer, benutze , wenn ich darauf klicke, weiß ich, dass die Farbe verschwunden ist, aber wir können ein paar Farben hinzufügen Also wähle es einfach aus. Und wenn ich etwas wie Rosa wähle. Wie Sie sehen können, können wir unserem Feld Farben hinzufügen und sie innerhalb einer einzigen Form unterscheiden. Okay, jetzt springen wir auf die Kurve. Wie vor ein paar Minuten haben wir einige Punkte auf diesem Knoten hinzugefügt . Jetzt habe ich diese Kurve sanft gewählt und jetzt kann ich es einfach so machen Und es entlüftet, es macht glatte Kurven wie diese. Wie Sie sehen können, haben wir hier einige Wellen erzeugt, und im Designbereich haben wir einige Optionen: Spiegelwinkel, Verschmelzung und Mirror no Mering Miragle und Spiegelwinkel mit einer Länge Meist handelt es sich dabei um Spiegelwinkel und Länge. Und lass mich dir zeigen, wie es funktioniert. Also ich habe diesen und derzeit sind wir in Bentol. Wenn ich es so bewege, wie Sie sehen, haben wir hier zwei Griffe. Wenn ich also etwas hierher verschiebe, also am anderen Ende, wird dasselbe passieren, als ob es auch passieren wird. Mond. Es repliziert nur den zweiten Griff des Spiegels Okay, momentan sind es Spiegelwinkel und Länge, und ob ich Spiegelwinkel wähle und ob ich auf diesen Punkt klicke Wie Sie sehen können, habe ich diesen einen Griff. Jetzt kann ich nur noch einen Winkel einstellen. Es gibt keinen zweiten Griff und es repliziert sich nicht Wenn ich einen Winkel anpassen möchte, kann ich das so machen Okay, lass uns jetzt zur nächsten Sache übergehen. Nehmen wir an, Sie möchten etwas löschen , so wie Sie diesen Knoten löschen möchten. Okay, ich wähle den Spiegelwinkel. Lassen Sie mich also keine Spiegelung wählen. Wenn ich mich für dieses entscheide, weiß ich nicht, was es ist. Okay. Ich bin gerade in Como, deshalb wähle ich es aus und mache es zu einer Bucht. Lassen Sie mich das Auswahlwerkzeug auswählen, und wenn ich die normalen Punkte so und wenn ich diesen lösche, wie Sie sehen können, wird das Feld go gelöscht, auch die beiden Seiten werden gelöscht. Aber sagen wir, ich möchte nur diesen Punkt löschen, aber die Füllung muss intakt sein. In diesem Fall kann ich also die Umschalttaste verwenden, meinen Punkt wie diesen auszuwählen , den ich löschen muss, und ich werde die Umschalttaste gedrückt halten und löschen. Wie Sie sehen können, ist das Objekt intakt, und auch die Füllung ist intakt. Also diese komische Sache können wir mit einem Stiftwerkzeug machen. Und es gibt auch ein Bleistiftwerkzeug. Ich glaube nicht. Wer ist das? Aber als ich im Kindergarten war, haben wir solche Designs gemalt. Wir haben Berge wie diesen gemalt, drei Berge, und wir haben hier so etwas Sonne hingestellt. Okay, ich weiß, dass meine Zeichnung wirklich seltsam ist. Aus welchem Grund haben wir früher so Ja gezeichnet. Okay. Es weint. Und es muss ein Haus wie dieses geben. Tut wohl weh, aber. Okay, es ist wirklich winzig. Und ich weiß nicht, es gibt einen Grund, warum es einen Fluss gibt. Lass uns überqueren. Also müssen wir Designs wie dieses erstellen. Also so kannst du den Stift benutzen. Okay, so können Sie das Bleistiftwerkzeug und das Stiftwerkzeug verwenden. Aber Sie denken vielleicht, wann wir Stiftwerkzeug oder das Bleistiftwerkzeug verwenden sollten. Als Erstes, lass uns Pintol gehen. Nehmen wir an, Sie benötigen scharfe und genaue Formen mit geraden Linien und glatten Kurven. Verwenden Sie das Pin-Tool Und Sie lassen uns auch komplexe Formen wie Logos, Symbole oder Illustrationen, das Pin-Tool erstellen komplexe Formen wie Logos, Symbole . Außerdem möchten Sie eine präzise Steuerung oder einzelne Punkte und Kurven verwenden, indem Sie das Pin-Tool verwenden. Lassen Sie uns nun über das Bleistiftwerkzeug sprechen. Wenn Sie die Idee oder den Schöpfer der Kontur skizzieren möchten , verwenden Sie das Bleistiftwerkzeug Sie möchten etwas Organisches zeichnen oder Konturen schmecken, verwenden Sie das Bleistiftwerkzeug. Wenn Sie ein Anfänger sind und einfach nur Telefon wie dieses haben möchten, wenn Sie dieses Bild erstellen möchten, verwenden Sie das Bleistiftwerkzeug. Also, mein Freund, das ist die Hülle für dieses Video. Wenn Sie dieses Ich voll gefunden haben, lassen Sie es mich bitte wissen. Bis zur Mittagszeit designt Happe. Und denk dran, du wählst nur ein Pixel aus, falls du willst. 49. Warum sind die Apple-Symbole anders (Ecken-Glättung): Köpfe und Trupp, wir haben das Gefühl, dass die Dinge einfach zu scharf sind, wie deine Telefonsymbole Sticht dir in die Augäpfel. Und du, ich sehe, es ist gegen eine Wand gelaufen. Nun, schnapp dir eine verpixelte Decke und hol Kaffee, denn wir sind dabei, in die Welt einzutauchen, um die Ecke zu glätten Fipma, eine Geheimwaffe, um Ecken zu knacken. Ich erinnere mich, dass ich seit Jahrzehnten ein Android-Nutzer war. Icons waren flach, quadratisch, manchmal mit abgerundeten Kanten, aber meistens nur eine Schachtel, dann bumm, mein Freund plus sein brandneues iPhone 15 P max Ich kenne Lucky Duck, und ich stöbere durch die Apps und bin fasziniert von den Apps Plötzlich trifft mich etwas wie ein pixeliger Mentor. Die Symbole sind gleichzeitig abgerundet und quadratisch. Und mein UX-Designer-Gehirn ruft Drive an? Welche Zauberei ist das? Nach unserer Pause später habe ich die Kohle geknackt. Dieses magische Tx wird Corner Smoothing Figma genannt. Es führt dazu, dass Sie diese Haschecken nehmen und sie in sanfte Kissen verwandeln . Stellen Sie sich das so vor, als würden Sie Ihre Benutzeroberfläche von innen nach außen öffnen. Okay, lassen Sie uns jetzt lernen, wie man abgerundete Kanten erzeugt. Bevor wir das tun, habe ich vergessen, dir im letzten Video etwas zu sagen. Erinnerst du dich, dass wir dieses Meisterwerk wie Picasso geschaffen haben? Wenn du also das Stiftwerkzeug beherrschen willst, wenn du es mit YuxFiel oder Grafikdesign ernst meinst, dann gibt es eine Website, Bizer's Game, so etwas Ähnliches Okay, ich kann es nicht aussprechen , aber wenn du es weißt, lass es mich wissen Auf dieser Website können Sie Ihr Stiftwerkzeug also so üben. Du kannst dein Stiftwerkzeug auf diese Weise üben und du kannst Meister werden. So können Sie also Ihr Stiftwerkzeug üben. Das ist also nur eine kurze Zusammenfassung oder ein Tipp zu diesem Video. Lassen Sie uns nun zu unserer Eckglättung übergehen. Okay, lassen Sie mich von diesem Meisterwerk erzählen. Ich weiß, das sieht sehr gut aus, aber wir müssen dieses erzählen, besonders dieses. Okay, lassen Sie uns ein paar Rechtecke für unsere Icons zeichnen und lassen Sie mich einander zeichnen Okay. Lass mich das kopieren. Wir werden also den Unterschied erkennen. Nehmen wir an, das ist unser Symbol und ich gebe Ihnen abgerundete Kanten von bis zu zehn. Und wie Sie sehen können, ist es abgerundet. Die meisten Benutzer wissen, dass das Symbol in Android so aussieht. Aber jetzt, wenn ich dieser Rundheit zehn gebe, und wenn ich zu diesen unabhängigen Ecken gehe, gibt es mehr Optionen, Ecken glatt rein Und wenn ich diese 200% verfolge, wie Sie sehen können, ist das ein bisschen anders Ich weiß, dass wir es derzeit nicht unterscheiden, aber wenn ich ein bisschen hineinzoome, einen Unterschied gibt, ist diese Ecke zu scharf und hat eine Art Blaseneffekt oder einen runden Effekt Also lass es mich noch einmal machen, wenn ich zu einer glatten Ecke gehe, und wenn ich das mache, achte einfach auf die Ecken Wie Sie sehen können, wird es rund. Ich hoffe, du kannst das sehen. Lassen Sie mich das noch einmal zusammenfassen. Derzeit 100 Nullhundert Nullhundert. Okay, also so funktioniert Cormoing, und das ist die normale Ich weiß, es sieht wirklich hübsch aus, aber wenn ich die 15 erhöhe, wird es cooler aussehen Wenn ich das 15 mache. Im Vergleich dazu sieht das besser aus. Eckenglättung ist erwünscht, super Bow. Dadurch fühle ich mich aufgeschlossener , freundlicher und moderner Stellen Sie sich einen Button vor, der Sie zum Klicken einlädt. Anstatt einer, die schreit, fass mich nicht an oder eine Website mit einem kleinen Übergang, der sich wie eine sanfte Klammer anfühlt , nicht wie ein Wirbelsturm Gehen Sie also los und experimentieren Sie reibungslos, brechen Sie dann die Regeln und sehen Sie, welche Art von Magie Sie zum Glätten von Ecken Denken Sie daran: Beim Design geht es vor allem darum, dass sich die Dinge gut anfühlen, und mit dem Glätten von Ecken werde ich im Internet am wärmsten verschwommen sein. Wenn du mehr über das Glätten von Ecken erfahren willst, Figma ist dieser Blogartikel, du kannst auf diese Website gehen, ich werde das wahrscheinlich verlinken, damit du sie durchgehen und alle Artikel lesen kannst , warum das Figma ist dieser Blogartikel, du kannst auf diese Website gehen, ich werde das wahrscheinlich verlinken, damit du sie durchgehen und alle Artikel lesen kannst, warum das so ist. Und es gibt eine Formel. Es gibt eine mathematische Formel. Wie zu meiner Collegezeit war Mathe eines meiner Lieblingsfächer. Und als ob ich diese Derivate und all das kenne. Ich muss sie sofort lösen, aber wenn ich sie mir jetzt ansehe, fühlen sie sich sehr seltsam an. Wenn Sie mehr über diesen Eckeneffekt, den Eckenglättungseffekt , erfahren möchten , lesen Sie diesen Artikel Hier dreht sich also alles um das Glätten von Ecken in Figma. Also das ist ein Port und wir sehen uns im nächsten 50. Boolean-Operationen (Union,Subtract,Intersect,Exclude) in Figma: Hcretmns In diesem Artikel tauchen wir in die Boleon-Operationen in Figma wir Der Begriff klingt vielleicht ein bisschen perfekt, aber diese Operationen sind unverzichtbar, um Formen zu kombinieren oder zu manipulieren. Stellen Sie sich diese Werkzeuge wie eine übertriebene Design-Toolbox vor , mit der Sie interaktive Symbole oder Benutzeroberflächenkomponenten erstellen können, um diese Neugestaltungssymbole mithilfe von Boleon-Operationen zu veranschaulichen mithilfe von Boleon-Operationen Es gibt mehrere boolesche Operationen. Wenn ich diese beiden auswähle, wie Sie im Menü in der oberen Leiste sehen können, erhalten wir diese Aber wenn ich eine auswähle, erhalten wir diese Option nicht. Damit die boolesche Operation funktioniert, müssen wir mindestens zwei Formen haben Derzeit habe ich diese beiden Formen ausgewählt, und wie Sie sehen können, haben wir diese Operation Post ist Gewerkschaft. Danach subtrahieren wir, schneiden ab und Also lass uns mit Union gehen. Nehmen wir an, ich habe zwei Formen wie ein Rechteck. Lassen Sie mich zuerst diesen löschen. Okay, lassen Sie mich ein paar Formen annehmen. Nehmen wir an, wir haben sowohl rechteckige als auch runde Lippen wie diesen, und ich möchte sie zusammenfügen. In diesem Fall wird die Gewerkschaft also funktionieren. Lassen Sie mich Ihnen sagen , was Union ist. In Spaldum ist Union die Operation, die Form zu einer einzigen Einheit zusammenfasst Wenn Sie mehr über Einheiten wissen wollen, so hier ist es. Union fasst die gewählte Form zu einer boolinen Gruppe zusammen. Wenn sich die Objekte überlappen, besteht der äußere Pfad der neuen Form aus dem Pfad Comparans Ops Sublis abzüglich aller Segmente Wenn ich das zusammenführe, ist das, wie Sie sehen können, eine Schnittverbindung jedem Segment, das sich überschneidet, würde der Strich auf diesen äußeren Pfad angewendet, Bei jedem Segment, das sich überschneidet, würde der Strich auf diesen äußeren Pfad angewendet, wobei alle Pfadsegmente, die sich überlappen, ignoriert In diesem Fall funktioniert die Vereinigung also so. Wenn du deine Formen zusammenfügst und einfach auf diese Schaltfläche klickst, wird automatisch mehr Vereinigung hergestellt, und das ist unsere Vereinigung. In einfacher Sprache in Einheit entsteht das endgültige Bild, indem zwei Einzelbilder wie dieses oder zwei Formen kombiniert werden. Schauen wir uns nun das Subtrahieren an. Lassen Sie mich also zwei Formen nehmen , die Ellipse sein werden. Okay. Lass mich das kaputtmachen. Lassen Sie uns jetzt über Subtraktion sprechen. Bei dieser Operation wird die Form oben von der darunter liegenden abgezogen Derzeit ist dieser, glaube ich, ganz oben. Okay, dieser ist ganz oben, und wenn ich beide auswähle und wenn ich Subtrahieren wähle Wie Sie sehen können, wurde das oberste Objekt subtrahiert. Subtrahieren ist die entgegengesetzte obere Vereinigung Subtrahieren wird der Bereich der Form oder der Anordnung der Formen von der Grundform entfernt Formen von der Grundform Nur die untere Formebene ist fest und der Rest wird von ihr abgezogen So funktioniert das Subtrahieren. Gehen wir nun zum Schnittpunkt über. Nehmen wir dafür eine andere Form, nehmen wir Ellipse und lassen Sie mich Polygon nehmen Okay, so. Was Intersect bewirkt, ist, dass der überlappende Bereich zwischen den Formen beibehalten der überlappende Bereich zwischen den Lassen Sie mich das nehmen und lassen Sie mich beide überschneiden, und wählen wir Das ist wirklich cool, modern und sieht irgendwie wie ein Diamant aus Kreuzungen bilden also eine blasse Gruppe. Diese Formen bestehen nur aus dem sich überlappenden Teil Okay, so funktioniert Intersect. Lassen Sie uns nun zum Ausschließen übergehen. Also lass mich die Lippen nehmen, lass uns einen Stern nehmen. Okay, also wir haben beides und lassen Sie uns Extrakt hinzufügen. Also stelle ich das in die Mitte. Lassen Sie uns beide zerschneiden. Also, was Exclude macht, ist das. Bei dieser Operation werden Löcher bearbeitet , in denen sich Formen überschneiden. Ausschließen ist das Gegenteil von Überschneiden. Ausschließen zeigt nur die Bereiche der Unterebene, die sich nicht überlappen Wenn ich also beide verzahne und wenn ich sie ausschließe, wie Sie sehen können, entsteht ein Loch innerhalb des Kreises Und wir haben dieses wirklich cool aussehende Symbol. Okay, das sieht aus wie das Captain America-Logo. Durch die Kombination dieser Operation erstellen wir ein komplexes Symbol mit einzelnen Komponenten. Jedes bleibt editierbar. Sie können jederzeit in Details eintauchen und bestimmte Teile jedes Designs ändern Wenn ich das also in diesem Fall verschieben möchte, kann ich es einfach so machen. Ich kann Hop Moon so machen oder ich kann es verschieben und ich kann es jederzeit bearbeiten. Okay, also hier ist die eine Aufgabe für dich. , ich möchte, dass du diesen und diesen Have-Stern kreierst, sowie diesen , dieses Symbol. Halte das Video an und mach das. Und ich werde dir zeigen, wie das geht. Aber zuerst pausiere das Video und mach das. Okay, ich hoffe, Sie haben das getan, also lassen Sie mich diesen Effekt mit diesen Kreisen erzielen. In diesem Fall benötigen wir sechs Kreise. Okay, also habe ich den Kreis so platziert und lasse mich einen weiteren Kreis nehmen und der wird dann in der Mitte aufgestockt. Okay, lassen Sie mich sie alle auswählen. Und ich werde Ausschließen wählen. Wie Sie sehen können, habe ich diese unglaublich aussehende Form geschaffen. Ich weiß nicht, wie sie heißt, aber sie sieht wirklich verrückt aus. Hier ist noch eine Sache, nehmen wir an, Sie möchten den Umriss der Struktur sehen In diesem Fall haben wir eine Reihe von Formen, die wir eine einfache Bedienung erstellt haben. Und nehmen wir an, Sie möchten die Gliederung sehen. In diesem Fall können Sie die Umschalttaste verwenden, um die Gliederung zu sehen. Es zeigt Ihnen, welche Komponente hat und wie viele Formen darin verwendet wurden während Sie diese Symbole so gestalten. Bei der Erstellung haben wir sechs bis sieben Kreise. In diesem Fall haben wir sowohl einen Stern als auch dieses Rechteck, und in diesem Fall haben wir drei Kreise. Forts Ellipse, das ist kein perfekter Kreis. Danach haben wir zwei Kreise darin. Das Gleiche gilt für diesen, dasselbe für diesen. So können wir den Umriss sehen. Lassen Sie uns das hinter uns lassen. Du kannst Shaped drücken , um aus der Sache herauszukommen. Ich hoffe, du hast diese eine halbe Form geschaffen. Es ist sehr einfach. Gehe einfach zu Formen. Wir haben hier Sterne. Zeichne einen Stern und nimm ein Rechteck. Platzieren Sie es und verkaufen Sie beide und verwenden Sie Intersect. So kreiert man in Pigma Halbsterne. Dieser ist sehr einfach. Ich weiß, dass viele Leute das getan haben müssen , aber lass es mich dir zeigen. Zuerst haben wir unsere Lippen bekommen. Lass mich Zirkus zeichnen. drüben zum Zirkus, und einer wird so klein sein. Lass es mich in die Mitte stellen und einfach ausschließen. Wie Sie sehen können, haben wir dieses Augensymbol geschaffen. Ich hoffe, Sie können diese einfache Aufgabe erledigen. Denken Sie also daran, dass Balloperationen eine leistungsstarke Funktion sind, die gerne illustriert werden soll, aber auch ein Finder oder ein Formbildner ist. Sie bieten Flexibilität und schaffen ein integriertes Design, ohne dabei die Reizbarkeit zu beeinträchtigen Bleib also kreativ und ich werde dich im nächsten Video sehen. 51. Figmas Power-Duo wann du Union einsetzen solltest und wann du sie einsetzen solltest: In diesem Moment untersuchen wir, was der Unterschied zwischen Vereinigung und Abflachen ist der Unterschied zwischen Vereinigung und Abflachen Also, wenn ich das auswähle und wenn ich in dieses Bulin-Betriebsmenü gehe Wie Sie sehen können, haben wir diese Option, die abgeflachte Auswahl. Also was ist das? Und was unter Union-Selektion und abgeflachter Auswahl zu verstehen ist , wird in diesem Video voneinander unterschieden Wir wissen also, was Vereinigung ist. Union ist eine zerstörungsfreie Operation, bei der Formen kombiniert und gleichzeitig ihrer individuellen Reizbarkeit Wie Sie zum Beispiel sehen können, wir diese Form bearbeiten, wenn ich darauf doppelklicke, wie Sie sehen können wenn ich darauf doppelklicke, wie Sie sehen können Also verwenden wir Union, um variable Formen in So-Design zusammenzuführen. Dies ist hervorragend geeignet, um unser Design flexibel und editierbar zu halten unser Design flexibel und editierbar Aber lassen Sie mich Ihnen etwas über die Abflachung erzählen. Operation Flatten Distruct werden mehrere Schiffe zu einer einzigen Einheit zusammengefasst, die Also haben wir kreiert, lass mich eine Sache hier drüben kreieren . Also wirst du den Unterschied bemerken. Lass mich das machen. Wenn ich beide auswähle und den Schnittbereich auswähle, wie Sie sehen können, erhalten wir diese Form Und wenn ich in den Konturmodus gehe, gibt es, wie Sie sehen können, zwei Formen Das ist im Gliederungsmodus sichtbar. Aber wenn ich beide auswähle und wenn ich die flache Auswahl wähle Wie du sagen kannst, gibt es nichts. Wir haben nur diese Form. Das ist also der Unterschied zwischen Union und Flatter. Es ist also nützlich, um das Konfliktdesign zu vereinfachen oder wenn Sie ein Design als einzelne Einheit exportieren möchten ein Design als einzelne Einheit exportieren Zusammengenommen konnten wir unser Design exportieren, aber es war ein bisschen chaotisch Wir können auch andere Formen sehen, aber mit einer Abflachung können wir nur eine einzelne Einheit sehen Nehmen wir an, wenn ein Design interaktive Details in Frage stellt und Sie es bis zur endgültigen Auflösung optimieren möchten, ist Abflachen immer ist Abflachen Hier geht es um Vereinigung und Abflachen . So verwenden wir Flatten. Lassen Sie mich also sagen wann wir Union verwenden sollten und wo wir Flatten verwenden sollten Verwenden Sie Union, wenn Sie Formen kombinieren und gleichzeitig die Möglichkeit behalten möchten , sie einzeln zu bearbeiten Dies ist besonders praktisch bei der Erstellung komplexer Designs, bei denen jedes Element finalisiert werden muss und die Methode „Abflachen“ wie folgt verwendet werden muss, wenn Sie Formen zu einer Einheit zusammenfügen möchten, besser auszunutzen oder zu vereinfachen Ich bin besonders nützlich, wenn Sie einzelne Komponenten nicht separat bearbeiten müssen Das ist also alles über N L Flatten. also den Unterschied zwischen N und Abflachen kennen, haben Sie mehr Kontrolle über Ihren Entwurfsablauf, unabhängig davon, ob Sie eine zerstörungsfreie Flexibilität oder die Einfachheit einer flachen Konstruktion bevorzugen, was haben Sie mehr Kontrolle über Ihren Entwurfsablauf, unabhängig davon, ob Sie eine zerstörungsfreie Flexibilität oder die Einfachheit einer flachen Konstruktion bevorzugen auf Ihre spezifischen Projektanforderungen ankommt Ich bin also immer kreativ und werde euch im nächsten Video wiedersehen 52. Kursprojekt 8 Desin-Homepage und Burgur-Menü: Von den Schülern ist Projektzeit. Denken Sie daran, wir waren verpixelt. Wie um alles in der Welt hatten wir jemals eine anständige Homepage entworfen. Ratet mal, was wir haben, Liebe. Jetzt ist es an der Zeit, unsere Figma-Fähigkeiten auf den Geschmack zu bringen und etwas wirklich Fantastisches zu erstellen : Ihre eigene Homepage und dieses Burger-Menü Okay, du musst also diese Homepage gestalten. Sie haben etwas über Farbstil und Textil gelernt, Sie haben auch das D-Farbsystem sowie das Textsystem entworfen . Nutzen Sie dieses Wissen und erstellen Sie diese Homepage. Und hat Optionen geschaffen, zum Beispiel, ob Sie verschiedene Farben verwenden möchten, verwenden Sie diese. Wenn Sie einen anderen Topf verwenden möchten, verwenden Sie diesen. Ich habe auch alle Symbole in der Projektdatei bereitgestellt, sodass Sie sie einfach durchgehen und in Ihrem Design verwenden können. Wenn Sie andere Symbole oder Plug-ins verwenden möchten, verwenden Sie diese ebenfalls, und dasselbe gilt für ein Burger-Menü. Das hat eine Anweisung, du befolgen musst, um ein Projekt zu erstellen. Gehen Sie also diese Anleitung durch und erstellen Sie diese Homepage und das Burger-Menü. Zuvor haben wir uns mit Bulon-Operationen und abgeflachten Symbolen befasst Also musst du diese geometrischen Formen erstellen, also wirklich apikale Icons, und ein bisschen einen Screenshot machen und ihn dann einen Screenshot Ich schätze, du weißt schon, wie das geht. Also, Studenten, ihr habt es geschafft, nehmt eure Figma-Fähigkeiten, kombiniert sie mit eurem kreativen Mut und lasst euer Design-Meisterwerk zum Leben erwachen Vergessen Sie also nicht, diese Homepage, das Burgermenü und den Bullen in der Kreation zur Einreichung zu erfassen Burgermenü und den Bullen in der Kreation zur Denken Sie daran, dass es beim Design keine Fehler gibt , sondern nur einen glücklichen Zufall Also mach weiter, erforsche, experimentiere und zeige der Welt deine Figma-Magie Und wenn du dieses Projekt in deinen sozialen Netzwerken teilen möchtest , kannst du das auch tun, und du kannst mich dort taggen Also zögern Sie nicht, es weiter anzupassen und Ihre eigene persönliche Note hinzuzufügen. Also viel Glück mit deinem Figma-Projekt acht. 53. So verwendest du Smart Selection und Tidy Up in Figma: Loco extras, in dieser Überzeugung tauchen wir in die leistungsstarke Funktion von Tied up Mar Selection in Figma ein. Machen Sie sich also bereit, Ihren Designprozess zu rationalisieren und Ihre Effizienz mit diesen unglaublichen Tools zu steigern Und wir werden auch unsere erste Homepage entwerfen. Also denkst du vielleicht, was ist damit verbunden? Ted up ist Ihr bevorzugtes Tool, wenn Sie ausgewählte Elemente übersichtlich anordnen und organisieren möchten Okay, wir haben also unsere Homepage, eine leere Startseite. Jetzt wollen wir einige Kategorien entwerfen. Lassen Sie mich also ein paar Kreise zeichnen. Und ich dachte an eine Sechs, weil sie beim Testen perfekt in diese Kolumne „Was soll ich sagen?“ passte. Okay, Sie wissen also bereits, wie Sie Ihren Artikel duplizieren können. Halten Sie es gedrückt und ziehen Sie es. Es gibt eine Methode. Sie können auch Taste D drücken, um es zu duplizieren, aber es wird so von oben angezeigt. Aber es gibt noch eine andere Methode. Wenn ich also Ed gedrückt halte und es so anordne, und wenn ich Strg D drücke, wird Baste in die nächste Spalte kopiert Es ist also wirklich hilfreich. Dies sind bereits ausgerichtete Kreise. Option haben wir also nicht, aber nehmen wir an, wenn die Kreise so sind, und wenn es alle sind, wie Sie sehen können, erhalten wir diesen gebundenen Knopf. Wenn ich also darauf klicke, ist unser Objekt gebunden, aber das ist nicht gewollt, also können wir es mit diesem Tool einfach nach unten und auch horizontal ausrichten . Okay. Wie Sie sehen können, haben wir unsere Kreise ausgerichtet. Es gibt also mehrere Optionen. Wie Sie sehen können, befinden sich in der Mitte rosa Punkte. Diese sind also wirklich hilfreich. Nehmen wir an, Sie möchten diesen Artikel gegen diesen oder diesen Artikel gegen diesen austauschen . Also klicken Sie einfach darauf und halten Sie die rechte Maustaste gedrückt und ziehen Sie es so. Und der Artikel wurde getauscht. Lass mich das Ganze so kopieren. Und wenn ich sie alle auswähle, damit du sehen kannst, wir die Kreise auch vertikal hinzufügen. Das ist also die intelligente Auswahl. Okay, also lass uns unseren Startplatz entwerfen. Okay, das wird also ein Kategorienbereich sein. Jetzt fügen wir das hinzu, nicht wenn dieser eine kopiert und veröffentlicht wird. Ich weiß, dass es ein Formgewebe gibt. Also lass mich das reparieren. Okay, das wird also eine Suchleiste sein. Schick es zurück. Lassen Sie mich noch ein Rechteck zeichnen, damit es einem Unterbanner gewidmet Es wird also getauscht, es wird fünf bis sechs Banner geben und es wird getauscht Oder wir können ein einfaches Banner wie dieses erstellen. Es wird ein bestimmtes Produkt wie ein bestimmtes Produkt wie ein iPhone 15 Max oder ein Laptop oder ein Monitor oder ein elektronisches Produkt angezeigt wie ein iPhone 15 Max oder ein Laptop oder . Und es wird noch einige andere Artikel geben, wie zum Beispiel, lassen Unterartikel erstellen, wie sagen wir, das Smartphone-Angebot läuft weiter. Okay, also haben wir hier drüben etwas kreiert. Also sagen wir diesen Abschnitt für Kleidung von Supermarktkindern und lassen Sie uns einen weiteren Abschnitt erstellen. In diesem Abschnitt finden Sie Topseller-Artikel, die wir in dieser App verkaufen. Im Moment entwerfen wir nur einige Grundlagen, aber ich hoffe, Sie haben die Amazon-Seite gesehen, die Telefonseiten, die Startseite völlig unendliche Scroll-Ebene. Das können wir also tun, aber es wird viel Zeit in Anspruch nehmen. Es wird Jahrzehnte dauern, mich zu entwerfen. Derzeit lernen wir also gerade. Deshalb werde ich hier einige grundlegende Elemente wie Banner, einige Produkte sowie einige meistverkaufte Produkte sowie einige Kategorien entwerfen wie Banner, einige Produkte sowie einige meistverkaufte Produkte . Also jetzt weniger TC oder wir können eine Suchleiste zeichnen oder unsere Artikel hinzufügen. Lassen Sie uns also mit unserer Suchleiste weitermachen. Also werde ich Ihnen alle Symbole in der Übungsdatei zur Verfügung stellen. Also verfolgen Sie einfach diese Elemente, verfolgen Sie diese Symbole hier und wir fügen sie zu unserer Startseite hinzu. Lassen Sie mich also ein Rechteck für unsere Suchleiste zeichnen. Also wird es hier drüben sein. Oder wir können es größer machen. Unsere Suchleiste wird also eher besser aussehen. Okay, lass mich vorerst die Farbe ändern . Lass es mich wiedergutmachen. Lass uns zentrieren. Okay. Das sieht toll aus. Geben wir runde Kanten bis zu, ich möchte sie komplett abrunden. Also ich denke, bitte mal effizient raten. Okay, also 50. Wir können es auf etwa 100 g bringen. Okay. Es geht über 100. Also geh mit 100. Okay, so wie das. Lassen Sie uns nun Icons hinzufügen. Momentan dachte ich, hier wird es eine Suche geben und hier wird es ein Mikrofon geben. Also wir haben Suche und Mäuse, also ist es hier drüben. Bring es hierher. Okay, ich bin also fertig mit der Suchleiste. Es gibt also eine Sache, die wir hier hinzufügen können. Nehmen wir an, wir verkaufen einige Produkte und wir möchten mitteilen, dass wir nach Mode suchen können. Wenn ich einen Rechtschreibfehler mache, verzeihen Sie mir bitte. Ich bin ein Haufen Rechtschreibfehler . Okay. Lass mich einen Setter draus machen. Lass uns eine wirklich neutrale Farbe geben, wie diese hier. Sie muss sichtbar und kaum sichtbar sein. Es muss diesen starken Markenakzent haben , wie in Grau wie dieser hier. Okay. Fügen wir nun Bergm und die Kartenschaltfläche Card Okay, also entwerfen wir einige grundlegende Dinge. Lassen Sie uns nun eine Navigationsleiste entwerfen. Die Navigationsleiste wird hier drüben sein. Lassen Sie uns dafür ein Rechteck zeichnen. Aber ich dachte , ich habe vor Kurzem ein paar Apps durchgesehen und in einer Bar eine wirklich coole gesehen. Nun, um es vorerst zu schaffen. Und es war so. Ich hatte ein rundes Gesims, um es rund zu machen , und es hatte alle Elemente Also werde ich alle Symbole hinzufügen. So wie das. Wenn ich die Sichtbarkeit der Spalte ausschalte, sieht das toll aus, aber ohne Farbe ist es zu besorgniserregend, also lass uns ein paar Farben hinzufügen. Wir müssen einen Farbstil erstellen. Es wird also primär sein, das sieht nicht gut aus. Lassen Sie uns diesem ein paar Farben hinzufügen. Und für diesen Bewässerungsbalken fügen wir den dunkleren hinzu. Und das wird, glaube ich, schwarz sein. Okay, lass mich das behalten oder wir können es auch schwarz machen. Okay, das ist also eine Homepage. Ich weiß, dass wir ein paar Bilder hinzufügen können und all das. Aber ein Teil dieses Videos bestand darin, Ihnen etwas über intelligente Auswahl und das Ment sowie über gefesselte Dinge beizubringen . Suchsymbol und die Mikrofontaste sind völlig unsichtbar, also lass mich die Farbe ändern. Okay. Lass mich gehen. Okay, jetzt sieht es toll aus. Es gibt eine Menge Dinge, die Sie mit diesem Design machen können . Sie können diesem Strich hinzufügen , mir einen Che geben und die Farbe dunkler machen. Okay. Oder wir können eine Grundfarbe wie diese angeben. Es sieht nicht so toll aus, aber wir können diesen Strich hinzufügen. Lassen Sie mich also einen weiteren Strich hinzufügen. Lass mich das Weiß geben. Ich denke, Weiß wird toll aussehen. Okay, das sieht toll aus. Wir können auch Schwarz hinzufügen. Wir können diesem Kreis auch einen Strich hinzufügen. Wir können auf diese Weise auch abgerundete Kanten hinzufügen, damit es moderner aussieht. Und wir können auch Bilder hinzufügen. Ich glaube, ich habe den Bildteil nicht behandelt. Deshalb werde ich im nächsten Abschnitt den Bildteil behandeln. Also werden wir sowohl Bilder als auch unsere Homepage hinzufügen. Ich weiß, dass einige Leute wissen, wie man Bilder hinzufügt sodass Sie direkt Bilder hinzufügen können. Hier dreht sich also alles um Titel und intelligente Auswahl. Und wir gestalten auch unsere Homepage. Es sieht toll aus. Während wir diese Designreise fortsetzen, lassen Sie sich inspirieren und kreieren Sie so S im nächsten Video weiter. 54. Bilder in Figma platzieren: Comic-Designer, in diesem Bereich tauchen wir in die Welt der Bilder in Figma Lassen Sie uns verschiedene Möglichkeiten untersuchen, Alter zu importieren und mit Bildern herumzuspielen, einschließlich einiger grundlegender Anpassungen, die dem Lichtraum ähneln Es gibt mehrere Möglichkeiten, ein Bild in Figma hinzuzufügen. Es gibt auch die Tastenkombination Strg+Shift, wenn Sie tA-Bilder aus lokalen Dateien importieren möchten Und die Option ist in den Rechtecken verfügbar. Nehmen wir an, ich möchte dieses Bild importieren, damit ich es einfach anklicken und öffnen kann Aber wie Sie sehen können, verwandelt sich mein Cursor beim Import in dieses kleine Bild. Ich kann die Umschalttaste gedrückt halten und das Bild so ziehen. Das ist also der erste Weg. Und wenn ich einen anderen Weg wähle, wenn ich diesen wähle und öffne, wenn ich einfach auf diese leere Stelle klicke, wie du siehst, ist das Bild zu groß. beim Import daran, das Bild komplett zu verschieben und es so zu ziehen, damit Sie eine bessere Perspektive des Bildes erhalten. Es gibt also viele Dinge, die wir mit Bildern machen können. Erstens können Sie runde Kanten wie diese hinzufügen. Du kannst dein Bild so drehen und wenn ich auf diesen Bild-Button klicke. Wie Sie sehen können, haben wir viele Optionen wie den hellen Ton. Äh, ich weiß, dass viele Leute Licht und mehr Photoshop verwenden. Wir bekommen diese kleine Anpassung. Dies sind im Vergleich zu Photoshop und Lightroom nicht so Diese sind einfach. Sie können es so anpassen. Sie können Farbsättigung, Temperatur, Farbton, Spitzlichter und Schatten hinzufügen Temperatur, Farbton, Spitzlichter Ich weiß, dass du ein Design hast und was du brauchst. Wir können es auch passend zuschneiden. Im nächsten Laden werden wir sehen , wie man mit dieser MS-Technik eine Maske erstellt , okay Das ist also unsere erste Technik. Wir können die Rotation auch von hier aus anpassen. Sie können auch unsere, was sage ich, runden Kanten wie folgt anpassen oder hinzufügen . Sie können also als Nächstes Ihre Bilder aus lokalen Dateien importieren. Nehmen wir an, Sie möchten dieses Bild importieren Sie können es einfach so ziehen und hierher kopieren. Das Problem mit dieser Technik ist jedoch , dass Sie es in einer Sekunde sagen werden. Das ist das Problem. Die Bildgröße ist zu groß aktiv, also müssen wir ihre Größe ändern Und lassen Sie mich das machen, weil wir das jetzt nicht wollen. Und es gibt noch eine andere Technik. der dritten Technik handelt es sich um eine Maske, aber sie zählt nicht als Maske. Ich werde dir die Maskentechniken im nächsten Fenster beibringen. Es gibt also eine Sache , sagen wir, wenn ich zum Füllen gehe, es momentan leer ist, kann ich die Farbe ändern, aber wenn ich das Bild ändern möchte, kann ich einfach auf diese Schaltfläche klicken, und momentan ändert es sich in Checkbox Checkbox oder Chase Box, und ich kann das Bild einfach als zufälliges Bild auswählen. Ich kann einfach darauf klicken und es öffnen. So wie ich hier hinzugefügte Bilder sehen kann. Dies ist auch eine andere Technik. Nehmen wir an, Sie möchten ein Bild wie bestimmte Felder wie dieses oder die Kreise hinzufügen . In diesem Fall können Sie Platzieren eines Bildes gehen und ein beliebiges geöffnetes Bild auswählen und Ihre Mausautos werden in dieses kleine Bild umgewandelt. Und Sie können ein beliebiges Feld wählen. In diesem Fall möchte ich das Bild O platzieren, also kann ich einfach darauf klicken und das Bild wird jetzt platziert. Wenn ich Bilder heranzoome, wie Sie sehen können, gibt es also viele Websites, auf denen Sie Ihre Bilder von einem meiner Favoriten, den Pixeln, herunterladen können . Wie ihr sehen könnt, verwende ich dieses Bild in diesem Video. Und diese Bilder können völlig kostenlos verwendet werden. Und wenn Sie mehr über Lizenzen erfahren möchten. Wie Sie sehen können, sind die Lizenzen wirklich einfach. Es ist also nicht nötig, den Namen des Fotografen oder ähnliches hinzuzufügen . Sie können Gated verwenden, und ich kann es auch ändern. Danach haben wir Pixabay. Es ist auch eine der besten Websites. Und derzeit bietet es auch das Stock-Video sowie Musik, Soundeffekt-Geschenke und all das. Wenn Sie ein Video- oder Grafikdesigner sind, können Sie diesen Link verwenden. Danach haben wir Splash Es ist auch eine der beliebtesten Websites. Und in Figma haben wir auch Plug-ins. Und in Figma haben wir auch Plug-ins für diese bestimmte Website wie Pixel sowie für Also werden wir diese Dinge im nächsten Video machen. Derzeit lernen wir gerade, wie man Bilder und verschiedene Bildtypen hinzufügt. Und das Letzte, was ich Ihnen zeigen möchte, ist, dass wir ein Bild in diesem Rahmen platzieren möchten. Es ist also sehr einfach, derselbe Vorgang, das Bild auszufüllen, und es wurde in ein Suchfeld umgewandelt und ein Bild ausgewählt. Sie möchten, dass wir dieses Bild auswählen, und es fügt sich in diesen Rahmen ein. Wenn Ihr Design dies erfordert, dann tun Sie das. Das ist keine so gute Praxis. Okay, lass mich das machen. Dies sind einige Methoden, um ein Bild zu einem Design hinzuzufügen. Experimentieren Sie also mit dem Import von Bildern mit verschiedenen Methoden. Es war eine Photoshop-ähnliche Anpassung mit dem Bild für ein einfaches Bild wie dieses. Sie können diesen Belichtungszähler einstellen , indem Sie ihn in Licht und Schatten eingeben Sie können das Bild direkt auf Formen oder Rahmen anwenden , um Zeit zu sparen Sie müssen nicht so per Drag-and-Drop arbeiten. Also, Leute, hier dreht sich alles um Bilder. Stadium für weitere Designtipps und zögern Sie nicht, uns Ihre Gedanken zu diesem Video und ihrer Gestaltung mitzuteilen . 55. Figma-Masken (Maskenbild und Text in Figma): Willkommen zurück, alle zusammen. In diesem Artikel werden wir lernen, was Maske ist und wie man Masken in Figma macht Das Erste ist also, wie Masken in Figma funktionieren. Bevor wir uns mit den praktischen Aspekten der Verwendung von Masken in Figma befassen , wollen wir uns zunächst mit den Grundlagen vertraut machen, z. B. was ist die Maske, weil viele Schüler nicht wissen, was eine Maske ist, oder einige Leute wissen es, weil manche Leute Photoshop oder Dating verwenden, um Remaps zu mögen, damit sie wissen Dating verwenden, um Remaps zu mögen , damit sie Aber wenn Sie nichts über Masken wissen, lassen Sie mich Ihnen sagen, lassen Sie mich Ihnen sagen In Figma werden Masken verwendet, um die Sichtbarkeit einer oder mehrerer Seiten zu steuern , wobei andere Formen oder Bilder als Vorlage Diese Technik ist besonders nützlich, um nur den Inhalt innerhalb der Maskengrenzen sichtbar Nun, wie die Maske funktioniert. Die Maskenebenen dienen als Fenster, durch das Sie den Inhalt der darunter liegenden Ebenen sehen können. Jeglicher Inhalt außerhalb der Maskengrenzen ist ausgeblendet. können Sie komplexe Effekte erzielen und einen bestimmten Teil Ihres Designs neu erstellen Mithilfe von Masken können Sie komplexe Effekte erzielen und einen bestimmten Teil Ihres Designs neu erstellen. Lassen Sie uns nun zu Figma springen und weniger Masken erstellen. Also lass mich eine Form wählen. In diesem Fall wähle ich ein Rechteck und halte die Umschalttaste gedrückt, um ein genaues Rechteck zu erhalten . Lassen Sie mich jetzt einige Bilder importieren. Okay. Okay, ich werde vorerst diesen wählen. Dieses ist iPhone 14 oder 15. Okay, das ist 15. Okay. Lass mich die Größe ändern. Also ich finde, die Maskierungsmethode ist genau das Gegenteil, weil ich Canva Photoshop und ein Prem P verwende . Also, wir verwenden es, um Formen auf das Bild zu bringen Es erzeugt also Markierungen. Aber in Figma ist es umgekehrt. Wir müssen Formen oder Objekte unter unsere Bilder legen. Also lass mich die Option haben. Und wie Sie oben sehen können, tragen Sie eine Maske. Also leck es und wir haben unsere Maske. Das ist also die erste Methode im Ebenen-Panel Sie können sehen, wir haben unsere Maske. Das ist die Maskengruppe. Sie können sie auch hier umbenennen. Ich werde es vorerst so lassen, wie es ist. Also wie du sehen kannst, ist das das Bild, und das ist das hellbraune Mädchen. Wenn Sie möchten, können Sie es auch zuschneiden , indem Sie einfach darauf doppelklicken, und dieser obere Ormino gibt Ihnen die Option zum Zuschneiden des Bildes Von hier aus können Sie Ihr Bild zuschneiden oder wie folgt anpassen Okay, ich nehme an, ich entscheide mich für eine Maske. Okay, so können Sie Ihre Bilder zuschneiden. Es gibt noch eine andere Methode, aber sie zählt nicht als Maske, sondern funktioniert als Maske. Lass mich eine Schicht machen. Ich wähle Ellipse und Whole Shift für präzise Ellipse. Gehen wir also zum Füllen. Derzeit ist es in Farben erhältlich. Nun, dieser ist für die Benotung und dieser Film für das Bild, und auch Figma unterstützt jetzt Videos Ich bin also an Bildern interessiert. Gehen wir also zu Bildern. Jetzt haben wir die Möglichkeit, ein Bild auszuwählen. Und jetzt wähle ich diese Diva Phagocc, wir haben unsere Maske. Aber auf dem Ebenen-Panel können Sie sehen, dass dies keine Maske ist Das ist das Bild und das ist die Maske. Okay, so kannst du eine Maske erstellen. Aber einige Schüler fragen sich vielleicht , wie wir die Maske deaktivieren können. Es ist also wirklich einfach. Aber ich habe ein Problem in meinem Design. Okay, das Tastenkürzel für Maske ist wie Control M unter Windows, und für Mac ist es Ship Command M. Also verwende ich diese Methode. Lass mich einen anderen versuchen. Lassen Sie mich noch einmal eine Form zeichnen. Lippen und lass mich noch einmal ein Bild machen. Okay, also werde ich vorerst diesen wählen. Okay. Ich wähle beide aus und drücke Strg Alt M für die Tastenkombination. Aber es funktioniert nicht auf meinem PC. Ich weiß nicht, was das Problem ist , wenn das auch bei dir passiert. Also kannst du es mir sagen oder du kannst Figma auch hier kontaktieren und ihnen sagen, dass die Abkürzung nicht funktioniert Wenn es funktioniert oder ob es eine andere Abkürzung gibt, lass es mich bitte wissen Lasst uns jetzt lernen, wie man die Maske deaktiviert. Also lass mich diesen wählen. Und wir müssen nur zum unteren Bereich gehen und auf diese Form klicken. In diesem Fall haben wir also ein Rechteck und klicken einfach auf Maskenschaltfläche und schon ist Ihre Maske deaktiviert. Okay, es gibt also eine andere Methode, mit der Sie auch wirklich tollen Text erstellen können . Also wähle ich diese Textschaltfläche. Ich werde sieben zufällige Wörter zeitlich festlegen. Lassen Sie mich die Größe erhöhen, 40 96. Und lass uns einen Bolzen wählen. Okay, ich will wirklich mutigen Spaß haben. Okay, also lass uns mit diesem gehen. Also möchte ich die Maskenmethode im Text verwenden. Möglicherweise sehen Sie diesen Effekt in vielen Grafikdesigns, also erstellen wir diesen Maskeneffekt neu Es ist also wirklich einfach, auf den Text zu klicken. Und bei der zweiten Methode haben wir gesehen, wie man diesen Maskeneffekt mit Fill erzeugt . Wir verwenden dieselbe Methode. Gehen wir zum Füllbild und wählen wir ein Bild aus, ein zufälliges Bild. Also werde ich dieses wählen. Okay, wie Sie sehen können, haben wir eine Textmaske. Und in diesem Fall können Sie sehen, dass dies der Text ist, keine Maske. Wir können es Maske nennen, aber Figma zählt wohl nicht als Maske, weil Masken in Figma so sind, und das ist der Text Und du kannst es auch umbenennen. Okay, du kannst es umbenennen, was auch immer du willst. Es passt sich an, wenn Sie Text und mehr Text hinzufügen , so wie hier. Und wir können auch zuschneiden. Ich gehe füllen. Bevor wir mit dem Füllen beginnen, müssen wir auswählen, zum Füllen gehen und dann können wir den Anbau wählen. Und wir können dieses Bild auch hinzufügen, Sie können die Größe so So können wir den Masken-Trick also auch mit Text machen. So können Sie in Figma eine wirklich tolle Maske erstellen in Figma eine wirklich tolle Maske Das ist die Kartoffel, und wir sehen uns in der nächsten 56. Figma-Bilder-Plugins für UIUX-Designer: Willkommen zurück alle. Ich glaube, wir werden etwas über Plugins für Bilder lernen. Diese Plugins machen deine Arbeit wirklich reibungslos. Derzeit haben wir also dieses Pixel-Plugin. Lassen Sie mich Ihnen zeigen, wie es funktioniert. Wenn ich dieses IFCLI auf diesem Bild mit den Gezeiten auswähle. Wie Sie sehen können, ist das reibungsloser, viel reibungsloser als Schauen wir uns also an, wie wir das machen können. Stellen Sie sich eine Welt vor, in der Sie mit einem Plug-In direkt auf unglaubliche Bilder zugreifen könnten . Also, meine Freunde, die Welt ist da. Also lass mich dir Plugins zeigen. Wir können also nach Hause gehen, um Plugins zu kaufen, oder du kannst in die Community gehen und wir können Plugins hinzufügen, aber Figma hat eine wirklich coole Option Das sind Ressourcen und die Abkürzung ist eine Schicht. Es gibt also eine Reihe von Plugins. Du kannst danach suchen. Derzeit verwenden wir also Pixel. Für diese Anzeige können Sie Splash, Photo oder Pixabay verwenden. Dies sind auch großartige Optionen. Und lass uns zu Pixeln gehen. Und nehmen wir an, ich möchte nach einem Bild über Reisen suchen, also kann ich es einfach suchen dann kann ich es einfach zu meinem Abschnitt hinzufügen. Nehmen wir an, ich möchte ein Bild von dieser Welt hinzufügen. Also kann ich einfach darauf klicken und werden Bilder auf unserer Schaltfläche hinzugefügt. Nehmen wir an, Sie haben eine Menge leerer Boxen wie diese und Sie sind sich nicht sicher, was wir in diese Boxen hinzufügen sollen. In diesem Fall können Sie also diese Felder auswählen und auf Zufälliges Bild einfügen klicken, um ein zufälliges Bild wie dieses einzufügen Es ist also wirklich hilfreich. Ich denke, es ist auch in Saba. Lass mich einen Saba wählen. Okay. Es ist auch in Pizaby präsent Ich denke, es wird auch in Splash sein. Okay, lassen Sie mich das alles besprechen. Lassen Sie mich also nach Mode suchen. In diesem Fall passt das Bild nicht perfekt, also können wir es zuschneiden, sodass wir zum Bildzuschnitt übergehen und es anpassen können. Lass mich das so machen. Das Bild ist nicht so groß, also können wir es nicht anpassen. Wir können dieses Bild einfach löschen und ein wirklich gutes Bild hinzufügen. Lassen Sie uns das aus Gründen der Indi Friction sagen . In diesem Fall können wir Kleidung hinzufügen. Lassen Sie mich das zuerst lesen, aber wir müssen es anpassen , weil die Passform nicht so perfekt ist. Wie Sie in diesem Fall sehen können, ist das Bild sauber, sodass wir es so anpassen können So können wir das Bild zuschneiden. Ich glaube, ich werde dir zeigen, wie man zuschneidet. Okay. Also, was ist der nächste? Es ist Elektronik. Gehen wir und fügen Elektronik hinzu. Okay, ich habe dieses spezielle Bild nicht gesehen, aber in Pixeln, ich mag dieses Bild sehr Und wie Sie sehen können, ist es in Pizawa verfügbar, aber es war in Pizawy nicht sichtbar, das ist ironisch Lassen Sie mich das in der Elektronik hinzufügen. Okay, der nächste ist die Nahrungssuche nach Nahrung, der nächste ist Bücher, Bücher. Dieser sieht gut aus, also werde ich diesen hinzufügen, und der letzte ist Craft. Okay, Craft, wir können hinzufügen, dieser ist gut, aber lassen Sie mich einige Details zeigen. Okay, der sieht gut aus. Also so stecken wir uns ein. Wie Sie sehen, spart das viel Zeit. Ich weiß, dass es auch gut ist, ein eigenes Bild hinzuzufügen. Aber nehmen wir an, in einigen Fällen möchten Sie nur ein Bild als Platzhalter hinzufügen, oder Sie wissen nicht, welches Bild Sie hinzufügen sollen In diesem Fall können Sie Plug-ins wie Pisels oder Pizawa oder Splash verwenden wie Pisels oder Pizawa oder Splash Lassen Sie Ihr Design das erfordern , dann können Sie das auch hinzufügen Aber die meisten Kunden werden die zur Verfügung stellen oder Ihr Unternehmen wird sie Bilder zur Verfügung stellen oder Ihr Unternehmen wird sie zur Verfügung stellen, fügen Sie diese hinzu. Okay, eine Sache, die ich vergessen habe, zu diesem Design hinzuzufügen , ist, dass es eine Ortungsschaltfläche gibt . Ich möchte hinzufügen, damit es den aktuellen Standort von uns anzeigt. Und ich werde die Farbe wählen Okay, diese hier, lass uns mit dieser machen. Und ich habe auch das Ortssymbol Oh. Es wird hier sein und ich werde etwas Text hinzufügen können. Derzeit lebe ich in Marsha, also ist es in einem Mein Name ist dieses eine Pony, wenn der Benutzer auf dieses Symbol tippt, also wird ein Menü angezeigt, in dem meine Adresse angezeigt wird und einige Verträge werden Wenn der Benutzer darauf klickt, wird diese Adresse angezeigt Wenn wir also unsere Adresse ändern oder Ihre Adresse verifizieren möchten, ist dies in diesem Fall hilfreich. Okay, also ich werde wahrscheinlich meine Adresse blustern. Ich glaube, ich habe meine genauen Angaben weggelegt, also werde ich sie wahrscheinlich verwischen. Das ist also ein Rapper für dieses Video, Pre-Image-Plugins, eine Traumkombination für Designer Also mach weiter, erkunde und entdecke die VS-Welt der Designmöglichkeiten Nächstes Mal kreiere weiter und ich werde dich beim nächsten Mal wiedersehen 57. Klasse-Projekt 9: Image Alchemy: Bilder und Plugins in Figma meistern: Meine Schüler. Das ist ein Projekt. Als Erstes, D diesen weißen leeren Raum und ersetze ihn durch diese coolen Bilder wie dieses. Ich glaube, ich habe auch alle Bilder in der Ressourcendatei bereitgestellt. Also geh es durch und überprüfe das und füge Bilder hinzu. Wenn du deine eigenen Bilder hinzufügen möchtest, damit du weißt, wie man das hinzufügt, dann geh und füge diese Bilder hinzu. Aber wo es noch mehr gibt, tauche ein in die Plugins, ins Wunderland und natürlich in den inneren Bild-Alchemisten Größe des Zuschneidens und Filters und spiele mit dem Effekt, bis Denken Sie einfach daran, was in Compose steht. Es weist auf die Zielgruppe und ihre E‑Como-Wünsche hin . also nach dem Hinzufügen von Bildern einen Screenshot und teilen Sie ihn im Projektbereich. Dies sind einige Anweisungen. Fügen Sie zuerst diese Leerstelle Bilder hinzu. Wenn Sie danach Plugins verwenden möchten, fügen Sie Plugins hinzu, machen Sie einen Screenshot, laden Sie ihn in den Projektbereich und Sie können ihn auch in sozialen Medien teilen. Schließt das Projekt und den Gipfel für mich und wir sehen uns. Der nächste. 58. Auto-Layout und Einschränkungen in Figma: Hallo, liebe Bauherren. Willkommen zurück zu unserem Click Art Commerce-Design. Heute muss ich ein Geständnis ablegen. Ein klassischer Fall von Hoppla. Hab ich vergessen Also hier ist die Information. , während ich das Meisterwerk geschaffen habe, Ratet mal, während ich das Meisterwerk geschaffen habe, bin ich durch den Riss gerutscht Ja, du hast es. Die kleine Seite mit allen wichtigen Produkten. Ich weiß, dass ich es weiß. Es ist, als würde man einen Kuchen backen und das Fasten vergessen. Ich weiß, dass es ein Amateur ist. Aber hey, wir sind nicht da, um zu urteilen. Wir sind hier, um zu lernen und dabei viel zu lachen. Bleiben Sie also dabei, denn wir tauchen kopfüber in die gemeinsame Gestaltung der Eclsure-Produktseite All das, Leute, die Maschine von Buckler von heute erstellt die Produktseite, die wir völlig vergessen haben, und raten Sie mal völlig vergessen Wir machen das in einem Stil mit Figma und einer großzügigen Aber das ist noch nicht alles, verstehst du. In unserem Bestreben, diesen kleinen Fehler zu beheben, werden wir auch die Geheimnisse des automatischen Layouts und der Einschränkungen Es ist wie Zauberkleber, der alles zusammenhält . Das Frosting auf dem Designkuchen, wenn man so will. Okay, das wird also unsere Produktseite sein. Ich weiß, dass ich ihn bereits entworfen habe, also werde ich Ihnen zeigen, wie man ihn gestaltet, und wir werden diesen Button kreieren, ein toller Button. Wie Sie sehen können, bleibt dieser dehnbare und matschige Text auch Und wenn ich das so verlängere, wird es verlängert. In Ts Bold werden wir diese tolle Schaltfläche mithilfe von automatischem Layout und Einschränkungen erstellen . Aber lassen Sie uns zuerst über das automatische Layout sprechen. Stellen Sie sich vor, Ihr Figma-Design ist eine hüpfende Kaste. Jedes Element im Inneren ist ein umherhüpfender Toter. Auto Art ist wie ein unsichtbares Netz dass die Getöteten von den Wänden fliegen Sie können jedem Kind sagen, wie viel Platz es benötigt und wo es springen soll Zweitens werden die Netzränder größer, wenn sie getötet werden, damit sie nicht gegen andere stoßen Und wenn Sie ein neues Set hinzufügen, macht das Netz automatisch Platz sodass alle trotzdem glücklich abprallen können Das war die grundlegende Definition von automatischem Layout. Lassen Sie uns also Produktdetails entwerfen. Es wird also sehr einfach sein, also müssen wir das nur kopieren. Also werde ich dieses Control C kopieren und Produktdetails auswählen. Steuerung. Wie Sie sehen, entwerfen Sie diese Navbar-Schaltfläche so, dass wir sie nicht immer wieder neu entwerfen müssen Lassen Sie mich sie also zurückschicken. Okay. Lassen Sie uns nun diese Seiten gestalten. Wo wir einige Bilder unserer Produkte hinzufügen werden. Lassen Sie uns die runden Kanten oben auf 15 setzen und lassen Sie mich die Spalten aktivieren, damit ich sie perfekt einpassen kann . Ich halte Alt. Wie Sie sehen können, sprechen wir vom Vorstand aus. Okay. Lass mich das kopieren und hier so einfügen und auch für diesen. Aber wie Sie sehen können, befindet sich das Rechteck außerhalb des Rahmens. Lassen Sie mich diese also zu Produktdetails zusammenfassen. Und derzeit sind sie drin. Wenn ich darauf klicke, ist der Clip-Contrat bereits aktiviert. Okay, das werden also unsere Bilder sein. Lassen Sie uns nun diesen magischen Knopf erstellen. Das dehnt sich automatisch aus. Okay, lassen Sie uns einen Text den Warenkorb legen, lassen Sie mich die Textseiten erstellen. Ich denke, ich werde 25 wählen. Wählen Sie nun beide aus, und wie Sie sehen können, wird das automatische Layout im Designfenster angezeigt. Wenn ich eines davon auswähle, ist das automatische Layout, wie Sie sehen können, nicht hier, und wir müssen beide auswählen, wenn Sie ein Outolayout hinzufügen möchten , klicken Sie auf das Wenn ich es nun dehne, wie du siehst, bleibt es in der Mitte Schaltfläche gibt es auch einige horizontale und dieser Schaltfläche gibt es auch einige horizontale und vertikale Polsterungen Lassen Sie mich zuerst die Farbe der Schaltfläche ändern. Derzeit ist es großartig. Lassen Sie mich diesen auswählen und einige abgerundete Kanten hinzufügen , damit ich das Ganze umgedreht habe, also wähle ich die Schaltfläche „Zur Karte hinzufügen“. Wir können die Farbe dieses Textes ändern. Lass mich alles in eins umwandeln. Okay, jetzt sieht es toll aus. Lass mich entfernen, damit wir noch eine Sache machen können. Wir können die Taste so behalten und mich die Schriftgröße verringern lassen. Lassen Sie mich jetzt die Spalten auseinandernehmen. Okay. Lass mich ein Duplikat davon machen. Okay, nehmen wir an, Sie möchten den Text aktualisieren. Nehmen wir an, ich möchte sagen. Jetzt kann ich viel Text hinzufügen. Wie Sie sehen können, kräht der Button zusammen mit dem Text. Okay, diese Sache passiert, weil wir gerade im Design-Panel sind, wir sind in Hum Aber sagen wir mal, ich entscheide mich für ein festes Gewicht. Und wenn ich versuche, den Text darin anzupassen. Wie Sie sehen können, vergrößert sich die Schaltfläche nicht. Denken Sie daran, es sollte eine Umarmung sein , nicht ein festes Gewicht Okay, es gibt eine Sache, die ich dir zeigen möchte. Nehmen wir an, Sie haben eine solche Schaltfläche und ich werde Text wie diesen zufälligen Text hinzufügen. Und lassen Sie mich beide automatischen Layouts auswählen. Und nehmen wir an, dass die automatische Einschränkung standardmäßig hier drüben ist , vielleicht ist sie oben links. Und wenn ich versuche, diese Schaltfläche zu erweitern. Wie Sie sehen können, bleibt der Text dort, er bewegt sich nicht. Also muss es hier sein, um zu funktionieren. Das ist so. Okay, es gibt noch eine andere Sache. Nehmen wir an, Sie haben einen Text wie diesen, und derzeit ist es standardmäßig eine automatische Gewichtung. Wenn Sie jedoch die Wasserhöhe wählen, wird sie entsprechend der Höhe angepasst. Wenn ich also etwas Text hinzufüge, passt er sich der Höhe an. Wenn ich jedoch eine feste Größe wähle, passt der Text in diesem Fall nicht in das Feld. Es wird so etwas Zufälliges tun. Denken Sie daran, dass es eine automatische Gewichtung sein muss, wenn Sie horizontal arbeiten möchten, und wenn Sie vertikal arbeiten möchten, behalten Sie die automatische Höhe bei. Es gibt eine wirklich kurze Methode Sie ein automatisches Layout erstellen können, z. B. bei Schaltflächen wie dieser. Fügen Sie also einfach Text hinzu, fügen Sie Text hinzu wie Hinzufügen , um zwei hinzuzufügen. Und jetzt wählen Sie den Text aus. Sie müssen keinen Rahmen daraus machen oder kein Rechteck hinzufügen. Wählen Sie es einfach aus und wählen Sie Automatisches Layout, und die Tastenkombination ist Shift A. Und wie Sie sehen können, haben wir unsere Schaltfläche. Derzeit ist die Füllung jedoch weiß, sodass sie nicht sichtbar ist. Lassen Sie mich also eine Füllung hinzufügen und dieselbe Farbe wählen. Wie Sie sehen können, haben wir hier unseren Button und wir können einige abgerundete Ecken hinzufügen Lass mich 20 wie folgt zusammenzählen oder zehn machen. Okay. Und ich kann es so wählen lassen. Ich kann die Größe erhöhen. Jetzt kann ich vertikal und horizontal Polsterungen hinzufügen. Ich kann auch die Einschränkung ändern, und so machen wir Buttons Das ist eine der einfachsten Methoden. Sie müssen also keinen rechteckigen Text hinzufügen, sondern müssen ihn in ein automatisches Layout konvertieren. Wie Sie sehen können, müssen wir nur Text hinzufügen und das automatische Layout ligieren Es ist eine der einfachsten Methoden. Und wenn Sie diese Schaltfläche in einem anderen Frame verwenden möchten, verfolgen Sie sie einfach so, kopieren Sie sie, fügen Sie sie ein und verwenden Sie sie in Ihrem Design. Es ist also so einfach. Okay, so erstellen wir Schaltflächen in Figma mithilfe von automatischen Ebenen Und jetzt werde ich diesen Pitch beenden , weil er noch nicht fertig ist Lassen Sie mich also einige Bilder hinzufügen. Also werde ich wahrscheinlich schnell vorspulen. Okay, das wird also unsere Produktseite sein. Ich weiß, es sieht toll aus, aber es gibt viele Dinge, die ich hinzufügen kann, z. B. eine ähnliche Ansicht oder eine Kategorie oder es gibt viele Optionen, ich kann mehr hinzufügen, aber wir lernen gerade erst. Das ist also für diese Produktdetailseite. Ich weiß, dass es ein völlig ungeplantes Video war, also habe ich viel Zeit gebraucht, es zu erstellen Der Hauptzweck dieses Videos bestand darin, diese Schaltfläche unter Verwendung von Reihenfolge, Layout und Einschränkungen zu erstellen , und wir alle wissen, dass wir das auf diese Weise verwenden und in der Mitte anpassen können Ich denke, das sieht besser aus, also werde ich so weitermachen. Also Freunde bis zum nächsten Mal, viel Spaß beim Entwerfen und denkt daran, dass selbst der beste Designer gelegentlich die Produktdetailseite vergessen hat . Aber das macht uns menschlich, oder? Also kümmere dich um meine Freunde. 59. Figma Auto Layout Abstand zwischen Objekten: Willkommen bei den Studierenden. Heute bringen wir Auto T auf die nächste Stufe. Heute haben wir zuletzt ein Armband mit Knöpfen gedehnt, weil wir uns damit beschäftigen , viele Gegenstände zu gruppieren und die ganze große Gruppe zu dehnen Es ist wie eine Kombination der intelligenten Auswahlfunktion, die wir zuvor gelernt haben , mit etwas ausgefallener Magie des automatischen Layouts Lassen Sie uns also, ohne weiter zu tun, das automatische Layout und die Abstände untersuchen. Also als Erstes werde ich hier ein paar zufällige Wörter eingeben. Lassen Sie mich ein paar zufällige Wörter wählen. Wie zu Hause. Lass mich das kopieren. KI, Steuerung D, medizinische Sperren und Liste B. Okay, lass mich das arrangieren Okay. Wählen wir nun alle aus und gehen wir nach unten. Okay, wir haben also diese Art von Navigationsschaltfläche. Und nehmen wir an, Sie haben Ihre Navigationsschaltfläche auf Ihrer Website so gestaltet , etwa horizontal, aber Ihre Kunden wollen, dass sie horizontal sein sollte, wie diese. Wir haben einen Navigations-Bot auf der linken Seite, und er ist schwindelerregend. Nehmen wir an, Ihr Kunde möchte das. In diesem Fall können Sie es also manuell nacheinander anordnen. Aber es gibt noch eine weitere Funktion von Autolayout, wenn wir sie alle verkaufen und sie in ein automatisches Layout umwandeln. Und wenn ich zum automatischen Layout gehe, können Sie sehen, dass es eine Option gibt, die als vertikales Layout bezeichnet wird. Wenn ich das mache, können wir das, wie Sie sehen , innerhalb einer Sekunde mit einem Klick erledigen . Und wir haben alle Funktionen, die ich hier so einrichten kann. Und ich kann es mit Polsterung versehen. Ich kann vertikale Polsterung, horizontale Polsterung hinzufügen und sie auf diese Weise einschränken Ich kann sowohl in die Mitte einfügen als auch die intelligente Auswahl wie folgt verwenden Ich kann den Text so ändern. Ich kann die Blasen von ihnen austauschen. Das ist die Funktion, die wir mit dem automatischen Layout erhalten, und wir haben bereits gesehen, dass wir Filter hinzufügen können Lassen Sie uns eine Füllung hinzufügen, also lassen Sie mich einen neuen Frac hinzufügen. Lassen Sie uns diesen Teil COVID nehmen Nehmen wir an, ich habe einen Text wie diesen Zufallstest. Nehmen wir an, ich habe ein paar davon. Lass uns das mögen. Ich werde ein paar britische Wörter eingeben. Lassen Sie mich es also ausrichten. Line Aig lassen wir das in ein automatisches Layout umwandeln. Und nehmen wir an, ich möchte die gesamte Funktion, alle Eigenschaften dieses automatischen Layouts in dieses kopieren , und ich kann einfach diese Abschnittsnavigationsleiste kopieren, die bereits automatisches Layout ist, kopieren und einfügen, zu Eigenschaften kopieren und dieses automatische Layout auswählen und dann Eigenschaften kopieren und dieses automatische Layout auswählen und Ihre Eigenschaften einfügen Wie Sie sehen können, haben wir alle Funktionen hinzugefügt . Und wenn wir einige Polsterungen hinzufügen möchten, z. B. eine linke Polsterung, können Sie eine obere Polsterung für die linke Polsterung hinzufügen Bei diesem handelt es sich sowohl um eine rechte Polsterung als auch um eine Atom-Polsterung wie diese Und es versteckt sich hier drüben. Sie können eine vertikale Lücke wie diese dazwischen hinzufügen. Dies sind einige zusätzliche Funktionen des automatischen Layouts. Es gibt noch eine Sache. Nehmen wir an, unsere Blöcke verlassen unser automatisches Layout. Und du kannst es einfach so bringen. Und wir können es weglegen. Es gibt eine Linie. Ich glaube, ich muss die Farbe ändern. Wenn ich also die Farbe ändere und wenn ich sie nach außen ziehe und wenn du sie nach innen ziehst, kannst du sehen, da ist eine blaue Linie zwischen Birnen und wir können sie hier so einfügen. Nehmen wir an, du hast Mist gebaut und hast es irgendwo drüben platziert, quasi außerhalb des Rahmens Derzeit befindet es sich außerhalb des Frames, und dieser ist außerhalb von Frame 23. Wir können es einfach so hinbringen. Und es ist unser Autolayout. Und wie Sie sehen können, ist das Symbol für das automatische Layout anders Bei Rahmen ist es wie bei der quadratischen Box, und beim automatischen Layout haben wir 3 Balken mit umlaufenden Kanten Und noch etwas habe ich vergessen zu erwähnen. Ich glaube, ich vergesse heutzutage viel. Okay, es gibt also eine Sache. Nehmen wir an, Sie möchten dieses Objekt kopieren und einfügen, damit Sie das Einfache tun können, wie zum Beispiel sogar die Strg-Taste zu drücken. Was das angeht, ist der Trick einfach, aber die Leute sind immer verwirrt. Nehmen wir an, wir müssen auswählen und schon sind die Leute verwirrt. Sagen wir, wir müssen zur ersten Ordnung übergehen. Danach müssen wir zum Text übergehen. Ich doppelklicke. Danach muss ich die Taste Control drücken. Dann kann ich eine Kopie, einen Haufen Kopien von dem Text wie diesem machen . Wenn ich zuerst die Reihenfolge nach diesem Text auswählen muss, doppelklicken Sie und doppelklicken Sie erneut, um den Text wie diesen zu bearbeiten. Wie Sie sehen können, sind automatische Layouts wirklich großartig. Dies sind also einige erweiterte Funktionen von automatischen Layouts. Also das ist das Portola-Video, und ich werde euch im nächsten sehen 60. Figma-Einschränkungen und Größenanpassung EINFACH gemacht: Ich habe eine faszinierende Welt voller Fragen gemacht. Fragen sind wie Zauberkleber , das einzige Design an der Stelle Die Buchstaben machen coole Dinge, wie Navigation auf bestimmte Ecken zu beschränken und ein visuell ansprechendes responsives Design zu kreieren. Lassen Sie mich Ihnen zeigen, dass ich diese Seite mein Konto genannt habe. Und wenn ich das setze. Wie du siehst, bleibt alles zusammen. Es wird nicht durcheinander gebracht. Also haben wir das mit Einschränkungen gemacht. Also lass mich das rückgängig machen. Stellen Sie sich nun die Möglichkeiten vor, wir werden gegen Ende des Kurses sogar einen Spritzer des automatischen Hebels werfen, wodurch eine Design-Symphonie entsteht, die Ihr Design explodieren lassen könnte Aufregend, richtig. Lassen Sie uns also auf diese Einschränkungen eingehen, Extra Vanza Okay, ich habe sowohl diese Navigationsleiste als auch diese Navigationsleiste aus unseren vorherigen Designs übernommen, und sie hat keine zusätzlichen oder Einschränkungen Ich habe standardmäßig eine Einschränkung, aber sie hat keine Adsor-Einschränkungen Es wird hilfreich sein, wenn wir sagen, wir wollen dasselbe für eine Website, für das iPad entwerfen Also dieses Mal wird es helfen. Lassen Sie mich also ein Bild verfolgen, in dem ich ein iPad 12 wählen werde . Wie dieses, und ich möchte dieses Ding mit einem iPad kopieren, und es muss genau so passen. In diesem Fall können wir also Constraint verwenden. Also lass mich dir eins zeigen. Wenn ich also ein Rechteck wie dieses zeichne, wie Sie im Designfenster sehen können, sind die Einschränkungen links und oben. Einschränkungen sind also immer da und standardmäßig. Elemente sind auf den oberen und linken Rand beschränkt, aber wir wollen mehr Kontrolle Fangen wir mit dieser Navigationsleiste an. Okay, lassen Sie mich das Erste mit diesem machen, also werden wir es einfach kopieren und einfügen, damit es gut funktioniert. Wenn ich es jetzt dehne, wie Sie sehen können, ist das total durcheinander, und es ist auch hier drüben durcheinander Jetzt werden wir einige Fragen stellen. Okay, lassen Sie mich zuerst dieses Rechteck auswählen, also werden wir das erste korrigieren. Okay, das ist also Retgle und momentan ist es in der Mitte. Also füge ich das von links nach rechts hinzu, und du musst ganz oben sein Und für dieses Burger-Menü musst du links und oben sein, das ist perfekt. Und für das Suchsymbol links und oben ist es auch gut. Du musst in der Mitte sein. Okay, in der Mitte und das muss in der Mitte sein und für Mike rechts und oben. Okay. Rechts oben ist perfekt dafür, links rechts und oben. Lass mich diesen nehmen. Dieser hat links oben, aber ich will links nach rechts oben. Wenn ich das jetzt dehne, wird es funktionieren. Wie Sie sehen können, funktioniert es einwandfrei. Wir werden auch damit dasselbe machen. Lass mich das machen. Das wird links und unten sein, soll links sein und unten soll in der Mitte und Mitte sein, und du musst rechts und unten sein. Rechts unten, und dieses Rechteck muss von links nach rechts verlaufen. Aber wenn ich Mitte auswähle, also wenn ich es dehne, wie du siehst. Es ist total. Es dehnt sich nicht. Ich weiß nicht, warum es sich dehnt, aber es dehnt sich nicht. Lassen Sie mich also links und rechts hinzufügen, und das muss unten sein. Lassen Sie mich das jetzt wählen. Und wie Sie sehen können, wenn ich extrahiere, extrahiert der Balken auch, aber ich weiß nicht, was hier vor sich geht Was passiert mit dir? Okay, ich habe links rechts gehalten. Es muss in der Mitte sein. Okay, jetzt wird es funktionieren. Okay. Nun, wenn ich das wähle, wenn ich das dehne. Okay, es funktioniert also völlig einwandfrei. Jetzt kann ich das einfach kopieren und hier drüben drüben drüben drücken. Wie du siehst, ist es kein Dehnen, aber ich kann das einfach machen und das Dehnen perfekt. Das Gleiche gilt für diesen. Ich kann es halten, so ziehen. Okay, es ist also kein Frame. Also lass mich einen Rahmen machen. Erstklassige Auswahl. Und wenn ich das kopiere und es so dehnen kann , kann ich es benutzen. Aber wie Sie sehen, gibt es ein Problem. Die Symbole, die sich ganz nach rechts und links bewegen, bleiben nicht in der Mitte. Aber wenn ich hier etwas mache, funktioniert es nicht. Ich weiß es, weil ich es in den Frame geschafft habe. Aber wenn ich das mache und wenn ich die Gruppierung dieser Welt aufhebe und wenn ich das jetzt ausdehne, wie Sie sehen können, funktioniert es Ich weiß nicht, was hier passiert. Ich schätze, mit Frames funktioniert es nicht so, wie du es dir wünschst. Und ich werde das reparieren, mach dir keine Sorgen. Ich werde das beheben und das nächste Video aktualisieren. Okay, es gibt also eine Sache, die ich dir zeigen möchte. Also, bei Einschränkungen bekommen wir diese gepunkteten Linien. Wie Sie sehen können, ist es sowohl hier als auch hier präsent hier als auch hier Es ist also für links und rechts, wie Sie sehen können, und dieser ist der untere. Denken Sie also daran, dass diese Linien nichts anderes als Beschränkungslinien sind . Okay, hier dreht sich alles um Einschränkungen. Wir haben diese dehnbare Navigationsleiste für unser Handy als auch für schlechte Ich weiß, es ist ein bisschen verwirrend, aber du wirst dich daran gewöhnen Spiel einfach damit, spiel mit der Einschränkung und links nach rechts, damit du es bekommst. Im nächsten Video kombinieren wir automatisches Layout mit Einschränkungen, also denke ich, dass das auf einer anderen Ebene sein wird . Irgendwie könnten Sie versucht sein, ein komplexes Layout wie das iPad-Beispiel zu erstellen komplexes Layout wie das iPad-Beispiel Aber behalte diesen Gedanken bei, es ist vorerst ein bisschen viel Im nächsten Video werden wir gemeinsam weitere Beispiele untersuchen. Wo werden wir also die Einschränkungen für das automatische Layout in einem realen Szenario kombinieren ? Es ist herausfordernd, aber es ist goldenes Zeug. Wir sehen uns also in der nächsten Schicht. Und lassen Sie uns diese Designmagie weiter erforschen. 61. Nest-Frames, Auto-Layout und Einschränkungen in Figma: Willkommen. Dabei kombinieren wir Funktionen, die wir bereits gelernt haben Wir werden die Verschachtelung von Rahmen innerhalb unserer Rahmen untersuchen. Wir werden uns mit dem automatischen Layout befassen. Außerdem werden wir Master Constraint anwenden. Das Endziel ist die Entwicklung eleganter, skalierbarer, wiederverwendbarer Karten, die einfach angepasst werden können Wie Sie auf meinem Bildschirm sehen können, habe ich eine Menge Karten, die ich einfach verwenden, wiederverwenden oder skalieren kann , oder ich kann sie kopieren und für ein anderes Projekt verwenden In diesem Tag werden wir also sehen , wie man diese Karte erstellt. Und dafür verwenden wir, als ob ich dir etwas zeigen werde. Wir verwenden also Frames, verschachtelte Frames sowie automatisches Layout Wie Sie sehen können, kombinieren wir alle Funktionen mit einem anderen, diesem Banner Ich weiß, dass dieses Video etwas lang sein wird und einige Leute denken , dass es verwirrend ist. Also bevor wir dein Telefon ausschalten. Lass uns in dieses Video springen. Lassen Sie mich das hier nachverfolgen. Lass uns mit diesem beginnen. Dafür werde ich also einen Frame verfolgen. Wir können Rechtecke zeichnen, aber bei Rechtecken gibt es nur begrenzte Funktionen. Mit Rahmen erhalten wir also viele Funktionen. Also werde ich einen Rahmen wie diesen zeichnen. Also lass mich meine Spalten aktivieren. Also wird es perfekt dazu passen. So wie das hier. Okay. Jetzt füge ich eine Füllung hinzu. Lass uns dir eine normale Farbe machen. Es dient also nur als Referenz , weil die Rahmenfarbe und die Rückenfarbe für , weil die Rahmenfarbe und die Rückenfarbe mich unsichtbar sind. Derzeit verwende ich die natürliche Farbe, ob neuronale Farbe oder keine natürliche Lassen Sie uns diesen Rahmen um bis zu zehn Kanten verteilen. Fügen wir nun ein Bild hinzu. Aber bevor wir das tun, gibt es eine Funktion, die ich Ihnen zeigen möchte. Also müssen wir dieses Bild erstellen. Dafür müssen wir den Hintergrund dieses Bildes entfernen. Lassen Sie mich Ihnen zeigen, wie wir das machen können. Das ist das Bild. Ich habe es von der Apple-Website heruntergeladen. Aber wie Sie sehen können, hat es eine breite Hintergrundrate. Ich kann also auf eine Reihe von Websites im Internet gehen, aber der Prozess ist zu komplex. Sie können Mo BG oder Bago auf einer ganzen Reihe von Websites verwenden, aber das braucht Zeit und den Prozess In Figma haben wir ein Plugin namens Benzine, sodass wir dieses Plug-in verwenden können, um diesen Hintergrund zu entfernen Aber um dieses Plug-In zu benutzen. Es gibt einen Prozess, den Sie befolgen müssen, z. B. müssen Sie einen Schlüssel einrichten. Der Vorgang ist einfach, klicken Sie einfach auf den Setup-PK. Gehen Sie danach auf die Website und melden Sie sich an. Nach der Anmeldung müssen Sie Konten erstellen. Und es wird eine Option namens Paces geben. Geh da hin, erstelle eine neue PK, wie du siehst, ist es die Option hier. Dann wird es einen Schlüssel erstellen, so etwas, und diesen kopieren und in Benzin einfügen Ich weiß, dass es ein Plugin zum Entfernen von BG gibt. Das Problem mit dem Hut-Plugin ist jedoch, dass Sie es nach ein paar Testversionen kaufen müssen. Dafür verwenden wir also diesen. Also klicke ich einfach auf „ BG entfernen“, es wird das entfernen. Wie Sie sehen können, ist unser Hintergrund komplett entfernt. Also lass mich die Größe ändern, Größe so ändern, und ich werde es hier drüben so platzieren, aber wir müssen diesen Mitch zuschneiden, gehen wir zu Bill und schneiden ihn zu Okay, Bilder werden jetzt zugeschnitten. Derzeit befindet sich dieses Bild außerhalb unseres Rahmens, also lassen Sie mich das ins Innere bringen. Wie du siehst, ist es nicht verschluckt, also muss ich es machen. Nochmals, jetzt ist es soweit. Lassen Sie uns nun einen Text hinzufügen Das wird auf das iPhone umgestellt. Okay, also habe ich diesen Text in den Rahmen eingefügt, und er ist in Frame 36. Wir können ihn umbenennen, also lassen Sie mich ihn in ein Banner umbenennen. Banner, damit wir es immer wieder verwenden können. Okay. Nun, wie Sie sehen können, haben wir diese orange Farbe, also werde ich sie hinzufügen. Dafür fügen wir derzeit eine neue Farbe hinzu, also weiß ich, dass sie im Vergleich zu dieser nicht so gut aussieht . Lassen Sie mich zu diesem Rahmen gehen und ihn aufteilen und Bild auswählen, und ich habe eines. Wie Sie sehen können, hat es ein Bild rechts, also habe ich die Zuschneidefunktion verwendet, um diesen Teil zuzuschneiden. Oh, tut mir leid, ich habe die verschiedenen ausgewählt, also lass mich das verschieben. Okay, jetzt sieht es perfekt aus. Aber ich muss das zuerst reparieren. Der Text, den ich haben möchte, sollte 34, 34 lauten. Los geht's mit 24, 24, was Ovale verwendet und ich nicht öffnen möchte Okay, ich werde diesen wählen und ihn zerbrechen und daraus 24 machen. Okay, jetzt haben wir sowohl Text als auch Bild und Panom, also lass mich die Farbe ändern Ich gehe zu einem natürlichen, einem neutralen. Okay, lassen Sie mich die Einschränkung hinzufügen. Wenn ich also versuche, die Größe dieses Rahmens zu ändern, ist er, wie Sie sehen, nicht so skalierbar weil wir die Einschränkung nicht hinzugefügt Für dieses Bild wird die Beschränkung also mittig sein und der Rand, für diese Mitte und die Oberseite, für diese Mitte und die Oberseite Wenn ich nun versuche, es zu skalieren oder neu zu skalieren, wie Sie sehen, ist es skalierbar Das sind also ungefähr Prozent. Ich denke, der Text ist zu groß, also lass mich 20 ausdenken. Und wir müssen auch die Schaltfläche Jetzt aufnehmen hinzufügen, also muss ich sie hier einfügen. Okay, jetzt sind wir damit fertig. Lassen Sie mich jetzt einen Text hinzufügen. Und das wird jetzt gedreht und es ist zu groß. Also lass es mich gut machen. Okay. Lass uns gehen, Element. Und das haben wir schon in einem Video gesehen. Als wir Schaltflächen erstellt haben, mussten wir weder Rechtecke noch Rahmen hinzufügen, also müssen wir nur diesen Text rechts auswählen und das Layout hinzufügen. Jetzt können Sie sehen, dass es Füllung und Polsterungen hat, aber es hat kein Feld. Es hat unsichtbares Fielty. Lassen Sie mich eine Füllung hinzufügen und es wird geplatzt. Lass uns mit diesem gehen. Okay, das ist zu viel Gerede. Ich nehme diesen. Und lassen Sie mich die runden Kanten hinzufügen. Es muss komplett rund sein. 20. Lass mich es skalieren. Ich drücke, wie Sie sehen können, er verändert sich in zwei Maßstäben. Jetzt kann ich es so skalieren, drücken Sie es. Lassen Sie mich also Einschränkungen hinzufügen. Es wird mittig und oben sein, mittig und oben. Okay. Perfekt. Wenn wir nun versuchen , es zu skalieren oder zu verkleinern, wie Sie sehen, bleibt es in der Mitte. Okay, also haben wir das automatische Layout hinzugefügt. Nehmen wir an, Sie möchten diesen Text in etwas anderes ändern, also ich kopiere diesen, also okay. Nehmen wir an, ich möchte etwas anderes hinzufügen, Scupons, von denen ich weiß, dass ich es gespielt habe, aber verzeihen Sie mir das, so etwas Wie Sie sehen können, erhalten wir mit der automatischen Breitengrad-Funktion diese Funktion zur automatischen Größenänderung mit dieser Schaltfläche Wir müssen die Größe also nicht manuell ändern. So wird uns Auto Late helfen. Wie Sie sehen können, haben wir das automatische Frame-Layout. Und wenn Sie dieses Bild zu einem Frame hinzufügen möchten, können Sie das auf jeden Fall tun, sodass es zu einem Frame wird. Wie Sie sehen können, haben Mainframe und wir drinnen einen Doppelrahmen Und wir haben auch automatisches Layout. Das sieht ein bisschen chaotisch aus. Der Laden Nummer zehn steckt in diesen beiden fest und sieht nicht so toll aus Also werde ich zuerst die Gruppierung aufheben und das Ganze dann nach unten ziehen Lass es mich so ein bisschen nach unten anpassen. Jetzt sieht es toll aus. Okay, wir können es so anpassen. Jetzt sieht es toll aus. Okay, ich kann jetzt diesen löschen, diesen und lass mich das Gleiche hier hinzufügen. Wir müssen nur viele von a hinzufügen. Also wähle ich all diese Dinge aus und du musst vorwärts sein. Lass uns die Spalte „Erstellen“ einschalten, und sie wird hier angezeigt Wie Sie sehen können, sieht es wirklich gut aus. Lass mich das ausschalten. Wir können es so hinziehen. Jetzt ist es absolut perfekt. Ich kann einfach darauf klicken, falls es irgendwelche Coupon-Karten gibt, damit sie auch darauf klicken können und sie werden zu dieser Schriftgröße weitergeleitet. Okay. So verwenden wir Frames, Natur-Frames und Auto, mit nur einer Sache. Es gibt eine Sache. Wie du sehen kannst, gibt es eine Karte, die ich erstellt habe. Darin liegt etwas, das ich dir nicht beigebracht habe. Aber wie Sie sehen können, befindet sich unter diesem iPhone ein Schlagschatten. Wie Sie sehen können, verleiht es diesem Bild Persönlichkeit. Es sieht nicht so flach aus. Also können wir das zu diesem hinzufügen. Aber zuerst möchte ich dir eine Sache sagen. Wie Sie sehen können, sehen diese Bilder ansprechender aus. Wenn Sie mir zustimmen, lassen Sie es mich bitte wissen. Denn wenn ich zu Amazon gehe, wie Sie sehen, sieht das eklig aus, diese Bilder haben keine Persönlichkeit . Es ist, als würden sie ohne Grund dort aufbewahrt. Und wenn ich zu unserem Design gehe. Wie Sie sehen können, sieht es großartig aus. Es hat eine Persönlichkeit. Es hat ein Hintergrundbild sowie Einsätze. Also habe ich darüber nachgedacht, warum Amazon das nicht tut. Sie sollten dieser Technik folgen , um wirklich tolle Produktkarten wie diese zu erstellen. Okay, dieser ist auch so skalierbar. Es gibt noch eine Sache, die ich vergessen habe, dich zu erwähnen, ich verwende Bilder ohne Hintergrund, weil dieses Bild toll aussieht wenn sie so transponiert werden Aber wenn ich dir eine Sache hier drüben zeige. Nehmen wir an, wir haben dieses Bild, ich werde es in unsere Benutzeroberfläche übernehmen und die Größe ändern lassen Und wenn ich versuche, es hier hinzuzufügen. Wie Sie sehen können, sieht es nicht so gut aus. Es passt nicht zu unserem Fass und es sieht wirklich dreckig aus. Deshalb haben wir die Remote-Methode verwendet. Wie Sie sehen können, sieht das Produkt viel besser und hat zumindest eine Persönlichkeit als dieses. Deshalb verwende ich die Transportbilder. Das hängt ganz von dir ab. Es ist deine kreative Wahl. Wenn Sie, sagen wir, ein Bild wie dieses verwenden möchten, dann können Sie das verwenden. Lass mich dir noch eine Sache zeigen. Mir gefällt das, lass mich das entfernen, und wenn ich versuche, es hier hinzuzufügen. Wie Sie sehen können, stimmt die Farbe nicht überein, aber lassen Sie uns sehen, ob ich den Hintergrund entferne, er wird viel besser aussehen als dieser. Das ist die Technik, mit der Sie Ihr Produkt auffallen lassen können. Und da haben Sie eine weitere prinzipielle Anwendung von Testa-Frames, Contins und Autolayout Ich hoffe, das vertieft das Verständnis dieses Konzepts. Das ist also der Wrapper für dieses Video. Ich werde Sie im nächsten Video wiedersehen, wo wir unsere Reise in die aufregende Welt der Designfiguren fortsetzen werden . Also triff Freunde. 62. Fortgeschrittene Auto-Layout-Techniken Figma: Hallo, alle zusammen. Auf diese Weise tauchen wir in die fortgeschrittenen Figma-Techniken erforschen so etwas wie fortgeschrittenes automatisches Layout Darüber hinaus werden wir die automatische Höhe von Magic Cub verdreifachen. Bei Textfeldern werden die Techniken Ihr Designspiel auf die nächste Stufe heben und eine dynamische Anpassung und effizientes Stapeln die automatische Höhe von Magic Cub verdreifachen. Bei Textfeldern werden die Techniken Ihr Designspiel auf die nächste Stufe heben von Elementen ermöglichen . Auf diese Weise werden wir also das automatische Layout verdoppeln Wie Sie auf meinem Bildschirm sehen können, habe ich drei Boxen. Und wenn ich, sagen wir , etwas hinzufügen möchte. Also lass mich diesen Inhalt lesen und ob ich ihn hier drüben drüben drüben drüben. Wie Sie sehen können, passen sich die Boxen von selbst an. Wir müssen es nicht manuell anvisieren oder anpassen oder wir müssen es nicht erneut dort ausrichten. Wenn wir also mehrere Ebenen eingerichtet haben dann „Contain“ hineinlegen, wird das Element entsprechend verschoben. Schauen wir uns nun an, wie wir das umsetzen können. Ich habe diese Seite, die ich zuvor erstellt habe. Ich habe diese Seite gerade dupliziert. Gehen wir jetzt zu Frame und zeichnen wir einen Rahmen wie diesen und lassen Sie mich meine Kolumne verschönern Damit ich hineinpasse. Ich nicht, der Rahmen muss hineinpassen. Lass mich es unsichtbar machen. Lass mich ein paar Farben hinzufügen. Ich werde einige neutrale Farben wie diese hinzufügen. Nun, diese Seite wird wie allgemeine Informationen sein. Okay, als Erstes möchte ich dieser Seite eine kurze Anmerkung hinzufügen, zum Beispiel, dass dieses Produkt aus wiederverwendbaren Materialien hergestellt ist. Lassen Sie mich es hier hinzufügen, und wir werden einige wiederverwendbare Symbole hinzufügen. Dafür werde ich Icons Cot Plug In verwenden, und es gibt eine Reihe von Icons, die wir völlig kostenlos verwenden können. Also kostenlos Und dafür werde ich diesen wählen. Okay, lassen Sie mich jetzt wiederverwenden. Okay. Okay, also haben wir die Icons hinzugefügt. Lassen Sie mich diesen Punkt schließen. Und ich möchte, dass jedes Symbol bis zu 20 sein sollte, weil das zu groß ist. Und dafür werde ich die Fragen-Eigenschaft verwenden. Wenn ich darauf klicke, wird es, wie du sehen kannst , zu einem Kettenkettensymbol, und wenn ich auf Platz 20 bin. Da Sie also die Breite und Höhe gleichzeitig sehen können , müssen wir das nicht immer wieder manuell machen , wie in diesem Fall. Wenn ich also auf das Symbol klicke, dieses auswähle und den Wert 20 hinzufüge, wie Sie sehen können, dann werden nur Breite und Höhe gleichzeitig hinzugefügt . Okay, wir haben also diese drei Ionen hier. Ich denke, ich sollte das auf 25 erhöhen. Okay, jetzt sieht es toll aus. Nun, lass mich das auswählen. Lass es mich eng nach oben und nur unten anziehen. Okay, sie sind gerade dabei. Also werde ich eine Schachtel zeichnen und hinzufügen, dass dieses Produkt zu mindestens 20 Gewichtsprozent aus recyceltem Material hergestellt wurde Okay, das wird unsere einfache Notiz dafür sein. Okay, also haben wir unsere erste Karte erstellt. Lassen Sie mich die runden Kanten bis zur Ripten addieren. Und jetzt, sagen wir, möchte ich etwas Inhalt hinzufügen. Nehmen wir an, ich möchte das hinzufügen. Wie Sie sehen können, dehnt sich das Textfeld nicht so gut aus wie der Mainframe, das ist dieser, der blaue In diesem Fall wird uns das automatische Layout also helfen. Aber bevor wir das automatische Layout verwenden, muss ich Ihnen eines zeigen: die automatische Höhenfunktion. Derzeit hat es also keine feste Größe. Und wenn ich die automatische Höhe wähle, passt sie sich von selbst an. Wenn ich also zufälligen Text hinzufüge, wie Sie sehen, passt sich die Größe der Box von selbst an. Okay, damit sind wir fertig. Jetzt wollen wir den Rahmen anpassen, den eigentlichen Rahmen. Dafür haben wir bereits gelernt, dass wir das automatische Layout verwenden müssen. Wählen wir alle aus und klicken wir auf die automatische Ebene. Wie Sie sehen können, funktioniert das Auto, aber es hat die anderen Dinge mit ihnen arrangiert, wie die Notiz mit den Symbolen. Also ich will das nicht auf dieser Karte haben. Also, um dieses Problem zu lösen, können wir die einfache Sache tun. Wir können sie alle auswählen. Die Icons, ich will, dass das Ding hier drüben platziert wird. Es bewegt sich weder hierher noch hierher. Es wurde also nicht gruppiert. Lassen Sie mich jetzt diesen Interframe hinzufügen . Jetzt, wenn ich sie alle auswähle und wenn ich automatisches Layout wähle Wie Sie sehen können, ist es dort geblieben. Aber die Kiste ist kaputt. Das liegt am automatischen Layout. Das automatische Layout macht immer diese komische Sache Lassen Sie mich jetzt eine weitere Spalte hinzufügen. Wenn ich nun versuche, etwas in dieses Feld einzufügen, wie Sie sehen können, dehnt sich das Feld aus, aber dieses Feld bewegt sich nicht. Es bleibt an derselben Stelle. In diesem Szenario wollen wir also , dass es sich entsprechend unserem Inhalt bewegt, also, wie Sie sehen können, wenn ich hier etwas hinzufüge, damit Sie sehen können, dass sich die Box bewegt. Also wollen wir das Gleiche hier drüben. Also verwenden wir dafür das automatische Layout. Es ist also so, als würde man unsere automatische Ladefunktion verdoppeln. Ich weiß, dass Auto Old schon ein etwas verwirrendes Thema ist, und wir wenden dieselbe automatische Beute auf zwei Also, wenn wir diesen Teil nicht verstehen, schauen wir ihn uns noch einmal an, weil er irgendwie verwirrend ist Also lass mich dir sagen, wie es funktioniert. Also müssen wir dafür die automatische Entlassung verwenden. Aber bevor wir das tun, lassen Sie mich zwei davon auswählen Jetzt sind beide Elemente ausgewählt wie Sie im Designfenster sehen können. Frame 41 und Frame 42 sind diese beiden Frames, und das sind automatische Ebenen. Das Symbol ist hier drüben. Jetzt müssen wir wieder das automatische Layout anwenden. Es heißt Double Auto Lot und klicken Sie auf die Plus-Schaltfläche Auto Lod Und lass es mich dir im Design-Panel zeigen. Nicht im Ebenenbedienfeld. Wir haben das verschachtelte Autolayout in Autode automatisch eingefügt. Nun, wenn ich etwas Text hineinfüge. Nehmen wir an, Sie möchten dieser Notiz ein paar neue Details hinzufügen . Verwenden Sie Beispiel wiederverwendbares Wasser oder etwas wie Strohhalme Sie können es also einfach hinzufügen und Sie können sehen sich das Feld automatisch von selbst anpasst Wir müssen es nicht immer wieder manuell anpassen. Und das ist völlig wiederverwendbar. Also zum Kopieren wähle ich dieses eine einzige aus und verwende Strg D, die Tastenkombination, und wir fügen ein weiteres Feld hinzu. Und diese Funktion wird auch mit dieser Box funktionieren. Nehmen wir an, ich füge etwas Text hinzu. Wie Sie sehen können, funktioniert das total. Ordnung. Okay, das sieht also nicht so toll aus. Ich weiß, dass dies nicht die eigentliche Methode ist , um die Produktdetails zu entwerfen. Nehmen wir an, es gibt mehrere Dinge, die wir mit diesen Autos in unser Design aufnehmen möchten , und wir müssen es nicht immer wieder neu entwerfen oder neu organisieren oder neu ausrichten In diesem Fall werden wir also mehrere automatische Layoutfunktionen verwenden Jetzt können wir einfach einige Informationen wie Produktdetails sowie diese Aktion hinzufügen , wie diese. Und lassen Sie mich diesen zuerst löschen. Okay, ich schätze, da ist ein leerer Raum. Und lassen Sie mich nur die Randabstände hinzufügen, die es Paddings nennt Also lösche sie einfach. Oh, aber ich habe einen Fehler gemacht. Ich kann zum Text gehen und einfach auf dieses leere Feld klicken. Und solange ich irgendeinen Arbeitsplatz habe. Jetzt kann ich den Gebrauch hinzufügen. Und in den Testberichten werde ich hinzufügen, mit dem ersten, der den Jordan Triplex One R P bewertet. Okay, das ist ein ziemlich großer Name für Probleme Okay, da haben Sie jede Menge tiefgründige Einblicke in die erweiterte Figma-Funktion Ich hoffe, dass dieses Video Ihr Verständnis ankündigt und Ihre Designs kreativ Das ist also ein Rapper für diese Session. Aber es gibt eine Sache, die ich dir sagen möchte. Ich kenne das Auto oder es ist ein bisschen verwirrend. Schau dir dieses Video also immer wieder und übe an mehreren Frames. Das ist also ein Rapper für diese Session. Also wir sehen uns im nächsten Video. Wir werden weiterhin spannende Aspekte von Figma erkunden , also viel Spaß beim Entwerfen 63. Klassenprojekt 10: Design, das sich anpasst: Responsive Layouts in Figma erstellen: Ihr Designer, Filing Creative, habt dieses tolle Projekt für euch , um eure UI-Muskeln Ihr werdet ein paar supercoole Buttons und Menüs bauen , die nicht innovativ, sondern auch auffällig sein werden . Denken Sie an wachsende Überraschungen, erweitern Sie Ihre Güte und reagieren Sie auf Magie Als Erstes müssen Sie also diesen Knopf entwerfen, den A-Schutzknopf Danach müssen Sie die Produktseite gestalten. Ich weiß, dass ich es vergessen habe, und ich entschuldige mich bereits dafür. Gehen Sie also nicht in den Kommentar und sagen Sie, Sie haben die Produktdetails vergessen Machen Sie also die Produktdetailseite und gestalten Sie die Produktdetailseite. Danach werden wir diese dehnbare mobile Navigationsleiste entwerfen diese dehnbare mobile Navigationsleiste Gestalten Sie diese Navigationsleiste also so, dass sie sich an Bildschirme wie diesen anpassen Und danach müssen Sie diese Kleinwagen für unsere Produkte entwerfen . Und dabei müssen Sie Constraint, Auto Layout und Mr. Frames verwenden . Und am Ende müssen Sie die fantastischen Karten entwerfen, die sich automatisch anpassen. Okay. Also, nachdem Sie die Projekte abgeschlossen haben, wissen Sie, wie es läuft. Machen Sie einen Screenshot und reichen Sie den Abschnitt „Procs“ ein. Sie können auch in den sozialen Netzwerken einreichen. Sie können mich dort taggen. Also lass es mich dir hier zeigen. Noch einmal, zuerst müssen Sie diese Produktseite nach dem Atoll-Button , nach diesen Kacheln gestalten diese Produktseite nach dem Atoll-Button , nach diesen Kacheln Die Kacheln für unsere Produkte, und es muss wiederverwendbar sein. Und dann musst du diese Autos entwerfen, die sich automatisch anpassen. Also bereit, Sie auf diesem UI-Wort zu markieren , also machen wir es. 64. So erstellst du mit Figma schöne Schatten-UI-Design: Hey, Leute, willkommen zurück. Tag, an dem wir tief in die Welt der Schatten in Figma eintauchen und auch die Effekte Nicht irgendein Schatten, sondern die coolsten De der Stadt, der Schlagschatten und der Schatten-Bug , weil wir dabei sind, ihr volles Potenzial auszuschöpfen Lasst uns also zunächst verstehen, was Schlagschatten und innerer Schatten Wie Sie sehen können, habe ich zwei Beispiele auf meinem Bildschirm. Der erste ist dieser Schlagschatten, und dieser ist das Beispiel inneren Schatten, ebenso wie dieser. Das ist der Schlagschatten, und das ist der innere innere Schlagschatten Stellen Sie sich vor, Sie haben eine Karte in der Hand, das Licht, das darauf trifft, erzeugt einen dunklen Bereich darunter, oder Das ist also ein Seilschatten. Jetzt sind innere Schatten wie Tunnel, erzeugen eine Tiefe innerhalb eines Objekts wie einer Schaltfläche oder einer Kartenseite. So wie du es hier und hier sehen kannst, und auch hier drüben. Okay, jetzt schauen wir uns an, wie man Schaltflächen mit Schlagschatten und Innenschatten erstellt . Wie Sie sehen können, habe ich dieses Design, und wenn ich darauf klicke, wie Sie sehen können, passiert diese Magie. Es wurde vom Hellmodus in den Dunkelmodus gewechselt. Und es hat auch einen Klebstoff. Also haben wir mit Schlagschatten und Schatten erstellt , also lassen Sie mich diesen schließen. Lassen Sie mich Ihnen zunächst erklären, wie Schlagschatten auf Schaltflächen funktionieren. Okay, wir haben das auf der C-Taste erstellt, also lassen Sie mich es hier nachverfolgen und dieses erstellen. Normalerweise verwende ich den Drop Shorter nicht , weil ich diese Flugsymbole mag. Wie Sie sehen können, passt es wirklich zu unserem Design. Aber wenn Ihr Design den Schlagschatten oder den Schlagschatten erfordert oder wenn Sie möchten, dass Ihre Schaltfläche herausspringt, können Sie den Schlagschatten verwenden Und ich werde dir ein Beispiel geben. Ich zeige Ihnen ein Beispiel, bei dem Sie einen Schlagschatten und einen Schatten verwenden können . Derzeit hat es also keine Wirkung. Klicken Sie einfach darauf und gehen Sie zum Design-Panel Am Ende haben wir Effekte. Klicken Sie also auf diese Plus-Schaltfläche, und standardmäßig nennen wir Schlagschatten, und wie Sie sehen können, wurde etwas Schlagschatten hinzugefügt. Wenn ich das Auge abschalte, wird, wie Sie sehen, ein Tropfen kürzer. Und jetzt gibt es einen Schlagschatten. Dies sind die Standardwerte, aber jetzt können wir die Werte nach unseren Bedürfnissen festlegen. Nehmen wir an, der Schlagschatten ist momentan 4, also wenn ich ihn erhöhe, wie Sie sehen können, ändert sich die Y-Position wie folgt. Und du kannst X auch so ändern. Und du kannst es auch hier verteilen, und du kannst es verwischen So passt man den Schlagschatten an, aber ich mag es so Standardmäßig sieht es so gut aus wie dieses. Und jetzt gibt es eine Sache. Sie können die Farbe des Schattens ändern . Derzeit ist es schwarz. Sie können es in rechts oder in etwas anderes ändern , was Ihnen gefällt. Okay, lass uns gelb und trotzdem blau aussehen. Also, wie wir sehen, haben wir Schlagschatten unter diesem Tunnel. Es sieht cool aus, blau und gelb, passt wirklich gut zusammen Okay, so fügen wir also Schatten hinzu. Aber jetzt, sagen wir, ich möchte einen Schatten hinzufügen. In diesem Fall kann ich also zuerst diesen löschen. Weil ich es nicht will. Gehen wir jetzt zur Wirkung über. Wir haben hier vier Optionen: Shadow Layer Bag und Bagger Blur In diesem Fall möchte ich also im Schatten stehen. Also, wie Sie sehen können, sind wir in einen Schatten geraten. Es wird hilfreich sein, wenn wir sagen, wir haben zwei Seiten wie diese und wir haben sie prototypisiert Und wenn ich darauf klicke, wird daraus das. Lassen Sie mich Ihnen am Beispiel zeigen, wie es funktioniert. Ich habe diesen erstellt. Dieser hat einen Schlagschatten und dieser hat einen inneren Schatten. Wenn ich jetzt zu Prototyp und Flow gehe und wenn ich darauf klicke. Wie Sie sehen können, erzeugt es Effekt, dass wir tatsächlich die Taste drücken, und es gibt einen Effekt, den ich erzeugt habe, also wenn ich ihn ziehe, entsteht diese Animation. Das sieht echt cool aus. So funktioniert der innere Schatten. Wir können auch das Gleiche tun, zum Beispiel können wir ihm auch die Farben hinzufügen. Wir befinden uns derzeit im Prototyp. Gehen wir zum Thema Design in a Shadow über. Lass es mich in Industriegelb ändern. Lassen Sie mich das hinzufügen. Okay, lass mich den Schlag hinzufügen und X und Y ändern, so wie hier. Ich weiß, es sieht wirklich eklig aus, aber du kannst es so hinzufügen. Ich glaube, ich füge es zu viel hinzu. Okay, so. Okay, das ist ein normaler Zaubertrank, und das beim Drücken der Taste Ich hoffe, du verstehst den Schlagschatten und im Schatten. Lassen Sie mich Ihnen also sagen, wann Sie Schlagschatten verwenden können. Wenn Sie beispielsweise möchten, dass Ihre Schaltfläche angezeigt wird, können Sie Schlagschatten verwenden. Es verleiht Ihrer Schaltfläche ein anklickbares Leben mit einem subtilen Schlagschatten Es sagt dir: Hey, ich bin hier, um zu drücken. Also drück mich, und ich zeige dir schon in diesem Beispiel, wie hier, wo es hingegangen ist. Okay. Oh, hier. Wie du sehen kannst. Ich glaube, das hat einen Drop Shot, M. Wie Sie sehen können, hat dieser einen Drop-Shader und dieser hat keinen Schlagschatten Aber wie Sie sehen können, sieht ein Bild, das einen Schlagschatten hat, cooler aus als dieses, weil es auf dieser Karte hervorsticht Sie können Ihre Autos von einem flachen rechteckigen schwebenden Element mit einem gut platzierten Schlagschatten aus der Höhe heben flachen rechteckigen schwebenden Element mit einem gut platzierten Schlagschatten Also Bonuspunkt für das Spielen mit Unschärfe und Streuung. In diesem Fall hoffe ich, dass ich damit gespielt habe , wie Sie sehen können. Ich füge vier hinzu. Aber ich kann je nach Bedarf beliebig viele hinzufügen. Ich kann auch Schlagschatten verwenden, um Inhalte hinzuzufügen, z. B. Schlagschatten zu das Objekt vom Dbro zu trennen. Wie Sie sehen können, es sich in diesem Fall trennt es sich in diesem Fall aufgrund des Schlagschattens, und das macht unser Design ansprechender Es sieht nicht so aus, als wäre es geronnen. Okay, es gibt also einige Beispiele für Drop Shot in a Shadow Also habe ich eine Aufgabe für dich. Also pausiere das Video und versuche, diesen Effekt nachzubilden. Ich verwende dafür Drop Shot, und ich verwende es in Kurzform dafür , genauso wie bei diesem Pausiere das Video und mache diese Dinge. Und ich werde dir zeigen, wie man das erstellt. Also versuche es selbst. Du wirst wissen, wie man Schatten fallen lässt, und im Schatten funktioniert das auch. Danach zeige ich euch, wie man das macht. Ich verwende den Lichteffekt, pausiere das Video und am besten. Okay, ich hoffe, du hast das gemacht und ich hoffe, du lernst, wie man Schatten fallen lässt und in einem Schatten funktioniert. Lassen Sie mich Ihnen nun zeigen , wie Sie diese Schaltflächen erstellen. Wie Sie sehen können, habe ich in a shadow inside it in a shadow verwendet. Lass mich diesen erstellen. Lass mich hier drüben kreieren. Ich werde Rechteck verwenden. Kleines Rechteck, und es wird so komplett abgerundet sein. Und lassen Sie mich Ellipse nehmen. Lass mich die Farbe überprüfen. Ich will den nicht. Ich will diesen und du musst blau sein. Blaublau Ich glaube, es heißt türkisch, türkisch. Ich habe bei der Benennung der Farbe wirklich Mist gebaut. Derzeit hat es also keine Schatten, also lass mich den inneren Schatten hinzufügen Es wird ihm Tiefe verleihen. Tatsächlich im Schatten. Bf sieht toll aus, also werde ich nichts hinzufügen. Ich möchte diesem einen Schlagschatten hinzufügen. Und ich werde etwas Unschärfe wie diese hinzufügen, ebenso wie diese. Subtil. Subtile Unschärfe. Und jetzt lass uns das Gleiche hier drüben kreieren. Lass mich das kopieren, es hierher ziehen und es einfach so hier drüben platzieren , und ich werde die Farbe ändern. Also werde ich diese verwenden, und das ist und das wird unsere neutrale Farbe sein. Oder wir können es weiß machen. Es hat auch einen inneren Schatten und dieser hat einen Schlagschatten. Bevor wir das tun, lassen Sie mich Ihnen zeigen, wie es funktioniert. Gehen wir zum Prototyp, und wenn ich auf diese Schaltfläche klicke, wird diese Aktion ausgeführt, und ich füge eine intelligente Animation hinzu, damit sie diesen gleitenden Effekt hat und ich füge eine intelligente Animation hinzu, . Lassen Sie mich also etwas einfließen. Wie Sie sagen werden, funktioniert es, aber derzeit funktioniert es nicht auf andere Weise. Lassen Sie mich also auch diesem Frame einen anklickbaren Effekt hinzufügen. Wie Sie sehen können, funktionieren beide, wenn ich das ansehe, aber der Effekt ist nicht so gering Oh ja. Also lass uns gehen und diesen niedrigen Effekt hinzufügen. Es ist also sehr einfach. Gehen Sie einfach zum Design-Panel und wählen Sie diese Runde aus. Rechteck. Gehen wir nun zu Effekt plus Schlagschatten und ändern die Verteilung etwas. Fügen wir mehr Unschärfe hinzu, erhöhen wir die Streuung. Derzeit ist es schwarz, also ist es nicht sichtbar, und lassen Sie mich es auf diese Weise in Weiß ändern Und lass uns einen Spread machen. Ein Up wie dieses, und lassen Sie uns die Unschärfe angehen Wie Sie sehen können, haben wir die Unschärfe. Und wenn ich jetzt zum Prototyp gehe und es ist Flow Flow, und wenn ich darauf klicke, wie du sehen kannst, haben wir den Glüheffekt am Ende So haben wir diese dunkle Stimmung und mehr Licht mit diesen Mustern erzeugt . Wie Sie sehen können, sieht es wirklich cool aus und es ist wirklich additiv. Ich weiß, dass es eine App auf Plast gibt. In dieser App gibt es nichts. Es gibt nur einen Knopf Sie müssen nur darauf klicken und es funktioniert. Ich glaube, ich habe es gesehen, ich habe es wahrscheinlich benutzt. Ich weiß nicht warum, aber ich habe es benutzt. Es ist nur eine App und du musst nur eine Taste drücken. Denken Sie daran, dass es sich bei diesem Effekt subtile Berührungen handelt, die oft unbemerkt bleiben Aber wenn sie richtig gemacht werden, wirken sie der Gesamtästhetik des Signaltelefons entgegen Vermeiden Sie es, es zu übertreiben. Wenn jemand deinen Drop Shot bemerkt, bist du wahrscheinlich zu weit gegangen Es gibt also einige Beispiele, die ich dir zeigen möchte, wie dieses. Wie Sie sehen können, verwenden sie in diesem Fall Drop Shot, und sie sind sehr subtil. Wie Sie sehen können, verwenden wir hier den gleichen Effekt. Dies ist ein normales Set und wenn wir die Taste drücken, entsteht ein Schatten, den sie sowohl für den Überspannungsbalken als auch für den Ladebalken und für diesen Text sowie für diese Analyseleiste und den Umschalter verwenden als auch für den Ladebalken und für diesen Text sowie für diese Analyseleiste und den Umschalter Wir haben es klein gemacht. Also danke, dass du mich auf dieser Schattenforschung begleitet hast. Denken Sie also daran, Schatten sind Elektrowerkzeuge. Wir setzen sie mit Bedacht ein. Um sie evaluativ zu gestalten und sie wirklich zur Geltung zu bringen. Also bis zum nächsten Mal für ein weiteres Figma-Abenteuer. 65. So erstellst du Hintergrundunschärfe und Ebenen-Weichzeichnung in Figma: Per, die Meister haben sich versammelt. Heute nutzen wir scharfe Kanten, um Traumhaftigkeit mit Hintergrundunschärfe und Ebenenunschärfe Machen Sie sich also bereit, Ihrem Design Tiefe, Fokus und jede Menge künstlerische Ausstrahlung zu verleihen Fokus und jede Menge künstlerische Ausstrahlung zu Stellen Sie sich vor, Sie blinzeln in der Sonne auf Bildschirm Ihres Telefons Also genau das macht Unschärfe. Es ist ein sanft weichmachendes Element und erzeugt einen Hezy-Thal-Effekt Lassen Sie uns also verstehen, was Hintergrundunschärfe ist. Das wird also unser zweites Projekt sein Ich habe dieses kleine Panel wie Sarge Bar erstellt Wir haben diese Zinger-Tasche mit Acc kreiert. Bei Effekten verwenden wir Pagodenunschärfe In diesem Builder werden wir ihn also replizieren. Ich weiß, dass wir nicht direkt in Projekt zwei einsteigen sollen, aber ich muss das Effektpanel abdecken, also machen wir das in diesem Video Lassen Sie uns also verstehen, was Bag Blur ist und wie es in unserer Benutzeroberfläche funktioniert Stellen Sie sich das wie einen magischen Fensterfilter vor. Ihr Hauptinhalt erscheint scharf und klar, während der Bagger mit der verträumten Unschärfe verschmilzt Es hebt die Schlüssel und Elemente hervor . Es bringt unser Heldenbild oder unseren Heldentext zur Geltung, indem den Hintergrund verwischen lässt und alle Blicke auf den Star der Show lenkt In diesem Fall ist das Buch jetzt der Star der Show, und diese Suche macht keinen Sinn. Wenn Sie ein Panel zu einem Filmplakat machen möchten, fügen Sie Bagger Blur Es verleiht einen Hauch von Drama und Mysterium. Es sorgt auch für ein immersives Erlebnis. Als ob es unseren Benutzern das Gefühl gibt, eine virtuelle Welt zu erkunden, indem sie sanft am Rand ihrer Bildschirme drehen Wir wissen also alles über die Verbotsunschärfe. Gehen wir jetzt zu Figma und machen ein bisschen Barn Blur. Also ich habe das für Frame 45. Also lass uns Pixel einstecken und ich werde nach Bergen suchen. Und es gibt eine Menge Bilder, aber dieses ist eines meiner Lieblingsbilder. Es hat diesen Sonnenaufgangseffekt. Also werde ich dieses H hier drüben platzieren. Schließe die Sonnenbrille, füge ein Dreieck hinzu oder du kannst auch einen Rahmen zeichnen Derzeit liegt der Wert des Feldes bei 100%. Sie können diesem Byte eine Art Hintergrundeffekt hinzufügen , wodurch das Feld um 50% reduziert wird. Wie Sie sehen können, fügt es den Bewährungsbluff hinzu, es sieht nicht so gut aus Im Moment werde ich also zu 100% voll sein und dann können wir Und jetzt gehen wir zu Bag on Blur. Ich weiß, es macht nichts, aber jetzt müssen wir das Feld hinzufügen Es müssen 50% sein. Im Vergleich zur Datei sieht es toll aus. Und lassen Sie mich etwas Abgerundetes hinzufügen. Okay, jetzt haben wir eine Tasche zum Thema Unschärfe. Es war so einfach Jetzt können wir diese Unschärfe hinzufügen. Wie Sie sehen können, lag es nicht an der Haptik. Wir können diese Art von Unschärfe nicht mit Gefühl korrigieren . Sieht toll aus Es gibt noch eine Sache. Wir können einen Gradienteneffektor hinzufügen. Es sieht wirklich cool Lassen Sie mich grüne Farbe hinzufügen. Lass uns füllen gehen. Derzeit ist es in normaler Farbe, wählen Sie einen Farbverlauf und wir haben diesen Effekt. Wie Sie sehen können, ist der Teil transparent und unsichtbar. Ich kann so etwas erschaffen Lass mich diese Farbe wählen , lass uns Rosa wählen und lass uns diese wählen. Traumatisch. Ich, das sieht toll aus. Oder es gibt eine Sache, Sie können es auch transparent machen. Aktuell bin ich zu 100% von diesem Abschnitt besessen. Lass mich 50 draus machen. Sie können also sehen, dass es jetzt ästhetischer aussieht. So kreieren wir Brad Blur. Und es gibt eine Sache: Sie können auch einen Drop Shot hinzufügen, damit er herauskommt. Slam-Rechteck Hinzufügen und ich möchte Drop Shot hinzufügen, es wird also bereits ein Drop Shot hinzugefügt, und wir können das Problem beheben, wenn Sie möchten, lassen Sie uns dafür sorgen, dass ein Spritzer die Unschärfe verstärkt Und lassen Sie uns weitermachen. Okay. So wie das hier. Wie Sie sehen können, sieht es cooler aus. Es hängt ganz von Ihrem Design ab. Wenn du es hinzufügen möchtest, füge es hinzu, oder du kannst es komplett überspringen. Es gibt noch eine wichtige Sache. Nehmen wir an, Sie haben mehrere Frames. Kein Rahmen. Stellen wir uns vor, das ist ein iPad-Bildschirm und Sie möchten, dass das Gleiche hier drüben ist. Aber dieses Ding ist in einem anderen Design. So kannst du einen Stil kreieren. Wählen Sie sogar diesen Rahmen aus. Gehe zu Effekten, klicke darauf, einen Stil, PG Blow. Du kannst es nennen, wie du willst. Ich nenne das BG Blow, kreiere einen Stil und ich möchte, dass es dir gut geht, also habe ich diese Saga. Ich wähle Gil. Wie du sagen wirst, hat es Jib hinzugefügt. Wie Sie sehen können, wurde die Unschärfe hinzugefügt, aber denken Sie daran, dass Sie das Feld verkleinern müssen Derzeit sind es also 100%, also werde ich 50 behalten, aber lassen Sie mich die Farbe dieses Rahmens ändern Okay, wir haben also unseren Stil. Okay. Hier dreht sich alles um Background Blow. Lassen Sie uns nun etwas über die Ebenenunschärfe lernen. Hier geht es also darum, dem jeweiligen Objekt ein weiches Gelb hinzuzufügen , wie ein sanftes, weiches Licht auf Ihr Designelement zu bringen Nehmen wir an, wir haben eine Taste wie diese und möchten, dass die umgebenen Ecken oder Kanten weich sind In diesem Fall können wir es also verwenden. Es hilft auch, wenn wir überlappende Elemente in unserem Design unterscheiden möchten überlappende Elemente in , wir haben viele Ebenen, und wenn wir Ebenenunschärfe verwenden, kann dies zu einer sicheren Trennung führen, sodass diese Dinge sauber und leicht Es hatte auch eine subtile Tiefe, sodass unsere Elemente oder Formen texturierter und lebendiger wirken Wie Sie sehen können, habe ich diesen Rahmen 46 und ich habe dieses wirklich cool aussehende Design, und ich habe es mit der Ebenenunschärfe erstellt Lassen Sie mich Ihnen erklären, wie Ebenenunschärfe funktioniert. Ich werde ein Rechteck wählen. Und lass es mich hier so zeichnen. Ich ändere es gegen 30 Uhr in Rosa. Okay, jetzt gehen wir zur Wirkung. Und Ebenenunschärfe. Wenn ich heranzoome, Kanten, wie Sie sehen können, verschwommen Ich kann die Plurins vergrößern Wie Sie sehen können, verschmilzt es mit unserem Pagron erzeugt an den Rändern diesen haselnussbraunen Effekt Es gibt einige Tipps, die ich geben möchte. Geh nicht auf Hochtouren. Beginnen Sie mit einer niedrigen Unschärfe und erhöhen Sie sie schrittweise , bis Sie den optimalen Punkt gefunden haben, wie in diesem Fall Auf Farben kommt es an: Experimentieren Sie mit den verschiedenen Unschärfefarben , die zu Ihrem Designthema passen Okay, jetzt erfährst du alles über die Taschenunschärfe sowie die Ebenenunschärfe Also gibt es einen Auftrag. Es ist eine wirklich kleine und einfache Aufgabe. Gehen Sie also zu Figma und versuchen Sie, das nachzubilden. Ich habe Layer-Blow darauf aufgetragen und der Layer-Blow ist zu viel 400 und es hat drei Kreise Diese beiden Kreise sind eins, und dieser hat einen normalen Kreis, aber ich habe einen Farbverlauf darauf angewendet, also sieht es so aus. Ja, das ist also alles über dieses Design. Also, was wird das tun und versuchen, das nachzubilden. Ich werde dir auch zeigen, wie man das macht. Also geh und mach das. Ich werde dich in ein paar Minuten retten. Okay, Studenten, ich hoffe, ihr habt das gemacht, nun, lasst mich es nochmal dekorieren. Okay, das wird mein Rahmen für sieben sein und ich füge die Kanten 30 hinzu. Und du kannst die Kanten total überspringen, aber mit runden Kanten sieht es wirklich cool aus. Also wähle ich die Farbe für diese und füge einen Kreis hinzu, Lippen, ich werde die Kreise zeichnen. Aber zuerst möchte ich, dass diese Farbe diese ist. Das ist nicht orange, aber es ist orange. Jetzt werde ich zwei Kreise und diesen duplizieren . Lass mich das rein. Du weißt, wie man das macht. Wählen Sie einfach beide aus und klicken Sie einfach auf diese Schaltfläche, oder Sie gehen zu O U und wählen Sie sogar aus. Das ist jetzt hier drin, also lass mich so um 90 drehen. Gehen wir jetzt zu Effekten und wählen Ebenenunschärfe. Lass uns mit 400 gehen. Jetzt kann ich das hier behalten. Jetzt kann ich eine Verlaufsfarbe wählen. Ich kann es hier einfach so hinzufügen. Ja, so schaffen wir diese wirklich fantastisch aussehende Kunst. Fa ist nicht nur ein Y-Tool. Wenn Sie es als grafisches Werkzeug und Werkzeug verwenden möchten , können Sie es auf jeden Fall verwenden. Ich weiß, dass es ein paar Fehler gibt. Sieht wirklich gut aus und das sieht nicht so toll aus. Aber ich habe etwas Zeit gebraucht, aber ich muss dieses Video wirklich schnell fertigstellen, also habe ich dieses erstellt. Okay, Sie können das auch stilvoll gestalten, und wenn Sie es in Ihrem Design verwenden möchten, können wir es immer wieder verwenden. Okay, diese Effekte mögen einfach erscheinen, aber wenn sie sorgfältig eingesetzt werden, können sie die visuelle Attraktivität Ihrer Designs erheblich visuelle Attraktivität Ihrer Designs Denken Sie also daran, dass dies sicherlich der Schlüssel ist und dass jeder Effekt einem bestimmten Zweck dient, und dass jeder Effekt einem bestimmten Zweck dient um Ihr Design zum Leben zu erwecken Weitere Design-Tipps und -Tricks finden Sie im nächsten Video. 66. Projekt 11 Funky-Effekte Fiesta: Hallo Pigma, willkommen bei Projekt Nummer 11. Wir tauchen tief ein in die wunderbare Welt der Schatten, Unschärfen und dieser befriedigenden , matschigen Es gibt also einige Schritte, die Sie befolgen müssen. Der erste Schritt besteht darin, das Lehrbuch zu lesen und den Spielplatz zu erkunden. Für Stopi-Designregeln. Stellen Sie sich das Pigma-Projekt als Ihren Spielplatz vor. Es ist kein Test, der weniger exorant ist, Fell haben und etwas machen, das wirklich Schritt Nummer zwei besteht nun darin, eine Schaltfläche, ein Bild oder sogar einen Text auszuwählen eine Schaltfläche, ein Bild oder sogar einen Text Stellen Sie sich nun vor, eine Lichtquelle darüber fallen zu lassen. Drücken Sie in Figma auf die Schlagschatten-Schaltfläche und lassen Sie sie auf dem Bildschirm Ich weiß, dass du dich vielleicht schick fühlst, also kannst du es als Nächstes in einem Schatten versuchen Es gibt diesen coolen Dreifacheffekt. Lassen Sie Ihre Taste so aussehen, als ob sie direkt aus diesem Bildschirm herausgekrümmt wäre. Schritt Nummer drei, b loslegen. Möchten Sie etwas Besonderes hervorheben, wählen Sie ein Element aus und fügen Sie einen Tucholaer Es erzeugt ein träumerisches Schluchzen am Rand und rückt Ihren Designhelden ins Rampenlicht ins Und Sie können auch den Effekt „ Hintergrundunschärfe“ verwenden. Es ist wie ein Zauber. Ihr Hauptinhalt rückt in den Vordergrund und lässt den Hintergrund in Schönheit Es ist ein verschwommener Traumzustand, und Schritt Nummer vier ist Zeige-und-Tellen-Zeit. Lassen Sie uns jetzt Ihr Meisterwerk mit der Welt teilen. Machen Sie einen Screenshot, um Ihren Designzauber einzufangen, laden Sie ihn dann in eine Projektion hoch und stellen Sie Ihre Fähigkeiten unter Beweis. Und möchtest du die Figma-Liebe noch ein bisschen weiter verbreiten die Figma-Liebe noch ein bisschen weiter Sie können dies in den sozialen Medien hochladen . Und du nimmst mich auch mit. Denken Sie daran, bei diesem Fuma-Projekt dreht sich alles um Spaß und Experimente Scheuen Sie sich nicht, Anerkennung zu bekommen, Dinge zu optimieren und voneinander zu lernen, teilen Sie Ihre Tipps und Tricks in den Kommentaren mit und lassen Sie uns sehen, was für ein fantastisches Design Sie sich einfallen lassen Also werde ich dich im nächsten sehen. 67. So speicherst du deine Figma-Dateien auf dem Desktop und so kannst du auf den Verlauf der Figma-Datei zugreifen: Begrüßung durch Studierende. Haben Sie manchmal das Gefühl, dass Sie Ihren genauen Designmeister verlieren könnten Ihren genauen Designmeister verlieren Also nicht heute, wir tauchen ein in die Welt von Figma file Sehr gut lernen, wie Sie Ihre Datei lokal speichern können. Behalten Sie den Versionsverlauf jeder Woche im Auge. Also kein Design-Herzschmerz mehr, also purer Seelenfrieden Beginnen wir also damit, wie Sie Ihre Datei lokal speichern können. Stellen Sie sich vor, Ihr Computer hat einen schicken Tresor für Ihre Figma-Dateien Diese Art von lokalem Speichern tut es. Es erstellt selbst eine Kopie Ihres Designs. Gerät getrennt von der Cloud. Denken Sie nur daran, dass es uns Offline-Zugriff geben kann. Wenn wir ohne Internetverbindung an unserem Design arbeiten müssen , können wir es lokal kopieren, um es zu retten Es unterstützt also auch Glückseligkeit. Irgendwie wird die Datei beschädigt. Es wird nicht beschädigt, da es sich um einen Cloud-Dienst handelt . Es funktioniert in der Cloud. Nehmen wir an, Figma hat eine Panne oder etwas Ähnliches. In diesem Fall ist also niedriger als lokale Kopie septiert. Gehen wir also und lernen wir wie wir unser Design lokal speichern können Und wie Sie sehen können, ist das Design-Panel ein bisschen anders, weil wir uns gerade im Versionsverlauf befinden, also lassen Sie mich das loswerden. Okay, es ist also einfach. Geh einfach zu den Dateien. Es wird hier sein, das Fiigmgo In dem wir eine lokale Kopie zum Verkauf haben, klicken Sie darauf und es wird Mittelwertbildung heruntergeladen, als hätten wir sieben Frames, Cyc, sieben Seiten Und wie Sie sehen können, ist unser Projekt am Click Cut Virgin One, und es ist ein Feigenstapel. Die Erweiterung ist Abb. Wenn ich auf den Verkauf klicke und zum Dateialter gehe, also wie du siehst, ist es hier drüben. Und es heißt Clicker Virgin One und ist eine Erweiterung von FIC, die Sie direkt mit anderen teilen können, z. B. über Gmail, WhatsApp-Telegramm, und danach können sie sie einfach in Figma öffnen, weil das die Figma-Datei ist Okay, so kann man also lokal speichern. Lassen Sie uns nun etwas über die Welt der Versionsgeschichte lernen. L T der Versionsgeschichte als Zeitmaschine für Ihr Design. Sehr viele ausgeführte oder versehentlich gelöschte Ebenen. Gehen Sie also einfach in der Zeit zurück und holen Sie sich die perfekte Version. Für den Versionsverlauf gibt es zwei Methoden. Wie bei der ersten Option können Sie hier hingehen und es wird Ihnen angezeigt erste Option ist die Versionsgeschichte anzeigen. Und in diesem Design-Panel haben wir den Versionsverlauf. Und Sie können es filtern, Sie können eine neue Versionsgeschichte hinzufügen. Mit der kostenlosen Version von Figma erhalten wir einen 30-tägigen Versionsverlauf Und das rettet die gesamte Grenzindustrie, aber Sie müssen zahlen. Wenn Sie auf die alte Datei zugreifen möchten. Wie Sie sehen können, ist es hier drüben, aber dafür müssen wir bezahlen. Und sagen wir, ich möchte ab dem 10. Dezember, 11 Uhr, auf die Datei zugreifen , wenn ich darauf klicke. Wie Sie an diesem Tag sehen können, habe ich gerade diese Seiten in der Click Card-App erstellt . Haben Sie fünf, machen Sie sich keine Sorgen Wir haben unser Design nicht verloren. Wenn ich einfach auf den Turn klicke, wird unsere aktuelle Version zurückgebracht, wie du hier sehen kannst. Gehen wir also zur Org-Branche. Und da ist noch eine Sache Du kannst deine jungfräuliche Geschichte nennen. Ich weiß, das ist ein wirklich cooler Teil, und das ist eine wirklich gute Übung. Aber das Problem bei mir ist , dass ich alleine arbeite, also nenne ich es nicht. Also erinnere ich mich an alles. Und ich muss nicht auf Virgin History eingehen. Nehmen wir an, Sie arbeiten mit Ihrem Team und wenn New Joini einige Fehler macht, können Sie einfach zu einer beliebigen ursprünglichen Geschichte gehen und Ihr altes Design sichern Das ist also alles und es gibt noch eine Sache. Okay, nehmen wir an, ich möchte diese Datei vom 19. Dezember duplizieren. Ich kann auf das Duplikat klicken und die Datei wird hier geöffnet. Lass mich dir zeigen, wie es funktioniert. Nehmen wir an, ich möchte das am 19. Dezember öffnen. Wir entwerfen es, wenn ich darauf klicke und wenn ich auf Duplizieren klicke, wird die Datei dupliziert und separat geöffnet, ebenso wie O hier in der Startseite. Und wenn 1719, wir haben diese Dinge gemacht, zum Beispiel eine Produktseite entworfen, und wir werden lernen, wie man Buttons mit Auto erstellt . Ja, das haben wir an dem Tag gemacht. Okay. Wenn ich nach Hause gehe, ist das, wie du siehst, die Kopie. Es zeigt, dass dies die Kopie dieses Hauptdesigns ist. Es sei denn, Sie möchten Ihr Design wiederherstellen. Derzeit sind wir also im Jahr 1919. Und wenn Sie dieses Design wiederherstellen möchten, wenn Sie darauf klicken, alles gelöscht, was Sie ab diesen beiden erstellt wird alles gelöscht, was Sie ab diesen beiden erstellt haben. Also wir, während Sie diese Taste drücken, und Sie können den Link kopieren und Sie können ihn auf jeden einstellen. Also das ist einfach. Okay, lassen Sie mich das schließen, weil wir das brauchen, und ich werde fertig sein, und ich will meine aktuelle Version. Das wird also meine aktuelle Version sein. Lass mich dir zeigen, wie ich es hier versaut habe. Wie Sie sehen können, habe ich beim Entwerfen der App durcheinander gebracht . Das mache ich immer. Wenn ich ein neues Projekt erstelle, denke ich immer, dass ich es diesmal nicht vermasseln werde, aber jedes Mal mache ich es so. Okay, es gibt also einige Punkte, an die du dich erinnern musst. Lokales Speichern ist kein Ersatz für das Speichern in einer Cloud, aber es ist eine großartige zusätzliche Miete. Virgin History speichert nur eine begrenzte Anzahl früherer Versionen Speichern Sie also mit Bedacht, und das Teilen lokaler Dateien erfordert im Gegensatz zu Cloud dieses Design ein manuelles Senden Okay, lassen Sie uns nun herausfinden, in welchem Fall wir den Versionsverlauf benötigen Nehmen wir an, Sie haben versehentlich eine wichtige Komponente oder einen ganzen Abschnitt gelöscht . Spar-Design, dann haben Sie ergomnupage gelöscht In dieser Version können Sie also immer noch in die Vergangenheit reisen und es wiederherstellen, was Ihnen unsere Arbeit erspart Ich weiß, manchmal treffen wir Designentscheidungen, wenn Sie es bereuen, zum Beispiel die falsche Farbe oder die falsche Form gewählt zu haben. Also keine Sorge, kehren Sie einfach zu früheren Versionen zurück, also wo es war, immer noch perfekt Dank unserer Jungfräulichkeit können wir selbstbewusst experimentieren, z. B. mutige neue Ideen ausprobieren oder mit einem anderen Layout experimentieren , ohne befürchten zu müssen, dass Ihre ursprüngliche Arbeit verloren geht Wenn die Dinge laufen, kehren Sie zu einer stabilen Version zurück und fangen Sie neu an. Spielen Sie mit einem anderen visuellen Stil oder probieren Sie verschiedene Designelemente , dass Ihr Prozess durcheinander Virgin History gibt Ihnen die Freiheit, Neues zu erforschen und zu wiederholen, ohne sich Gedanken darüber machen zu müssen erforschen und zu wiederholen, ohne sich Gedanken darüber machen zu Dank Virgin History können wir sehr reibungslos zusammenarbeiten Es kann Änderungen verfolgen, die von mehreren Teammitgliedern vorgenommen wurden , und problemlos zur vorherigen Version zurückkehren, falls jemand versehentlich wichtige Arbeiten schreibt Vergleichen Sie verschiedene Entwurfstiterationen und besprechen Sie , welche am besten funktioniert, auch wenn sie im Abstand von Tagen oder Wochen erstellt wurden Außerdem werden Konflikte oder Missverständnisse gelöst , indem überprüft wird, wer welche Änderungen vorgenommen hat, und wann ein klares Verständnis des Entwurfs gewährleistet ein klares Verständnis des sich also alles um lokale Dateien und auch Ich hoffe, du lernst das und übst nicht wie ich. Bitte speichere dich wie eine jungfräuliche Geschichte und gib ihr einen Namen, bitte gib ihr einen Namen. Ich weiß, dass das mein Stil ist, aber kopiere meinen Stil nicht, und ich bin nicht untätig in jungfräulicher Geschichte. Also benenne es um, sagen wir, du lernst heute, was wir heute gelernt haben. Hab ich vergessen. Okay, wir lernen etwas über Schatten und Schlagschatten im Schatten. Wir haben auch diese Knöpfe gemacht. Sie können eine Versionsgeschichte namens Effekte erstellen. Wir werden Effekte lernen. Wir haben also Freunde, Pigma File Subscription Wir werden jetzt mit Zuversicht weitermachen und entwerfen. 68. Figma-Komponenten Die Grundlagen: Willkommen zurück, Schüler, in diesem Spiel, wir tauchen ein in die leistungsstarke Welt der Komponenten in Figma Komponenten sind also wiederverwendbare Elemente , die eine Vielzahl von Vorteilen bieten sie zu einem wesentlichen Bestandteil des Designs und Workflows von Figma machen des Designs und Workflows von Figma Wie Sie sehen können, war meine Oberfläche etwas übersichtlicher , weil ich alles hier weggeworfen habe Weißt du, so einen Raum haben wir immer. Wir haben da immer unnötiges Zeug drin, also habe ich diesen Ort zu unnötigem Raum gemacht und alles hier drüben weggeschmissen. Okay. Lassen Sie uns nun mit dem Design beginnen und einige Komponenten erstellen. Wie Sie sehen können, haben wir diese Schaltfläche namens In den Warenkorb legen. Derzeit werden wir dazu eine Komponente hinzufügen. Um Komponente F zu erstellen, wählen Sie einfach ein Element aus. Derzeit wähle ich den Button. Und klicken Sie einfach auf diesen Button. Das heißt Komponente erstellen, und Sie können die Tastenkombination Strg Alt K verwenden , um eine Komponente zu erstellen. Wie Sie sehen können, ist es jetzt eine Komponente. Wie Sie also erkennen können, ob es sich um eine Komponente handelt oder nicht, wie Sie im Design-Panel sehen können, haben wir dieses Logo ausgeschnitten. Neben dem aufgedruckten Rand befinden sich vier Diamanten. Wie Sie sehen können, ändert sich auch die Farbe des Rahmens , wenn ich darauf klicke. Wie Sie sehen können, ist das ein Blau, aber die Komponentenfarbe ist immer dieses Violett Ein wesentlicher Vorteil von Komponenten ist die Wiederverwendbarkeit Wenn ich zum Acid-Panel wie diesem gehe, habe ich, wie Sie an der Eingabe sehen können, wie Sie an der Eingabe sehen können, diesen Act-Button als Komponente Ich kann das einfach so an eine beliebige Stelle in meinem Design ziehen. Und jede Änderung, die ich an der Master-Komponente vornehme, wird sich auf die gesamte Instanz auswirken. In unserem Fall ist das die Master-Komponente und das sind die untergeordneten Komponenten. Es wird auch als Instant bezeichnet. Wenn ich also Änderungen vornehme, sagen wir, wenn ich die Größe ändere, ändert sich auch die Größe auf jeder Seite Wenn ich den Punkt ändere, funktioniert das auch damit. Wie Sie sehen können, habe ich 14 gemacht, und überall sind es jetzt 14. Okay. Nehmen wir an, ich möchte hier ein paar Änderungen vornehmen. Der Text sollte so lauten, wie wir sagen, inzwischen, und das sollte eine Zahlung sein. Wie Sie sehen können, bleiben die Hauptkomponenten unverändert, wenn ich Änderungen an untergeordneten Komponenten vorgenommen Hauptkomponenten unverändert, wenn ich Änderungen habe. Es ändert sich nicht. Nehmen wir an, ich nehme Änderungen an der Hauptkomponente im Pad wie folgt vor. Nur die Komponente, die ich nicht bearbeitet habe, wurde geändert, und andere Komponenten, die ich zuvor überschrieben habe, bleiben unverändert. Also lass mich das machen Wie Sie Ihre Hauptkomponente unterscheiden , ist der Moment, dass, wenn ich zum Ebenen-Panel gehe und Sie die Instanz auswählen, wie Sie sehen können, sie mit einem Holler-Diamanten geliefert wird, und dieser kommt mit einem Diamanten Wie Sie sehen können, hat es einen Diamanten. Nehmen wir an, das Design ist zu groß und Sie wissen nicht, welche Ihre Hauptkomponente ist. Sie möchten also zu Ihrer Master-Komponente gehen , um einige Änderungen vorzunehmen, z. B. wenn Sie die Größe ändern möchten Nehmen wir an, Sie befinden sich derzeit auf dieser Seite und Zahlungsseite und möchten nur zur Master-Komponente wechseln Sie können einfach mit der rechten Maustaste darauf klicken und „Gehe zur Hauptkomponente“ und „ Gehe zur Hauptkomponente“ auswählen . Wie Sie sehen können, gehen Sie zur Hauptkomponente, die sich hier auf der Protektor-Seite befindet. Und Sie können Ihrer Komponente auch einen Namen geben. Ich weiß, dass ich nichts benenne, aber es ist wirklich eine gute Praxis, Ihre Komponente zu benennen, insbesondere wenn Sie es mit mehreren Instanzen zu tun haben. Es hilft Ihnen, schnell verschiedene Versionen oder Variationen Ihrer Komponenten zu identifizieren . Und Komponenten sind nicht auf einfache Elemente wie Schaltflächen beschränkt . Sie können komplexe Designs in Komponenten umwandeln. Sie können beispielsweise Ihr Logo in eine Komponente umwandeln, sodass Sie dieses Logo in eine Komponente die Karten in eine Komponente umwandeln können. Sie können alles zu einer Komponente machen, wie diese Navigationsleiste zu einer Komponente. Und da ist eine Sache. Nehmen wir an, wir haben einige Änderungen vorgenommen, z. B. die Farbänderung, lassen Sie mich einen Farbverlauf daraus machen. Wenn ich daraus einen Farbverlauf mache, gefällt es mir aus irgendeinem Grund nicht und ich möchte einfach alles zurücksetzen. In diesem Fall können Sie das verwenden, indem Sie einfach das Element auswählen und mit der rechten Maustaste auf Alles zurücksetzen klicken. Es wird alles zurückgesetzt, Dinge wie der Telefontext sowie die Farb-Opio-Schaltfläche Einfach ausgedrückt, werden Instanzen durch das Duplizieren der Master-Komponente erzeugt, wodurch sie Kopien mit der Erstellung zusätzlicher Master-Komponenten verbinden mit der Erstellung zusätzlicher Das Verständnis und die Nutzung der Komponenten grundlegender Bedeutung, um die Fähigkeiten des Master-Designs zu maximieren Wenn Sie sich also an diesen Arbeitsablauf gewöhnen, werden Sie feststellen, dass Sie eine Menge wiederverwendbarer Elemente erstellen wiederverwendbarer Elemente die für Designeffizienz Also Studenten, hier dreht sich alles um die Komponenten. Als Nächstes werden wir mehr über Komponenten lernen. Es gibt also viele Dinge, die Sie erstellen können verschiedene Komponenten, wie Sie Varianten erstellen können. Sie können sie entweder in den Dunkelmodus oder in den Hellmodus versetzen. Sie können im Designfenster eine bestimmte Schaltfläche erstellen , um deren Farbe Ihren Bedürfnissen entsprechend zu ändern deren Farbe Ihren Bedürfnissen entsprechend zu Also, Schüler, hier dreht sich alles um Komponenten. Und wir sehen uns in der nächsten. 69. Komponenten in Figma aktualisieren, ändern, bearbeiten und zurücksetzen: Jeder, auf diese Weise vertiefen wir uns in die Komplexität des Aktualisierens, Änderns, Zurücksetzens und Verschiebens von Schreibvorgängen für Komponenten und die Struts für Komponenten Und außerdem habe ich eine raffinierte Abkürzung, um zwischen mehr Licht und mehr Dunkelheit umzuschalten, also lass Ich habe also zuvor gelernt, wie man Komponenten erstellt Wählen Sie ein Objekt aus, gehen wir zu diesem Menü und klicken Sie einfach auf Komponente erstellen Und im Act-Panel haben wir unsere Komponente, und wir können sie einfach ziehen und als Instanzen wie diese verwenden Lassen Sie uns nun untersuchen, wie Instanzen aktualisiert werden. Wenn Sie Änderungen an bestimmten Instanzen vornehmen möchten, finden Sie die Master-Komponente, indem diese Option auswählen, und Sie können zur Hauptkomponente wechseln, und das ist die Hauptkomponente, und Sie können eine Anpassung vornehmen, die sich diese Instanzen auswirkt. Aber was ist, wenn Sie eine Änderung direkt an den Instanzen vorgenommen haben und diese Änderungen zurück auf den Master übertragen möchten diese Änderungen zurück auf den Master übertragen Jetzt können Sie also die Instanzen wie diese auswählen. Aber was ich in diesem Fall tun möchte, ist, dass unser Kunde möchte, dass meine Kontoseite in einem dunklen Modus angezeigt wird Also werde ich das so in den Gesprächsmodus ändern. Wie Sie sehen können, ist die Navigationsleiste nicht so sichtbar. Es ist sichtbar, aber die Farbe ist dunkel und ich möchte, dass es weiß ist. Also werde ich einen Kampf wie diesen wählen, aber die Symbole sind nicht sichtbar. Also möchte ich es in Schwarz ändern. Ich halte die Umschalttaste gedrückt, wähle alle Symbole und die Auswahlfarbe aus und markiere. Jetzt möchte ich alle Dinge aktualisieren die diese Navigationsleiste hat, wie das weiße Bedienfeld und die Schaltfläche ist Tag. Also möchte ich das ganze Update in dieser Hauptkomponente haben. In diesem Fall kann ich also einfach mit der rechten Maustaste darauf klicken und zur Hauptkomponente wechseln und Änderungen an der Hauptkomponente vornehmen. Und wie Sie in der Hauptkomponente sehen können, ist dies die Hauptkomponente Ändern Sie alles, die Farbe des Bedienfelds sowie die Farbe des Symbols. Im Moment möchte ich nicht, dass meine Hauptkomponente das ist, also werde ich das vorerst rückgängig machen. Nehmen wir an, Sie haben einen Anruf von einem Kunden erhalten und der Kunde hat gesagt, ich will diese Farbe nicht. Ich möchte, dass die Farbe dunkel ist. In diesem Fall können Sie also einfach die Komponente direkt darauf auswählen und alle Änderungen zurücksetzen. Wie Sie sehen können, ändern alle Dinge wie folgt in eine Hauptkomponente. Okay, also ich möchte dir hier eine Sache zeigen, also lass mich eine weitere Kopie meines Kontos machen. Also das ist die Instanz und diese ist auch sofort da. Aber ich werde diesen löschen. Und ich möchte, dass dieser Teil ein heller Modus ist, weil das dunkel ist und die dunkle Farbe nicht zu diesem passt, also möchte ich das in einen hellen Modus machen, und ich werde alles in Schwarz ändern, so wie hier. Aktuell möchte ich das anhängen, also de attach, de attached instance. Jetzt ist es ein neuartiger Rahmen. Es ist keine Komponente oder Instanz. Ich möchte das zu einer Komponente machen. Gleichzeitig möchte ich dieses Formular als Komponente zwei erstellen. Gleichzeitig können wir mehrere Dinge zu Komponenten zusammenfassen. Lassen Sie uns beide auswählen, und wenn ich zu Komponenten gehe, haben wir die Option „Mehrere Komponenten erstellen“. Und jetzt, wenn ich zum Act-Panel gehe. Wie Sie sehen können, haben wir mehrere Komponenten. Der erste ist ein heller Modus und bald der dunkle Modus. Dies ist eine echte Zeitersparnis, insbesondere wenn Sie es mit ähnlichen Designelementen zu tun haben . Und es hilft Ihnen , wenn Sie dasselbe Element in verschiedene Elemente umwandeln möchten . Derzeit sind dies die Hauptkomponenten, daher wird es damit nicht funktionieren. Nehmen wir an, ich habe einen anderen Frame wie diesen und ich möchte ihn so ändern, dass er zu diesem wird. In diesem Fall kann ich also t gedrückt halten und es in den dunklen Knoten Naba ziehen Wenn ich es so wegwerfen würde, solange ich sehe, dass es sich geändert hat, kann ich dasselbe mit diesem machen Ich halte es gedrückt und ziehe es in diese Komponente und lege es auf die Aber wenn ich versuche, das mit unserer Hauptkomponente zu machen , wird es nicht funktionieren Es wird auf dieser Nioba sein. Es wird den Ort nicht tauschen, wie es bei den Instanzen der Fall war Also lass es mich dir auf einfache Weise zeigen. Nehmen wir an, wir haben diese Instanz hier und unser Kunde möchte, dass es mehr dunkel wird. In diesem Fall können wir die Alt-Taste gedrückt halten und unseren Dunkelmodus wählen, ihn mit der rechten Maustaste ziehen und ihn einfach löschen Wie du sehen kannst, ist es in dieses Dunkel vertauscht. Und denken Sie daran, dass es bei den Hauptkomponenten nicht funktioniert. Dies sind die Hauptkomponenten, daher wird es nicht funktionieren. Und das sind die Instanzen, also wird es auf ihnen funktionieren. Und Sie können es auch über das Design-Panel ändern. Also, wenn du deine Instanzen so anklickst und sie in den Lichtmodus ändern möchtest. Sie können sehen, dass das Menü wie Bild 49 aussieht, und wir können es auf diese Weise in den Lichtmodus ändern. Es zeigt Ihnen also alle Vermögenswerte. Derzeit sind wir also in meinem Konto und wir haben auch die Option Produktdetails. Wir können das auch einschalten. Und das Gleiche gilt für diese, nehmen wir an, das ist die Instanz, und ich möchte sie mit dieser wechseln, damit ich sie einfach gedrückt halten und ziehen und auswerfen kann Wie Sie sehen können, funktioniert es auch mit einer Schaltfläche zum Ausschneiden. Also Student, ich hoffe, du verstehst, wie man Komponenten zurücksetzt, wie man sie aktualisiert, wie man sie überschreibt und was wir lernen, wie man sie austauscht. Das ist also ein Wrapper für unseren Überblick über die Aktualisierung und Verwaltung von Komponenten in Also mach dich im nächsten Video auf die Motive und Tricks gefasst. 70. Das Löschen von Hauptkomponenten in figma ist unmöglich (Tipps & Tricks von Komponenten): Willkommen zurück, alle zusammen. In diesem Angebot werden wir uns über Tricks und Tipps zu Komponenten informieren. Also Tricks wie zum Beispiel, wie wir unsere gelöschten Komponenten wiederherstellen können, wie wir Masterkomponenten aus anderen Designdateien in unsere Hauptdesigndatei importieren oder exportieren aus anderen Designdateien in unsere Hauptdesigndatei und einige andere Dinge. Fangen wir also an. Als Erstes zeige ich Ihnen, was passiert, wenn Sie versuchen, Ihre Master-Komponente zu löschen. Wie Sie sehen können, ist dies die Hauptkomponente in unserem Design. Sie besteht auch aus Schichten, wie Sie die vier Diamanten sehen können Das ist eine Hauptkomponente, und das ist die Instanz. Nehmen wir an, ich habe irgendwie meine Master-Komponente gelöscht. Nehmen wir an, ich habe etwas entworfen, und mir ist nicht bewusst, ob das die Master-Komponente oder das ist die Instanz. Wie Sie sehen können, gibt es keinen Unterschied zwischen Instanz und Master-Komponente, wenn wir uns auf einem Frame befinden . Aber wenn ich das draußen verfolge, wie Sie sehen können, steht es hier drüben geschrieben, wir können auch das Symbol sehen. Es ist also im Rahmen nicht sichtbar. Nehmen wir an, ich gehe davon aus , dass dies der Fall ist. Und wenn ich diesen lösche, wie Sie sehen, wird er auch aus dem Ebenenfenster gelöscht. Aber jetzt möchte ich das zurückbringen. In diesem Fall brauchen wir die Instanz. Mit Hilfe der Instanz können wir das also wiederherstellen. Wir müssen also nur mit der rechten Maustaste darauf klicken und Sie können zur Hauptkomponente gehen und die Hauptkomponente wiederherstellen. Klicken Sie darauf, wie Sie sehen können, unsere Komponente ist zurück. Die Master-Komponente ist zurück und sie befindet sich auch hier im kleineren Bereich. Betrachten wir nun die Instanzquelle aus einer anderen Designdatei, vielleicht aus der Figma-Community Nehmen wir nun an, Sie haben statt einer Komponente eine Instanz mitgebracht statt einer Komponente Also, wenn ich die Komponente hier einfüge, tut mir leid, sofort. Und wenn ich nicht weiß, woher ich diese Instanz importiert habe. Also und ich möchte zu dieser Datei zurückkehren. In diesem Fall kann ich also darauf klicken und darauf klicken und zur Hauptkomponente wechseln. Und es wird diese Datei tatsächlich öffnen und Ihnen zeigen, woher Sie diese Komponente haben. Wie Sie sehen können, zeigt es also dass Sie diese Instanz haben. Gehen wir nun zum dritten über. Nehmen wir an, wir haben diese Icon-Datei, und wenn ich zur Objektbearbeitung übergehe, eher wie in dieser, und wenn ich Änderungen vornehme, wie Sie sehen können, passiert das auch mit der Instanz. Aber lassen Sie mich das Objekt für mehr verlassen. Lassen Sie mich die Instanz dieser Kopie kopieren und ob ich sie hier in meine Click-Cut-App-Designdatei einfüge meine Click-Cut-App-Designdatei und wenn ich sie in die Hauptkomponente ändere, wenn ich so etwas ändere, also wie Sie sehen können, passiert es mit dieser Datei. Aber wenn ich meine CLI-Karten-App öffne, ist sie nicht hier, also wird sie nicht aktualisiert. Änderungen sind also nur für die Hauptdatei verfügbar. Wenn wir also die Bibliothek verwenden, werden in diesem Fall Änderungen vorgenommen, aber derzeit importieren wir aus anderen Dateien aus dieser Datei in diese Datei. Es wird also hier nicht aktualisiert. Lassen Sie uns nun auf das Konzept eingehen , dass Komponenten oder Teile davon nicht gelöscht werden können. Wenn Sie etwas innerhalb einer Instanz löschen , z. B. beim Ausblenden einer Ebene, verschwindet es nicht vollständig Es wird lediglich ausgeblendet. Also lass mich dir zeigen, wie es funktioniert. Also haben wir diese Navigationsschaltfläche erstellt, und wie Sie sehen können, ist dies die Instanz, und das ist die Hauptkomponente, und wenn ich etwas aus der Instanz lösche, wie Sie im Ebenenfenster sehen können, wird es nicht gelöscht. Sie ist versteckt. Kann einfach darauf klicken und es ist wieder sichtbar. Ich kann das hier so machen. Wenn Sie es jedoch dauerhaft entfernen möchten, müssen Sie zur Hauptkomponente gehen und sie dort löschen. Also wenn ich hier gelöscht habe. Sie können also sehen, dass es jetzt komplett gelöscht ist, und es ist auch nicht hier versteckt. Also lass mich das rückgängig machen. waren also all die Tricks und Tipps zu den Komponenten. Ich hoffe, das gibt Aufschluss darüber, warum Hauptkomponenten und ihre Teile in Figma nicht einfach erweitert werden können Und wenn Sie diese Nuancen verstehen, können Sie sich der Welt der Komponenten zurechtfinden Machen Sie sich auf den Weg zum nächsten Video, in dem wir uns mit den aufregenderen Eigenschaften der Figma-Komponenten befassen werden den aufregenderen Eigenschaften der . Viel Spaß beim Entwerfen 71. Hauptkomponenten verschieben und wie du deine Komponenten organisieren kannst: Willkommen Max Designer. Heute werden wir die besten Methoden für organisierte Hauptkomponenten in Figma besprechen für organisierte Hauptkomponenten in Figma Derzeit werden wir sie vielleicht überall herumwerfen, aber es gibt eine besser organisierte Art, sie zu verwalten, und ich werde Ihnen meine Best Practices zeigen, die von vielen Designern häufig angewendet werden In Ihrem Acid-Panel haben Sie vielleicht eine lokale Komponente wie diese, meinen Account von dieser Schaltfläche aus sowie diese untere Navigationsleiste und auch eine Komponente wie diese, und auch eine Komponente wie die im leeren Bereich herumliegt, und eine Komponente könnte sich im Frame befinden, wie diese. Der Schlüssel hier ist also, die Hauptkomponente auf der eigenen Seite zu belassen . Wir werden separate Komponenten für Seite vier erstellen und eine Instanz wie diese verwenden, eine Instanz in unserer Designdatei. Also werde ich zuerst einige Komponenten erstellen. Derzeit haben wir einige Karten sowie eine obere Navigationsleiste und eine untere Navigationsleiste. Derzeit habe ich ihnen keinen Namen gegeben, sie sind also nur ein Frame. Lassen Sie mich sie also benennen. Wie Sie sehen können, ist das Frame 31, also werde ich sie nennen Okay, also habe ich eine Komponente wie diese benannt. Ich habe diesem Logo einen Namen gegeben, aber das ist jetzt der Rahmen. Ich habe auch diese Karte benannt, die kleinen Karten, sowie diese, die großen Karten, sowie diese Atovd-Schaltfläche Und ich nenne diesen Tov-Button, und das ist die untere No-Leiste, und das ist die obere Navigationsleiste und das ist die obere Navigationsleiste Weil wir unsere Hauptkomponente außerhalb des Frames verwenden wollen und wir wollen Instant in einem Frame verwenden Lass es mich dir so zeigen. Das ist die Instanz und das ist der Hauptwaschbär, also werden wir ihn ausprobieren. Wir werden das hier behalten wann immer wir diese Komponente benötigen, damit wir sie als Sofortinstanz wie diese verwenden können. Lassen Sie mich sie in eine Komponentenkomponente umwandeln. Sie sind auch Bestandteil. Sie sind auch Bestandteil. Sie sind auch Bestandteil. Okay, also ich habe eine Komponente in Hmpitch gemacht. Ich habe diese vier Komponenten im Intro-Pitch, ich habe dieses Logo und wir haben die Ato-Taste Gehen wir nun zum Ebenen-Panel. Und lass uns auf dieses Plus-Symbol klicken. Ich werde sie Komponenten nennen. Und wir können sie einfach von hier wegbringen. Als ob das die Komponente ist. Lassen Sie uns nun unsere Hauptkomponente in diesen Komponentenbereich verschieben . Also ist derzeit leer, und das ist unsere Navigationsschaltfläche. Obere Navigationsschaltfläche, gehen wir zu den Komponenten über. Wenn ich zu den Komponenten gehe, wie Sie sehen können, wo es sich befindet, finde ich es okay, es ist hier drüben, Frame 48. Und lassen Sie uns alle verschieben. Aber zuerst muss ich meine Hauptkomponente auf diese Weise von den Rahmen lösen meine Hauptkomponente auf diese Weise von den Rahmen Okay, lassen Sie mich auch das herausbringen und lassen Sie mich Ihnen die Instanz bringen. Das Gleiche gilt für diesen. Also habe ich zum Beispiel drei Komponenten herausgebracht. Lassen Sie uns also alle auswählen. Sie können also die Umschalttaste drücken, die Umschalttaste gedrückt halten alle auswählen, mit der rechten Maustaste darauf klicken und einfach auf den Moot-Pitch und die Komponenten Jetzt haben wir alle Komponenten hier. Du kannst sie auch gut organisieren , zum Beispiel den einzigen Bereich für Buttons oder nur den Bereich für Nap-Bars, nur den Bereich für Autos. Lassen Sie mich Ihnen zeigen, wie sie sich auf dieser Seite, wie Sie sehen können, wirklich hübsch organisieren. Erstens haben sie eine Statusleiste, iPhone P max. Danach haben sie iPhone Pro erst, wenn sie iPhone Pit Plus haben. Sie organisieren sich also ziemlich gut. Und wie Sie sehen können, unsere Organisation. Wir haben also nicht so viele Komponenten. Ich zeige Ihnen nur, wie es sich bewährt hat, Komponenten auf die Komponentenseite zu verschieben und sie dann als Instanz zu verwenden. Nehmen wir an, ich möchte hier die Schaltfläche „Zur Karte hinzufügen“ hinzufügen. In diesem Fall kann ich einfach zum Asset-Panel gehen und einfach nach der Schaltfläche „Zur Karte hinzufügen“ suchen und sie einfach so ziehen. Ich kann es hier in meinem Design ansprechen. Okay, das ist also eine sehr gute Praxis. Wie Sie sehen können, sieht unser Design-Panel übersichtlicher und übersichtlicher aus. Und wenn ich zu Komponenten gehe, sind unsere Hauptkomponenten auch sehr gut organisiert, wie Sie sehen können . Das ist also viel besser, als die Verteilung auf verschiedene Seiten zu haben . Wenn Sie also mehrere Seiten in einer Datei haben, ist es eine gute Idee, eine Mittelseite für alle Hauptkomponenten wie diese zu erstellen. Auf diese Weise sind sie leicht zugänglich und stören Ihr Design nicht Und denken Sie daran , dass Sie die Suchfunktion zu Gunsten verwenden können die Suchfunktion zu Gunsten , um Komponenten schnell zu finden, wie wir es zuvor mit der Schaltfläche zum Hinzufügen zum Ausschneiden getan haben Wenn Sie nach einem Logo suchen möchten, können wir einfach Logo eingeben und es wird uns das Logo angezeigt, und wir können es einfach ziehen und wir können es unseren Designs hinzufügen Das ist besonders praktisch, wenn du einen lockereren, organisierten Stil bevorzugst. Und es gibt noch einen weiteren Tipp: Verwenden Sie Leertaste in einer Suchleiste , um alle Komponenten aufzulisten. Lassen Sie mich Ihnen zeigen, wie es funktioniert. Wie Sie in der Suchleiste sehen können, haben wir also nichts. Wenn ich also Leerzeichen eintippe, alle Komponenten wie folgt dargestellt, und wir können sie einfach ziehen Ich weiß, das ist ein inoffizieller Weg , das zu tun, aber es ist sehr einfach Wie Sie sehen können, haben wir alle unsere Komponenten und wir können sie sehen und wir können es einfach so verfolgen und wir können es in unseren Designs verwenden Es kann uns einfach helfen, all unsere Komponenten auf einmal zu sehen , ohne dass Rahmen benötigt werden. Denken Sie also daran, dass mit dem Wachstum Ihres Projekts und insbesondere, wenn Sie mit anderen zusammenarbeiten, Aufrechterhaltung einer Organisationsstruktur für Ihre Hauptkomponenten von entscheidender Bedeutung wird Egal, ob Sie eine übersichtliche Seite oder eine Suchfunktion bevorzugen , finden Sie die Methode, die für Sie am besten geeignet Ich hoffe, dieses Video über organisierte Hauptkomponenten war hilfreich Also Stadion für mehr Tricks und Tipps wie diesen. Das sind also alle Tricks und Tipps zum Organisieren unserer Projektdatei sowie unserer Komponenten in einer separaten Datei. Also, hier dreht sich alles um Komponenten. So wie wir sie organisieren. Wir haben einen separaten Test dafür gemacht. Wir haben auch den Trick und die Tipps dafür gelernt. Hier dreht sich also alles um Komponenten. Also lasst uns unterstützen und wir sehen uns beim nächsten Mal. 72. Best Practices von Figma benennen und organisiert bleiben: TV-Designer. tauchen wir in die Welt der Namenskonventionen ein. Insbesondere die Verwendung von Hardware-Schrägstrich in Figma. Sie haben wahrscheinlich bemerkt, dass die verwendete Konvention verwendet wird, und heute werden wir untersuchen, warum sie wichtig ist und wie sie Ihnen helfen kann, Ihre Komponenten effektiv zu organisieren Manche Leute haben es vielleicht gesehen und andere nicht. Lassen Sie mich Ihnen zeigen wie die Benennungskonvention im Acid-Bereich oder für die Komponente funktioniert. Wie Sie sehen können, haben wir diese dynamische Zeile in der Statusleiste geöffnet , und wenn ich sie so erweitere. Wie Sie sehen können, hat sie in der Statusleiste den Schrägstrich P für iPhone 13 und wenn ich zum Asset-Panel gehe und, wie Sie sehen können, wenn ich zu Status und Home gehe, das Symbol anders Sie verwenden dafür Flash, haben sie die Statusleiste Home und danach Status B und H Ba Schrägstrich Ba Schrägstrich Phon 13. Sie sagen uns also, das ist für Phon 13, und da sie eine Hauptkomponente haben, haben wir Mini, dann P und P max Also werden wir dasselbe tun, um unsere Komponenten zu organisieren. Wenn ich also zu Komponenten gehe, habe ich, wie Sie sehen können, diese Schaltfläche „Tippen Sie auf Mo“ erstellt. Lassen Sie mich das zuerst löschen, weil wir lernen werden, wie man dieses Wortspiel erstellt Lass uns zum Act-Panel gehen. Und wie Sie sehen können, ist es unorganisiert. Es ist überall überladen und wir haben nicht mehrere Tasten Wie Sie sehen können, haben wir diese untere Leiste, und nehmen wir an, wir entwerfen auch eine Navigationsleiste im Lichtmodus Derzeit ist dies also die Instanz, also werde ich sie entfernen. D Attach-Instanz, und ich werde diese Navigationsleiste Schrägstrich nennen diese Navigationsleiste Schrägstrich Sie müssen einen dunklen Modus haben und dieser muss einen helleren Dieser ist das Licht, dieser ist das Dunkel. Ich werde also sehen, dass sich im Act-Panel nichts geändert , weil wir das nicht zu einer Komponente gemacht haben. Lassen Sie mich diese auswählen und eine Komponente erstellen. Und jetzt, wenn ich zu Komponenten gehe. Wie Sie sehen können, sind wir zu Nava gekommen . Der erste ist der Lichtmodus Entschuldigung, der erste ist dunkler und der zweite ist der helle Modus Ich weiß, wenn du verwirrt bist , weil die Farbe anders ist, also lass mich eine neutrale wählen. Okay, jetzt ist es aktualisiert. Wie Sie sehen können, werden wir diesen für den Dunkelmodus und diesen für den Lichtmodus verwenden. Also können wir dasselbe mit diesen Dingen machen. Also lass mich die zweite Farbe dafür wählen. Ich nehme den roten . Okay, es sieht cool aus. Okay, zuerst muss ich es anhängen. Dann lass es mich benennen. Schrägstrich für den Dunkelmodus, und dieser muss im Hellmodus sein Okay, das ist jetzt nur ein Frame. Lass mich daraus eine Komponente machen. Wenn ich nun zu den Komponenten gehen kann und es eine Schaltfläche zum Ausschneiden gibt, und wenn ich darauf klicke, wie Sie sehen können, haben wir zwei Schaltflächen. Der erste ist der Dunkelmodus und der zweite ist der Hellmodus. Okay, lass mich dir ein Beispiel zeigen. Wir haben diese Basler Icons hinzugefügt. Wenn ich zum Asset-Panel gehe, benennen sie, wie Sie sehen können , ihre Symbole auch so. Erstens haben sie eine Gliederung. Danach haben sie wieder Outline und danach Marken. Wenn ich darauf gehe, wie Sie sehen können, alle Markensymbole hier vorhanden Wenn also jemand diese Datei in sein Design importiert, wird er wissen, dass dieser Abschnitt für Marken ist und dieser Abschnitt für allgemeine Symbole ist und dieser für Navigationen wie diese Diese Namenskonvention wird noch wichtiger , wenn Sie es mit Variablen zu tun haben Welches wird in den kommenden Videos untersucht. Zusammenfassend lässt sich sagen, dass die Benennungskonvention mit vier Schrägstrichen in FIMMA ein leistungsstarkes Tool zur Organisation von Komponenten ist Es hilft dabei, eine umfangreiche Struktur zu erstellen, es Ihnen und Ihrer Zusammenarbeit erleichtert , zu navigieren und die benötigten Komponenten zu finden Geben Sie also im nächsten Video an, in dem wir die Variablen bis dahin miteinander verknüpfen werden . Fröhliches Design. 73. Klassenprojekt 12: Bausteine: Komponenten in Figma meistern: Meine Schüler, es ist Projektzeit. Okay, bis dahin werden wir eine Menge über Komponenten lernen , wie man Komponenten erstellt, wie man sie zu separaten Seiten hinzufügt, wie man sie im hellen Modus und im dunklen Modus organisiert. Lassen Sie uns also als Erstes einen Stilbereich für die Erstellung unserer Schaltflächen erstellen . Also übergebt Figma, neue Seite der Wiper-Marke namens Components. Es ist unser Button-Hauptquartier. Kein Button-HQ, aber wir werden alle Komponenten hier platzieren und sie organisieren Nun, zweitens, ist es an der Zeit, die Entwickler Superkräften und das Basteln und das Hinzufügen von Buttons zum Ausschneiden zu lassen, und dann könnt ihr sie sowohl in den dunklen als auch in einen hellen Modus wie diesen versetzen Okay, diese Tasten sind also ein dynamisches Duo. Lassen Sie uns sie also zusammenhalten, indem wir einen Schrägstrich verwenden. Benennen Sie Conson in diesem Asset-Panel. Auf diese Weise sind sie immer bereit, so zu feiern. Und jetzt, nachdem Sie Ihre Aufgabe abgeschlossen haben, den Screenshot und reichen Sie ihn in unser Projektpanel ein. Und Sie können auch zwei Buttons wie diese, kleinere Version davon erstellen . Also haben wir das automatische Layout bereits hinzugefügt. Also lass mich das kopieren Okay, also muss ich es zuerst de anhängen. Okay, D anhängen. Lassen Sie mich diesen kleinen Lichtknopf für den Einkaufswagen in Slash and Small umbenennen für den Einkaufswagen in Slash and Small Klein und wieder unser Schrägstrich. Fimo, wir wissen, dass das kleiner ist und lass mich noch eins wie dieses machen, und ich werde es schaffen machen, und ich werde es Das ist hell, das wird dunkel sein. Jetzt ändern wir die Farbe. Derzeit ist es blau. Also lass es mich rot machen. Lassen Sie uns nun eine Komponente erstellen. Okay, also ich muss es so benennen. Derzeit ist es ein Knopf an der kalten Taste. Danach habe ich mehr Licht hinzugefügt, aber ich muss nicht mehr Licht hinzufügen, also kann ich einfach etwas kleines hinzufügen und es muss hell sein. Okay. Wenn ich auf eine leere Stelle klicke, wird sie, wie Sie sehen können, zur Schaltfläche „Zum Ausschneiden hinzufügen“ hinzugefügt . Jetzt wissen wir also, dass das der Dunkelmodus ist, das ist heller Schimmel und das ist der hellere Modus, und wir können das Gleiche hier machen. Also werde ich es so machen. Etwas kleiner und dunkler. Also lass uns auf den leeren Bereich klicken. Okay, es wurde also nicht hinzugefügt, weil es ein Frame ist, also lass mich es als Komponente erstellen. Okay, jetzt ist er hinzugefügt, der kleine Dunkelmodus. Okay, das sind also die Anweisungen, die du befolgen musst, um etwas zu erstellen. Erstellen Sie also zuerst eine Komponente und bewegen Sie Ihre Komponente dann wie folgt in diesen Komponentenabstand Erstellen Sie jetzt ein dunkles Mehr und ein helles mehr wie dieses. Und jetzt haben wir auch gesehen , wie man eine kleinere Version davon erstellt und einen Sündenschuss macht und ihn in unsere Präzision hochlädt. Also das ist die Figma fantastisch. Sie haben gerade die Kunst gemeistert, anklickbare Elemente zu erstellen , um Action voranzutreiben Wenn Sie mit ihnen experimentieren können, können Sie verschiedene Farben und Schriftarten hinzufügen Also total kreative Wahl. Also das ist für dieses Projekt. Also folge dieser Anweisung und unterwirf sie mir. Also von. 74. Figma-Komponenten und Varianten für Anfänger: Designer sind davon überzeugt, dass wir das Konzept der Variablen in Figma untersuchen der Variablen in Figma Variablen oder Varianten, wie Figma sie jetzt nennt. Unsere Art, mehrere Komponenten zu einer Einheit zu kombinieren, was es einfacher macht, zwischen verschiedenen Status oder Stilen zu wechseln Wie Sie sehen können, wurde dieses Fenster auf meinem Bildschirm angezeigt, und wenn ich mit der Maus darauf fahre, wie Sie sehen können, ändert es sich in diese Tarplfarbe und wenn ich darauf klicke, wird es rot Also ich werde das mit Varianten oder Variablen machen . Okay, lass mich das schließen. Lass mich zum Design übergehen. Das sind also die Varianten. Lassen Sie uns nun lernen, wie man Komponenten erstellt. Lassen Sie mich sie also zuerst löschen. Okay. Also, wie Sie sehen können, habe ich diese Schaltfläche zum Ausschneiden von Werbung. Derzeit ist es eine Instanz. Wie Sie sehen können, ist es sofort sichtbar es hat diesen Diamantknopf. Aber es ist hohl und dieser ist ein Bestandteil, weil er vier Diamanten enthält Okay, also ich möchte, dass das eine Komponente ist, keine Instanz. Wenn Sie eine Variante erstellen möchten, muss es sich um eine Komponente handeln. Lassen Sie mich es also zuerst de anhängen, D eine Instanz anhängen. Okay. Jetzt ist es ein Rahmen. Rahmen ist Schnitt hinzufügen. Der Name der Schaltfläche ist at cut. Wenn ich das auswähle und wir die Tastenkombination Strg K verwenden können, können wir auch diese Taste verwenden. Jetzt ist es eine Variante. Entschuldigung, es ist eine Komponente. Okay, also wenn ich zum Panel gehe, zu diesem Panel. Also, wie Sie sehen können, ist das jetzt die Komponente. Also möchte ich eine Variante erstellen. Also werde ich das als Instanz verfolgen, und ich werde es wieder de anhängen und die Farbe so in dieses Blau, Dunkelblau einordnen. Ich glaube, es wird auch Schwanzblau genannt. Ich bin wirklich verwirrt mit Farben. Also, wenn du die Farbe kennst, lass es mich bitte wissen. Okay, wir haben also zwei Knöpfe, aber dieser ist die Komponente und dieser ist der Rahmen. Also lass mich das in eine Komponente umwandeln. Du bist eine Komponente. Okay. Wenn ich nun beide stähle, wie Sie auf Designpaneelen sehen können, haben wir die Möglichkeit, sie als Variante zu kombinieren Wenn ich also darauf klicke, ist es jetzt eine Variante geworden. Es wird auch durch die gepunkteten Linien, das gepunktete Linienfeld, angezeigt das gepunktete Linienfeld Wenn ich jetzt zu den Vermögenswerten gehe, haben wir, wie Sie sehen können, diese Schaltfläche „Zur Karte hinzufügen“, und es gibt eine Nummer zwei, darunter zwei Varianten Und wenn ich das hier in diesen Kategorienbereich ziehe, gebe ich zu, dass es so hier drüben ist. Und wenn ich zum Design-Panel gehe, wo du eine Schaltfläche zum Hinzufügen zum Ausschneiden siehst, ist das die Variante. Dieses Symbol bedeutet Variante. Und das Anwesen ist derzeit geboren. Wir können es umbenennen und das ist derzeit Standard, weil wir es umbenennen, denke ich. Also lass mich es umbenennen, also lass mich zu Asset gehen , weil beide Standard sind. Deshalb funktioniert es nicht. Aber wie Sie sehen können, wird die Eigenschaft standardmäßig verwendet, wenn ich darauf doppele . Also ich möchte, dass das so ist, sagen wir mal. Ihr. Ich kann es wie nennen und das ist normal. Du kannst es nennen, wie du willst. Ich gebe dem vorerst einen Namen. Wenn ich jetzt zu dieser Instanz gehe, die wir aus unserer Variante gezogen haben, und wie Sie sehen können, haben wir sie genauso gut wie normal Okay, ich glaube, ich habe es umgekehrt gemacht. Ich kann es leicht ändern, also kann ich es einfach auswählen und ich kann es von hier aus ändern. Sie muss es sein. Und du musst normal sein. Okay, wir haben also zwei Varianten. Okay, du bist normal. Wenn ich das kopiere, halte die Alt-Taste gedrückt, und jetzt kann ich zu wechseln, und wir haben die dritte. Lassen Sie uns eine dritte Variante erstellen, aber lassen Sie uns diese prototypisieren Ich erstelle einen einfachen Flow. Von diesem Abschnitt aus musst du hierher gehen. Wenn ich darauf klicke und gerade eine intelligente Animation auf Band platziere, gelangen wir zu Smart Animate, aber ich möchte, dass das passiert, während der Mauszeiger bewegt wird Wenn ich das abspiele, während ich den Mauszeiger darüber bewege, ändert sich die Farbe. Ich weiß, dass die Position nicht so toll ist, also lass mich beide streichen Ich unterschreibe auch unten. Ich habe meine Maus drauf, also wird es. Okay, lassen Sie uns jetzt eine dritte Variante erstellen. Es ist sehr einfach, eine Variante zu erstellen. Sie können eine Sache tun, sagen wir, ich habe diese andere Sache erstellt , weil ich nicht weiß, wie man eine Variante erstellt. Ich habe es einfach als Instanz gezogen und ich habe dir bereits gesagt, dass es zusammengesetzt sein muss Also füge ich vorerst hinzu , wo es DH ist. Und lassen Sie mich jetzt zur Kostenkomponente übergehen. Und ich kann es einfach hineinziehen. Jetzt ist es eine Variante. Ich weiß, dass es eine wirklich schlechte Praxis ist. Benutze es nicht. Ich benutze es , weil ich dir nur ein paar zufällige Tricks zeigen will. Nun, das ist die Variante. Lass mich es etwas umbenennen. Derzeit ist es Eigentum eins und Standard. Nennen Sie es einfach, ich dachte an De. Lass mich fertig tippen. Und derzeit sind es Immobilien. Lass mich helfen, damit ich weiß, was andere sind. Lasse dich normal drehen. Okay, es ist also großartig. Okay, aber ich muss die Farbe der Kurve ändern. Okay, ich gehe. Das ist gute Säure. Derzeit haben wir drei Varianten, also lass es mich ziehen und du musst ein Profi sein. Ich werde es hier drüben platzieren. Wenn ich jetzt zu Ptype On Tap gehe, musst du zu Rot wechseln Lass uns das spielen. Beim Absenken ist es dunkel und wenn ich darauf klicke, wird es rot. Das ist der Vorteil der Varianz. Okay, wir lernen also, wie man Varianz erzeugt, indem man sehr viel Hardware verwendet Lassen Sie uns nun lernen, wie man mit sehr einfachen Methoden Varianz erzeugt mit sehr einfachen Methoden Varianz Ich weiß, dass es in Figma viele Möglichkeiten gibt , Varianz zu erzeugen Wenn ich zum Beispiel darauf klicke, erscheint eine Plus-Schaltfläche und ich kann einfach darauf klicken, und es wird eine Variante erstellt und es Ich kann einfach zu diesem Farbbereich gehen und ihn in Neurofarben wie diese ändern Ich kann sie direkt verwenden. Und wie Sie sehen können, ist es auch aktualisiert. Es waren drei, jetzt sind es vier. Ich kann es so anschlagen. Und ich möchte voll ausgelastet werden , weil wir es nicht benannt haben. Okay, lass mich es umbenennen. Okay, ich habe nachgedacht. Einfach weiß. Ich nenne total schlechte Namen, ich weiß, aber wir lernen gerade. Wir arbeiten nicht an echten Projekten. Während Sie also an Octal arbeiten, geben Sie bitte den richtigen und tatsächlichen Namen Das bedeutet etwas. In diesem Fall bedeutet es nichts. Aber eine Sache ist derzeit Eigentum, aber wir können dies als bezeichnen. Das ist der Button. Das hat sich für alle nett geändert. Okay. Wann immer jemand Sport treibt, habe ich gesagt, diese Person wird es tun, das ist der Knopf und wir haben vier Varianten drin, zum Beispiel wie weiß. Nett. Oh, da ist eine Sache. Mit Variant können wir etwas wirklich Tolles erschaffen. Lass mich dir eine Sache zeigen. Lassen Sie mich zwei Buttons erstellen. Ich wähle das Rechteck, das kleine Rechteck und lasse mir etwa 20 übrig. Und lassen Sie uns es so ändern, dass es zuerst sein wird. Der zweite wird chippy. Machen wir es zu einem Bestandteil. Und beide sind jetzt Bestandteil. Als Variante kombinieren. Okay, ihr seid jetzt Eltern. Okay, also ich kann es umbenennen, momentan ist es Eigentum. Ich kann das wie ein umbenennen und Bruder wird ausgeschaltet sein. Lass mich dir zeigen, warum ich das mache. Wenn ich zu Acid Ple gehe, haben wir eine Komponente und wir haben zwei, und wenn ich das ziehe, bekommen wir diesen Schalter, weil wir ein- und ausschalten Also, wie Sie sehen können, ist das wirklich cool. Wir können es auch umbenennen, sagen wir mal. Derzeit aktiviert. Wir können es wie wahr und falsch hinzufügen. Ich werde also mit ein paar Worten sehen , dass du so etwas erschaffen kannst. Es funktioniert nur mit O für wahr, falsch und nein, mit diesen Dingen. Sie können es verwenden, um Checkboxen zu erstellen, oder Sie können es zum Erstellen verwenden . Lassen Sie mich Ihnen eine Sache zeigen, Sie können das als On und das als a setzen. Es gibt noch eine andere Methode, Sie können eine Variante erstellen, ich wähle Ellipse und Chi als Farbe oder es ist langweilig. Lassen Sie mich ein Rosa wählen Okay, es ist also nichts rosafarbenes Feuer. Okay. Derzeit ist es also ein Frame, also lassen Sie mich eine Komponente erstellen. Und wenn ich es auswähle, erhalten wir die Option Eigenschaften im Designbereich. Und wenn ich auf die Plus-Schaltfläche klicke, erhalten wir vier Optionen wie Variante Boon, Tausch und Text Deshalb möchte ich vorerst eine Variante erstellen. Also Frequenz-Resi-Variante, und ich kann einfach darauf klicken und ich kann die Farbe ändern Also momentan etwas fischen. Jetzt ändere ich es in Primär Drei, oder ich kann es so ändern. Das ist die andere Methode, um ein Elternteil zu erstellen. Diese alternative Methode zur Erstellung von Variablen ist praktisch, vor allem, wenn du mit einem Kampf beginnen und sofort ohne einen separaten Schritt in die aktuelle Varianz eintauchen ohne einen separaten Schritt Denken Sie daran, dass es mehrere Möglichkeiten gibt, dasselbe Ergebnis in der Firma zu erzielen. Finden Sie den Überlauf, der am besten zu Ihnen passt Das verwirrt also unser Eindringen in Variablen oder Varianten in Variablen oder Sie sind unglaublich nützlich, um verschiedene Zustände oder Stile in einem einzigen Kompott zu verwalten verschiedene Zustände oder Stile in einem einzigen Auf die nächste Art tauchen wir tief in die Variablen ein, aber wir erstellen Variablen mit mehreren Versionen Sie wird auch als multidimensionale Variablen bezeichnet. Also stadion dafür und viel Spaß beim Designen, meine Freunde. 75. Figma Komponenteneigenschaften: Erwecken Sie die Köpfe dazu, sich für das Figma-Abenteuer zu begeistern. Wir werden ein supercooles Feature namens multidimensionale Varianz überwinden . Mach dir keine Sorgen Es ist nicht so gruselig, wie es klingt. Es ist eigentlich wie ein Zaubertrick, Sie Ihr Leben einfacher und frischer gestalten können Stellen Sie sich also ein Szenario Sie haben eine atemberaubende Schaltfläche entworfen, benötigen aber eine andere Version für unterschiedliche Situationen, wie Klicken oder verschiedene Größen Es ist ein Jonglierakt. Ich weiß Aber bei multidimensionaler Varianz ist es so, als hätte man 1 Million winzige Klone Ihres Buttons, jeder für einen bestimmten Anlass Wie Sie sehen können, habe ich diese Schaltflächen mit mehreren Varianten erstellt, und ich habe den Tasten einen Namen gegeben, diese ganze Sache hat einen Button genannt Wie Sie in meinem Asset-Panel sehen können, habe ich diese Schaltflächen. Wenn ich das so verfolge, können wir bisher nur die Farbe ändern. Aber jetzt können wir den Typ ändern. Derzeit kann ich sowohl zur Schaltfläche „ Gehe zur Karte“ als auch zur Schaltfläche „Jetzt einkaufen“ wechseln , auch, wenn ich eine Karte auswähle und diese rot sein soll. Ich kann das auch tun, genauso wie mit der Schaltfläche „Jetzt einkaufen“ mit einer Schaltfläche „Gehe zur Karte“. Wie Sie also bei mehrdimensionalen Varianten sehen können, sind die Möglichkeiten grenzenlos Lassen Sie uns es jetzt aufschlüsseln. Denk an deinen Fared-Button In diesem Fall ist „Zur Karte hinzufügen“ meine Lieblingsschaltfläche. Stellen Sie sich jetzt vor, er trägt verschiedene Hüte, einen Zylinder, wenn jemand drüber schwebt, einen Cowboyhut, wenn er leuchtet, und vielleicht einen flippigen Hasenhut für eine Das ist also die Macht der Varianten. Lassen Sie uns nun zu Figma springen und einige Schaltflächen erstellen. Okay, also lass mich diesen löschen und lass uns von vorne anfangen Ich habe bereits einen Button entworfen, also werde ich ihn einfach kopieren. Ihnen gefällt das, das und das hier. Derzeit sind sie alle Instanzen, also werde ich sie alle auswählen und mit der rechten Maustaste klicken und die Instanz D anhängen. Okay, jetzt sind sie alle ein Frame. Okay, lassen Sie mich zuerst dort anordnen. Also, um den Knopf hier drüben zu schneiden. Der erste wird Ple sein. Der zweite wird jetzt gedreht, aber ich glaube, ich muss die Farbe ändern, um ihn blau zu machen Danach gehe ich zur Kartenschaltfläche und gehe zur Karte, wenn ich zu weniger Fenster gehe, und wenn ich auf diese Interessenvertretung klicke, sind das Layouts, aber sie sind im Rahmen Ich möchte also, dass dies eine Komponente ist, also werde ich sie alle zu einer Komponente machen . Und es gibt noch eine Sache. Sie können es auch Buttons, Schrägstrich, Blau nennen und das Gleiche gilt für diesen Richtig. Wenn ich zum Asset-Panel gehe, kann ich einen Wert wie diesen sehen. Wir haben in früheren Videos gelernt, und wir können dasselbe mit diesem machen. Dies ist jedoch ein sehr langwieriger Prozess. Jetzt haben wir also alle Komponenten, also lassen wir sie als Variante zu einer Variante kombinieren. Okay, das sind jetzt alles Varianten und es gibt ein Problem. Wie Sie sehen können, ist der Name für alle gleich, also ist g der Fehler. Okay, jetzt ändern wir die Eigenschaften von ihnen. Also zuerst wird man zur Karte hinzufügen und indem man diese Eigenschaft defoliert, also werde ich sie in eine Karte ändern Und bei der Benennung habe ich Blau hinzugefügt, deshalb wird es blau angezeigt Aber den will ich nicht. Okay, ich will diesen. Aber okay, ich habe einen Fehler gemacht. Dieser muss Typ sein, und dieser wird noch hinzugefügt. Okay, das wird also auch ein Typ sein, der zur Karte hinzugefügt wird. Lassen Sie uns nun einen weiteren Typ hinzufügen. Okay, das ist jetzt ein Geschäft, also werde ich es jetzt Shop nennen. Oder das Gleiche. Geben Sie jetzt Shop ein, und das wird Go to carte dieses hier sein. Okay, wir sind mit den Typen fertig. Lassen Sie uns nun Farben hinzufügen. Lassen Sie uns also Schaltflächen auswählen, und ich werde eine neue Variante hinzufügen, und ich werde sie eine Farbe nennen. Okay. Also werde ich vorerst den Wert als Standard beibehalten. Wir werden sie hier ändern. Wenn ich darauf klicke, ist Acanc die Standardfarbe, aber wir können sie als Hinweis benennen Das soll blau sein, das wird es sein. Wenn ich jetzt auf den Shop klicke und den Streifen Accoti blau und rot wähle Das ist das Richtige, also werde ich , genau wie bei diesem, Blau wählen , damit wir es nicht immer wieder eingeben müssen . Das Gleiche gilt für diesen. Okay. Blau, und das ist Rot. Also erstellen wir eine mehrdimensionale Variante. Wenn ich also zu den Schaltflächen gehe und diese auswähle und sie löschen lasse, werden wir verstehen, wie es funktioniert. Okay, lassen Sie uns jetzt die Seiten hinzufügen , die Kategorieseiten. Okay, jetzt, Kategorie eins. Ich werde es hier drüben platzieren. Das Gleiche gilt für diesen, dasselbe für diesen. Ich rechne nur die Kosten ab. Nur ganz unten, und ich werde auch nur die Mitte hinzufügen Okay, jetzt ist alles angepasst. Also liste auf dieser Seite, ich möchte, dass das gelesen wird, während ich mit der Maus drüber fahre Und nach dem Klicken muss es sich in diesen Co-Guard-Button verwandeln Und nachdem ich wieder mit der Maus darüber gefahren bin, muss es rot werden Okay, Card, du musst gelesen werden, während du mit der Maus drüber fährst. Okay, so funktioniert eine multidimensionale Variante. Ich weiß, dass es verwirrend klingt, diese mehrdimensionale Variante zu erstellen . Lassen Sie mich Ihnen noch einmal zeigen, wie man sie erstellt. Also werde ich einfach ein Rechteck verwenden und fügen wir hinzu, y 1205 ist okay Fügen wir also etwa 20 Jahre hinzu, und ich werde vier davon machen und weniger davon die Farbe ändern. Also ändere ich es in einen Farbverlauf und du wählst ein Rosa. Und das hier. Aber ich will, dass das 50 Seiten sind, genauso wie du eine, 50 und farbige Hundert wie diese, und du wirst Gradient Okay. Okay, das sind also keine Frames, also müssen wir sie in Frames umwandeln. Steuerung G. Und diese Steuerung G. Steuerung G. Steuerung G. Kontrolle G. Okay. Das sind also Frames. Lassen Sie uns sie jetzt als Komponente erstellen. Sie müssen nicht in einen Frame konvertieren. Sie können sie direkt in Komponenten konvertieren . Also lass es mich dir zeigen. Wie Sie sehen können, ist das nicht in einem Frame, also kann ich einfach auf die Komponente klicken. Aber zum besseren Verständnis füge ich sie zu einer Komponente zusammen. Okay, also Komponente und Komponente, und lassen Sie mich das in eine Varianz umwandeln Als Varianz kombinieren. Okay, es sind jetzt also Varianten. Lassen Sie uns nun Eigenschaften hinzufügen. Du wirst also eine Größe haben. Okay. Und um, was ich sage, groß zu sein. R soll wieder groß sein. Aber wir können es in Pink Large ändern. Aber wir können wieder eine Variante erstellen. Also lass mich das machen, aber es wird uns den Fehler geben. Es gibt also viele Dinge, die wir tun müssen. Okay, lassen Sie uns eine weitere Eigenschaft hinzufügen. Lassen Sie mich zu dieser Ecke der übergeordneten Kamera gehen, darauf klicken und auf diese Plus-Schaltfläche klicken, auf Variante klicken, und jetzt fügen wir eine Farbe hinzu, und ich werde den Wert als Standard belassen Okay, jetzt haben wir also eine Farbe. Also werde ich dieses Problem ändern. Ich weiß, dass ich Mistaw buchstabiert habe, also bitte, weißt du, das. Du wirst also pink sein und du wirst ein Farbverlauf und klein klein ist gerade Dieser wird auch klein sein. Also werde ich es von hier aus wählen, ein kleines und rosafarbenes. Okay, also wenn ich zum Asset-Panel gehe, werde ich sagen, wir sind vergleichbar mit, aber ich werde es umbenennen. Und wenn ich das momentan groß verfolge, sagen wir mal klein und ich möchte, dass es pink ist. So funktioniert multidimensionale Varianz also. Okay, wir werden also zwei Dinge lernen Beispiel, dass wir von Grund auf neu erstellt haben, wir vorgefertigte Elemente wie die Schaltfläche „Ddoate“ verwendet haben, und wir haben auch von Grund auf neu erstellt Okay, lassen Sie mich Ihnen die Vorteile der Verwendung mehrdimensionaler Erstens gibt es uns die Designeffizienz. Also keine Ping-Tasten mehr wie verrückt. Varianten sorgen für Ordnung und Konsistenz. Danach haben wir den Skalierbarkeits-Superhelden. Ich weiß, dass wir 100 verschiedene Knöpfe brauchen, kein Problem. Mit Varianten können wir sie problemlos handhaben. Wir können mehrere Versionen davon erstellen, z. B. eine große und eine kleine , und wir können sie einfach auswählen. Also ich möchte, dass es groß ist. Und la, du hast einen großen Knopf. Während der Arbeit mit dem Team wird das Teilen des Designs zum Kinderspiel, jeder weiß genau wie jeder Button in jeder Situation aussieht, Entwickler erhält der Entwickler erhält eine klare Roadmap mit allen Button-Optionen, sodass die Implementierung reibungslos wie Butter Denken Sie daran, wenn Sie einen mehrdimensionalen Ansatz zunächst etwas überwältigend finden , können Sie sich an eine einfache Variante mit einigen Dimensionen halten, die wir im vorherigen Video erstellt haben Es ist also ein Vorab-Topping. Nehmen Sie sich also Zeit, das Konzept auszuarbeiten , damit Sie sich dieses Video noch einmal ansehen können , bis Sie ein Meister der SI-Varianz geworden sind Wenn Sie bei der Benennungsreihenfolge einen Fehler machen, machen Sie sich keine Sorgen. Sie können es später ändern, indem Sie auf die Komponente klicken und die Dimension festlegen und neu anordnen, wie in den Eigenschaften, und wir können sie im Großen und Ganzen ändern und so Mehrdimensionale Varianz mag zunächst etwas einschüchternd wirken etwas einschüchternd Mit etwas Übung werden Sie jedoch feststellen, dass sie ein leistungsstarkes Werkzeug zur Organisation und Rationalisierung Zögern Sie also nicht , zu experimentieren und sich mit dieser fortschrittlichen Funktion vertraut Die Schüler haben also großartige Arbeit geleistet , um diese Fähigkeit zu erlangen, und ich werde Sie im nächsten Video sehen. Also viel Spaß beim Entwerfen. 76. Projekt 13-Varianten: Hier ihre Designdetektive, erinnern Sie sich an die unglaubliche Macht multidimensionaler Enden, die wir beim letzten Mal entdeckt haben Machen Sie sich also bereit, diese Superkräfte in dieser überwältigenden Fuma Challenge auf die Probe zu stellen in dieser überwältigenden Fuma Challenge auf die Probe Also das ist das Projekt 13. Heute bauen wir ein winziges Set aus Knöpfen für einen König oder eine Königin im Design geeignet sind. Unsere Aufgabe ist es also, diesen Atto-Button, den Go-Cut-Button sowie den Shop-Now-Button und die magischen Türme zu erstellen sowie den Shop-Now-Button und die magischen Türme Okay. Also habe ich in meinen Button-Panels auch kleinere Versionen von Shop-Buttons erstellt. Wenn ich also zu AM-Buttons gehe und Shop benutze und ich möchte, dass es klein ist, kann ich es so verwenden. Also habe ich das mit einer multidimensionalen Funktion erstellt. Das kannst du also auch tun. Und wir haben auch diesen TBL-Switch entwickelt, und wir verwenden einfach den Schalter ein und höher und diesen tollen Gesamtschalter s geschaffen . Also musst du das auch machen Ich weiß, dass du dich mit zusätzlichen Variationen vielleicht verrückt nach Amterg fühlst mit zusätzlichen Variationen vielleicht verrückt nach Amterg Schaltflächen unterschiedlicher Größe, Symbole oder sogar benutzerdefinierte Einstellungen. Lassen Sie also Ihr Werkzeug wechseln Form ändern oder es sei denn, es handelt sich um ein geheimes, verstecktes Feature. Also wird der gesamte Unterricht auch in pädophiler Sprache erteilt. Öffnen Sie den Pädophilen und erstellen Sie einen Par-Button, einen guten Par-Button, Shop-Button sowie einen Kippschalter. Verwenden Sie einen Farbtyp in einer anderen Größe Und denk dran, nutze deine Superkräfte . Ultimon Vans oder eine Geheimwaffe. Seien Sie kreativ, lassen Sie Ihrer Fantasie freien Lauf und scheuen Sie sich nicht zu experimentieren Probieren Sie vielleicht verschiedene Farben, Stile oder Animationen Und haben Sie die Möglichkeit, eine Dynastie oder Knöpfe und Schalter zu entwerfen , die königliche Standing Ovations Sobald Sie also die Design-Dynastie fertiggestellt haben, machen Sie ein Sohnfoto und reichen Sie es zur Prozession Und denken Sie daran: Wenn Sie sich verirrt haben oder einen Design-Boost benötigen, müssen wir Sie fragen Sie können sich das Video sogar so oft erneut ansehen, wie Sie benötigen. Wir sind immer hier, um dich zu teilen. Also los, mutige Designer. Möge Ihr Knopf fett sein, Ihr Schalter glatt sein und Ihre FIV-MA-Fähigkeit, Und denk dran, Übung macht den Meister . Und mit ein wenig Kreativität werden Sie im Handumdrehen eine Design-Dynastie aufbauen. Also das bin ich, ich melde mich ab. Danke fürs Zuschauen, und wir sehen uns im nächsten. 77. So entwirfst du ein interaktives Eingabefeld in Figma: Wir werden uns an all die tollen Tricks erinnern, wir gelernt haben, wie sie zu transformieren, sie zurückzusetzen und sie wie Marionetten auf den Saiten tanzen zu wie Marionetten auf den Saiten tanzen Okay, vielleicht nicht der tanzende Teil. Wir werden den US-Weltraumhelm behalten, weil es in diesem Video darum geht, euch in die nächste Galaxie der Figma-Meisterschaft zu entführen, also bauen wir unseren eigenen Account, ein Meisterwerk also bauen wir unseren eigenen Account Also keine langweiligen Logging-Formulare oder leeren Profilbereich mehr. Lassen Sie uns also eine Kontoseite erstellen , die so einzigartig ist wie Sie. Wir werden also wie digital sein, weil mit unseren Pixeln und Kabeln malen Aber unser Meisterwerk enthält die Logging-Formulare und die Switch-Validierungsschaltflächen Okay, also lass uns zu Figma springen und unsere Kontoseite erstellen Derzeit ist das leer, also werde ich diese Komponente verwenden Okay, im Asset-Panel. Ich habe das als Komponente hinzugefügt. Also das ist hier drüben. Also werde ich es so verfolgen und es hier hinzufügen, und das wird das Kopieren und Einfügen unserer iPhone-Statusleiste sein. Auf der Kontoseite werden wir also einen Namen, eine M-LID, eine Telefonnummer, Kartendetails sowie ein Geburtsdatum hinzufügen M-LID, eine Telefonnummer, Kartendetails . Also lass uns das erstellen. Also habe ich Grids auf meiner Kontoseite aktiviert. Und ich will vorerst Linien und verschiebe und ziehe eine Linie. Und es ist nicht sichtbar. Also lass mich die Farbe ändern. Also Akzent Nell. Oder nehmen wir ein graues, also will ich ein graues wie dieses. Jetzt möchte ich einen Text, der unser Name sein wird. Vorübergehend werde ich einfach nur den Namen wählen. Okay. Und es wird ein solches Label geben. Lass mich es in ein Etikett umwandeln. Das ist ein Etikett, und lassen Sie mich es ändern. Ich weiß nicht, warum es ein Pro-Display benötigt. Ich glaube, ich übersehe hier etwas. Ich ändere es in 14, und das ist S, also wirst du 20 sein. Lassen Sie mich dieses Ding zu einer Komponente machen, sie alle auswählen und eine Komponente erstellen. Lassen Sie mich diese Masterkomponente nach oben in diesem Frame ziehen , weil ich diese Komponente auf unserer Komponentenseite platzieren möchte , weil ich diese Komponente auf unserer Komponentenseite platzieren möchte. Sie ist hier drüben. Ich werde es Eingabeformular nennen. Okay, du denkst vielleicht, warum ich das auf meiner Kontoseite erstellt habe und warum ich das nach Cumbo ziehe , weil ich mit dieser Seite die Raster abrufen kann, und ich kann dieses Ding nach Rastern gestalten Wie Sie sehen können, Mr. De. Lassen Sie mich zum Eingabeformular und zur Zeile gehen. Lassen Sie mich das in dieser Kolumne nachverfolgen. Jetzt passt es perfekt. Lass es mich außerhalb des Rahmens nehmen. Ich habe das zu einer Komponente gemacht. Lassen Sie uns das ausschneiden und zu unseren Komponenten hinzufügen. Komponenten, und das ist ein leeres Tempo . Ich füge es hier hinzu. Aber bevor wir das tun, möchte ich die Einschränkung ändern. Es wird links und oben sein. Du wirst auf der linken und unteren Seite sein. Lass uns unten wählen. Und du wirst maßstabsgetreu sein. Okay, lass es maßstabsgetreu sein. Nun, ich möchte, dass das in einer Variante ist. Sie können zwei Optionen verwenden, wie Sie diese verwenden können, sowie Eigenschaften und Varianten. Also werde ich mich für diesen entscheiden. Also haben wir jetzt den Plus-Button. Also der erste wird der Name sein, der zweite wird es die E-Mail-ID sein. An dritter Stelle stehen die Telefonnummer, dann die Karteninformationen und das Geburtsdatum. Okay. Also zuerst wird es so sein wie es ist, dann wird es die E-Mail-ID sein. Dies wird unser Eingabeformular sein. Ich weiß, dass ich einige Änderungen vornehmen muss. Ich lebe in Indien, also ist mein Code plus 91 und danach zehn Ziffern. Ich werde einige zufällige Ziffern eingeben. Ich weiß es nicht. Ich weiß nicht, ohne Grund ist es in dieser festen automatischen Höhe stecken geblieben. Ich möchte es so auf Auto umstellen und dasselbe gilt für Cod-Informationen. Wir können Zufallszahlen wie Null, Null, Null, 012, Vier, Fünf eingeben , so Ich glaube, ich habe diesen extra erstellt, also werde ich diesen datieren Okay. Gehen wir jetzt zu unserer Kontoseite, dieser hier, und gehen wir zu Anlagen- und Vermögensvergleichen. Wir haben ein Eingabeformular Ziehen wir es hierher. Okay. Lass mich das duplizieren. Das wird unsere Telefonnummer sein. Das wird vielleicht sein. Das wird das sein, was ich beide sagen werde. Gehen wir zu diesem Design-Panel, und wie Sie sehen können, ist dies unser Eingabeformular. Derzeit ist die Eigenschaft eins und dies ist die Standardeinstellung. Ich weiß, dass ich keinen Namen genannt habe. Es ist eine sehr kluge Praxis. Lassen Sie mich noch einmal zum Formular übergehen und es umbenennen. Der erste, es wird ein Name sein. Okay, lassen Sie mich zuerst die Eigenschaft eingeben. Das wird also ein Typ sein, welcher Typ von Textfeld ist das? Das wird ein Name sein. Name Das wird E-Mail sein. Nein, ID hinzufügen. Das wird die PH-Nummer sein . Das ist Cardin und das wird es sein Ich glaube, ich habe eine Plus-Schaltfläche hinzugefügt. Okay. Also das wird DOB sein. Das ist das Geburtsdatum Okay, ich habe all diese Dinge hinzugefügt. Gehen wir jetzt zu PIPMA und lassen Sie uns das Eingabeformular eingeben, derzeit Ich möchte, dass das eine E-Mail ist. Danach möchte ich, dass dies eine Telefonnummer ist, und das muss eine Information sein , letzte muss Geburtsdatum sein. Das ist das Geburtsdatum Ich würde sagen, es war wirklich einfach, eine Seite mit Kontoinformationen zu erstellen. Okay, das war die grundlegende Sache. Wir wissen bereits, wie man Komponenten und Varianz erzeugt, all das. Das war also die Grundlage. Lassen Sie uns nun eine mehrdimensionale Varianz sowie eine Umschaltfläche hinzufügen mehrdimensionale Varianz sowie eine Umschaltfläche Nehmen wir an, Sie können Ihre Telefonnummer in dieser App nicht ändern. In diesem Fall können wir also die Farbe ändern, so wie wir sie zu einem Dezil machen können Gehen wir also zu Komponenten und erstellen wir eine Variante. Also werde ich das erweitern und lass uns das hier kopieren. Und lass mich einen Schüler machen. Also werde ich das so lassen wie das hier. Okay. Also werde ich verstehen, das ist ein Behinderter. Das bedeutet, dass niemand diese Nummer ändern kann , wenn Sie sie zum ersten Mal hinzufügen. Wir können eine neue Variante hinzufügen. Lassen Sie mich zu Eingabe und Plus-Variante gehen und es wird Stratus sein und der Wert sollte aktiviert sein, weil ich diesen großen Knopf haben möchte Wenn Sie das nicht auf diese Weise und wenn Sie diese Mitte als Standard festlegen und wenn Sie „Eigenschaft erstellen“ wählen und erneut versuchen, Eigenschaften hinzuzufügen und zu deaktivieren, wird es nicht funktionieren Sie also daran, dass Sie hier den Wert ein- und ausschalten müssen , bevor Sie diese Eigenschaft erstellen. Lassen Sie uns eine Immobilie erstellen, und das wird aktiviert sein, und das wird ein neues aus sein, und das wird unsere Telefonnummer sein. Wenn ich zu meiner App gehe, möchte ich jetzt zeigen, dass das Ding deaktiviert ist, also kann ich es einfach abklicken Wie Sie sehen können, ist das deaktiviert. Der Zahlenteil ist nicht hervorgehoben. Dabei verwenden wir bei der Erstellung des Kontos all die Dinge, die wir in früheren Varianzkomponenten gelernt haben , sowie die Multimionenkomponente sowie die Stalk-Taste. Es gibt eine Sache Nehmen wir an, Sie fügen Ihre E-Mail-ID wie folgt und haben vergessen, einen Punkt hinzuzufügen, und Sie haben etwas anderes hinzugefügt D. Comp, das ist ein Fehler, also wird es nicht funktionieren Ich möchte zeigen, dass dies der Fehler ist. Also werde ich die Farbe ändern. Das wird rot sein. So wie das hier. Die Linie sollte ebenfalls rot sein. Ich werde das in diese Farbe ändern und das Gleiche gilt für diese. Okay, so, aber wir müssen noch etwas hinzufügen, zum Beispiel Fehler. Lass mich zum Eingabeformular gehen, auf die Plus-Schaltfläche klicken, beenden, und das wird farbig. Und wir können das als Umschaltfläche erstellen, also lassen Sie uns das erstellen oder wir können einfach zwei oder falsch oder S oder nein eingeben Also dafür werde ich verwenden. Und Eigentum schaffen. Das bedeutet, dass die Warnung ja ist, aber das ist nicht so, also füge ich nein hinzu, Sie haben einen Fehler gemacht, also müssen Sie Ja angeben. Wenn ich zu meinem High-Fidelity-Modus gehe und sagen wir, welcher war das? Okay, M LID, und lass uns das erstellen. Nehmen wir an, der Benutzer gibt etwas anderes ein, er hat D hinzugefügt und den Punkt vergessen. In diesem Fall können wir es aktivieren und es wird dem Benutzer angezeigt, Sie geben etwas ein. Du musst es ändern. Okay, das ist unsere Kontoseite. Ich weiß, dass wir viele Dinge tun können, aber ich möchte Ihnen nur die Leistungsfähigkeit von Komponenten zeigen , verschiedene multidimensionale Komponenten und auch die Leistung dieser einfachen Umschalttaste wie dieser Beim Entwerfen ist es wichtig, die Benutzerfreundlichkeit und Vertrauenswürdigkeit des Formulars zu berücksichtigen die Benutzerfreundlichkeit und Vertrauenswürdigkeit des Ich passe den Abstand an, überprüfe ihn auf meinem Handy und passe ihn an, damit er sauberer aussieht Aber ich habe momentan kein iPhone, ich habe 100, also werde ich es wahrscheinlich auf dem Handy meines Freundes überprüfen, und ich werde das ändern, ich möchte etwas anderes ändern, also werde ich das tun, sagen wir, es sind Farben, die nicht so stark sichtbar sind Ich werde es transparenter machen oder etwas mehr Filter hinzufügen, 50%, so wie hier. Es sieht cooler aus. Die Stärke von Komponenten mit Varianz kommt zum Tragen, wenn wir unser Design aktualisieren müssen Wie wir bei Komponenten sehen können, verschiedene Arten von Verhalten, zum Beispiel haben wir ein Element, das fehlerhaft ist , eines ist deaktiviert und dieses ist aktiv Ich weiß, dass diese Dinge für Anfänger etwas komplex zu verstehen sind. Aber wenn du immer wieder übst, wirst du es verstehen und du wirst in der Lage sein sie innerhalb einer Sekunde zu erstellen, und wir können sie einfach so ziehen und ablegen und wir können den Farbtyp ändern, all das. Okay, so. Also dieses etwas fortgeschrittenere Beispiel demonstriert das Potenzial multidimensionaler Variablen. Abschließend haben wir uns mit der Erstellung von Formularen unter Verwendung von Komponenten und Variablen befasst In FGMA können Sie durch die Implementierung dieser Technik dynamische und anpassungsfähige Formulare für ein nahtloses Benutzererlebnis effizient entwerfen dynamische und anpassungsfähige Formulare für ein nahtloses Aber bevor ich dieses Video beende, möchte ich dir etwas zeigen Sie müssen also nicht erneut ein Formular erstellen und können auch hier eine andere Person verwenden, um diese Arbeit zu erledigen. Sie können zur Figma-Community gehen und einfach nach Eingaben in Feldern suchen, und Sie erhalten dieses, geben es in Figma ein in Figma und Sie können es einfach kopieren Lass mich diese Kopie kopieren. Und wo ist meine App. Okay, also Pet. Ich kann es einfach hier anstelle dieses Namens verwenden, und ich kann die Farbe ändern, und es hat alle Funktionen. Ich zeige Ihnen sowohl das Feld als auch das Symbol sowie das rechte Symbol und das Fehlersymbol. So ist es bereits mit allen Funktionen ausgestattet, sodass wir es nicht von Grund auf neu erstellen müssen, sondern wir lernen von Grund auf neu. Ich zeige Ihnen, wie Sie all diese Dinge von Grund auf neu erstellen können, denn wenn wir das verwenden, werden wir wissen, was das bedeutet? Deshalb wird das archiviert, warum es aktiv ist, warum es deaktiviert ist und warum es Fehler plus Symbol und all das hat. Es gibt noch ein anderes Beispiel. Das ist wie die Google-Anmeldeschaltfläche. Sie können auch dieses feine Design verwenden. Sie können dies kopieren und mit Google in UAP anmelden Dies sind einige bewährte Methoden, die Sie im UA-Design implementieren können, wenn Sie Zeit sparen und die Ressourcen einer anderen Person direkt verwenden möchten , und Sie können sie anpassen Danach wissen Sie, wie Sie es anpassen und all das. Der Hauptzweck dieses Videos bestand darin, all die Dinge, die wir in früheren Videos gelernt haben, in einer einzigen Sache umzusetzen wir in früheren Videos gelernt haben , nämlich in einem Account. Freunde, übt und experimentiert weiter und ich werde euch im nächsten Video wiedersehen. Viel Spaß beim Entwerfen 78. Kursprojekt 14: Konto- und Kategorien-Mastery: Design für den User Flow in Figma: Wenn mein Fantastisches für die doppelte Dosis Designgenuss ist. Auf diese Weise machen wir uns auf den Weg, zwei epische Kartenseiten zu gestalten, die Kontoseite und die Kategorieseite zwei epische Kartenseiten zu gestalten, die Kontoseite und die Kategorieseite Machen Sie sich also bereit, die Leistungsfähigkeit von Vans und Ihre grenzenlose Kreativität zu nutzen, um ein Einkaufserlebnis zu schaffen , das sowohl benutzerfreundlich als auch visuell beeindruckend ist sowohl benutzerfreundlich als auch visuell beeindruckend Aber lassen Sie uns zunächst das Wesentliche zusammenfassen. Zunächst geht es um Komponenten. Dies sind Ihre verwendbaren Bausteine. Also lass mich dir Carns zeigen. Das sind deine Bausteine, wie Uniform-Button und Produktkarten aus Holz. Betrachte sie als Legosteine für dein Design, füge sie hinzu, um sie zu einer tollen Struktur zusammenzusetzen , dann eine Variante Wir erstellen diese Varianten wie Fehler oder Deaktivierung. Varianten handelt es sich um Science-Waffen, mit denen du deinen Designs mit nur wenigen Klicks Abwechslung und Persönlichkeit verleihen kannst, und du musst sie auch multidimensional verwenden. Mit diesen leistungsstarken Varianten können Sie mehrere Eigenschaften gleichzeitig kombinieren und so dynamische und dispositive Designs erstellen, die den verschiedenen Größen eine andere Note verleihen Auf der Kontoseite müssen Sie also einen Brique zusammenstellen, der so konzipiert ist, dass Komponenten wie diese erstellt wurden. Stil, Farbe und Topographie von Experten. Erstellen Sie dynamische Elemente, die Benutzerdaten multidimensional ergänzen die Benutzerdaten multidimensional Und fügen Sie ein Symbol hinzu, erkennen Sie die Farbe für zusätzliche Magie. Und in der Kategorie stelle ich Ihnen alle Symbole in den Ressourcen Also schau dir das an und füge diese Konten hinzu. Nachdem Sie die Kontoseite und die Kategorieseite fertiggestellt haben, nehmen Sie ein Design mit Straßenbahnen mit nehmen Sie ein Design mit Straßenbahnen mit Screenshot auf und reichen Sie es im Projektbereich Ich kenne einige Leute, die ich habe, oder andere nicht, also gerate nicht in Panik, schau dir das Video an oder wende dich an mich, um Rat zu erhalten Ich bin hier, um zu helfen und lasse mich nicht auf die Verrücktheit ein. Experimentiere und hab Spaß. Dies ist Ihre Chance, etwas wirklich Einzigartiges zu schaffen. Genießen Sie also die Reise. Bei Design geht es ums Erkunden und Lernen. Feiern Sie Ihren Prozess und haben Sie nebenbei jede Menge Spaß. Ich stelle auch alle Schritte in der Übungsdatei zur Verfügung. Gehe dorthin und lies alle Schritte. Nehmen Sie es auf diese Weise und fügen Sie es in den Projektbereich ein. Sie können es auch teilen und dort übernehmen. Schnappen Sie sich also ein paar Wischblätter, füllen Sie sie mit Kreativität und lassen Sie uns in die Welt des Plicar-Designs Ich kann es kaum erwarten, die unglaublichen Seiten zu sehen, die du erstellen wirst. 79. So entwirfst du ein Benachrichtigungs-UI-Design in Figma: Studierende, sind Sie bereit, eine weitere Designgrenze zu erobern Heute widmen wir uns dem entscheidenden Bereich der App , der Klickkarten-Benachrichtigungsseite. Denkt daran, all die epischen Lektionen, wir in unsere Figma-Gehirne gestopft haben, wie die Cerence-Variante, wie die Frame-Gruppe, sowie die Aktualisierung von Komponenten Was auch immer, wir haben alles in unserem Gehirn erklommen. Sie sind also alle im Begriff, in einer Symphonie der Design-Bias zusammenzukommen in einer Symphonie der Design-Bias zusammenzukommen Aber das ist nicht nur eine technische Übung. Wir basteln die unbesungenen Helden der US-Erfahrung, die Guardian Open-Funktion, den Confinty-Kanon guter Nachrichten und vielleicht auch ein paar weniger Aber hey, Transparenz. Ihr Benutzer öffnet die Clicker-App und Bam, er hat eine Benachrichtigungsseite erstellt Das ist nicht nur praktisch, sondern auch eine Augenweide. Formulieren Sie eine klare, bewusste Botschaft, spielen Sie bei wichtigen Updates eine vollständige Animation und geben Sie vielleicht sogar Streuseln oder personalisierte Gerichte ab Wir sprechen von visuellen Hinweisen, die Aufmerksamkeit erregen, ohne nach „ Jetzt einkaufen“ oder „Einlösen“ zu schreien Jetzt einkaufen“ oder „Einlösen“ zu Also schonendes Gepäck, das Benutzer zum nächsten Kauf führt Und ein unerwarteter Fingertipp, um die Dinge interessant zu halten. Lassen Sie uns also in das Bild springen und unser Benachrichtigungsfeld gestalten Wie Sie sehen können, habe ich dieses Benachrichtigungsfeld entworfen, also werden wir etwas Neues entwerfen Und wie Sie sehen können, habe ich auch dieses aktualisiert, also werden wir sehen, wie wir das machen können. Wie Sie sehen können, habe ich eine leere Leinwand, einen leeren Rahmen, und da habe ich einige Dinge wie Benachrichtigung, Mficon, füge ich Ich habe diesen einfach kopiert, eingefügt und den Text, Mification , geändert Profil hinzugefügt Wenn eine Person zu ihrem Profil gehen möchte, kann sie einfach hier tippen und sie kann zu diesem Bereich gehen, meinem Konto Übrigens habe ich alle Nachteile hinzugefügt, weil es vorher zu langweilig aussah. Also dachte ich, lass uns ein paar Icons hinzufügen, damit es etwas Persönlichkeit verleiht. Wie Sie sehen können, sieht es jetzt modern und irgendwie brauchbar aus. Okay. Lass uns meine Einführungsseite gestalten. Ich will einen Rahmen, Rahmen und lass mich einen Rahmen zeichnen. Aber lassen Sie mich die Körnung der Spalten aktivieren. Ich weiß, dass wir Rose nicht so oft benutzt haben, weil ich denke, ich würde diese Sache in einem oder vielleicht einem Abschnitt für Fortgeschrittene behandeln Also direkt dafür. Ich möchte, dass das 15 abgerundete Kanten sind und weniger Alex etwas Farbe. Derzeit hat es noch keine Farbfüllung und ich möchte, dass diese Farbe noch eine Note hat. Pro sollte hier drüben sein. So wie das hier. Und wir haben bereits einen Farbverlauf erstellt, aber ich glaube, ich werde es tun, also versuchen wir es mit diesem Farbverlauf, weil ich den bereits erstellt habe, bei dem es unser Feld ist. Okay, ist es. Und wir haben diesen Gradienten geschaffen. Also lass uns diesen benutzen. Okay, lassen Sie mich die Spalten deaktivieren. Okay, ich habe dieses Trophäensymbol aus Geschwindigkeitsgründen gegessen, sodass du es von dort herunterladen kannst. Okay, jetzt fügen wir etwas Text dieses Benachrichtigungsfeld ein, zum Beispiel Festival. Das heißt, sagen wir, währenddessen, vielleicht Weihnachten oder vielleicht Silvester. Das Festival bietet also nur für Sie. Vielleicht geben wir dir ein paar Gutscheine und sie können es dimmen und sie können etwas wie Socken zu 100% sparen. Ich weiß, wann immer ich auf diese COM-Website gehe, heißt es 100% Rabatt, aber es gibt nichts , was zu 100% günstiger ist. In manchen Fällen sind es 100%, Beispiel muss man etwas wirklich teures kaufen. In diesem Fall bekommst du also etwas umsonst, aber diese Artikel sind nicht so viel wert. Es ist eine Kamera. Okay, also werde ich das Valley Festival-Angebot hinzufügen. Oder hier. Nehmen wir an, das ist ein Scratch-Gutschein , also ein Benutzer tippt darauf und kratzt ihn. Es wird also ein Code-Gutscheincode angezeigt, den sie beim Kauf eines Produkts einlösen können Lassen Sie mich hier hinzufügen, dass Sie Alt Control V gedrückt halten und mit einem Gewinn kratzen Okay, also ich habe diese Form vor einem guten Skript gewählt, so etwas wie ich es nicht aussprechen kann Aga gut. Okay. Es ist gut her, schätze ich. Ich weiß, dass ich falsch liege, also kannst du es mir in Kommentaren sagen , vielleicht in den sozialen Medien. Okay, nehmen wir an, wir geben etwas für 100% Rabatt ab. Also hol dir bis zu 100% Rabatt. Und lassen Sie uns einen Button hinzufügen, zum Beispiel Shop. Also haben wir Shop Robon entworfen, glaube ich. Also haben wir dieses O in den Knöpfen und geben „Jetzt einkaufen“ und „Ple“ und „Ich will klein Okay, das ist also sehr praktisch. Nehmen wir an, das funktioniert auf beide Arten. Der Benutzer kann es zerkratzen oder entweder auf Shopbt klicken und ein bestimmtes Produkt wird zu 100% günstiger sein Okay, also, wie Sie sehen können, haben wir diese wirklich fantastisch aussehende Karte kreiert diese wirklich fantastisch aussehende Karte Die Farbe kommt auf diesem Bild nicht besonders gut an. Also lass mich diese Farbe ändern. Okay, also ich entscheide mich für Blau. Also, das ist toll im Vergleich zum vorherigen. Und jetzt können wir hier ein Logo hinzufügen, unser Clickcard-Logo. Also dränge ich darauf, es zu verkleinern. Und ich werde es hier drüben platzieren. Okay, wir haben also eine Trophäe von Cliarap bekommen. Okay, so erstellen wir unsere Benachrichtigungsseite, und wir können ein Pop-up erstellen, sagen wir mal Okay, lass mich dir eine Homepage zeigen. Nehmen wir an, der Benutzer kommt. Zuerst werden sie diesen sehen. Danach wird es ein Popup geben und in diesem Popup werden wir dieses hinzufügen. Verwenden Sie also eine direkte Weiterleitung zu dieser Seite, wie eine Disco-Seite oder etwas Ähnliches, und sie können dieses Angebot nutzen. Okay, ich schätze, wir haben dieses Navigationspanel in leichter Stimmung erstellt . Also lass mich das hier drüben hinzufügen. Also, wir sind im Asset Panel und es ist hier drüben. Was ist? Es ist dunkel. Es ist für Dunkelheit. Also lass uns das so hinzufügen, also lass mich meine Kisten wieder aktivieren Okay, jetzt ist es Fisch. Okay. Aber wie Sie sehen können, sind die Symbole nicht so sichtbar. Sie sind in weißer Farbe. Also ändere ich es in diese Primärfarbe. Okay, ich habe die Filges ausgewählt. Ich muss mich für eine Auswahl entscheiden. Okay, jetzt sieht das cool und sichtbar aus. Wie Sie sehen können, ist es kein Update, also können wir das aktualisieren. Wir wissen bereits, dass Sie das V pausieren und das tun können, oder Sie können die Hauptbefehle angeben. Aber nehmen wir an, du weißt es nicht, also schau es dir einfach an. Klicken Sie mit der rechten Maustaste, gehen Sie zur Hauptkomponente und sagen Sie einfach, dass Änderungen an die Hauptkomponente übertragen werden, und alles wird sich ändern. Ändere Push auf Minot Ich weiß, dass es momentan nicht sichtbar ist, aber wenn ich das ankreuze, ist es sichtbar Und wenn wir zur Hauptkomponente gehen, wo sie hier drüben ist und Änderungen vorgenommen werden. Wenn ich das mache. Wenn ich jetzt zur Hauptseite gehe, Azac ist es weiß, und ich kann einfach zu st gehen, ich kann dort Änderungen vornehmen, ich muss es jetzt für SCS warten, wenn ich zu C gehe und Änderungen an Minot schiebe, wenn ich zu Moon gehe, wieder, azac ist es C gehe und Änderungen an Minot schiebe, wenn ich zu Moon gehe, wieder, azac Gehen wir wieder zurück in die Ferne. Okay. Wie Sie sehen können, ist unsere Benachrichtigungsseite fertig und sie sieht wirklich cool aus. Jetzt, jetzt gibt es eine Aufgabe für dich. Du musst meine Accords-Seite entwerfen. Also entwerfen wir und wir. Lassen Sie mich sehen, was wir entwerfen. Wir entwerfen die Intro-Homepage, das Burgermenü sowie die Produktseite, die Accord-Seite und die Kategorieseite Aber wir haben meine Bestellseite nicht gestaltet. Es gibt also eine Aufgabe für dich. Du musst meine Bestellseite gestalten. Also pausiere das Video und mach das und ich zeige dir meine Version meiner Bestellseite. Also, pausiere das Video. Okay, ich hoffe, du hast das gemacht, du hast die M- oder S-Seite entworfen Also lass mich dir meine Version zeigen. Dies ist meine Version, und ich habe zwei Elemente darin entworfen, so wie ich dieses und dieses entworfen habe. Also fragen ihn beide und sie sehen einfach anders aus. Also die erste ist so, als ob du deine Bestellung verfolgen würdest. Wenn Sie also auf meine Bestellseite gehen, werden Sie sehen, dass Sie etwas kaufen. Und von hier aus werden Ihnen Ihr Datum sowie der Artikel sowie ein Computerartikel angezeigt Ihnen Ihr Datum sowie der Artikel , und Sie können direkt zu dieser Seite wechseln. Wenn Sie zum Beispiel darauf klicken, werden Sie auf diese Produktseite weitergeleitet und wir zeigen Ihnen , welchen Artikel Sie gekauft haben Gleiche gilt für diesen, gleiche Funktionalität, aber es sieht anders aus Aber ich mag beide. Aber wenn ich Hap benutzen muss, nehme ich dieses. Es sieht viel cooler aus. Aber heutzutage wird alles groß. Ich denke also, dass die meisten Benutzer diese Karte vielleicht verwenden oder entwerfen. Die sind alle fantastisch anzusehen auf der Änderungsseite und auf der Seite mit meinen Bestellungen. Also möchte ich dir nur ein Band geben. Denken Sie daran, dass es in Figma keine Fehler gibt, nur glückliche Zufälle, die darauf warten, passieren zu können Sie experimentieren also einfach beim Entwerfen auf einer Seite wie Modi-Seite oder meiner Bestellseite. Und hab ein Telefon. Und wann immer du fertig bist, teile deine Kreation mit der Welt. Du kannst es auf Social Meta hochladen und mich dort eintippen und es mit deinen Freunden teilen. Lassen Sie uns uns gegenseitig inspirieren und die Macht der Figma-Magie unter Beweis Das war's für das heutige Video und wir sehen uns im nächsten 80. So erstellst du eine TOOLTIP-Komponente (Hover to Show Text) in Figma: Feuer, fantastisch zusammenbauen. Denken Sie daran, dass wir den Gutschein zu 100% in einem vorherigen Pressevideo erstellt haben . Also ja, Baccala, weil es bald noch seltsamer werden wird als Lama mit seltsamer werden wird als Lama Okay, also wir alle wissen, dass tolle Angebote sehr detailliert sind. Um die Geheimnisse dieser hundertprozentigen Magie zu enthüllen, fügen wir dem Kuchen eine weitere Schicht hinzu, oder sollte ich sagen, Zwiebel und überlagern ihn mit einem Overlay Es gibt einen Anfang. Ich weiß, richtig. Wie Sie in diesem Coupon sehen können, habe ich eine Kleinigkeit namens Allgemeine Geschäftsbedingungen hinzugefügt. Wenn eine Person die Allgemeinen Geschäftsbedingungen wissen möchte. Ich weiß, dass sie das nicht tun. Aber nehmen wir an, eine kluge Person wie Sie möchte die Allgemeinen Geschäftsbedingungen überprüfen. Wenn sie darauf klicken, wird ihnen dieses Minu angezeigt. Lassen Sie mich die eigentliche Demonstration zeigen. Fluss drei vom Typ Pitch P. Okay, dann wird dieser Coupon und danach haben wir die Allgemeinen Geschäftsbedingungen. Wie Sie sehen können, verwandelt sich mein Mauszeiger in dieses Handsymbol, weil es anklickbar ist Wenn ich also darauf klicke, erscheint es. 100% Rabatt. Ja, Sie haben es richtig gelesen, aber wenn Sie einen extrem teuren Artikel fangen, erhalten Sie einen CP-Wert, der den epischen Rabatt auf einen mysteriösen Artikel freischaltet Die Schatzsuche, das Einkaufen, ich bin schlecht vorbereitet. Also bekommst du die Leere. Also bekommt der Benutzer dieses kleine Pop-up. Also das ist der Anfang. Wir werden in diesem Video kreieren. Sie denken vielleicht, warum Com-Website diese Mittelspiele spielt. Weil zu 100% abgemacht, dieser Anreiz verdient ein kleines Abenteuer es nicht neben dem Knacken des Codes, das WildF bietet, als würde man in der Design-Lotterie gewinnen Apropos feiner, erinnere dich an den ausdrucksstarken Schlüsselartikel, den du kaufen musstest, sogar Zugang zum sogar Zugang Ja, rate mal was? Vielleicht kommt es einfach später in den Griff oder es wird ein Schlüssel zu einem weiteren versteckten Nivellieren dieser Designschamlippen Wer weiß, die Möglichkeiten sind endlos, wie Sie sich vorstellen. Und etwas so verwirrend wie ein Steuerformular, das die Beine reduziert. Okay, ich werde dir bei der Gestaltung auch einige psychologische Tipps geben. Also lass mich diesen schließen. Und lassen Sie mich auch diesen löschen , weil wir alles von Grund auf neu erstellen werden. Also werde ich diesen machen. Okay. Also, du musst gehen und lass uns mehr entwerfen. Reihe ein paar Rechtecke an. Ich weiß, dass Menschen klug sind. Sie können alles von Grund auf neu machen. Aber es ist mein Job. Ich muss das machen. Nehmen wir ein Dreieck mit einem Dreieck. Fügen wir es hier hinzu und ich werde O zwei hinzufügen, zwei hinzugefügt Ich möchte die drei abgerundeten Kanten und fügen sie hier hinzu. Oder vielleicht hier drüben. Lass uns einen Rahmen hinzufügen. Bevor wir das tun, lassen Sie mich einen Text hinzufügen. Steuerung V. Fügen wir ihn hier in der Mitte und fügen wir sie dem Frame hinzu. Steuerung. Wir haben den Rahmen und den Prozess, den Sie erstellen müssen, lassen Sie mich den Teil davon ändern. So wie das hier. P ist dasselbe, also lass mich einen Namen hinzufügen. Das ist wie mit den Allgemeinen Geschäftsbedingungen. Okay, gehen wir zu Prototyp , wir fügen Overlay zu Overlay hinzu Zuvor haben wir diesem Element ein Overlay hinzugefügt, aber jetzt fügen wir diesem Element ein Overlay hinzu, und wir werden dabei die Nutzungsbedingungen verwenden, und ich habe meine Hauptkomponente aktualisiert Es ist also hier drüben. Ich habe gerade die Allgemeinen Geschäftsbedingungen hinzugefügt und sie wurden aktualisiert. Wir alle wissen, wie es funktioniert. Doppelklicken Sie also auf die Allgemeinen Geschäftsbedingungen und lassen Sie uns die Allgemeinen Geschäftsbedingungen zusammenfügen, und dasselbe auf der Registerkarte. Okay, ich weiß, was das Problem ist. Ich habe hier drei Dinge hinzugefügt. Also lass mich mit allen ausgehen. Lassen Sie mich jetzt noch einmal wählen. A, jetzt ist es okay. Jetzt kann ich es am Typ verwenden. Navigiere bei der Eingabe zu den Allgemeinen Geschäftsbedingungen und löse sie auf, aber du musst ein offenes Overlay sein, und lass uns ein Handbuch auswählen und es hier hinzufügen, und alles ist in Ordnung Ich möchte, dass es 25% sind. Wenn ich jetzt auf diese drei klicke, hoffe ich, dass es funktioniert. Es ist eine Änderung an diesem und einem Symbol. Okay, wie Sie sehen können, funktioniert es zu 100%. Okay, das ist also der Begriff Bedingung. So verwenden wir Overlay innerhalb von Overlay. Sie können dasselbe auch verwenden, um dieses zu erstellen. Lass mich dir zum Beispiel eine Sache zeigen. Ich habe ein Schaltflächensymbol hinzugefügt, es gibt Ihnen einige Informationen. Wenn also jemand darauf klickt, werden nur indische Telefonnummern angezeigt. Sie können keine anderen Telefonnummern verwenden. Okay. Wenn ich auf dieses Konto klicke, werden nur Telefonnummern angezeigt. Es nennt sich wie Info-Button oder Tooltips, so ähnlich Es ist also wirklich praktisch. Okay, also ich möchte dir ein paar psychologische Tipps geben. Also, wie Sie sehen können, ist der Zustand des Begriffs Zeichen sehr klein. Und es ist bewusst klein , weil sie ihren Kunden nicht die tatsächlichen Geschäftsbedingungen zeigen wollen . Und die Allgemeinen Geschäftsbedingungen sind immer in sehr harter Sprache verfasst. Manche Leute könnten es verstehen oder manche Leute. Sie schreiben die Allgemeinen Geschäftsbedingungen wirklich hart. Die Wörter sind wirklich schwer zu verstehen, und das absichtlich weil sie nur wollen, dass der Benutzer auf dieses Symbol klickt. Das sind also die Studenten der Psychologie-Technik , da dreht sich alles um Überlagerungen Wir haben dieses Overlay wieder mit Overlay erstellt. Ich weiß, dass das der Anfang ist, und wir können etwas verwenden, um diesen Tooltip zu erstellen Es gibt eine Sache, die ich dir sagen möchte. Ich verwende Google Bar, um diese Nutzungsbedingungen zu erstellen. Du kannst also einfach zu Google Par gehen und diesem Prot diesen geben Ich habe dir diesen gegeben. hast du mir die große Linie gegeben. Ich will das nicht, also habe ich Go Bard noch einmal gesagt, ich will eine kleinere Version. Also hat es mir dieses gegeben, kopiert und ich habe es benutzt. So solltest du mich benutzen . Ich werde deinen Job nicht annehmen, mach dir keine Sorgen So klug ist es noch nicht. Ich weiß, dass es eines Tages sein wird, aber es ist noch nicht klug. Sie sollten KI nutzen. Ich unterrichte auch über KI-Prompt-Engineering, KI für soziale Medien und all das. Wenn du willst, kannst du dir das ansehen. Die Kosten sind auf dieser Plattform, und ich werde diesen Link zu den Ressourcen hinzufügen. Gehen Sie also dorthin und schauen Sie sich das an und verwenden Sie KI, um Ihren Job zu retten. Also, entschuldigen Sie mich, ich habe einen Lama, der aufsteht und zugeht. Bis zum nächsten Mal, Freiheit des Fantastischen, bleib seltsam, bleib neugierig Saatum für mehr Designpsychologe. 81. So erstellst du mehrere Prototypen und erstelle separate Flows auf einer Figma-Seite: Er ist ein fabelhafter Designer. Heute tauchen wir in Pigma in die Welt der Flüsse ein. Also, was genau sind Ströme? Nun? Sie sind einfach raffinierte Pfade, dargestellt durch Flow One, Flow Two, Flow Three und so weiter also jemals gefragt, wie man sie benutzt, wie man sie umbenennt oder einfach nur versteht, worum es bei ihnen geht Sie befinden sich also im richtigen Test. Also lass uns anfangen. Prüfen Sie zunächst, ob Sie bereits einige Flows haben. Gehen wir also zum Prototyp und ich werde auf diesen zufälligen Abschnitt klicken, einen leeren Bereich. Wie Sie sehen können, habe ich Flüsse, als ob ich fünf Flüsse habe. Also ein Ploto fließt drei, fließen vier und dann klicken Sie auf Mehl Also, warum wir es fließen sehen. Nun, es ist praktisch, wenn Sie an verschiedenen Abschnitten oder Funktionen arbeiten verschiedenen Abschnitten oder Funktionen Sie können sie sogar mit bestimmten Seiten verbinden. Sie haben vielleicht gesehen, dass ich den Flow häufig bei Präsentationen verwende . Es ist also einfach. Wenn ich einfach darauf klicke, stellt es den Fluss dar, wie Sie sehen können. Es stellt momentan nur einen Bildschirm dar , weil es nicht verbunden ist. Aber wenn ich das so verbinde klicke ich darauf, wie du sehen kannst, jetzt ist es zugänglich, und wir haben auch unser Overlay So funktioniert Flow also. Und nehmen wir an, ich möchte auf Flow Four zugreifen. Ich kann es einfach verdoppeln und es wird angezeigt, welcher Flow Four ist. Und danach Fluss zwei, Fluss drei. Und erinnern Sie sich, als wir das auch erstellt haben , also in diesem Fall verwende ich Flow. Also, wenn ich das vorbereite und wenn ich zu Proto gehe und wenn ich das präsentiere, äh, wird das auftauchen Und in diesem Folienabschnitt habe ich alle Flows Okay, wir haben also Flow One. Also, ich kann es einfach machen, es so nehmen. Also, ich habe Flow drei, ich kann auf die Titelseite klicken, okay, lass uns zu unserem Design zurückkehren. Okay. Ich glaube, Wild hat es geschafft. Ich habe den Namen versehentlich gelöscht. Also lass mich ihn umbenennen. Wenn du dich dabei ertappst, dass du im Flow zeichnest und Buchstaben löschen möchtest, klicke auf den Hintergrund und gehe zum Prototyp und lösche diejenigen, die du nicht benötigst, in einem sauberen Satz. Nehmen wir an, ich möchte keinen Click-Cart-Flow, also kann ich hier einfach auf den Click-Car-Flow klicken und wie Sie sehen können, wird dieser im Prototyp-Bereich angezeigt. Und ich kann einfach auf diese Schaltfläche klicken und sie ist jetzt gelöscht, oder ich kann auch die Schaltfläche Löschen verwenden. Wie Sie sehen können, arbeiten wir an unserer Click-Cart-Comma-App Nehmen wir an, ich möchte meinen Flow von dieser Seite aus starten. In diesem Fall kann ich also einfach zur Ptype-Einstellung gehen und einen neuen Flow hinzufügen, und ich kann darauf doppelklicken und ihn umbenennen Nehmen wir an, das ist eine Klickkarte. Ich kann einen Namen nennen, es ist eine Klickkarte. Clickard-App. Ich kann es einfach umbenennen Sie denken vielleicht, warum wir unterschiedliche Flüsse haben. Nun, es hilft bei der Organisation des E-Prototyps, insbesondere bei komplexen Projekten. Jeder Flow ist eine eigene Geschichte für den Handel. Wir haben diesen Flow zuerst erstellt. Danach haben wir diesen Tow und wir haben diese Overlays zusammengefügt. Das ist eine Reise und sie hilft uns, unsere Sachen zu organisieren. Und noch etwas, nehmen wir an, Sie möchten diesem Flow eine Beschreibung hinzufügen. Klicken Sie also einfach auf diesen Flow und gehen hierher und klicken Sie auf die Bleistift-App, Beschreibung. Und ich kann sagen, dass dies die Startseite ist. Okay. Wenn ich das schließe, wenn ich zur Präsentation gehe und was war das Ich kann also sehen, das ist die erste Seite, auf der du Karpfen klickst. Unsere Stakeholder oder unser Kunde werden wissen, was das bedeutet? Es gibt noch eine weitere wirklich coole Sache, Beispiel, sagen wir, Sie möchten Ihre Flows teilen. In diesem Fall möchte ich meinen Flow Nummer zwei teilen. Ich kann diesen Link einfach kopieren. Du kannst sagen, es gibt einen Link-Button, und lass uns diesen kopieren und er gibt uns die URL. Wenn ich es hier einfüge, damit du es sehen kannst, haben wir unseren Flow zwei bekommen und derzeit gibt es zwei anonyme Konten. Diese verwenden unseren Flow, und wir können auf unsere Flows zugreifen . Aber ich weiß nicht , warum etwas fehlt. Ich glaube, es gibt eine Panne oder so etwas, weil wir gerade nicht in Figma eingesperrt sind Aber warum zeigen sie all die Ströme? Es soll uns nur einen Flow geben, nicht alle. Wenn es bei dir passiert, lass es mich bitte wissen. Vorteil des Links ist also, dass Sie ihn direkt mit Ihren Teammitgliedern sowie mit Ihren Kunden und Ihren Freunden teilen sowie mit Ihren Kunden können. Du willst nur Oh, lass es sie wissen. Das ist der, an dem ich arbeite, und so sieht es aus, und so funktioniert das. Nutshell Flows sind also Ihre Design-Story und helfen Ihnen, mühelos durch komplexe Typen zu navigieren Sie umzubenennen und eine Beschreibung hinzuzufügen, ist der Schlüssel, um alles sauber und aufgeräumt zu halten Also, alles klar, das ist der Überblick über die Flüsse. Bereit für mehr P-Magie. Schließ dich mir im nächsten Video und lass uns weiterhin tolle Designs kreieren. 82. Overlay-Übergänge in Figma Prototyping in Prototyp: Die Entwickler von Claire sind ratlos, weil es Zeit weil es Wir sind dabei, in die fantastische Welt einzutauchen, Ihnen Click Card Alto in einer Figur zum Leben zu erwecken Süden glänzende Tasten, die tatsächlich Dinge tun, mehr Übergang, die Ihrem Benutzer einen interaktiven Bildschirm bieten , der sich wie Magie anfühlt Jetzt weiß ich, dass einige von Ihnen vielleicht Pigma-Profis sind, die bereits Prototypen wie Ninjas bedienen Aber hey, für alle anderen, die das Prototyping spüren. Was jetzt? Ping, mach dir keine Sorgen. Dieses Video ist eine freundliche Anleitung zu den Grundlagen. Wir werden kleine Schritte machen, Bildschirme verbinden, Interaktion hinzufügen und Ihre Klickkarten-App so einrichten, dass wie ein flüssiges und freundliches Meisterwerk anfühlt. Es wird also einfach sein. Wir halten die Dinge einfach, auch wenn Sie Figma noch nie zuvor angefasst haben Denken Sie an Fingerprinting, aber mit Pixeln und einem tollen Designtool abenteuerlustig fühlst, wenn du Schritte kennst, pausiere das Video und zeige dir deine Fähigkeiten Lasst uns also eine Community von Cliard ProtypingGur aufbauen. Okay, kein beschämender Kampf. Ich weiß, dass sich einige von Ihnen vielleicht verloren fühlen. Das ist ein Sicherheitsnetz. Wir werden es aufschlüsseln, Ihre Fragen beantworten und sicherstellen, dass alle die Ziellinie erreichen. Worauf ein Prototyp stolz sein kann. Und lassen Sie uns die Clickart-Vision in eine anklickbare interaktive Realität verwandeln in eine anklickbare interaktive Realität Also lass uns gehen. Okay, also ich habe schon einige Fehler darin, die absolut unnötig sind. Okay, lass uns zuerst zum Prototyp gehen. Lassen Sie mich das wiederholen , weil ich alles von Anfang an zeigen möchte alles von Anfang an zeigen Okay, also wenn du zur Rasektion gehst, werden da ein paar Punkte wie dieser sein, und wir müssen es nur verbinden Das sind alles, und nachdem wir sie verbunden haben, stellen wir einige Optionen Wie beim Tippen muss es zur Startseite navigieren und die Animation läuft sofort. Ich möchte, dass das nach der Verzögerung passiert. Ich möchte nicht, dass das auf einem Tab steht. Nach 800 Millisekunden müssen Sie also auf diese Seite gehen Also sagen wir das Figma und wir wollen, dass es eine Disol-Animation ist Wenn Sie möchten, können Sie auf intelligente Animation einstellen, aber das Problem mit intelligenter Animation ist, dass Sie manchmal seltsame Dinge tun Also verwende ich die meiste Zeit Dissolve. Okay, es funktioniert also. Intelligente Animationen funktionieren in komplexen Beispielen. Also werden wir diese Dinge in Zukunft sehen d. Also so dafür. Bei diesem Angebot werden wir also einfaches Prototyping durchführen. Okay, wir sind also mit dem ersten fertig. Im Prinzip haben wir bereits von diesem Flow erfahren. Also benenne ich es um. Also habe ich es wahrscheinlich Karpfen genannt. Also von hier aus wird unser Flow beginnen. Okay, mit diesem sind wir fertig und ich werde diesen so lassen, wie er ist, weil wir die Pop-Ups auf unserem Bildschirm brauchen, genauso wie diese Nutzungsbedingungen. Jetzt wollen wir dieses Burger-Menü verbinden. Das ist also das Symbol für das Burger-Menü. Also werde ich dieses mit diesem Menü verbinden. Und okay, es ist derzeit auf dem richtigen Weg und auf der Registerkarte ist kein Tier , weil ich glaube, das habe ich schon hinzugefügt. Also muss ich diesen entfernen, diesen auch. Also lass es uns von Grund auf neu machen. Wenn jemand auf der Registerkarte darauf klickt, gehen wir jetzt zur Burger-Seite, aber ich will das alles nicht haben. Es gibt also eine Sache, an die sich Figma erinnert, an deine vorherige Animation Also in der vorherigen Sache haben wir hinzugefügt. Auflösen. Es behält das Dissol-Ding Also behalte das im Hinterkopf. Wenn du es ändern willst, ändere es oder wenn du es behalten willst, kannst du es behalten. In diesem Fall möchte ich einziehen. Ich möchte, dass diese Animation nach 300 Millisekunden so von links nach 300 Millisekunden so Lassen Sie uns auch dieses Burger-Menü einrichten. Wenn wir auf diesen Zurück-Pfeil klicken, muss er zur Startseite gehen. Aber derzeit auf Tab sind wir im Einzug. Also wenn ich dieses Burger-Menü benutze, wie du siehst, rutscht es rein, aber wenn ich auf diesen Pfeil nach hinten klicke, wie du siehst, funktioniert es nicht so, wie ich es möchte. In diesem Fall wollen wir also, dass es sich um einen Umzug handelt, und zwar von der linken Seite, also so. Und wir haben auch einige Animationen hinzugefügt. Also werden wir diesen behalten. Und wenn ich mein Burger-Menü wieder platziere, wie Sie sehen können, rutscht es hinein und es rutscht zurück, gehen Sie raus. Okay, so sollte es also funktionieren. Okay. Jetzt sind wir mit diesem fertig. Nehmen wir an, lassen Sie uns zur Mode übergehen. Und lassen Sie uns dieser Mode mit diesem Schuh beitreten. Ich weiß, dass das ein geeigneter Weg ist, denn in der Mode gibt es viele Kategorien, und ich gehe einfach zur Produktseite der Schuhe. Gehen Sie auf der Registerkarte zu den Produktdetails, und ich möchte, dass dies alles oder sofort angezeigt wird. Gehen Sie zur Instanz. Lass es uns nach 800 nochmal in der Vorschau spielen, ich habe es richtig verstanden, ich will diese Mode nicht. So wie das hier. Es ist ein Augenblick. Wenn ich das so einstelle, dass es sich auflöst, wollen wir mal sehen, wie es funktioniert. Mode löst sich auf. Funktioniert besser. Ich behalte den Intro-Diesel und entspanne die Geschwindigkeit um 300 Millisekunden. Okay, lass uns an der Kontoseite arbeiten . Immer wenn ein Benutzer auf dieses humorvolle, nicht menschenähnliche Symbol wie dieses klickt , muss es auf mein Konto übertragen werden. Ich habe eine einfache Sache hinzugefügt. Die GCC-Seite und Disol sind draußen und 300 Millisekunden. Wenn ich darauf klicke, wie du sehen kannst, löst es und wir sind Okay, jetzt will ich zurück. Von hier aus kann ich nicht zurück. Ich kann einfach diese I-Taste drücken. Okay, also ich möchte zurück zu meiner Homepage gehen. Wenn ich also zurück drücke, musst du auf die Startseite gehen, und ich werde einige Grundvoraussetzungen hinzufügen. Navigiere nach Hause, Disol ist draußen. Das Gleiche Wenn ich auf diese Homepage klicke. Das ist cool. Okay. Was ist die nächste Sache? Okay, ohne Grund habe ich diesen hinzugefügt, also werde ich diesen behandeln, weil wir ihn nicht wollen Okay, jetzt lass uns die Kategorie Design entwerfen. Wie Sie sehen können, befinden wir uns auf der Kategorieseite, aber das Startsymbol ist hervorgehoben. Also möchte ich, dass das hervorgehoben wird. Gehen wir also zu Design und Farbauswahl. Okay, jetzt sieht es toll aus. Wir wissen also, dass wir uns im Kategoriebereich befinden. Okay, jetzt muss ich mich allen anschließen. Derzeit arbeite ich in Designgremien, also lassen Sie uns zu Prototypen übergehen, Sie werden hier in einer Kategorie wie dieser sein, und ich werde die Dinge einfach halten Negative Kategorie ist alles raus. Das Gleiche. Okay, lass uns meiner Bestellung beitreten. Ich weiß, dass es ein bisschen weit von den Änderungen auf der Homepage entfernt ist. Meine Befehle, es ist am Ende. Sie können diese Methode wie das Ziehen und Suchen Ihrer Bestellungen verwenden , und Sie können sie auch von hier aus finden Aber ich weiß, dass ich auf diesem Rahmen eine Menge Sachen gemacht habe. Und wir haben eine Menge Rahmen Seiten, komm schon. Wenn Sie eine organisierte Person sind, wird es nicht so durcheinander gebracht Okay. Also meine Bestellung, das Gleiche. Animation, all das. Und Benachrichtigung. Lassen Sie uns der Benachrichtigung beitreten. Die Benachrichtigung ist da, wo sie ist, sie ist hier. Lass uns benachrichtigen und Meine Benachrichtigung. Ich glaube, es ist meine Benachrichtigung. Aber ich habe zwei meiner Benachrichtigungen. Ich weiß nicht warum. Okay, lass uns diesem beitreten. Lass uns sehen. Das ist richtig oder nicht. Okay, das ist das Richtige. Jetzt funktioniert es. Als letztes muss ich noch meinem Konto beitreten. Mein Konto, wo ist mein Konto. Dieser. Okay, wir haben uns zu fast 80% oder vielleicht zu 70% an unserem Design beteiligt. Lass uns spielen, wie es aussieht. Nach 800 Sekunden nach 800 Millisekunden erhalten wir dieses Den will ich nicht. Gehen wir zur Kategorie. Und noch einmal, diese sind nicht miteinander verbunden, also müssen wir uns dem anschließen. Wenn ich rückwärts auf die Rückseite klicke, kann ich direkt zur Startseite wechseln. Ich muss das Ding auch ein bisschen nach oben bewegen. Lassen Sie mich also zur Startseite gehen und lassen Sie mich das Ganze nach oben verfolgen. Okay, das wird wohl reichen. Okay, ich habe der Navigationsleiste all das Laster hinzugefügt , aber wir haben einen Vorteil. Also dieser ist für Dark Mo und dieser ist auch für Dark Mo. In diesem Fall kann ich diesen einfach kopieren und hier einfügen, und es wird genauso funktionieren. Wenn ich es also herausziehe und wenn ich Steuerung C kopiere und immer noch den Rahmen und die Steuerung, funktioniert, wie Sie sehen können, alles einwandfrei. Aber wir müssen nur die Farbe ändern. Also das ist mein Befehl. Also gehe ich zum Design-Panel und ändere die Farbe, diese hier, und die Minot-Benachrichtigung wird an erster Stelle stehen. Das ist gut für den Typ. Okay. Das sollte es, es funktioniert. Es funktioniert, Bruder arbeitet. Wir haben keine Warenkorbseite erstellt, aber wir können einfach zur Mold-Seite weiterleiten. Nehmen wir an, wenn Sie etwas in den Warenkorb legen, bestellt es automatisch. Es hat KI im Inneren. Okay, lass uns jetzt mit dieser App spielen. Ich glaube, ich habe alles mitgemacht. Also müssen wir auftauchen. Ich will diese Mode nicht. Okay, in den Warenkorb legen, einer öffnet sich. Wie Sie sehen können, gibt es einen Hotspot. Wenn ich auf die leere Stelle klicke, einige Teile hervorgehoben, und diese werden als Hotspot bezeichnet. Nehmen wir an, ich möchte zur Kategorie wechseln. Ich kann einfach darauf klicken, aber ich glaube, ich kategorisiere. Es ist quadratisch. Ich werde das ändern und lass uns zum Home-Konto gehen. Falsch. Alles funktioniert Dies ist das grundlegende Prototyping für diese App, und lassen Sie mich zur Kategorie übergehen Es funktioniert gut. Es hat dieselbe Farbe, aber ich weiß nicht, warum es das rote Rechteck zeigt. Wir haben alles im Premort Go gesehen und lassen es uns auf einer großen Leinwand im echten Prototyp sehen Und mein Flow ist dieser . Klicken Sie auf die Warenkorb-App. Okay. Pop, lass uns auftauchen. Okay. Danach fallen Bestellungen der Kategorien C und Acme an. Zurück zur Startseite Pogo es funktioniert. Es funktioniert. Wir können diese beiden Seiten, die Kategorie „ Startseite“, die Liste der Mification-Sites „Meine Bestellungen“, auch miteinander verbinden Kategorie „ Startseite“, die Liste der Mification-Sites „Meine Bestellungen“, Ich habe diese Seiten nicht erstellt, weil ich dachte, unser Projekt würde zu umfangreich werden Okay. Also da habt ihr es, meine Freunde, grundlegende Prototyping für unsere Warenkorb-App Also danke, dass du an diesem Kurs teilgenommen hast, und ich werde dich im nächsten 83. Kursprojekt 15: Pop Up und Flow wie ein Profi: Prototyping-Interaktionen in Figma: Figma pos, das ist Projektzeit. In diesem Projekt müssen wir Popups erstellen, auffällige Popups mit Figma-Tools Sie können Dingformen, Farben, Text und vielleicht sogar Verbinde diese Pops mit Seiten und verwende dabei problemlos mehr als Und danach erstellen Sie Inception. Kein Anfang. Ich meine, wenn du auf die Allgemeinen Geschäftsbedingungen klickst, muss sie geöffnet werden, und das ist der Anfang. Du musst den Anfang erschaffen. Und du kannst auch diesen erstellen. Wenn du auf den IE-Button klickst, muss er sich öffnen. Dieses kleine Menü. Ich denke, es wird auch Tooltip genannt. Danach müssen Sie alle Dinge mithilfe von Prototypen zusammenfügen, und wir haben bereits gesehen , dass Sie so auch Flows verwenden können Und wenn Sie auch einen einzigen Flow verwenden können. Es hängt ganz von dir ab. Und nachdem Sie Ihr gesamtes Design entworfen und zusammengefügt haben, machen Sie einen Screenshot und reichen Sie ihn mir im Projektbereich ein. Ich denke, hier dreht sich alles um unser Projekt 15. Vielleicht weiß ich nicht, welche Nummer es war. Andere Dinge gibt es auch bei Pädophilie und all diesen Dingen und unterwerfe mich Das ist also ein Foto und ich werde dich in der nächsten Welt sehen 84. Sticky Scroll in Figma: Co-Designer, in dieser Stimmung tauchen wir ein in die Welt der Fixierung von Elementen sowohl nach oben als auch nach Diese Technik verleiht unserem Design einen Hauch von Fitness, da Inhalte problemlos hinter feste Elemente gleiten Und so die coole Welt des horizontalen Swipe-Scrollings in Figma. Bist du bereit, dein Designspiel zu verbessern ? Also, lass uns anfangen. Also, bevor wir mit unserem Video beginnen, lass mich dir etwas zeigen. Wenn ich also zur Präsentation gehe, wie Sie sehen können, wenn ich hier scrolle, wie Sie sehen können, scrollt auch diese Navigationsleiste mit unserem Design. Und das will ich nicht Es sollte hier drüben bleiben, an derselben Stelle, und genauso wie hier, unserer oberen Navigationsleiste. Also wenn ich es scrolle. Also du kannst sagen, es geht aufwärts, aber ich will, dass das hier drüben bleibt. Auf diese Weise werden wir das lernen, ebenso wie das Verdica-Scrolling oder das horizontale Scrollen Es ist also sehr einfach. Wählen wir die Startseite aus und gehen wir zum Prototyp. Und ich weiß, es gibt einen Multiversum-Wahnsinn. Aber wir interessieren uns für diese beiden Dinge wie die obere Leiste, tut mir leid, die Navigation in der oberen Leiste und die Schaltfläche für die untere Navigation Fangen wir also mit der oberen Leiste an. Also wähle das einfach aus. Ich hoffe, du hast all die Dinge in Frame hinzugefügt. Und lass mich nachschauen. Okay, ich habe hinzugefügt, dass Cmd Car Frame dasselbe ist, nicht dasselbe, aber es fügt alles im Rahmen Wie Sie sehen können, bin ich gerade im Prototyp und die Scrollleiste ist Scrollen mit übergeordnetem Ich möchte, dass die obere N-Bar an derselben Stelle bleibt. Also werden wir uns für Fixed und Overflow entscheiden. Derzeit gibt es also kein Überlaufelement wie Bilder oder Rechtecke, die außerhalb dieses Rahmens überlaufen Also lassen wir es so wie es ist, Überlauf, kein Scrollen. Und jetzt, wenn ich das scrolle. Und wie Sie sehen können , bleibt es dort. Es bewegt sich nicht mit dem ganzen Frame. Und jetzt ändern wir diesen und auch diesen. Wie Sie sehen können, bewegt es sich auch. Und ich möchte auch, dass dieser am selben Ort bleibt. Also lass uns gehen und dieses eine Bild am selben Ort auswählen , genauso wie dieses Das Gleiche hier, am einfachsten behoben und kein Scrollen erforderlich. Wenn ich jetzt in meiner App nachschaue, bleibt, wie Sie sehen, alles am selben Ort Also stecken wir einfach unsere Elemente fest. Also war es wirklich einfach. Okay, es ging nur darum, wie man alle Elemente in einem Fuma Aber wie Sie sehen, ist unser Gestell im Hocker und das würde ich nicht wollen Ich möchte, dass unser Rahmenrahmen so aussieht. Und Sie können sehen, dass die Elemente aus dem Rahmen geraten sind. Also muss ich auf den Clip-Inhalt klicken. Jetzt sind sie Clip. Sie werden also eigentlich nicht gelöscht. Wenn ich also zur App gehe und sie nach unten scrolle, wie Sie sehen können, ist alles dort drüben Okay, so funktionieren Clip-Inhalte. Lassen Sie mich Ihnen nun zeigen, wie vertikales oder horizontales Scrollen funktioniert Derzeit verwenden wir vertikales Scrollen, aber ich möchte ein horizontales Scrollen hinzufügen Also ich glaube, ich habe etwas Layout hinzugefügt. Wenn ich also dieses Layout wähle, ist der Inhalt, wie Sie sehen, außerhalb des Frames und wir können Clip-Inhalte verwenden. Und lassen Sie mich das bis zum Frame verfolgen und das Gleiche gilt für diesen. Lassen Sie mich den Rahmen zuschneiden. Nein, beschneide das. Ich passe es nur an. Okay. Wenn ich jetzt zu Produkten und Mode gehe, scrolle sie, wie du sehen kannst. Okay, ich glaube, ich muss zum Prototyp P Derail gehen. Okay, es wird nicht gescrollt. Und lassen Sie uns ein Scrollen hinzufügen. Das sollte oder so sein? Nein. Es ist vertikal. Und wenn ich es jetzt überprüfe, wie Sie sehen, kann ich es scrollen. Aber auf den Karten kann ich nicht scrollen. In diesem Fall möchte ich also horizontales Scrollen hinzufügen. Und scrolle auch das übergeordnete Element . Das wird dasselbe sein. Wenn ich die Größe ändere, gehen wir zu einer Produktdetailseite. Wie Sie sehen, kann ich sie vertikal und horizontal scrollen So funktionieren vertikales Scrollen und horizontales Scrollen Diese Elemente sind jedoch nicht festgelegt. Lass mich das Element einfach anheften. Lass uns hier drüben bleiben, genauso repariert wie dieser. Wenn ich es jetzt überprüfe, wie du siehst, sieht das cooler aus. Es gibt eine Sache, die ich hier gemacht habe. Wie Sie sehen können, habe ich diese Kategorieoptionen in der Box hinzugefügt, aber wir können das in vertikales Scrollen umwandeln Ich habe die Startseite als Demo registriert und das horizontale Scrollen hinzugefügt, das Scrollen mit dem übergeordneten Element. Derzeit wird nicht Lassen Sie mich die Horizontale wählen und lassen Sie mich den Kontinent so zuschneiden Lassen Sie mich nun diesen präsentieren Wie Sie sehen können, bin ich gerade in der Gegenwart, und ich kann das tun. Wenn du willst, kannst du sowohl diesen als auch diesen wählen . Aber aus meiner Sicht sieht das cooler aus. Aber wenn du das machen kannst, sieht es aus wie Tag Also , hier sieht es aus wie Tag Also , dreht sich alles um vertikales Scrollen, horizontales Scrollen sowie darum, wie du deine Elemente sowohl unten als auch oben anheftest sowohl unten als auch Also Jungs, hier dreht sich alles um vertikales Scrollen, horizontales Scrollen sowie darum, wie man Elemente sowohl unten als auch oben Ich weiß, dass dieses Video etwas länger und verwirrend sein könnte. Aber es steckt voller wertvoller Einblicke und hilft bei der Bewältigung potenzieller Herausforderungen. Also bleib dabei und ich werde es euch im nächsten tun. 85. So erstellst du Auto-Scrolling-Animation in Figma: Mission von Maxie and Tags besteht darin die Kunst des automatischen Scrollens in Figma zu beherrschen Also draufhauen, das heißt hier Lob. Also, wie Sie sehen können, habe ich das vorherige Fenster auf meiner Figma und auf meinem Desktop geöffnet meiner Figma und auf meinem Und wenn ich auf die Elektronik klicke, wie Sie sehen können, scrollt sie Ich habe es nicht manuell so gescrollt. Es scrollt also automatisch. Auf diese Weise werden wir lernen, wie wir das machen können Figma. Bevor wir das tun, lassen Sie mich Ihnen etwas über den Inhalt der Clips erzählen Ich glaube, in der Presse habe ich es Ihnen gesagt, aber es war nicht im Detail, also dachte ich, lassen Sie mich Ihnen sagen, was Clip-Inhalt ist Okay, stell dir deine Figur mit einem leckeren Teller mit Essen vor, aber es läuft über der Tischdecke Nicht zum Ersetzen, oder? Der Inhalt eines INF-Clips ist so, als würden Sie ein Serviertablett unter Ihr Design-Meisterwerk legen . Es sorgt dafür, dass alles sauber und ordentlich bleibt, indem alle Teile, die außerhalb des Designs verschüttet werden, außerhalb des Designbereichs versteckt alle Teile, die außerhalb des Designs verschüttet werden, außerhalb des Designbereichs Also hier, wie es funktioniert. Okay, lassen Sie mich Ihnen zeigen, wie Clip-Inhalte funktionieren. Also wähle ich die Startseite aus. Und wie Sie sehen können, ist unser Telefonbildschirm bis hierher geöffnet, aber unser Inhalt ist überfüllt In diesem Fall wurde also derzeit der Inhalt des Clips ausgewählt. Aber wenn ich ihn auswähle und versuche, meinen Rahmen so zu gestalten wie diesen, genauso wie den tatsächlichen Bildschirm des Mobiltelefons, läuft er, wie Sie sehen können, über. In diesem Fall können wir den Clip-Inhalt einfach einschalten, und wie Sie sehen, ist er unsichtbar Es ist da, aber es ist unsichtbar. Wenn ich zu den Homepage-Ebenen gehe, sind sie, wie Sie sehen können, dort drüben. Sie sind vorerst einfach unsichtbar. Wenn ich sie sehen möchte, kann ich einfach so auf den Clip-Inhalt klicken und sie sind jetzt sichtbar. Also lass mich ph, lass mich drauf gehen, weil ich dir das automatische Scrollen zeigen möchte dir das automatische Scrollen zeigen Der Vorteil von Clip-Inhalten besteht darin, dass sie unsere Zutaten sammeln. Ich spiele alle Elemente, die Sie entwerfen möchten, mit Text, Bildern, Formen in einem Stellen Sie sich einen Rahmen wie eine U-Platte vor. Wenn du auf den Inhalt des Clips klickst, ist das so, als würdest du dem Soft sagen: Hey, lass alles innerhalb des Rahmens. Kein Herausgucken, genau wie bei einem magischen Faltschild. Alles, was hinter dem Rahmen überläuft, verschwindet sorgt für ein sauberes und Denken Sie daran, dass der Inhalt nicht wirklich verschwindet, er versteckt sich nur hinter dem unsichtbaren Schild Und Sie denken vielleicht darüber nach , wo wir es verwenden können. Sie können sie beim Erstellen von Modellen verwenden. Es kann unseren Inhalt auf die Framegröße zuschneiden , um die Bildschirmgrenzen nachzuahmen verwenden Wie Sie sehen können, können wir sie auch bei der Erstellung von Prototypen Derzeit werden wir Prototypen erstellen. In diesem Fall bleiben also alle Elemente innerhalb eines Rahmens, sodass sie sich nicht überlappen oder den Skin überlagern Es hilft uns auch beim Bau echter Komponenten. Dieser Clip enthält Inhalte im Rahmen , um klare Grenzen für Elemente zu definieren , wenn wir planen, sie im gesamten Design wiederzuverwenden Denken Sie also daran, dass der Clip-Inhalt Ihr Frame ist. Es hilft Ihnen, Ihr Design professionell zu präsentieren und unordentliche Überläufe zu vermeiden Okay, hier ging es also nur um Clip-Inhalte. Kommen wir nun zu den Worten, wie man automatisches Scrollen macht. Also ich möchte eine Punktfunktion. Wenn ich auf diese Elektroniktaste klicke, muss sie automatisch auf diesem Fernseher landen. Für diesen Effekt werde ich also einen Prototyp erstellen, und ich glaube, er ist ausgewählt und ich habe ihn gemacht. Okay, lass mich das machen. Wir werden das von Grund auf neu machen. Okay, lassen Sie mich Elektronik wählen, und ich werde dazu einen Fernseher hinzufügen. Und wir haben diese Option. Auf einer Registerkarte sollte es zu Frame 28 scrollen, und das ist Frame 28, und derzeit haben wir y upset und xbset nicht hinzugefügt Also fügen wir das hinzu. Aber lassen Sie mich Ihnen zuerst erklären, wie es funktioniert. Derzeit ist es also animiert. Stellen Sie die Animation ein, damit wir auf die Idee kommen. Okay, wir sind also auf der Startseite. Wenn ich auf die Elektronik klicke, scrollt sie zu dieser Karte Das ist Elektronik, Fernsehen bis zu 70% günstiger. Okay. Gehen wir jetzt zur Animation über. Und wenn ich jetzt darauf klicke, wie Sie sehen können, ist es ein ziemliches Scrollen, und es hat einen geschmeidigen Effekt darauf Okay, du denkst vielleicht darüber nach, was das sind? Sie sind einfach verärgert über X und Y. Nehmen wir an, ich setze den Wert auf etwa -500 Und jetzt, wenn ich zu unserer Vorschau gehe und auf die Elektronik klicke, wie Sie sehen können, kommt sie hierher, aber ich möchte, dass diese Karte hier drüben ist, wenn ich hier drüben ist, wenn ich die Elektroniktaste drücke In diesem Fall gebe ich also einen Wert wie 250 ein. Also ist es nicht so genau. Sie müssen einfach damit spielen, da der Wert für verschiedene Rahmen und Designs unterschiedlich sein kann . Also lass es mich nochmal machen. Und wie Sie sehen können, kommt es hier rüber. Also ich habe schon mit diesem gespielt, also weiß ich, dass die beiden 50 am besten dafür geeignet sind. Und du kannst dasselbe auch mit uns machen. Gehen wir also zur Wiederverwendung. Das sind unsere We-On-Produkte. Seite. Das sind also Bewertungen und ich werde mich dem mit diesen Bewertungen anschließen. Wenn ich also auf diese Bewertungsschaltfläche klicke, muss sie automatisch zu dieser Bewertung scrollen. Schauen wir uns also die Mode an und klicken wir auf die Bewertung. Wie Sie vielleicht sehen, scrollt es. Okay, nehmen wir an, wir haben eine ziemlich große Seite wie diese, und wir haben keinen Clip mit dieser Seite erstellt Wenn ich also auf die hintere Taste Aca klicke, scrollt sie zu viel herum Ich möchte herkommen, nicht so. In diesem Fall wähle ich unseren Proto-Wire und spiele mit der Nummer. Lassen Sie mich das auf 300 addieren. Okay, ich muss meinen Standard setzen. Und jetzt, wenn ich darauf klicke, lass mich überprüfen, ob es funktioniert oder nicht. Okay, es funktioniert also. Aber es geht um Metatöpfe. Ich möchte, dass das in der Mitte ist. Lassen Sie mich den Wert auf etwa 500 ändern. Okay, -500. Okay, lass es mich nochmal überprüfen, weiß ich , dass es funktioniert So ist es bei mir. Also musst du nur mit den Offsets, den X- und Y-Verstimmungen spielen. Aber stellen Sie sich vor, meine Seite sieht so aus und die Werte sind derzeit so Wenn ich nun auf die Bewertung klicke, wie Sie sehen, sieht sie so aus. Und ungefähr verschüttet Wie Sie sehen können, haben wir bis zu 300 Millisekunden festgelegt . Und wir können es für etwa 1 Sekunde einrichten. Lass uns das einrichten. Und ich weiß, dass es sehr langsam sein wird. Also wie gesagt, mit 1 Sekunde ist es sehr langsam. Aber ich denke, 300 ist wie eine offizielle Standardausgabe. Du musst nur experimentieren, spielen und deinen Rhythmus finden. Da haben wir also Freunde, die mühelos eine Seite herunterscrollen wie bei einer Figma-Metro Alles, was anklickbar ist, kann dein Kind sein. Machen Sie also mit der Schriftrolle weiter, fügen Sie etwas Animation hinzu und lassen Sie Ihr Design zum Tanzen Also wir sehen uns beim nächsten. 86. Der Unterschied zwischen Teams, Projekten und Seiten: Hallo zusammen, lasst uns in das Figma-Universum eintauchen und die Geheimnisse von Teams, Projekt und Designdatei Also los, es wird aufschlussreich sein. Zunächst einmal, Dateien sind Magie, haben wir bisher nachgedacht Das ist das Projekt, an dem wir arbeiten. Sie können entweder in einem Draft oder Stahl in einem Projekt kühlen. Gehen wir zurück zu den Teams. Stell dir das Team als einen großen Flügel vor. Wie Sie sehen können, habe ich hier mehrere Teams. Also falls es vielleicht geschlossen ist, klicken Sie einfach darauf, es wird geöffnet Und in meinem Fall habe ich mehrere Teams. Also im vorherigen Kurs oder während des Wandunterrichts. Also habe ich diese Projekte erstellt und sie haben ein Projekt. Und alle von ihnen sind kostenlos, und dieses ist kostenpflichtig, weil ich eine wirklich gute Beziehung zu Webma habe. Also haben sie mir eines Tages eine E-Mail geschrieben und gesagt: Du kannst ein Team für drei Jahre umsonst haben Also dachte ich, klar, warum nicht? Ich werde ein Team kostenlos haben oder drei Jahre. Und ich habe das und ich benutze es nicht oft, aber ja, ich habe es umsonst bekommen. Teams können ein Firmenname oder eine Abteilung wie Vertrieb, Marketing oder eine bestimmte Region sein. Innerhalb dieses Teams gibt es verschiedene Projekte. Wie Sie sehen können, habe ich zum Beispiel ein App-Projekt, das sich insofern bezieht, als ich eine App für die Lieferung von Lebensmitteln erstellt habe und ich habe diese App für die Lieferung von Lebensmitteln sowie Wireframe Und in diesem imaginären Team habe ich dieses Scroll-Ding sowie die Clickcard-App, die im MCU-Projekt kopiert wurde, ich habe eine Ait-Plattform für MCU ich habe Das habe ich geschaffen. Das wollte ich dir wirklich zeigen. Okay, dieser. Ich habe diese OTT-Plattform für MCO erstellt. Es war im vorherigen Kurs und während ich unterrichtete. Zu dieser Zeit habe ich dieses Projekt erstellt. Und innerhalb eines einzigen Teams können Sie eine Website, eine mobile Version dieser Website, eine App-Version sowie sogar einige Dateien haben mobile Version dieser Website, App-Version sowie , die sich auf einen großen Start beziehen. In der kostenlosen Version können Sie viele Teams haben, die Sie mögen, aber es gibt einen Clou, nur ein Projekt ist drin Wie Sie sehen können, handelt es sich um kostenlose Versionen. Und wenn ich versuche, auf die Plus-Schaltfläche zu klicken, und wenn ich versuche, etwas hinzuzufügen, werde ich gefragt, ob Sie zahlen sollten. Verdammt, du darfst kein weiteres Projekt hinzufügen, aber mit der Premium-Version In diesem Fall habe ich also ein kostenloses Team, sodass ich hier so viele Projekte hinzufügen kann, wie ich möchte. Um die Liebe zu Figma mit anderen Designern oder Mitarbeitern zu teilen , fügst du sie dem Team hinzu, sodass sie auf alle Projekte zugreifen können Es ist wie ein Backstage-Pass zur R-Designwelt. Nehmen wir an, das ist mein, lassen Sie uns das CVD machen. Und hier möchte ich mein Teammitglied hinzufügen, sodass ich es hinzufügen kann, indem ich es über diesen Link teile, oder ich füge einfach ihre LID hinzu, damit sie auf alles zugreifen können, was in meinem Team vorhanden ist, sie können auf diese Datei, diese Datei, diese Datei oder irgendetwas in diesem Projekt zugreifen diese Datei oder irgendetwas in diesem Projekt Und sie können sie auch bearbeiten. Wenn Sie die Erlaubnis geben, können sie auch bearbeiten. Sie denken vielleicht, warum haben wir Entwürfe und Dateien in Projekten Stellen Sie sich den Entwurf als ein geheimes Versteck vor. Hier testest du deine Arbeit, bevor sie für die ganze Welt sichtbar ist Kein Juni, keine betenden Augen. Nur du und dein kreativer Prozess. Projekte hingegen sind die organisierten Geschwister oder Entwürfe Sie ermöglichen es deinem Team oder jedem, mit dem du das Team teilst , ganz einfach eine Zugangsdatei zu finden , ob öffentlich oder privat du entscheidest. Lass mich dir eine Sache zeigen. Nehmen wir an, Sie haben ein Projekt wie dieses abgeschlossen. In diesem Fall habe ich diese App erstellt. Okay, dieses Telefon war die App. Und ich möchte das dem Team hinzufügen, also kann ich es einfach ziehen und ich kann es hierher bringen. Und es könnte das öffnen. Wie Sie sehen können, ist es hier vorhanden, aber ich verwende drei von drei Dateien. Wenn ich also versuche, eine weitere hinzuzufügen, heißt es: Zahlen Sie, zahlen Sie mich, denn das ist eine kostenlose Version. Aber wenn Sie das in einer kostenpflichtigen Version tun, werden so viele Dateien hinzugefügt, wie Sie möchten. Und es ist unbegrenzt. Jetzt weiß ich, dass du vielleicht denkst, kann ich nicht einfach alles in einem Entwurf behalten und teilen , wenn ich fertig bin. Klar, das kannst du. Wenn du alleine arbeitest, dann mach es. Aber wenn Sie mit Teams oder mehreren Partnern arbeiten, dann entscheiden Sie sich für Projekte, Teams wie dieses. Als ich anfing, Figma zu lernen, etwa 2000189. Sagen wir mal, ich möchte jemanden zu meiner Datei hinzufügen , während ich Draft verwende Diese Person hat also nur gesehen , was ich mache. Diese Person kann nicht bearbeiten. Aber jetzt hat Figma ihre kostenlose Version aktualisiert. Wenn Sie nun jemanden zu Ihrer Gruppe hinzufügen, können Sie sagen, dass diese Person das Design bearbeiten kann oder nicht, oder Sie können sie einfach als Ansicht festlegen Oder Sie können sie auch in eigene ändern. Ich bin total auf dich angewiesen. Und hier ist der Clou der Limitierung Die kostenlose Version erlaubt nur ein Projekt pro Team mit jeweils maximal drei Dateien Also wenn ich Teams öffne. Wie Sie sehen können, haben wir drei hinzugefügt, und es ist hier drüben, ob drei PThree-Dateien verwendet werden, und Fijum-Jump-Dateien verwenden wir nicht Also haben wir alle drei Seiten benutzt. Und mit pm kann ich unbegrenzt viele Dateien hinzufügen. Aber warte, es gibt eine Hopfenfigur, und wenn ein Student oder Pädagoge wie ich, gibt es eine kostenpflichtige Hochzeitsoption für Geh einfach zu fakmot com und sieh es dir an. Ich weiß nicht, was der aktuelle Plan für Schüler und Pädagogen ist, aber geh zu figmotcm Das sind also alles Unterschiede zwischen Drops und Teams. Also, Leute, das ist für Profis und ich werde es beim nächsten Mal sehen. 87. Figma Eine teilbare Teambibliothek erstellen: Willkommen zurück bei Ihrem Designer. Heute möchte ich dir etwas Cooles zeigen. Wie Sie sehen können, befinden wir uns jetzt im Entwurf und ich erstelle eine Designdatei. Und das ist eine leere Datei. Gehen wir zu Frames Phone Iphone 15 P max. Und ich werde in Asset investieren. Und wie Sie sehen können, gibt es ein Buch. Es heißt Bibliothek. Also lass uns auf die Bibliothek klicken. Und in der Bibliothek habe ich eine Option namens „Eine Kopie ausschneiden“ und die 20 Komponenten und 29 Stile. Wenn ich es also hinzufüge, wie Sie sehen können, enthalten unsere Asset-Panels unsere Komponenten dieser App, die wir erstellt haben . Bei der Entwicklung dieser App haben wir diese Komponenten, Textilien und Farbstile erstellt . Wir können all diese Dinge in dieser Designdatei verwenden . Damit ich es verfolgen kann. Ich kann Top-Aminos wie folgt hinzufügen, ich kann eine Navigationsschaltfläche wie diese und ich kann auch den gesamten Stil hinzufügen. Lassen Sie mich also etwas Text hinzufügen. Und wenn ich zu diesem Ding gehe, wie Sie sehen können, sind alle Textilien hier vorhanden, und ich kann einfach etwas zufälliges eingeben und das Gleiche mit der Farbe. Lass uns so etwas zeichnen und die Farbe kann sehen, dass hier alle Farben vorhanden sind. Die Primärfarbe, die zweite Farbe Grau, die natürliche Farbe ist schräg. Das alles ist dank dieser Bibliotheksschaltfläche möglich. Heute tauchen wir in die Mose-Welt der Teambibliotheken in Figma, Brace wird sagen Sie denken also, was genau Teambibliotheken sind , stellen wir uns Wo sich all Ihre Komponenten und Stile in Ihrem Dokument befinden Verbindung zu zukünftigen Kreationen und sogar zu anderen Mitgliedern Ihres Teams Das ist die Essenz von Bibliotheken. Indem Sie Ihr Design-Asset hier hochladen, öffnen Sie das Tor für andere Dokumente, um die Fülle Ihrer Stile und Komponenten zu nutzen und so Konsistenz und Effizienz fördern Lassen Sie uns also loslegen und Bibliotheken erstellen. Bevor wir das tun, lassen Sie mich die Veröffentlichung der vorherigen Bibliothek rückgängig machen, diese, Unveröffentlichte Version Okay. Okay, es gibt also einen Haftungsausschluss. Wenn Sie die kostenlose Version verwenden und diese Funktion nicht nutzen möchten. Sie können dies komplett überspringen , da dies die Premium-Funktion ist. FIPMA erlaubt diese Funktion nicht für kostenlose Benutzer. Denken Sie also daran Aber für das Wissen, ps das Video. Aber lassen Sie mich Ihnen sagen, was passiert, wenn Sie versuchen, dies in der kostenlosen Version zu tun? Nehmen wir an, wir haben derzeit diese Datei. Wir haben einen Entwurf erstellt und er ist kostenlos. Okay, das ist eine kostenlose Datei. Nehmen wir an, ich suche nach Beständen in Bibliotheken und versuche, das zu veröffentlichen, wie Sie sagen können, kommt es zu einem Knall. FICMA sagt, verschiebe diese Datei auf Professional Tap , um alle Komponenten zu veröffentlichen Und Sie müssen ein professionelles Team haben. Ich benutze einen kostenlosen, werde das nicht können. Ich habe also ein professionelles Team, das ich von Figma bekommen habe. Ich glaube, sie haben meine Kurse und meine Arbeit gesehen. Sie sagten also, du kannst ein Team umsonst haben. Okay. Ich habe unser Projekt dazu hinzugefügt. Ich habe eine Kopie gemacht und füge sie hier hinzu. Das ist also die Kopierversion. Und lass uns auf eins klicken. Lassen Sie uns Sie dazu bringen. Derzeit bin ich auf einer Komponentenseite wie auf einer Komponentenseite. Jetzt möchte ich diesen veröffentlichen. Gehen wir also zu Asset und klicken Sie auf die Schaltfläche Buchbibliothek. Jetzt kann ich dieses veröffentlichen. Also wenn ich auf Veröffentlichen klicke. Wie Sie sehen können, sind alle Komponenten im Textilfarbstil bereit, veröffentlicht zu werden. Wenn ich auf „Veröffentlichen“ klicke, wird es einige Zeit dauern und es wird veröffentlicht. Wir können überall in unserem Design, überall in unseren Projekten verwenden , genauso wie Tams Okay, es wurde also erfolgreich veröffentlicht. Und wenn ich zu Entwürfen gehe und eine neue Designdatei erstelle, ist sie leer Wie Sie sehen können, fügen wir eine 15-P-Asset-Bibliothek hinzu, und wie Sie sehen können, ist sie hier drüben. Sie ist also noch nicht hinzugefügt. Also diese werden hinzugefügt, und das wird nicht hinzugefügt. Also werde ich auf Datei hinzufügen klicken. Und jetzt ist mein Asset-Panel voller Kameraden. Okay, ich kann es einfach so verfolgen. Benutze diesen, benutze diesen . Ich kann meine Datei entwerfen. Ich weiß, das ist keine professionelle Art, Dinge zu tun, aber Sie haben die Idee, wie das funktioniert. Denken Sie daran, dies ist nur für die Pro-Version, nicht für die kostenlose Version. Lass mich das noch einmal machen. Es gibt noch eine weitere Sache, die Sie tun können wenn Sie diese Dateien wie Unicorn oder Status Bar sehen können Sie können ein spezielles Team erstellen und alle Komponenten sowie Ressourcen speichern, diese Ressourcen veröffentlichen und in Ihren Teams verwenden Ich denke, bei Einhörnern haben sie die Nähte gemacht, alle Symbole, Ressourcen, Textilien, Farben in einer Datei abgelegt , und wir können dieses Ding einfach veröffentlichen und direkt in unserem Projekt verwenden Wir müssen nicht in diese Datei gehen und sie kopieren und in diese einfügen Das ist also ein langwieriger Prozess. Wir können diesen einfach veröffentlichen und verwenden, wo immer wir wollen. Lass mich dir jetzt etwas Cooles zeigen. Derzeit befinden wir uns im Coons-Panel, und das sind alles Komponenten, die wir in Bibliotheken verwenden Nehmen wir an, Sie möchten aus irgendeinem Grund sowohl die Farbe dieses als auch dieses ändern . Lass es uns verrückt machen Und wie Sie sehen können, gibt es im Asset-Panel sowohl Apps mit einem Punkt als auch in diesem Buch Apps mit blauem Punkt Und in der Bibliothek stehen, wie Sie sehen können , vier Änderungen. Wenn Sie also auf Veröffentlichen klicken, sind dies die vier Änderungen. Wenn du es veröffentlichen möchtest, kannst du es veröffentlichen. Es teilt uns also mit, dass diese vier Änderungen derzeit geändert wurden. Wenn ich auf Veröffentlichen klicke, okay. Wenn ich jetzt zu dieser Datei gehe, die noch nicht aktualisiert wurde. Manchmal erscheint ein Pop-up, als ob sich etwas geändert hat. Möchtest du es überprüfen? Aber momentan kann ich das nicht sehen. Ich denke, es gibt eine Panne oder so, aber du kannst das Gleiche hier machen. Ich hab das Buch geschickt. Wir haben wieder diese Benachrichtigung. Es heißt ein Update. Diese Schaltfläche wurde aktualisiert, möchtest du sie aktualisieren oder nicht? Lass uns auf das Update klicken. Wenn Sie ein einzelnes Element aktualisieren möchten, wenn Sie alle aktualisieren möchten, klicken Sie einfach auf Alle aktualisieren, und es ist jetzt aktualisiert. Lass mich dir zeigen , wie das Pop-up aussieht. Okay, so sieht das Pop-up aus. Nehmen wir an, Sie aktualisieren etwas und möchten dieses Update aktualisieren. Ich weiß, es klingt komisch. Wenn Sie das überschriebene Element aktualisieren möchten, können Sie es zuerst überprüfen, um herauszufinden, welches Objekt formatiert können Sie es zuerst überprüfen, um herauszufinden, welches ist, und ob Sie es nun aktualisieren möchten oder Dies ist das, das aktualisiert wurde . Wenn Sie es aktualisieren möchten, klicken Sie einfach auf So funktioniert Pop. Aber du kannst hier dasselbe tun, wenn das Pop-up nicht kommt. Das sind alle Fähigkeiten der Bibliothek. Aber denken Sie daran, dass mit großen Befugnissen auch große Verantwortung einhergeht. Wenn Sie eine Komponente in der Bibliothek aktualisieren, das nicht automatisch Ihre Rechte in anderen Dokumenten. Ihre Änderungen sind sicher und unversehrt. Kurz gesagt, Teambibliotheken in Figma sind Leitlinien für Design, Konsistenz, Zusammenarbeit und Effizienz Machen Sie weiter, erstellen, teilen und gestalten Sie wie ein Zauberer mit den magischen Figma-Bibliotheken Also stadion für weitere Figma-Abenteuer im nächsten Video. 88. Animation VS Micro InteractionIn Figma: Ein kreativer Kopf. Heute tauchen wir ein in die Welt der Designzauber. Wo winzige Zecken ein magisches Benutzererlebnis auslösen können. Lassen Sie uns also über zwei mächtige Zaubersprüche sprechen , nämlich Mikrointeraktion und Animation Stellen Sie sich Ihre Benutzeroberfläche und UX als Bühne vor. Jeder Klick auf den Scroll-Tab ist ein Performer. Aber manchmal brauchen wir etwas Besonderes, um das Publikum zu faszinieren Hier kommen zwei Stars ins Spiel. Mit Mikrointeraktionen sind sie ein heimlicher Bestandteil der Designwelt Winzige subtile Bewegung , die flüstert. ist mir wichtig. An R-Benutzer. Genau wie bei Herz-ähnlichen Animationen macht Sury eine Pause und das Herz wächst sanft, wenn du darauf tippst. Das sorgt für Befriedigung des Instruments und das Herz wächst sanft, wenn du darauf tippst und bestätigt die R-Aktion Stellen Sie sich jetzt den Pull-down-Aktualisierungspfeil von Twitter vor, der als Stecknadel begrenzt ist. Stellt visuell dar, wie viel Mühe Sie in Ihre neuen Inhalte Sogar das Pop-up mit der Chat-Benachrichtigung von Facebook schnappt Ihr Vorstellungsgespräch, ohne überwältigend zu wirken. Wie eine kleine Blase, die sich ausdehnt und blinkt, wenn Sie eine Nachricht erhalten Und wer kann sich auf Snapchas verspielte Streak-Animation konzentrieren, bei der die Feuersymbole zwischen Freunden an aufeinanderfolgenden Tagen wachsen , was für ein Gefühl von Spaß und Kombination sorgt, Gefühl von Spaß und Kombination deine Serie aufrechtzuerhalten Lassen Sie uns nun etwas über die Animation lernen . Animationen sind dagegen der große Unloginist Sie stehen im Mittelpunkt und lassen Elemente auf magische Weise erscheinen, sich verwandeln oder verschwinden Denken Sie an Tiktox Seamless Down Transition , bei dem Videos miteinander so ein dynamisches und ansprechendes Weberlebnis schaffen , das Kreativität und Teilhabe fördert Unsere Prozessleiste für Instagram-Geschichten, der bunte Ring, der sich um Ihr Profilbild bewegt , gibt einen klaren Hinweis darauf wie lang die Geschichte ist und wie viel Sie gesehen haben Und auch Linked Skill Endorsement Cfd ist ein weiteres gutes Beispiel Die feierliche Animation, die Ihre Leistung untermauert und zu weiterem Wachstum motiviert wenn Sie eine Bestätigung erhalten Und vergessen Sie nicht den ausdrucksstarken Animationsmogie des Diskurses , der lebendig wird Online-Kommunikation eine Ebene von Persönlichkeit und Humor verleiht und Humor Wissen Sie, als ich 2018 19 Animation und Mikrointeraktion entdeckte 2018 19 Animation und Mikrointeraktion , dachte ich, beide waren gleich Was ist der Unterschied? Also Unterschiede, Umfang, Zweck und Subtilität Mikrointeraktionen sind mikroskopisch und geschehen innerhalb von Millisekunden. Bei Animationen kann es sich um große Gespenster handeln, die eine Sekunde oder sogar länger andauern. Mikrointaktion ist funktionell, sie gibt Feedback, bestätigt die Handlung und leitet den Benutzer, während Animationen rein dekorativ sein können und ihnen einen Hauch von Freude und Denken Sie daran, dass Mikrointeraktionen wie Flüstern sind, subtil doch unaufdringlich, während Animationen mutig und laut sein können, Aufmerksamkeit erregen und das Auge des Benutzers lenken Stellen Sie sich das so vor. Micro Rettion sind Pumpsi-Markierungen in Ihrer Designsprache, Benutzer reibungslos durch das Anmiti sind Ausrufezeichen, die den wichtigsten Bewegungen Empathie und Gebet verleihen, aber der wahre Zauber entsteht, wenn aber Eine Mikrorettion kann eine Animation auslösen oder eine Animation kann zu einer Mikrorettion führen, wodurch ein nahtloser digitaler Ablauf für den Benutzer entsteht Denken Sie daran, dass Mikrodetektion und Animation leistungsstarke Werkzeuge in Ihrer Design-Toolbox sind leistungsstarke Werkzeuge in Ihrer Design-Toolbox Setzen Sie sie mit Bedacht ein. Konzentrieren Sie sie auf den Benutzer, und Sie werden eine Benutzeroberfläche schaffen, die singt, tanzt und Ihre Benutzer in ihren Bann zieht. Also, hier sind einige Beispiele, die ich Ihnen zeigen möchte. Es gibt eine Website namens Air Bag Studio. Wenn ich meine Maus auf diesem Airbag-Studio habe, wie Sie sehen können, die Animation Es ist wie Jello, und das Gleiche gilt Das Gleiche gilt für diesen Hintergrundeffekt. Wenn ich meine Maus darauf habe, bewegt sie sich, wie Sie sehen können. Wenn ich aufhöre, hört es auf. Okay. Wenn ich nach unten scrolle, wird die Box groß und ändert sich Es kommt auch eine weitere Box rein. Es ändert sich wieder. Dort bei einem gewissen Übergang. Und es gibt eine Menge Dinge, die gleichzeitig laufen. Dies ist eine der besten Implementierungen der Animation und Mikrointeraktion. Nehmen wir an, wenn ich auf diese Schaltfläche drücke, passiert, wie Sie sehen können, diese Buchstabenanimation und das Gleiche gilt für diese Datenanimationen hier. Das ist wirklich so, wenn ich mein Moos auf dem Logo habe, wie Sie sehen können, neutrale Urkunden und den Wechsel in die Schachtel und dann wieder in das Okay. Sie würden also darüber nachdenken, wo wir Animationen oder Mikroretraktion herbekommen können Animationen oder Mikroretraktion herbekommen Es gibt also einige Websites wie dieses ItatVideo. Sie können Animationen oder Croons wie diese Textbenachrichtigung erhalten , genauso wie diese Datennation der sozialen Medien, diesen Okay. Dieses ist das verifizierte Logo. Das ist eine Animation, die geladen wird. Die Prozessleiste. Es gibt also eine Menge davon. Geh einfach auf diese Website. Ich werde das zu den Ressourcen hinzufügen. Oder du kannst einfach auf diese Website gehen, Jitter Dot Video. Und es gibt noch eine namens Files. Dies ist eine der besten Websites. Und es ist kostenlos. Ich denke , es ist kostenlos zu benutzen. Lassen Sie mich Ihnen einige Animationen dazu zeigen. Okay, das sind also ein paar Animationen. Kleine, kleine Animation und Mikroinaktivität, die du herunterladen und in deinem Pigma verwenden kannst Ich denke, sie haben auch Stecker. Ich kann Plug In auch herunterladen und in deinem Pigma verwenden. Okay, lass mich dir eine wirklich coole Animation zeigen. Ich habe es gerade auf dieser Website gesehen. Also, wenn ich meine Maus drauf habe, fange an, wie du siehst, es verwandelt sich in Rakete. Und es steckt ein bisschen Animation dahinter, raucht auch bei diesem, wie man sieht, die Katzenhände kommen rein und es heißt, fasst mich nicht Es gibt eine Menge Beispiele. Gehen Sie auch auf diese Website und sehen Sie sich die Animation an. Okay. Das sieht auch richtig cool aus. Also ja, das sind einige Beispiele. Suchen Sie jetzt nach Designquellen und verzichten Sie auf die Macht von Mikrorettion und Animation Zu kreativ sind die Wachen , die wirklich Charts machen. Denken Sie daran, Ihren Benutzer immer an die erste Stelle zu setzen. Und die Magie wird fließen. 89. Erstaunliche Button-Animationen in Figma: Was ist der Unterschied zwischen guten und einer großartigen Oberfläche Es sind kleine Details, die Bewegung der Magie, die uns sagen lassen . Wow, das ist cool. Eine der einfachsten Möglichkeiten, Magie zu verbreiten , sind breite und dosierte Knöpfe also das langweilige statische Quadrat, wir sprechen von Knöpfen, die pulsieren, Knöpfe, die tanzen, Knöpfe, die den Mund zudrücken und sich vor Ihren Augen verwandeln Knopf, der zu einem kleinen Tor zu aufregenden Möglichkeiten wird . Sie denken vielleicht , aber wie? Mach dir keine Sorgen. Sie müssen kein Programmierer sein. In diesem PM-Video lüften wir das Geheimnis der Animation verwandeln Ihren bescheidenen Einkaufswagen hinzufügen-Button in eine Tara-Oberfläche Also lass mich dir einen Zauber zeigen. Wenn ich auf die Schaltfläche Warenkorb hinzufügen klicke, wird daraus diese wirklich coole Animation Und wenn ich auf diese Schaltfläche klicke, wechselt sie wieder zur Schaltfläche Zum Einkaufswagen In diesem Bild sind wir also schlecht designt. Okay, ich habe meine Produktdetailseite und ich werde sie kopieren und das wird ein Start-Button sein. Also lasst uns diesen Text ändern in. Ich werde es so quadratisch verkleinern und es in die Mitte einfügen lassen Okay, jetzt ist es in der Mitte, also lassen Sie mich diese Seite noch einmal kopieren, und das wird unser Weg von Karte zu Karte sein . Im letzten Bild wird es eine rechte Seite wie diese sein, und ich werde etwas hinzufügen. Jetzt füge ich die Plus-Schaltfläche und die Minus-Schaltfläche hinzu Okay, also habe ich diese Schaltfläche entworfen und lasse mich die Farbe ein wenig ändern. Derzeit ist es Crave Two, und ich werde Cray One wählen und sie in einen Rahmen setzen Steuere den P-Frame. Okay, das werden unsere vier Seiten sein und wir werden diese wirklich coole Animation wie diese hinzufügen . Okay, jetzt gehen wir zum Prototyp und fügen einige Animationen hinzu. Wenn ich also darauf klicke, muss es sich in dieses ändern. Geben Sie zunächst „Zur Produktdetailseite navigieren“ ein, und die intelligente Animation ist drinnen, draußen und nach 300 Millisekunden wird es genauso sein wie auf dieser, dieser Okay, jetzt füge ich eine Animation hinzu, aber das muss nach der Verzögerung geschehen Also werde ich dafür Portal Pitch Second wählen. Also bitte vergessen Sie die Namenskonvention weil ich wirklich schlecht benennen kann, also können Sie es Topf ohne eins, Polen zwei, pro drei nennen , also so. Okay. Nun, fügen wir nach der Verzögerung hinzu. Wenn ich also nach der Verzögerung darauf klicke, muss es sich in dieses ändern, dann nach der Verzögerung in das hier. Und wieder, nach der Verzögerung, wechseln Sie zu diesem. Also das wird unsere Animation sein, aber Animation. Also derzeit sind es 800, aber lassen Sie uns auf 300 einstellen. Und alles wird gleich sein. Das Gleiche gilt für diesen. Figma erinnert sich also an die alten Einstellungen dieses V-Typs, also haben wir dieselben Einstellungen, aber es muss nach der Verzögerung wieder eingeschaltet sein, 800, aber ich 300 Okay, wir sind mit der Animation fertig. Es bleibt noch eine Sache übrig, aber fangen wir mit dieser an, funktioniert sie oder nicht? Okay, ohne Grund, die Bilder. Es ist jetzt sichtbar. Wenn ich also darauf klicke, muss es gehen, zum Einkaufswagen gehen und das hier. Es bleibt nur noch eines übrig: Wir können nicht zur ersten Seite zurückkehren. Diese Seite. Also werden wir diese animieren Lass uns auf diese Minus-Schaltfläche klicken. Wenn ich darauf klicke, muss es auf In den Warenkorb legen gehen. Okay, also auf Tap, gehe zu Acard und ist rein und raus zurück und meine ist 300 Wenn du willst, kannst du eine davon wählen, aber ich mag diese, also werde ich diese wählen Und wenn ich erneut auf das Minus klicke, wird es zu Zur Karte hinzufügen. Und es ist wirklich befriedigend. Im Einkaufswagen, Go-Karte und dieser Plus-Button. Wenn Sie möchten, können Sie eine weitere Seite und hier hinzufügen Wenn Sie auf die Plus-Schaltfläche klicken , werden daraus zwei. Also lass uns das machen. Lass uns diese Seite kopieren. Und Nummer muss sein. Okay, lass mich den Protrap lauter drehen, du bist ein bisschen zwei. Wenn ich auf die Plus-Schaltfläche klicke. Lassen Sie mich jetzt den Pro-Typ hinzufügen. Okay. Wenn ich auf den Plus-Button klicke, musst du hier hin. Wenn ich auf das Minus klicke, musst du zur Hauptseite gehen. Wir haben unseren Go-to-Card-Button, also den Karten-Button, nicht entworfen . Sorry, Kartenseite, das kannst du selbst gestalten. Es wird dein Projekt sein. Mach dir keine Sorgen. Okay. Jetzt muss es funktionieren, also gehen wir zu Minus Minus. Okay, aber wir müssen wieder mit dieser Seite weitermachen. Diese Seite. Wenn ich darauf klicken kann, so geht es zur Hauptseite. Es wird dieser sein. Okay. Fangen wir von vorne an. Okay, am Einkaufswagen, los, geh zum Einkaufswagen. Dann haben wir diese Plus - und Verwaltungsschaltfläche bekommen , mit der wir die Menge unseres Produkts ändern können. Nehmen wir an, ich möchte noch einen für meinen Bruder kaufen. Ich kann einfach darauf klicken. Aber nehmen wir dein Bruder hat diesen schon bestellt, also kannst du so auf das Minus klicken. Es muss nicht so funktionieren, lass mich nochmal bei der Warenkorbkarte neu starten dann Plus und dann Minus. Okay, hier fehlt mir etwas. Okay, ich habe das auf die Plus-Eins gesetzt. Ich muss auf die Minus-Eins einstellen. Und lass es mich dieses Mal machen. Also muss es jetzt funktionieren. Okay, lass es mich überprüfen. Plus-Knopf. Okay, es funktioniert. Wenn ich auf das Minus klicke, geht es zu eins, und wenn ich erneut auf das Minus klicke, füge es in den Warenkorb. Okay, das ist also unsere kleine Button-Animation. Es gibt Versionen, die ich erstellt habe. Es sind wirklich verrückte Versionen. Wie Sie sehen können, ist es hier drüben. Sie können das Multiversum des Prototyps sehen . Ich habe auch diesen Schalter hinzugefügt Wenn ich darauf klicke, wechselt es in den Dunkelmodus. Also lass mich dir zeigen, wie es funktioniert. Derzeit ist es im Dunkeln. Wenn ich auf diesen Schalter klicke, wechselt er in den weißen Modus, den Lichtmodus Und lass mich euch gegenseitig Magie zeigen. Wenn ich mit der Maus über eine Karte fahre, wie du siehst, hat sie sich in diesen wirklich coolen grünen Knopf verwandelt Und wenn ich darauf klicke, gibt es, wie du siehst, eine wirklich coole Animation Ich weiß, es ist ein bisschen langwierig und überwältigend. Manche Leute werden es mögen. Manche Leute werden es nicht tun. Aber es ist deine Schöpferstimme, wenn du so wenig arbeitest, dann tu das Aber wenn du an Projekten arbeitest, an echten Projekten, dann tu das nicht Sie können sich für diesen entscheiden , den wir erstellt haben, A plus minus, wie folgt. Wie Sie sehen können, ist es wirklich befriedigend. Es ist wirklich einfach, diese Animation zu erstellen, aber Sie müssen viel Prototyping durchführen Also lernen wir gerade etwas über diese Animationsschaltfläche. Jetzt bist du dran. Du musst dieselbe Animation erstellen . Es ist deine Projektzeit. Zeit, deine neuen Schriftfähigkeiten auf die Probe zu stellen. Ihre Mission wird Design und Animation sein. Aber das ist nicht nur funktionell, sondern auch ein Hingucker. Denken Sie außerhalb des Bob-Experiments und lassen Sie Ihrer Kreativität freien Lauf. Und ich weiß, dass sich einige von Ihnen vielleicht selbstbewusst fühlen. Hier ist also Ihre Herausforderung, die Kunst des interagierenden Designs wirklich zu beherrschen. Dieser Knöchelschalter, der, wenn Sie darauf klicken, Ihre gesamte Veranstaltung in den dunklen Modus mit eleganten Kacheln überträgt Ihre gesamte Veranstaltung in den dunklen Modus mit eleganten Kacheln Denken Sie daran, wenn Sie nicht weiterkommen, machen Sie sich keine Sorgen. Wir werden uns in unserem nächsten Figma-Abenteuer mit interaktiven Komponenten befassen in unserem nächsten Figma-Abenteuer Also das Stadium dafür und alle Anweisungen finden Sie in unserer Übungsdatei für das Figma-Projekt Geh da hin, folge dem. Zuerst musst du diese Imitation der Animationsknöpfe entwerfen. Wenn Sie sich danach etwas herausfordernd fühlen, erstellen Sie diesen Schalter, um die Benutzeroberfläche in den Modus Hellstimmung und Dunkel umzuschalten haben also die Macht der Animation immer zur Hand. Denken Sie daran, dass es bei der Erstellung eines Designs vor allem um Details geht, und animierte Schaltflächen sind die Details, die Ihre Benutzeroberfläche auf die nächste Ebene bringen Machen Sie also weiter, animieren Sie Ihr Design und erwecken Sie es zum Leben. 90. Project 16 In den Warenkorb Schaltflächen-Animation: Design, um ein weiteres Figma-Projekt wieder willkommen zu heißen. Heute ist Projekt Nummer 16. Heute tauchen wir ein in die Welt der Mikrointeraktion. Diese winzigen Animationen, die dafür sorgen , dass sich Ihre App glatt, ausgefeilt und so entzückend anfühlt . Mach dich bereit, dein Designspiel auf die nächste Stufe zu heben. Gehen Sie jetzt weiter, shoppen Sie bis zum Kabeljau. Lassen Sie uns ein zufriedenstellendes Einkaufserlebnis schaffen. Stellen Sie sich vor, ein Kunde klickt auf diese verlockende Schaltfläche zum Ausschneiden , und wenn es sich um eine schnelle Animation handelt, verwandelt sie sich plötzlich in eine kleinere, actionreiche Co-Taste Aber der Spaß hört hier nicht auf. Wie von Zauberhand erscheint ein Einkaufswagen mit einer coolen Go-to-Cart-Animation Nun, das nenne ich benutzerfreundlich. Lassen Sie uns nun mit Schritt zwei beginnen: Qualitätskontrolle an den Fingerspitzen. Warten Sie, neben der Starttaste erscheint plötzlich eine glattere Schaltfläche zum Erhöhen und Verkleinern des Produkts neben der Starttaste erscheint plötzlich eine glattere Schaltfläche zum Erhöhen und Verkleinern des Stellen Sie sich vor, der Vanillepudding tippt die Plus-Schaltfläche auf Ein anderes Objekt erscheint wie von Zauberhand auf der Aber was ist mit dem Entfernen eines Artikels? Kein Problem. Die Minus-Taste macht es leichter die Menge zu reduzieren und das Datum zu erraten, sodass der Knopf wieder in eine Karte umgewandelt Ist das nicht toll? Jetzt, Schritt drei: Kaufe dein Meisterwerk. Jetzt, wo Ihr Einkauf butterweich war. Lass es uns festhalten, damit die Welt es sehen kann. Machen Sie ein sauberes Foto von Ihrem Meisterwerk und laden Sie es in den Projektbereich hoch. Lasst uns diese perfekt weniger Pixel feiern. Es gibt eine kleine Herausforderung. Ein Projekt, es ist nur eine Herausforderung. Lassen Sie uns einen schicken Kippschalter für den Dunkelmodus entwerfen. Stellen Sie sich vor, der Benutzer klickt auf diesen Schalter und mit einer flüssigen Animation verwandeln Sie sich in eine coole Teeratmosphäre Aber es gibt noch mehr. Wir möchten sicherstellen, dass der Text scharf und auch in dunklen Formen gut lesbar ist scharf und auch in dunklen Formen gut lesbar Testen wir diese Schatten und stellen wir sicher, dass der Text vor dem Targ-Hintergrund hell leuchtet Hier kommen Ihre Designfähigkeiten ins Spiel. Okay, denken Sie also daran, dass es bei Mikrottion nur um diese subtilen Details geht , die einen großen Unterschied machen Also experimentiert er mit dem Telefon, verfeinert diese Animationen und vergiss nicht, die Erholung im Projektbereich mit anderen zu teilen , bis zum nächsten Mal weiter mit Freude am Entwerfen 91. Projekt 17 Dunkel- und Lichtmodus: Fimo, bist du bereit deiner App einen Hauch von Magie zu Tauchen Sie heute in die Welt der interaktiven Komponenten ein. berühmte Geheimwaffe, um diese reibungslos zu gestalten , ist eine benutzerfreundliche Funktion , die Ihre App von anderen abhebt Sie sind also bereit, einen Turmschalter herzustellen und zu erobern, Ihre App nahtlos ins Licht bringt, um mehr Maulwürfe zu machen. Erinnern Sie sich, dass ich Sie in Projekt 16 vor eine Herausforderung gestellt habe, nämlich dass Sie denselben Effekt erzielen müssen, denselben Effekt erzielen ohne interaktive Komponenten zu verwenden Jetzt wissen Sie, wie man interaktive Komponenten verwendet, sodass Sie dieses Projekt abschließen können. So werden Sapons zu einem Toggle-Master. Stellen Sie sich vor, verwenden Sie einen Taps-Schalter und schalten Sie Ihre App ein, um von hell und glänzend zu einer coolen Tank-Atmosphäre zu Da ist die Macht des Umschalters „ Tarc More“. Lassen Sie uns interaktive Komponenten von Figma verwenden , um diese Magie aufzubauen Wir werden zwei Zustände für den Schalter erstellen, einen für mehr Licht und einen für mehr Dunkelheit Betrachte sie als zwei Seiten derselben Medaille. Jetzt, Schritt zwei, Animationszeit. Jetzt fügen wir etwas Fünftel hinzu. Stellen Sie sich vor, Sie wechseln reibungslos zwischen zwei Status-Taps hin und her. Diese Animation sorgt dafür, dass die Benutzererfahrung ausgefeilt und angenehm anfühlt. Schritt Nummer drei: Umarme die Dunkelheit. Tark-Modus ist fantastisch, aber Lesbarkeit ist entscheidend Wir müssen sicherstellen, dass der Text in Ihrer App auch vor dem dunklen Hintergrund klar und deutlich bleibt auch vor dem dunklen Hintergrund klar und deutlich Hier kommen Ihre Designfähigkeiten ins Spiel. Erkunden Sie Schatten und Textfarben, um die perfekte Balance für den Hell- und Dunkelmodus zu finden Stopps zeigen dein Meisterwerk. Sobald deine dunklen Mtogle heller leuchten als eine Discokugel, kannst du ihre ganze Pracht einfangen Machen Sie ein Stadtfoto und laden Sie es in den Projektbereich hoch. Lasst uns diese perfekt gestalteten Pixel feiern. Und du kannst es auch in deinen sozialen Netzwerken teilen und mich dort taggen. Denken Sie daran, dass interaktive Komponenten Ihr Tor zur Schaffung eines angenehmen Benutzererlebnisses Also viel Spaß beim Experimentieren, verfeinern Sie diese Animationen und denken Sie daran, Ihr dunkles More-Meisterwerk mit der Welt zu teilen Zeit für Kacheln, gestalte weiter mit Figma-Magie. 92. Kursprojekt 18 iPhone-Produktseite und -Warenkorb-Design-Projekt: Machen Sie sich bereit, UX-Fähigkeiten im TS-Projekt unter Beweis zu stellen. Wir befassen uns intensiv der Gestaltung sowohl der Produktseite Kartenerlebnisses für das neueste iPhone in der Click Card-App. Denkt an die tolle Nike-Seite, die wir erstellt haben. Dieses Mal nehmen wir ein B mit dem Schneiden von Ste. Also haben wir, wie zuvor, diese Produktseite für Nike erstellt In diesem Projekt müssen Sie also dieselbe Seite für das iPhone 15 Pax entwerfen . Lass es mich dir zeigen Okay. Das ist die Autoseite, die ich entworfen habe , und in diesem Projekt musst du auch dieselbe Seite entwerfen. Und du musst genau dieselbe Seite für das iPhone entwerfen. Sie müssen nur Bilder, Text und einige farbige neue iPhones und einige Spezifikationen für sie ersetzen Text und einige farbige neue iPhones und einige Spezifikationen für sie Sie denken vielleicht, warum dieses Projekt. Bei der Beherrschung des Commerce-App-Designs dreht sich alles um reibungslose Abläufe. Dieses Projekt fordert Sie heraus, eine aussagekräftige Produktseite zu erstellen Sie können das iPhone mit atemberaubender Grafik präsentieren wichtigsten Funktionen hervorhebt und überragende Details bietet Optimieren Sie den Einkaufswagen für einen reibungslosen Checkout-Vorgang. Designer nutzen ein benutzerfreundliches Kartenerlebnis mit integrativer Steuerung und Auftragsbestätigung Wenden Sie Ihre UX-Fähigkeiten an. Entwerfen Sie nicht nur schöne Seiten, gestalten Sie sie auch innovativ und effizient für alle Benutzer Entscheiden Sie sich für unabhängiges Lernen. Ihnen stehen Ressourcen zur Verfügung, aber die Wahl beim Design liegt bei uns, Experimentieren, Erkunden und Lernen aus Ihrer Kreativität. Also zuerst müssen Sie dieses Produkt entwerfen : LPG für iPhone , das Bilder, Funktionen des iPhone und Hama-Speicher wie diesen hinzufügt Funktionen des iPhone Hama-Speicher Bieten Sie mit dem neuen Boler-Punkte-Symbol vergleichende Spezifikationen, Kollaborations - und Zubehöroptionen. Oder eine bewusste Sprache wie hier, wir zeigen dafür, dass es bei diesem Produkt nur eine Farbe gibt, also habe ich nur zum Brennen hinzugefügt Aber das neue iPhone, wir haben blaues Titan, natürliches Titan, Schwarz, Weiß, so etwas in der Art. Das kannst du hinzufügen. Sie können also diesen Größenbereich entfernen und auch die Preispriorität der rücksichtslosen Aufbewahrungsfarbe anzeigen und eine effektive Schaltfläche zum Hinzufügen zur Karte wie diese entwerfen Außerdem müssen Sie die Sternebewertung verifizieren und die Nutzung mit anderen Smartphones vergleichen Wenn es möglich ist, können Sie weitere Smartphones hinzufügen , wie es Amazon tut Wenn Sie ein Smartphone bei Amazon oder ein anderes elektronisches Produkt auswählen , . Wenn Sie ein Smartphone bei Amazon oder ein anderes elektronisches Produkt auswählen, erhalten Sie einen kleinen Vergleich zwischen ihnen, zum Beispiel iPhone, um zwischen iPhone und 24 Ultra zu wählen . Also werde ich dir den Vergleich erzählen. Wenn du das machen willst, tu das bitte. Ich wäre so stolz auf dich, wenn wir das tun würden. Jetzt musst du diese Warenkorbseite gestalten. Wie Sie auf meinem Bildschirm sehen können, habe ich diese Seite gestaltet. Ich dachte, ich werde diese Seite nicht gestalten, aber ohne meine Kartenseite gibt es keine Commerce-App, also muss ich sie entwerfen, und das ist meine Version. Auf dieser Seite müssen Sie also das Produktbild, die Menge und den Preis für jeden Artikel so anzeigen , wie ich es hier gemacht habe, und zunächst die Menge anpassen oder Artikel entfernen lassen, so wie hier, mit der Plus-Ms-Schaltfläche. Sie können auch die Integration von Promo-Codes verwenden, z. B. die Funktion, Einlösen von Gutscheinen oder das Abbestellen verwenden , was ich hier getan habe. Und Sie können auch eine Zahlungsmethode hinzufügen. Wie in Indien bieten wir UPA-Direktbanküberweisungen sowie einige andere Nehmen wir an, Sie haben in Ihrem Land eine Mastercard, sodass Sie eine Schaltfläche hinzufügen können, z. B. eine Karte auswählen oder so Denken Sie also daran, dies ist eine Gelegenheit, um zu glänzen. Scheuen Sie sich nicht , zu experimentieren und Ihre einzigartigen Designversionen zu präsentieren. Es wird also einige Studenten geben. Ich weiß, dass sie meinen Kurs kommentieren werden, als ob er nur das Projekt gibt. Er macht die Arbeit nicht wirklich. Aber das Problem mit den Kursen ist, dass die Leute so tun, als würden sie dich nur mit dem Löffel füttern und ich will dich nicht mit dem Löffel füttern Ich möchte echte Dinge vermitteln, zum Beispiel, wenn ich dir etwas beibringe, wie man Coupons erstellt und es wiederverwendbar ist Also, ich spreche damit, und du kannst dasselbe wie dieses mit demselben Konzept kreieren , also will ich dich nicht löffeln. Man muss experimentieren und das Gelernte anwenden. Das war also das Hauptmotto dieses Kurses. Priorisieren Sie also die Benutzererfahrung und machen Sie beide Seiten integrativ und effizient Nutzen Sie die bereitgestellten Ressourcen, aber denken Sie daran, dass unabhängiges Lernen der Schlüssel ist Die meisten telefonieren modal und genießen den Prozess der Erstellung einer glänzenden Produktseite für iPhone und Karte Für das neueste iPhone in der Karte, das ich habe. Ich habe Ihnen auch alle Anleitungen zur Verfügung gestellt , sowohl für die Produktseite als auch für die Karte, und mache das auch. Senden Sie es mir, nachdem Sie den Screenshot fertiggestellt haben, oder Sie können ihn aufnehmen und in eine Geschenkdatei umwandeln Und dann habe ich dir schon gesagt, du kannst zur B-Website gehen, Auto, und von dort aus kannst du diese in eine Geschenkdatei umwandeln und mir im Projektbereich einreichen, und du kannst sie auch in sozialen Medien teilen Das ist also alles über dieses Projekt. Entwerfe meine Karte. Gestalte meine Produktseite, wenn und reiche sie mir ein. Das ist ein Fotovideo, und ich werde euch im nächsten sehen. 93. Mikroanimationen mit interaktiven Komponenten in Figma: B Schüler. Im vorherigen Video habe ich dir eine Herausforderung gestellt. Es war nicht Teil des Projekts. Es war nur eine Herausforderung , dich herauszufordern. Okay, ich habe dir gesagt, dass du diesen Kippschalter erstellen sollst, der deine mobile Schnittstelle in den Gesprächsmodus in den Lichtmodus oder den Lichtmodus in den Gesprächsmodus wie diesen umschalten kann deine mobile Schnittstelle in den Gesprächsmodus in den Lichtmodus oder den Lichtmodus in den Gesprächsmodus wie diesen umschalten Lichtmodus oder den Lichtmodus in den Gesprächsmodus wie diesen Ich denke, du hast das geschaffen, und wenn du das geschaffen hast, bin ich so stolz auf dich Ich weiß, dass Sie mit einer traditionellen Methode erstellt haben, aber in Figma gibt es eine Sache , die als interaktive Komponenten bezeichnet wird In diesem Video lernen wir also diese Technik kennen und werden denselben Kippschalter mithilfe einer interaktiven Komponente erstellen mithilfe einer interaktiven Lassen Sie uns also einen einfachen Schalter entwerfen. Wir alle wissen, wie das geht, einfache Ellipse, dann Rechteck, und lassen Sie uns Rechteck hinzufügen, einige runde Kanten, 50. Und ich werde das in das Innere des Rechtecks einfügen. Das ist der Schalter, und lassen Sie mich die Farbe ändern. Es wird also unser Lichtmodus sein, und das wird so sein, dass ich ihn auf Schwarz umstellen kann. Aber der Schalter für die kleine Ellipse ist wohl hinten. Also lass mich das nach hinten schicken. Okay, das ist jetzt vorne. Jetzt machen wir es zu Frame-Control-Algen. Lassen Sie uns das nun zur Master-Komponente machen. Erstellen Sie eine Komponente. Und jetzt müssen wir eine Variante erstellen. Sie können dies sowohl von hier als auch von hier aus tun. Lass uns mit diesem gehen. Und jetzt haben wir eine Komponente. Also werde ich den Ort wechseln. Das wird unser Aus-Knopf sein, Schwarz, und der andere Teil wird weiß sein, so wie dieser. Das wird schwarz sein. Die Farbe stimmt nicht überein Okay. Okay, also wir alle kennen die Grundlagen. Das war das Grundlegende, aber ich habe es für dich wiederholt. Okay. Lassen Sie uns jetzt interaktive Komponenten erstellen. Gehen wir also zu Ptype. Ich will, wenn ich darauf klicke, muss es sich in diesen Button ändern Derzeit befinden wir uns im Lichtmodus, und wenn wir darauf klicken, muss es in den Gesprächsmodus wechseln. Okay, lass mich das eintippen. Und beim Wasserhahn müssen Sie zu zwei gehen, und Ecke B ist rein und raus . Und das in 300 Millisekunden Nun, wenn ich das in einem beliebigen Frame verwende. Okay, also werde ich diesen Button hier drüben hinzufügen. Gehen wir also zu Asset, und das wird unser Button sein. Also lasst es uns wegschleppen. Okay. Also, wenn ich jetzt auf den Boden klicke und diesen Button benutzen kann. Aber es wechselt nicht wieder in den Lichtmodus, also müssen wir es neu verkabeln P tippe es ein. Okay. Also, wenn ich darauf klicke, musst du zur Normalität gehen. Wechseln Sie zu Eigenschaft eins, Standard. Okay. Jetzt muss es funktionieren, Licht Licht Mota sehen die Farbe der Seite und die Farbe des Buttons gleich sind Deshalb ist es im selben Modus, aber wir können es ändern. Nehmen wir die tatsächliche Produktdatenseite damit Sie eine Vorstellung davon bekommen, wie es funktioniert Ich werde das kopieren. Lasst uns nicht protestieren, weil ich es jetzt nicht will Okay. Okay, das vorherige aber ich möchte, dass dieser Button hier drüben ist, hier, ich werde ihn hier drüben platzieren. Ich glaube, ich habe das zu groß gemacht, also lass mich ein bisschen verkleinern. Jetzt sieht es gut aus. Und die Platzierung ist auch gut. Es wird einen weiteren Pitch geben. Das wird eine schwarze Tonhöhe sein. Pick Pitch, um zu unterschreiben. Lass mich die Waage schließen. Verkaufe. Es wird schwarz sein. Lassen Sie uns das nun prototypisieren. Wenn ich auf dich klicke. Derzeit befinden Sie sich im Lichtmodus. Wenn ich auf dich klicke, musst du in den Gesprächsmodus wechseln. Beim Tippen Progal Pitch und Smart Animate sind 300 Millisekunden in einem Outpack Das sind die Einstellungen. Und du kannst auch dorthin gelangen. Sie können auch eine andere Option wählen, aber ich werde diese verwenden. Okay. Lass uns einen Flow hinzufügen. Bevor wir ihm einen Flow hinzufügen, gibt es ein Problem. Nehmen Sie sich ein paar Sekunden Zeit und versuchen Sie, das Problem zu lösen. Fünf, vier, drei, zwei, eins. Okay. Ich hoffe, du hast das gefunden. Und das Problem ist dieses. Wir haben dieselbe Schaltfläche auf derselben Seite gesetzt , sie muss sich ändern. Okay, lassen Sie mich das in Teil zwei umwandeln, so wie diesen. Okay, das ist also der Lichtmodus an und das ist der Lichtmodus. Okay. Also, wenn ich einen Flow hinzufüge , Flow Nummer zehn starte, okay, das funktioniert. Okay, ich habe den Off-Burden nicht für einen Prototyp wie diesen verwendet. Okay, jetzt wird es funktionieren. O O, O, O. Jetzt funktioniert es und wie Sie sehen können, sieht es wirklich gut aus. Was müssen Sie mit einigen Schriften und auch einigen Elementen in Angriff nehmen ? Weil manche völlig unsichtbar sind. Wie der hier drüben, irgendein Text hier drüben, genauso wie dieser. Also änderst du es ein bisschen. Das war also eine kleine Mikroanimation, Mikrointeraktion, die wir mit interaktiven Komponenten erstellt haben mit interaktiven Komponenten erstellt Also zur Veranschaulichung verwende ich es für diese beiden Seiten, aber wenn du willst, kannst du es für dein ganzes Projekt so ändern es für dein ganzes Projekt so Wenn ich einen Profi Nummer sechs spiele und einen beliebigen Modus wählen kann. Ich kann den dunklen Modus oder den hellen Modus wählen. Aber sagen wir, wenn ich zu einer anderen Seite gehe und eine andere Seite in den hellen Modus wechseln möchte, kann ich sie auswählen, und sie wird sich ändern. Wie Sie sehen, wird es nicht auf die erste Seite gehen, weil ich viele Prototypen hinzugefügt habe Ich weiß, es sieht ein bisschen verwirrend aus, ist es aber nicht, es ist wirklich einfach Das ist also der Vorteil einer interaktiven Komponente. Sie können das auch mit einfachen Komponenten tun, aber ich würde sagen, verwenden Sie interaktive Komponenten. Es sind Bäume hilfreicher. Es hält unser Element organisiert. Okay, jetzt möchte ich dir ein Projekt geben. Ich denke, es ist Projekt Nummer 17, 18 neun. Okay. Es wird 80 s dauern. Also musst du dein Interface in den schwarzen Modus umwandeln. Oh, tut mir leid, in den TAC-Modus. Ich benutze diesen größeren Schalter. Okay, lass mich den Schalter „Dieses Stolen erstellen“ schließen, und wann immer du darauf klickst, muss er in diesen Modus wechseln Wenn Sie möchten, können Sie diese Methode verwenden, oder Sie können eine weitere Seite erstellen, sagen wir, wenn Sie auf das Burger-Menü klicken, öffnet sich das Burgermenü und spezielle Schaltflächen wie Dark Moore und Blackmore hinzu Und danach füge das alles hinzu. Sie müssen auf einer einzelnen Seite keine Schaltfläche für den Dunkelmodus hinzufügen , wenn Sie diese im Burger-Menü hinzufügen. Das ist eine einfache Methode, aber wenn du das tust, werde ich so stolz auf dich sein. Also entweder du kannst dies oder das tun. In den meisten Fällen haben alle Apps der Einstellungsoption den speziellen Tippmodus oder den Lichtmodus. Für dieses Projekt habe ich es hier behalten. Wenn Sie das also zur Einstellungsseite oder zur Burgermenü-Seite hinzufügen möchten , tun Sie das bitte. Das ist es also dreht sich alles um interaktive Komponenten, und wir haben diesen wirklich tollen Gesprächs- und Lichtmodus entwickelt . Und du kannst dieser Masse auch Glue hinzufügen, so wie du Schatten und Glühen hinzufügen kannst. Du weißt schon, wie das geht. Seien Sie also kreativ, wählen Sie Farben. Wenn du dich in etwas anderes verwandeln willst. Du kannst das auch tun , sei kreativ und das ist, dieses Video zu fotografieren und das Projekt abzuschließen. Alle Anweisungen sind vorhanden. Gehe zu dem Video, gehe alle Anweisungen durch , erstelle dieses tolle. Stellen Sie den gestohlenen Schalter her und reichen Sie ihn mir vor Gericht. Wenn du das so teilen willst, teile es bitte. Das war's für dieses Video, ich werde euch im nächsten sehen. 94. Figma Prototyp-Easing und Frühjahrsanimationen: Stellen Sie sich vor, Sie wären ein Prototyp, wunderschöner Bildschirm, auf dem Ihr brillantes Design gezeigt wird, aber etwas fehlt Es fühlt sich wie ein statischer Ort des Lebens an. Hier kommen Lockerung und Frühlingsanimation ins Spiel. Bist du bereit, deiner Arbeit Persönlichkeit und Feinschliff zu verleihen ? Stellen Sie sich Lockerung als geheime Quelle einer Bewegung vor. Es steuert, wie Objekte zwischen Keyframes vor und nach einer Animation übersetzt Keyframes vor und nach einer Animation Hier gibt es keine langweiligen Roboterbewegungen Singen Sie nuanciert und erzeugen Sie Animationen, die sich natürlich und lebendig anfühlen Okay, Figma hat also einige eingebaute Voreinstellungen, wie linear raus rein ist raus hinten, hinten rein, so was in der Art. Also lasst uns eins nach dem anderen sehen, was sie sind und was sie Okay, also habe ich diesen Basketball-Bouncing-Effekt kreiert. Lassen Sie mich also noch einmal einen neuen erstellen. Und ich verwende unser altes Methodendesign und gehen wir zu Plug in Scout, suchen wir nach Basketball. Ich möchte die kostenlose kostenlose Version von Let's CV. Kostenlose Versionen sind großartig. Parade-Version auch, aber wenn du etwas umsonst bekommst, lass es nicht los. Das war der Basketball, den ich wollte. Momentan heißt es kämpfen, naja, ich will C und platzieren wir es in der Mitte, und ich werde einen Schatten darunter zeichnen. Also wann immer mein Basketball sich bewegt, also werden wir es tun, wird er ein schattenähnliches Ding erzeugen. Lass mich es in die Mitte und in den Korb schaffen. Ich glaube, ich muss das zum Rahmen hinzufügen. Am Anfang wird es hier drüben sein und der Schatten wird so sein. Lassen Sie uns nun diesen Pitch kopieren. Ich halte den Basketball nicht in diesem. Wir haben nur diese Ellipse, wo es Frafyspring ist Jetzt muss ich diese löschen , weil sie keinen Basketball hat Der Rahmen sollte hier drüben sein. Jetzt ist Basketball drin, schätze ich. Lass mich das kopieren, es ist drin. Nun, wenn es so herunterkommt, wird der Schatten so werden. Okay. Das ist ein grundlegendes Zeichen. Ihr wisst alle, wie es funktioniert. Gehen wir zum Prototyp. Sie können dies auch mit interaktiven Komponenten machen, aber Zeit mit Frames, weil ich Ihnen zeigen möchte, wie es funktioniert. Lassen Sie uns diesen Frame erst nach einer Verzögerung zusammenfügen, nach einer Millisekunde ist 500 gut Derzeit sind wir in Smart Mate und lassen Sie uns auch diesem beitreten Das Gleiche. Okay. Nach der Verzögerung. Eine Millisekunde und im Moment ist es ruhiger. Lassen Sie uns zuerst eine lineare Methode verwenden. Wir werden verstehen, was Linear macht. Gegenwärtig sind beide linear nicht linear. Lassen Sie uns zunächst verstehen, was linear ist. Linear ist die Defostat-Linie. Denken Sie, dass eine vorhersehbare Fahrt mit dem Aufzug für manche Situation nützlich ist, aber nicht für die aufregendsten Wenn ich das spiele, wie Sie sehen können, gibt es eine Bewegung, aber sie ist roboterhaft, aber die Ellipse sieht gut Lassen Sie mich dem Ganzen etwas Geschmeidigkeit hinzufügen, damit es federnden Effekt hat. Okay, wenn ich das noch einmal spiele, hoffe ich, dass es diesen P-Spezialeffekt hat. Aber linear sieht es komisch aus, d. Lassen Sie uns nun etwas über die langsame Höchstgeschwindigkeit eines Sterns lernen, wie ein sanft nach oben schwebender Ballon, der wie ein sanft nach oben schwebender Ballon, das verschwindende Element glättet und zur Ruhe bringt Lass mich zu unserem Prototyp gehen, okay. Lass uns gegen diesen wechseln Gegenwärtig sind wir linear, also lasst uns wählen, Sünde. Und wenn ich dir das tatsächliche Diagramm für Sünde zeige, dann sieht es so aus. Es wird sanft so und so schnell gehen. Die X-Achse steht für eine langsame und die Y-Achse für eine schnelle Geschwindigkeit. Wenn du so Fußball spielst, ist eine Kurve so. Also zuerst wird es langsam, langsam, langsam und dann schnell gehen. Lassen Sie mich Ihnen zuerst die s zeigen, dann schauen wir uns die benutzerdefinierte Version an. Okay. Wie Sie sehen können, wurde die Animation geändert. Am Anfang ist es langsam, dann schnell, zuerst langsam, schnell , langsam, langsam, tiefs. Es fängt langsam an und dann nimmt es irgendwann eine Geschwindigkeit an. Das ist also drin. Lassen Sie uns nun etwas über Ease Out lernen. Wählen wir Ease Out für beide. Raus ist das Gegenteil von Sünde. Es fängt zuerst an und verlangsamt sich dann wie ein Ball, der auf dich zuspringt Es ist perfekt, um wichtige Elemente hervorzuheben oder Aufmerksamkeit wie dieses Wie Sie sehen können, ist es das. Es hat natürliche Wirkung eines hüpfenden Balls Das war fast raus. Lasst uns nun etwas über Sünde und Tod lernen. Ja und raus, dieser ist rein und raus. Okay, starre langsam, beschleunige, dann wieder langsamer, wie ein Rennen auf einem Spielplatz in vollem Gange. Was für eine Wahl für eine Animation wie diese. Wie Sie auf der Animation sehen können, Stern langsamer und langsamer. Also ging es um Sünde raus. Aber es gibt noch mehr: W Bounce Heart oder Play Full Notification Toasts, W Bounce Heart oder Play Full Notification Toasts Drücken Sie Sin Back und Bounce haben Also, wenn ich will, wählen wir zurück. Und wenn einer draußen ist. Wie Sie sehen können, wird das Abprallen verstärkt Ich werde einige Ressourcen hinzufügen, also werde ich einige Kurven, Grafiken und all das hinzufügen einige Kurven, Grafiken und all das So bekommen Sie eine Vorstellung davon, wie Actual funktioniert. Aber jetzt wollen wir sehen, wie benutzerdefinierte Animationen in Figma funktionieren. Okay, es gibt also eine Sache namens Fa-Zer-Kurve. Nicht in Figma. Es ist ein mathematischer Begriff Es hat Kurven. Es heißt also Nullkurve. Und das werden wir hier beim Kunden lernen. Wie Sie sehen können, habe ich damit gespielt. Also meine Kurve ist so. Diese Gruppe mag einschüchternd aussehen, aber sie ist einfacher als du denkst Hier ist eine kurze Aufschlüsselung. Der quadratische Parameter steht für die vier Punkte, die eine Qubic-Stückkurve wie diese definieren, und das sind die vier Punkte Dies sind die quadratischen Parameter, und dies sind die vier Punkte Lass mich dir eins, zwei, drei, vier, vier, eins zeigen . X-Achse steht für die Zeit und die Y-Achse für den Übergang und Eigenschaften wie Position oder Deckkraft. Dabei handelt es sich um die Schlüsselbilder, Dabei handelt es sich um die Schlüsselbilder auf Null, Null und Eins auf Eins festgelegt den Anfang und das Ende der Animation markieren Aktuell vermisse ich es, also lass mich einen Doppelclip machen. Wie Sie sehen können, hat es seine normale Position eingenommen. Doppelklicken Sie. Null, Null, Eins. Das sind die verstellbaren Griffe. Ziehen Sie daran, um die Kurve neu zu formen und das verfeinern Okay, lass uns damit spielen. Also das ist für Langsame. Und das ist zum ersten Mal. Also haben wir gerade einen Effekt erzeugt. Wenn ich es zu oft verfolge. Es ist komisch. Es hat diesen hässlichen Effekt darauf Es gibt einige Vorteile. Nehmen wir an, Kurven wie diese, Kurven wie diese gegangen, und du willst einfach zur Oppoiti gehen Ich klicke darauf. Klicke einmal darauf. Wie Sie sehen können, war es so, dass Sie auch nur einen generischen Wert hinzufügen können Derzeit fügen wir etwas Zufälliges Zwei, sechs, irgendwas in diesem Moment. So funktioniert es. Ich füge den Wert so hinzu. Okay, also ich möchte dir eine Sache zeigen. Ich weiß, dass einige von Ihnen sich vielleicht einschüchternd fühlen, sie sind vielleicht nicht in der Lage, dieses Thema zu verstehen, aber es gibt eine Einweglösung Ich möchte Ihnen einen Plug In zeigen. Es wird dir sehr helfen. Es heißt. Und in diesem Plug-In haben Sie nur Werte oder Keyframes wie diesen. Wenn ich diesen kopiert habe, ist es Kopie und wenn ich ihn hier weitergegeben habe. Wie Sie sehen können, haben wir unsere Animation aufgenommen. Nehmen wir an, du bist nicht gut mit dem Kurs, und ich bin auch nicht gut mit dem Kurs. Sie können also zu diesem Plug-In gehen und alle Animations-Keyframes kopieren, die Sie möchten, ist unser Kurs. Lassen Sie uns mit diesem gehen und es hier posten und schauen wir uns an, wie es funktioniert oder nicht. Wenn du mehr über Busier Curse erfahren möchtest, zeige ich dir eine Website Okay, das ist die Website, die Dotnet singt. Du wirst den ganzen Fluch bekommen und du kannst mehr über sie erfahren. Du kannst zum Beispiel auf die belebtere Kurve klicken und mehr darüber erfahren Wenn Sie die tatsächliche Kurve wirklich wissen möchten , besuchen Sie diese Website Ist dotinat. Ich werde das auch zu den Ressourcen hinzufügen Gehen Sie auf die Website und erfahren Sie mehr über diese Kurve. Und die Animation ist auch drin. Nehmen wir an, wenn ich diesen wähle, zeigt uns der kleine Schalter oder der kleine Punkt, wie es funktioniert Langsam, schnell. Schnelles Zeug. Schnell, tief wie hier. Okay. Lassen Sie uns nun etwas über die Frühlingsanimation lernen. Frühlingsanimation verleiht Prototyp eine herrliche Leichtigkeit Stellen Sie sich eine Taste vor, die wackelt, wenn sie gedrückt wird, oder Menü, das mit einem vollen Pfunde erscheint. Mit Presets wie Gentle und Quit ist es ganz einfach, den Zauber zu erweitern Lassen Sie uns also einige Frühlings-Animationseffekte hinzufügen. Wir haben also sanfte, schnelle Wortspiele, langsame und benutzerdefinierte Bildschirme. Okay, lass mich dir sagen, was Gentle macht. Dezente Schärfe, perfekt für subtile Akzente und Änderungen im Inhalt Das ist es, was Gentle macht. Wenn ich darauf klicke. Lassen Sie mich das auch zu sanft sagen. A, langsam. Es hat einen Sprungeffekt, aber wenn Sie einen grundlegenden Teil Ihres Körpers hervorheben möchten , verwenden Sie Gentle Wir sind auch schnell. Quick ist schnell und du bekommst das Pre auch so Es ist wie ZP Spring Idle, um Pep zu Benachrichtigungen hinzuzufügen Gehen wir jetzt und klicken auf den Sprung. Wie Sie sehen können, hat es diesen Bounce-Effekt. So langsam es ist, ist es langsam, ein flüssiges, überlegtes Springen, ideal für die schrittweise Skalierung von Inhalten im Vollbildmodus Inhalten im Vollbildmodus Okay, das sind also einige Voreinstellungen, die uns Figma zur Verfügung stellt. Lassen Sie uns nun etwas über Custom Spring lernen. Wenn ich mich für eine benutzerdefinierte Feder entscheide, erhalten wir, wie Sie sehen können , ein kleines Diagramm und eine Feuerspur wie folgt, und die Emission wird so aussehen. Animation von Frühling bis Frühling. Und da ist ein Punkt. Das ist ein Schlüsselbild. Wenn mir das gefällt, wird es so federnd sein, wie Sie auf dem Bildschirm sehen können Wir können auch die Steifigkeit anpassen, um zusätzliche Sprungkraft zu erzielen. Wir können das Dumping nehmen, um das Ganze zu glätten, und wir können einfach mit der Maske spielen Es wird also die Schwere unseres Objekts einschließen. Derzeit sind es also zwei nervös. Lass mich eine Quelle erschaffen. Wenn ich fünf Masken hinzufüge, wirst du sehen, dass sie eine Masse hat. Ich habe das Gefühl, dass es schwer ist. Man muss nur mit der Steifigkeit, dem Dumping und der Masse spielen , um die Federn so auszunutzen. Aber ich möchte es so belassen, normal und subtil. Das war der Unterschied zwischen Spring Animation und PSI-Animation. Diese Animation macht unseren Prototyp von Strato zu einem faszinierenden Erlebnis Sie verleiht Persönlichkeit, erregt Aufmerksamkeit und führt den Benutzer durch eine intuitive, und führt den Benutzer natürliche , auffüllende Interaktion Durch die Kombination von Lockerung und Frühlingsanimation verwandeln Sie Ihre Figma-Prototypen von einem starren Bildschirm in ein interaktives Erlebnis, verwandeln Sie Ihre Figma-Prototypen von einem starren Bildschirm das fesselnd und fesselnd ist. Machen Sie also weiter, animieren Sie selbstbewusst und hauchen Sie der Designvision Leben der Das ist also alles über die Animation. Wir werden sowohl etwas über BC als auch über die Frühjahrsanimation erfahren. Wir lernen auch all die Presets kennen , die Figma uns zum Aussingen gibt, und dieses Mal auch sanfte schnelle Slope-Poms. So funktionieren Animationen Die meiste Zeit verwende ich nur diese Animationen . Ich entscheide mich nicht für diesen. Wenn Ihre Projekte das brauchen oder wenn Sie ein wirklich fantastisches Projekt mit vielen Animationen machen möchten . Du kannst dich auch für diesen entscheiden. Ich hoffe, du verstehst alles über diese Animation. Also danke fürs Zuschauen und ich werde euch in der nächsten sehen. 95. Pulsierende Animation in Figma: Hallo, die Design-Enthusiasten. jemals das Gefühl gehabt, dass Ihre App nach Zahlungseingang ein bisschen mehr MP benötigt . Als ob es den Moment mit dem visuellen Festspiel feiern sollte . Wir sind dabei, in die Welt der pulsierenden Animationen in Figma einzutauchen und Es wird unglaublich großartig sein . Wie Sie auf meinem Bildschirm sehen können, habe ich zwei Animationen Die erste ist geloopt, die zweite stabil. Also wenn ich diesen Frame neu starte, wie du siehst. Der erste animiert immer noch und der zweite wurde gestoppt. Auf diese Weise werden wir also diesen als auch diesen erstellen Der zweite hat ein Konfity. Okay. Wie Sie sehen können, verleiht es eine Art Feierlaune Ich war also total begeistert davon wie Pope und Google Pay diese Animation verwenden , um diese sofortige Befriedigung nach dem Kauf zu erzielen diese sofortige Befriedigung Also dachte ich, warum nicht das gleiche Maß an Zufriedenheit in unsere App bringen das gleiche Maß an Zufriedenheit in unsere Und dann kommen interaktive Komponenten ins Spiel , um den Tag zu retten. Einige von Ihnen denken vielleicht, können wir einen traditionellen Weg wie diesen verwenden. Und ich habe es benutzt. Es funktioniert, aber es funktioniert nicht so, wie ich es will. Also lass es mich dir zeigen. Plus Bestellung. Danach gibt es die Begrenzung und es animiert und es wird geloopt Es funktioniert. Ich muss ein bisschen daran arbeiten, aber wie Sie sehen, nimmt es viel Platz in Anspruch. Interaktive Komponenten hingegen sind wie die reibungslosen Bediener der Designwelten. Sie sind effizient, sie sind flexibel und sie werden unser Leben um einiges einfacher machen. Lassen Sie uns also zu Figma springen und diese tolle Animation erstellen, nicht diese Okay, diese hier, wir werden diese tolle Animation erstellen, die in einer Schleife läuft und die zweite stabil ist Lassen Sie mich vorerst ein leeres Feld nehmen. Also werde ich einen Rahmen wählen , der 200 mal 200 groß sein wird. Okay. Also ist es meine persönliche Entscheidung. Wenn du 500 nehmen willst, kannst du das nehmen. Oder du kannst es nach Smartphone oder Tablet gestalten. Wenn Sie für Tablets entwerfen, können Sie die Dimension vergrößern. Also zuerst ich drei Kreise und drei Kreise hinzu , weil wir drei Kreise darin animieren müssen drei Kreise darin animieren Okay. Also Schicht halten. Und zuerst werden es nur 50 sein. Und ich werde es so in der Mitte halten. Lass uns die Farbe ändern. Ich bleibe bei unserer Verfärbung Sie können einen grünen verwenden, den ich Ihnen vorhin gezeigt habe. Es hängt also völlig von dir ab. Weil die Y-Farbe in all unseren Apps berücksichtigt werden sollte. Deshalb wähle ich diesen. Lassen Sie mich nun dieses Steuerelement C, Control C, Control B kopieren . Wie Sie sehen können, aus 84, Ep 702-70-2702 Lassen Sie mich es umbenennen. Also nenne ich es P und C. Ich möchte nicht verwirrt werden. Jetzt haben wir drei Kreise. Lassen Sie mich jetzt eine Komponente erstellen. Wir können also Varianten hinzufügen und es werden interaktive Komponenten sein. Lassen Sie uns jetzt Varianten hinzufügen. Okay. Wir haben die zweite Variante. Lassen Sie mich eine zweite wählen, die B sein wird, und ich werde diese Dimension auf 100 ändern und dann Durchgang 25 wählen. Sie können Blimation verwenden, wenn Sie möchten, aber momentan verwende ich diese Gehen Sie so in die Mitte und ich werde eine weitere Variante hinzufügen und in dieser bis zu 1205 Oder machen wir es auf eins 50. Okay. Lass uns in die Mitte gehen. Und gehen Sie zu diesem hier durch. Gehen wir zehn. Okay, es ist sehr gut sichtbar. Lass uns 25 gehen. Okay, jetzt ist es sichtbar. Und lassen Sie uns eine weitere Variante hinzufügen , weil wir sie wiederholen wollen. Okay, in diesem Fall wird B unsichtbar sein und in diesem wird es bis zu 200 sein. Lass es uns in die Mitte schaffen. Lass uns sehen, ob es funktioniert oder nicht. Ich glaube, ich habe irgendwo einen Fehler gemacht, aber lass es uns ausprobieren. Der erste. Okay. Also nach Verzögerung um Verzögerung, und ich will nach einer Millisekunde. Der Rahmen muss sich ändern Nach einer Millisekunde sollte es hier drüben nach drüben gehen , und ich werde zwei 50 behalten Sorry, vier 50, weil ich mehrere Werte verwende, aber vier 15 sieht toll aus bei Smart Animate and Ease Out. Wir werden genauso sein Das Gleiche gilt für diesen, nach einer Verzögerung und einer Millisekunde. Gleiche gilt für diesen. Ich hoffe es funktioniert. Eine Millisekunde und alles andere ist dasselbe. Dann werden wir keine intelligenten Animationen verwenden. Wir werden uns auflösen. Ich werde Ihnen sagen, warum wir Dissolve verwenden und warum wir keine intelligente Animation verwendet haben. Wählen wir den iPhone 15-Frame und gehen wir zu Compound. Ich hoffe, es ist hier drüben. Okay, es ist hier drüben. Lass es mich jetzt spielen. Es funktioniert. Es funktioniert. So will ich es haben. Aber wir können einige Änderungen vornehmen, wir können diesen Primärkreis hier etwas größer machen, ebenso wie O hier, und darin können wir ein Häkchen hinzufügen. So wissen wir, dass Ihr Kauf abgeschlossen ist oder die Zahlung erfolgt ist. Sie denken vielleicht, warum wir Frames verwenden. Können wir einfach einen Kreis in einen leeren Raum zeichnen und können wir sie, ähm, einfach miteinander verbinden. Ja, das können wir machen. Aber als ich das versucht habe, habe ich einen Fehler bekommen. Ich habe dieses entworfen, und wenn ich versuche, es hierher zu ziehen und wenn ich es abspiele, wie Sie sehen können, wird kein Ort angezeigt. Es bewegt sich. Deshalb müssen wir es im Rahmen lassen. Es bleibt also in der Mitte und bewegt sich nicht woanders hin. Denken Sie daran, eines ist so, als ob eines der wichtigsten tiefen Elemente dasselbe sein muss. Die Komponente muss identisch sein, wenn du etwas animieren willst Wenn du einen Kreis zeichnest, kopiere diesen. Sie müssen keinen Kreis erneut zeichnen, denn wenn Sie das tun und versuchen, sie zu animieren, funktioniert es nicht Sie können Animationen und intelligente Animationen hinzufügen, aber es wird nur der Disol-Effekt hinzugefügt, nicht der Smart-Animationseffekt nicht der Smart-Animationseffekt Komponente oder ein Element oder was auch immer Ihre Form ist Verwenden Sie also dieselbe Okay, jetzt fügen wir ein paar Häkchen hinzu. Ich werde Icon Scout wählen. Lass mich nachschauen, Häkchen setzen. Es ist ein Häkchen. Und ich werde diesen benutzen Okay, du solltest 25 mal 25 sein. Okay. Lass mich das schließen. Es ist hier drüben. Und lassen Sie mich die Transparenz verringern. Es wird auch animieren. Kopieren tut mir leid, duplizieren und hier drüben werden es 50 sein und hier werden es 100 sein, mach es 100 und hier drüben auch 100. Okay. Also, wenn ich das noch einmal spiele, wird es cooler aussehen. Das kannst du sehen? Eins können wir tun. Wir können den Kreis vergrößern. Derzeit sind es etwa 50. Machen wir es auf 75 und behalten wir es in der Mitte. Das Gleiche gilt für diesen. Gehen wir 100. Lass mich das versuchen. Ich möchte nur etwas experimentieren. Ich hoffe es funktioniert. Okay, es funktioniert, aber am Ende haben wir intelligente Animationen hinzugefügt, um es zu verkleinern Dann können wir also die mittlere Kreisgröße beibehalten, die, glaube ich, 100 ist Lass mich die hundert machen. Okay. Okay. Dieser. Oh, du solltest in der Mitte sein. Okay. Ich hoffe, es funktioniert jetzt. Es funktioniert, aber wir können diesen Effekt hinzufügen. Oder lassen wir es so wie es ist. Es sieht auch toll aus. So erstellen wir Animationen. Es gibt eine Sache, die ich zeigen möchte, sagen wir, wenn Sie sich für einen beliebigen Drahtrahmendraht entscheiden. Darin haben wir diesen Effekt bereits bereitgestellt, aber Sie können Ihre Animation tatsächlich anpassen. Wir haben dieses Diagramm, in dem wir die Stoger-Buttons verwenden und die Animationsgeschwindigkeit erhöhen können Animationsgeschwindigkeit erhöhen Wenn du in diesem Fall wirklich Fantasoation machen willst , kannst du diesen Ich zeige dir, wie man es benutzt. Ich als Nächstes, also Stratum dafür. Wir können auch diese verwenden oder es gibt eine andere Option namens Custom Spring Es ist auch hier. Sie erhalten auch eine Vorschau, wie es funktioniert. Also als nächstes werden wir das lernen. Das ist für unsere Zahlungsoption. Wie Sie sehen können, habe ich dieses erstellt, es nimmt viel Platz ein und es sieht wirklich hässlich aus. Lass mich diesen kopieren. Okay. Lass mich das einfach als Overlay hinzufügen Es wird also großartig aussehen. Gehen wir zur Komponente von 84 über, und das wird unser Overlay sein Wenn ich auf „Bestellung aufgeben“ drücke, animiere ich und schon ist es raus. Und es muss auf Knopfdruck sein und ein intelligenter Animationsstift. Lassen Sie uns überprüfen, ob es funktioniert. Lassen Sie mich einfach einen neuen Flow erstellen, damit ich einfach darauf springen kann. Okay, es funktioniert. Das ist nett. Wir können unser Feld transparent machen, damit es cooler aussieht, dann f Null. Okay, jetzt sieht es cool aus. Sie können die Rahmengröße erhöhen und wir können eine weitere Option hinzufügen, z. B. lassen Sie mich zu Frame wechseln, damit ich diesen und diesen hinzufügen kann und der Hintergrund sollte 50 sein. Und wenn ich das noch einmal spiele, bestelle ich. Wie Sie sehen können, wird der Hintergrund ein bisschen schwarz und unsere Animation erscheint Im Vergleich zu diesem hier können Sie sehen, wie wenig Platz es benötigt und wie einfach es ist, es zu erstellen Okay, ich möchte Ihnen ein Projekt mit derselben Technik geben , Sie müssen diese Animation erstellen, die Ladeanimation wie diese. Also pausieren Sie das Video und machen Sie das und reichen Sie es mir im Projektbereich ein. Und wir können diese Animation vor dieser verwenden. Wenn ich zum Beispiel zuerst auf Bestellung aufgeben klicke, wird sie für einen Moment geladen und danach wechselt sie zum Kontrollkästchen. Lass uns das machen. Lass uns das machen. Lassen Sie mich zur Anlage übergehen, die hier Komponente sechs ist. Lassen Sie mich das hier nachverfolgen. Derzeit sind die Farben nicht so toll, aber wir werden sie später ändern. Lass mich hier mitmachen. Und danach solltest du hierher gehen. Nach der Verzögerung, glaube ich, nach der Verzögerung, dieser. Nach der Verzögerung geht die Zahlung erfolgreich weiter. Behalten wir es bei 800 Millionen Sekunden. Lass uns sehen, wie es funktioniert. Kluger Mann 450. Mal sehen, wie es aussieht: Bestellung aufgeben, laden. Ich versuche, nach ein paar Millisekunden ein Overlay hinzuzufügen , es Es muss in dieses wechseln. Aber wann immer ich das mache, stoppt diese Animation und das funktioniert oder manchmal funktioniert es nicht. Ich weiß nicht, was mit FM los ist , oder vielleicht mache ich ein paar Fehler. Lass mich dir zeigen, ob ich die Animation austauschen möchte, also verlinke ich das mit dieser und navigiere zu Swap Overlay Und alles wird gleich sein. Aber wie Sie sehen können, ist das jetzt nicht da. Ich werde nach Verspätung wählen. Lassen Sie mich die vorherigen „Was soll ich sagen“, die vorherigen animierten Dinge entfernen . Nach einer Verzögerung von 800 Millisekunden muss es umschalten. Aber wenn ich das zurücksetze und wenn ich , wie du siehst, die Ladeanimation drauflege , ist sie weg und diese kommt hoch und es ist nichts auf dem Frame Aber wenn ich das versuche, wenn ich diese lösche und wenn ich erneut bestelle. Wie Sie sehen können, ist es jetzt nicht sichtbar. Ich weiß nicht, was in Sigma vor sich geht. Es hat vorher funktioniert und jetzt funktioniert es nicht. Und wenn ich das entferne und diesem durch Tippen auf Öffnen des Overlays beitrete, ist alles dieselbe Reihenfolge So wie es funktioniert und es funktioniert nicht. Lass mich es wieder umschalten. Sechs plus Bestellung. Wie Sie sehen können, ist es unsichtbar. Also muss ich diesen löschen und versuche ihn erneut hinzuzufügen. Und wenn ich dem wieder beitrete, können wir Overlay 95 plus Bestellung öffnen Es funktioniert jetzt. Wie Sie sehen können, glaube ich, gibt es eine Burg, vielleicht mache ich etwas falsch. Wenn Sie also wissen, wie man das löst, lassen Sie es mich bitte wissen denn derzeit funktioniert es so. Ich will es haben, wenn ich darauf klicke, es dreht sich und nach ein paar Sekunden muss es sich öffnen. Ich glaube, ich muss jetzt die traditionelle Methode verwenden. Also werde ich diese löschen und einige Seiten erstellen. Okay, jetzt verringere ich das Gegenteil, indem ich diese Komponente in dieser Mitte hinzufügen kann . Lassen Sie uns nach der Bestellung Ptype hinzufügen, Sie müssen hier rüber gehen und schreiben, Sie müssen auf Band sein, und ich werde alles so behalten Wir können Smart Action verwenden. Lass uns Smart Mon benutzen. Manchmal gibt es wirklich schlechte Animationen. Also ich mag das nicht. Jetzt funktioniert es. Jetzt sieht es auch cool aus. Es wird bearbeitet und nach einer gewissen Verzögerung, also wird es zu diesem gehen. Nach 800 Millisekunden geht es zu dieser Animation und wir fügen die zweite Animation hinzu, nämlich Gehe zur Mitte. Lass mich auf Null gehen, PL Null. Lassen Sie mich jetzt versuchen, wie es funktioniert. Plus Bestellung und nach 800 Millisekunden. Es verwandelt sich in dieses . So wollte ich mit Overlay erstellen, aber ich weiß nicht, ob es mir wirklich seltsame Fehler gegeben hat Wir können die Größenverzögerungszeit erhöhen. Sie können bis zu 202.000 Sekunden oder 2000 Millisekunden hinzufügen, lassen Sie mich noch einmal plattieren, Flow 19 plus Bestellung nach 2 Sekunden, es wird sich in diese ändern Das ist cool. Und wir können auch Preen erfolgreich hinzufügen, und wir können alles von dir aus erhöhen Lassen Sie mich diesen löschen und ich kann diesen tatsächlich kopieren. Jetzt kann ich meinen Teil durch diesen ersetzen. Es ist nicht gelöscht. B Du solltest in der Mitte sein und hast das Gefühl, dass es Null sein muss. Und ich denke, du solltest 25 sein. Okay. Dieser sollte auch 25 sein. Okay. Jetzt funktioniert es. So wie es funktioniert. Zurücksetzen. Lass mich es zurücksetzen. Okay. Flow 19 Bestellung aufgeben. Es wird für 2 Sekunden geladen. Danach bin ich der Seite nicht beigetreten. Okay, lassen Sie mich dem nach einer Verzögerung von 2000 Millisekunden beitreten. Smart Animate und vier 50 werden das sein. Lass uns jetzt spielen. Bestellung aufgeben, 2 Sekunden lang wiederholen. Jetzt ist die Zahlung erfolgt Und wir können auch „ Zahlung erfolgreich“ eingeben. Okay, also habe ich den Text Zahlung erfolgreich hinzugefügt. Lass mich das wiederholen. Wird geladen und erfolgreich geladen. Wie Sie sehen können, sieht es wirklich cool aus. Sie können die Schriftgröße erhöhen, aber ich bin wie in diesem , also behalte ich das. So haben wir diese Animation erstellt, die Ladeanimation sowie diese Klickanimation, die Lichtposition angezeigt Ihre Aufgabe ist es, diese Ladeanimation zu erstellen. Ich hoffe, du hast das gemacht, und so sieht es aus. Du musst den ersten Kreis tatsächlich so gestalten. Lass mich dir das Panel zeigen. Zuerst ist ps, und dann musst du das ps zuschneiden. Sie müssen diese Umschalttasten verwenden. Lass mich dir zeigen, wie die Togletons und sie wie dieses hier gefallen, und platziere sie auf dieser Ellipse und ändere einfach die Position in jedem Frame und verwende interaktive Komponenten, sie prototypisch zusammen und passe den Wert an, und es wird so funktionieren Wenn Sie wissen, wie man dieses Overlay löst, lassen Sie es mich bitte wissen und ich weiß, dass ich einen Fehler gemacht habe Vielleicht kann ich es gerade nicht lösen. Aber wenn ich es täte, werde ich dieses Video aktualisieren. Auf diese Weise haben wir gelernt, wie man indirektive Komponenten verwendet und wie man diese eine erstellt Das ist es wohl. Das ist es. Das ist also bald soweit und wir sehen uns in der nächsten. 96. Kursprojekt 19: Der letzte Klick: Dein Clickkart-App-Design in Figma fertigstellen: Das Design hat gut gepunktet, wir sind jetzt im Endspiel. Also meine Liebe, wir entwerfen die Kickcard-App von Anfang bis Ende. Wir haben etwas über Wireframe gelernt. Außerdem haben wir die Benutzeroberfläche entworfen etwas über Mikrointeraktion sowie Animation und Prototyping Das ist also Projektzeit. Das wird Projekt 15 17 sein, ich weiß nicht, vielleicht 19. Okay, das wird also Projekt 19 sein. Wenn du also denkst, dass in dieser App etwas fehlt , wie die Bestellseite oder Einkaufswagen, weiß ich vielleicht, dass ich den Einkaufswagen verpasst habe. Du kannst das hinzufügen und wenn du eine neue Seite hinzufügen möchtest, gestalte sie von Grund auf neu. Entwerfen Sie ein Wireframe, entwerfen Sie dann Ihre Benutzeroberfläche, lassen Sie sich inspirieren, fügen Sie Farben hinzu und all das, und fügen Sie ein Design hinzu. Fügen Sie auch Prototyping hinzu Wenn Sie möchten, können Sie Animationen hinzufügen. Und sobald dein Meisterwerk fertig ist, ist Showtime. Schnappen Sie sich einen Screenshot aller Bildschirme und laden Sie ihn in den Projektbereich hoch. Und seien Sie nicht schüchtern, teilen Sie Ihre Designmagie in den sozialen Medien. Markiere deinen Freund. Erstelle vielleicht einen lustigen Hashtag. Lass die Welt deine großartigen Fähigkeiten sehen. Stellen Sie sich vor, Ihr Design könnte viral werden. Also haben wir in Figma einen Coup gebaut , so wie die, die WLAN und Prototypen abschalten, aber raten Sie mal, was wir gerade machen. Ab dem nächsten Mal werden die Dinge real. Wir arbeiten an Einzelprojekten. Stell dir vor, es ist, als ob du dein eigenes Raumschiff kaufst und loslegst, um deine eigenen Planeten zu entwerfen Du wählst eine Mission, baust eine Welt und machst sie großartig Keine Sorge, du hast dich nicht völlig im Weltraum verirrt. Ich bin ein Vertrauensroboter, der mit Tipps und Tricks herumschwirrt Gute Aktien, kein Problem. Bus zurück zu den alten Tutoren. Sie sind wie dein geheimer Blattkurs. Und rate mal was. Das nächste Projekt wird episch sein. Ich werde dir bald davon erzählen, also mach dich auf den Hype gefasst. Bis er weiter mit Figma spielt, weiter lernt und bereit ist, die Design-Supermächte der Welt zu unterbieten Also das ist ein Champion. Du hast die Karten-App erobert. Du hast deine Fähigkeiten verbessert und bist jetzt bereit, die Welt mit den Design-Superkräften zu erobern Also geh hin und erschaffe. 97. Wie stelle ich ein Projekt-Thumbnail oder ein Cover in Figma ein: Hallo zusammen, auf diese Weise werden wir ein Problem angehen Das könnte dich ein bisschen verrückt machen. Ein Standard-Vorschaubild in Pigma. Wie Sie sehen können, handelt es sich um eine angeklickte Version, und es gibt kein Vorschaubild, und ich weiß nicht, und ich weiß nicht Ich kann nur die Komponenten sehen. Aber wenn ich zu importierten Kommunikationsdateien gehe, sind sie, wie Sie sehen können, sehr genau und ich kann sehen , was sich darin befindet Das Gleiche gilt für diese 111. Und genauso wie bei diesem. Aber unsere Datei hat kein Vorschaubild. Ich weiß, dass es traurig ist Manchmal sind sie in Ordnung, aber manchmal zeigen sie etwas, das nicht der tatsächlichen Datei entspricht, und das kann frustrierend sein Lassen Sie mich Ihnen zeigen, wie Sie ein Vorschaubild anpassen und es inaktiver machen können, wenn es um den Inhalt Ihres Dokuments Oh, also lass uns zu unserer Datei gehen. Das wird unsere erste Clickout-Version sein. Ich möchte eine separate Seite mit dem Namen Thumbnail. Sie können sie auch benennen, wie Sie wollen, aber in diesem Fall werde ich sie Thumbnail nennen Okay, lassen Sie uns das Miniaturbild der Klickkarte hinzufügen. Also werde ich in Zukunft verwirrt sein. Okay. Also, es gibt nichts auf dieser Seite, also gehen wir zu Frames. Und in der FIGMA-Community haben wir ein Plugin-Dateicover mit Schrägstrich. Also lass uns das wählen Aus 90 20 macht man 20 Pixel, und momentan ist es leer. Ich möchte also, dass diese Seiten wie die ersten drei Seiten auf dem Bildschirm angezeigt werden. Also werde ich sie derzeit exportieren. Ich weiß, dass ich zu weit gehe. Ich habe dir nicht gesagt, wie man Dateien exportiert, aber folge, konzentriere dich nur nicht darauf, weil wir dort lernen werden, wie man exportiert. Also werde ich diese Dateien verschieben und exportieren wählen, ich möchte, dass das in PNG ist. Du kannst auch verschiedene Formate wie JPA SPG P wählen . Ich werde PNG wählen, weil PNG am besten für Bilder geeignet ist und drei Ebenen exportiert Okay, also ich möchte, dass das in Dollar ist. Okay, also diese drei Seiten werden jetzt exportiert. Sie sind in PG und ich denke, die Qualität ist auch großartig. Lass uns auf unsere Seite springen. Das nennt man Liar Thumbnail, und lassen Sie mich sie hier importieren. Bupa, lass uns gehen. Lass uns rüber gehen. Wie Sie sehen können, handelt es sich um Bilder, nicht um die eigentlichen Frames. Jetzt möchte ich, dass das so arrangiert wird. Du wirst hier sein, du wirst hier sein, genauso wie dieser hier, also werde ich sie zusammenführen. Und lass uns einen Rahmen einpacken, schätze ich. Lass uns sie in Rahmen umwandeln , damit sie zusammenkleben. Rahmenauswahl. Sie sind jetzt also Rahmen, und ich werde sie erweitern. Lassen Sie mich sie groß machen, damit wir uns an die Waage halten. Lass es uns so groß machen. Wie Sie sehen können, wird das Thobil sein, aber wir können ein paar Gewürze hinzufügen. Keine echten Gewürze Wir können ein bisschen drehen, drehen und es so hinzufügen. Auch hier okay. Jetzt sieht es toll aus und ich möchte, dass es ein Uminil ist. In diesem Fall kann ich einfach auf den eigentlichen Rahmen klicken auf den eigentlichen Rahmen Klicken Sie mit der rechten Maustaste darauf, dass es sich um ein Vorschaubild handelt. Aber es gibt ein Problem. Wenn ich also nach Hause gehe, ist es, wie Sie sehen, noch nicht aktualisiert. Es zeigt mir wieder Komponenten. Damit diese beiden funktionieren, musst du deinen Soft-Modus neu einstellen. Ich weiß nicht, wie das im Web funktioniert, aber in Soft musst du dein Soft einstellen. Weich. Wenn Sie in Windows sind, ist dort immer die Shortcut-Option geöffnet, also schließen Sie auch diese. Ich weiß nicht warum. Also lass mich fi Margin öffnen. Wie Sie sehen können, ist es jetzt aktualisiert und es sieht cooler aus, und wir können sehen, dass das der Einkaufswagen ist. Okay, verdoppeln Sie es, und derzeit sind wir in Thumbl. Gehen wir zur Einstellung, lassen Sie mich wieder zurückkehren. Wie du sehen kannst Wir haben Thumil. Wenn du willst, kannst du einen Screenshot davon machen, lass es mich dir zeigen Wenn wir zum Beispiel unter Windows sind, kannst du zum Snipping-Tool gehen und auf dich klicken Sie können einen Screenshot davon machen, ihn speichern und als Miniaturbild verwenden Also zeige ich dir, wie man das benutzt. Aber ich denke, der Screenshot ist nicht so klar, also versuche ich, jeden Frame zu importieren und dann passe ich ihn an. Also funktioniert es. Wenn der Screenshot auf jeden Fall funktioniert, probieren Sie ihn aus, und wenn Sie einen Frame in PG exportieren möchten , können Sie das auch tun. Es gibt eine Sache, die Sie beachten sollten : In einigen Versionen wird das Vorschaubild möglicherweise nicht sofort aktualisiert Wenn das passiert ist, schließen Sie es, öffnen Sie es erneut, und die Datei sollte dort sein Die Meilen sollten aktualisiert werden. Passen Sie es nicht nur an, sondern fügen Sie es auch Ihrem Design hinzu und legen Sie es als Vorschaubild Da haben Sie es mit X Designer, einer schnellen und einfachen Möglichkeit, das Miniaturbild Ihrer Pigma-Datei zu aktualisieren , um den Inhalt besser darzustellen Keine Frustration mehr mit zufälligen oder veralteten Vorschaubildern. Wenn Sie diesen Status für weitere Tricks und Tipps hilfreich fanden. Wir sehen uns also im nächsten Video. 98. So exportierst du dein Figma-Design als Bild (PNG,JPG,SVG,PDF): In diesem Video werden wir uns mit der Verarbeitung des Exports von Bildern aus Figma befassen Exports von Bildern aus Figma Wir haben bereits bei der Erstellung dieses Tumils gesehen, wie man in Figma exportiert , aber in diesem Video werden wir tatsächlich lernen, wie man exportiert und welche Dinge wir beim Exportieren tun können Was sind das X, was ist ein Suffix, was sind die verschiedenen Arten von Bildformaten und welche Dinge beachten wir beim Exportieren von Bildern oder Das wird also ein Leitfaden für allgemeine Zwecke sein. Und in den kommenden Videos werden wir uns mit spezifischeren Anwendungsfällen für Zusteller und Kollegen befassen. Lassen Sie uns nun mit den Grundlagen beginnen. Exportieren von FIMMAs unterscheidet sich ein bisschen von anderen Programmen, ich verwende zum Beispiel Programme wie Popsol Also, wenn wir exportieren, müssen wir nur den Namen und die Regulierung des Videos angeben und wir müssen nur auf den Export klicken, aber in FiMMA ist das aber in FiMMA In FMA müssen wir die Expose-Einstellung direkt auf das Las oder Objekt anwenden , das wir exportieren möchten Nehmen wir zum Beispiel an, ich möchte dieses exportieren, und wie Sie bei n sehen können, haben wir die Exportschaltfläche Klicken Sie darauf und wir haben diese Exportschaltfläche gefunden. Und jetzt werde ich eine Expo-Einstellung anwenden. Figma erlaubt mir also, ein anderes Bildformat zu wählen. Denken Sie also darüber nach, was ist der Unterschied zwischen PNG und JPEG? Einige von Ihnen denken vielleicht, ich dachte, PNG und JPEG sind dasselbe. Ich wusste nicht, dass es einen Unterschied gibt. Lassen Sie uns also verstehen, was JPEG ist. JPEG eignet sich hervorragend für Bilder und detaillierte Dinge, aber Aufnahmen werden und man kann sie nicht durchschauen wie von Zauberhand. Es ist gut für kleine Dateien, gut für das Internet, aber nicht für Text oder Transparenz. Aber PNG ist das Gegenteil davon. PNG ist ein kristallklares Bild. Der Text ist scharf. Man kann Dinge durchschauen und alles sieht toll aus. Aber wie bei Big Photo Album kann die Dateigröße hoch sein. Verwenden Sie es für Logo-Symbole und Dinge, bei denen Qualität am wichtigsten ist Lassen Sie uns nun verstehen, was VG ist. Stellen Sie sich eine extrem dehnbare Zeichnung vor, die niemals blutig wird. Egal wie groß du verdienst. Lassen Sie mich in diesem Fall ein Logo nehmen. Also ein Schalter wie dieser, wenn ich versuche zu skalieren, es groß zu machen, wie Sie sehen können, wird das Pixel nicht pixelig Alles sieht perfekt aus und alles ist scharf Es ist perfekt für Symbolformen und Dinge, deren Größe problemlos geändert werden muss, aber nicht alle Apps mögen es es als eine besondere Art von Bild, Betrachten Sie es als eine besondere Art von Bild, und jetzt kommen wir zum PIP Ich weiß, dass jeder über PDP Bescheid weiß. Stellen Sie sich eine schicke Präsentationsmappe vor, in der alles übersichtlich ist, klar, aufgenommen , Bilder Ideal, um das fertige Design zu teilen oder es einem Kunden zu zeigen Aber du kannst es nicht einfach bearbeiten. Es ist wahrscheinlicher, dass Pid up ein Meisterwerk findet , das in Bearbeitung ist. Lassen Sie uns versuchen, diesen Coupon zu exportieren. Aber wenn ich versuche, das zu exportieren , wie du siehst, bekommen wir diese Option, also eins x 1,5 x, zwei X drei, bis zu vier X sowie diese 050 Kampf-El-Breite und Kampfrad-Höhe. Also lasst uns das zuerst verstehen. Also in Figma, diese 1x2x3 x-Zahlen. Sie sehen beim Exportieren eines Skalierungsfaktors. Sie sagen Figma im Grunde, wie groß Ihr Design sein soll, bevor Sie es als Datei speichern Ein X ist die Originalgröße Ihres Designs, wie das Basisrezept-Kochbuch Nicht zuletzt verstehen ist zwei x. Das verdoppelt die Größe Ihres Designs und macht es doppelt so groß wie das Original. Stellen Sie sich vor, macht es doppelt so groß wie Sie verdoppeln die Zutaten in Ihrem Rezept für einen größeren Kuchen und dasselbe mit drei x, dasselbe mit vier x. Es multipliziert, was ein x hat. Es multipliziert, was Und Nullpunkt s f und Nullpunkt ist das Gegenteil von drei x und vier x. Das mindert also unsere Bildqualität Dieser Skalierungsfaktor ist für Bildschirme mit einer anderen Isolierung hilfreich für Bildschirme mit einer anderen Isolierung Bildschirm mit hoher Auflösung größere Bilder erforderlich, um Pixelbildung zu vermeiden Der Bildschirm mit niedriger Auflösung kann zwar kleinere Wörter verarbeiten. Lassen Sie uns Ihr Design mithilfe des Skalierungsfaktors in einer anderen Größe für verschiedene Geräte exportieren . Stellen Sie sicher, dass es überall knusprig aussieht. Vielleicht möchten Sie eine kleinere Version für Ihr Design für Eiter. Während eine größere Version perfekt für den Druck geeignet ist, bietet der Skalierungsfaktor Flexibilität. Lassen Sie uns nun verstehen, was eine Breite von 500 Vertiefungen und eine Höhe von 500 ist . Es handelt sich also um absolute Abmessungen, was bedeutet, dass sie die exakte Breite und die Höhe des exportierten Bilds in einer Pixelierung angeben und die Höhe des exportierten Bilds in einer Pixelierung Es ist, als würde man Figma einen Kuchen in einer bestimmten Pfannengröße geben. Ich stand auf und sagte die doppelte Glaubwürdigkeit. Lassen Sie uns jetzt versuchen, etwas zu exportieren. Ich weiß, das war eine Menge Theorie. Wir lernen jetzt. Derzeit werden wir also dasselbe innerhalb von einem X exportieren, sowie in zwei X. Ich möchte das sowohl in einem als auch in drei X. Okay, lassen Sie uns das zu fünf mit einer Breite und fünf mit einer Breite hinzufügen , aber ich werde einige Werte ändern. Ich werde einen mit einer Breite von 50 hinzufügen. Sie fragen sich vielleicht, was diese beiden X bei drei X bei drei X bei drei X bedeuten. Dies ist das Suffix, mit dem wir gerade dasselbe Element exportieren Am Ende des Bildes vor der Erweiterung, wie vor PNG, steht also zuerst der Name der Komponente, bei der es sich in unserem Fall um einen Coupon handelt, und danach wird das Suffix hinzugefügt und danach die Lassen Sie mich das vorerst exportieren. Wir werden wissen, was sie sind. Ich werde das in Städten hinzufügen. Also werden alle Bilder ausgenutzt, und wie Sie sehen können, sind dies die Suffixe wie bei zwei x bei drei x und bei drei x eins Das sind also die Suffixe. Also lass mich die Erweiterung sehen Okay, also habe ich es in verschiedenen Formaten wie in JP sowie in P sowie in P und auch in SVG ausgenutzt . Öffnen wir also zuerst die JPEG-Datei. Und sagen wir den Unterschied. Wie Sie also bei JPEG sehen können, erhalten wir keine Transparenz. Aber wenn ich das P G öffne, erhalten wir, wie Sie sehen können, Transparenz. Und Sie können auch die verschiedenen Größen sehen z. B. die tatsächlichen Speichergrößen. Für JPEG ist es 204, für PNG es und dieses ist für eins 50 Breiten. Es ist sehr niedrig, 70 K, und für SG sind es 77 K. Aber Vorteil von PG ist, wenn wir versuchen, das in unser Design zu importieren, und wenn ich versuche, es zu skalieren, zk, wie Sie sehen können, wird es nicht pixelig Wenn Sie also Ihre Elemente oder Komponenten in verschiedenen Designdateien verwenden möchten , portieren Sie sein FG. Es gibt noch eine zusätzliche Sache, die ich Ihnen zeigen möchte , wenn ich zu Dateien gehe und beim Export, wie Sie sehen können, habe ich 12 Elemente darin, weil ich bis jetzt 12 Elemente aus diesem Projekt exportiert habe . Das wird dir helfen, wenn du deine Historie sehen willst, zum Beispiel das, was du bis jetzt exportiert hast. Es zeigt dir die Eigenschaften, was ist das Pixel, die Kopfhaut, das Format p, und du kannst sie direkt wieder exportieren, wenn du willst Das sind also die Grundlagen des Exports in Figma. Auf diese Weise haben wir uns mit den grundlegenden Exporten von Bildern aus Figma befasst Geben Sie dies für einen detaillierteren Anwendungsfall in den kommenden Videos an. Wenn Sie diesen Pool gefunden haben, vergessen Sie bitte nicht, es mir mitzuteilen, und ich werde Sie im nächsten Pool sehen. 99. So überbringst du deine UX-Designs wie ein PROfi: Wir sind dabei, ich werde Sie durch den Prozess des Exports von Figma-Dokumenten führen , was nützlich sein kann, um es mit Ihren Kunden, Stakeholdern, dem Entwicklungsteam, dem Designteam und den Teilnehmern der Benutzerforschung zu teilen mit Ihren Kunden, Stakeholdern, dem Entwicklungsteam, dem Designteam Teilnehmern der Benutzerforschung Produktmanager. Deshalb werden wir verschiedene Methoden untersuchen darunter auch das Exportieren von Frames mit Folienwerkzeug und das Teilen von Links. Bis dahin haben wir alle Tools verwendet , die in Figma verfügbar sind, aber es gibt ein Tool Das ist quasi ein verstecktes Tool, und wir haben es nicht benutzt Ich glaube, ich habe es dir gezeigt, aber wir haben es nicht benutzt. In diesem Video werden wir also auch dieses Tool verwenden. Okay, vielleicht weißt du, wie man ein Projekt teilt. Du gehst einfach, um einen Link zu teilen und zu kopieren, und lass mich ihn hier drüben drücken. Wir können diesen Link kopieren und per E-Mail teilen, was auch immer Ihre Wahl ist, und Sie können auch den Prototyp teilen Teilen Sie einfach den Prototyp, kopieren Sie den Link oder laden Sie sie ein und legen Sie fest, dass sie nur angesehen und mit ihnen geteilt werden können sie ein und legen Sie fest, dass sie nur angesehen und mit ihnen geteilt Das ist das Gleiche. Also lass mich das kopieren. Kopiere Link T für Text. Okay. Das ist also eine der klassischen Methoden , die Sie am häufigsten verwenden. Nehmen wir jedoch an, Sie möchten Ihr Projekt im Pap-Format teilen . In diesem Fall können Sie also Pap verwenden. Gehen Sie also einfach zu Dateien, exportieren Sie den Frame in die App, aber es gibt ein Problem, aber lassen Sie uns jetzt mit der App fortfahren, damit Sie wissen, wo das Problem liegt X es ist explodiert, also lass mich es öffnen. Wie Sie sehen können, ist alles explodiert, wie jedes Bild, jedes automatische Bild, jedes Denken Sie daran, dass FIPMA ein automatisches Layout als Rahmen betrachtet. also sein, dass Sie Ihr Dokument straffen müssen , bevor es explodiert Nach dem Explodieren können Sie überflüssige Seiten mit einem Opting-Tool wie ILO PD löschen überflüssige Seiten mit einem Opting-Tool wie ILO PD Eine weitere interessante Methode ist die Verwendung des Slice-Tools. Schauen wir uns also dieses Slice-Tool an. Aber wie Sie sehen können, summiert sich dieser PDAs. Ich wollte nur von dieser Seite auf diese Seite aufsteigen, aber es wurden alle Seiten in der App hinzugefügt Lassen Sie uns also lernen, wie man sie zuschneidet oder wie man sie schneidet, und wir verwenden das Slice-Tool. Okay, es ist hier drüben unter dem Rahmen zum Schneiden. Jetzt haben wir dieses Plus-Muster, also müssen wir es nur verfolgen, weil ich nur diese Frames haben möchte. Nun, wie Sie im Ebenenfenster sehen können, haben wir eins in Scheiben geschnitten, sodass wir es wie folgt benennen können: Okay, ich habe es Click V um Frames genannt Ein Design-Panel, nur Exportschaltfläche. Lass uns darauf klicken. Das Problem mit Slice Two ist jedoch , dass es keine PD-Datei unterstützt. Es unterstützt alle Formate, aber es unterstützt PD nicht. Wenn ich versuche, PDF auszuwählen und darauf klicke, wie Sie sehen können, wird das Exportieren von Slice nach PDF derzeit nicht unterstützt Nehmen wir ein PNG und stellen unseren Skalierungsfaktor so ein, dass das Bild klarer und knackiger wird Lass uns auf den Port klicken. Okay, so ist es und die Dateigröße ist, nicht B. Wenn ich es öffne, ist es, wie Sie sehen, viel knuspriger, die Qualität ist wirklich großartig Okay, es wird jetzt pixelig, aber wie Sie aus der normalen Perspektive sehen können, ist es großartig . Es kann geteilt Und wir können das auch mit anderen Tools wie PD in PDP umwandeln mit anderen Tools wie PD in PDP Dies ist die eigentliche Website. Sie können auf diese Website gehen und sie P. Aber wenn Sie nur diesen Frame in PIP exportieren möchten, löschen Sie alle oder verschieben Sie sie in separate Seitenkomponenten und wählen Sie dann nur diese Frames aus und exportieren Sie sie als P. Es ging also darum, wie Sie das Projekt mit Ihren Kunden teilen können, wie Sie das Slice-Tool verwenden und wie Sie Ihre Dateien in P exportieren können. Aber da und wie Sie Ihre Dateien in P exportieren ist eine Sache, die ich vergessen habe, dir zu zeigen , sagen wir, ich möchte nur dieses Ding exportieren. Lass uns auf den Export klicken und ich kann das in PNG exportieren, weil PNG mir Transparenz im Hintergrund gibt, und es gibt eine Sache, die du tun kannst. Nehmen wir an, Sie wollen keine Transparenz, Sie wollen das Ganze. In diesem Fall möchten Sie also überlappende Ebenen. In diesem Fall können Sie wählen, ob Sie zum Dreipunktmenü gehen möchten, und es gibt eine Option. Ignoriere überlappende Ebenen. Wenn Sie dies auswählen, passiert, wie Sie sehen können, nichts, weil dies nicht das richtige Beispiel ist Wenn ich jedoch dieses auswähle, exportiere, wenn ich dieses auswähle, wie Sie sehen können, haben wir überlappende Ebenen Denken Sie also daran, ob Sie Ihre überlappenden Ebenen behalten möchten , wählen Sie dies aus, und wenn Sie nicht möchten, klicken Sie darauf Standardmäßig ist auf das Ignorieren überlappender Ebenen geklickt. Also lass uns das schließen, also habe ich vergessen, dir das im vorherigen Video zu zeigen Also hier dreht sich alles ums Explodieren. Das ist ein Pot-Video, und wir sehen uns im nächsten 100. Einführung in Ressourcen und Inspirationen für Designsysteme: Willkommen zu einer Reise in das Herz der Designinnovation. Heute erleben wir die Komplexität des Designsystems. Die treibende Kraft hinter der Entwicklung kohärenter und effizienter digitaler Produkte Lassen Sie uns damit beginnen, Mythen zu zerstreuen. Ein Designsystem ist nicht nur eine Bibliothek oder ein Leitfaden. Es handelt sich um eine einzige Informationsquelle, die alle Elemente für ein reibungsloses Produktdesign und eine reibungslose Produktentwicklung nutzt . Ein statisches, lieferbares Designsystem entwickelt sich mit dem Das Designsystem entwickelt sich mit Produkten, Gina und Apo zusammenpassen , verbinden sie Werkzeuge, Muster und Komponenten, aber auch abstrakte Elemente wie Markenwerte und gemeinsame Arbeitsweisen Lassen Sie uns also tief in das Spezifische eintauchen. Ein Styleguide konzentriert sich auf den Grafikstil. Während die Musterbibliothek funktionale Komponenten integriert. Ein bemerkenswertes Beispiel ist Tropifiepoliz, das beide nahtlos kombiniert nahtlos Die Demos für Design haben bald Zuwachs bekommen, vor allem, da die Digitalisierung Designsystem überbrückt die Lücke zwischen gedruckter und digitaler Sprache und fördert eine gemeinsame Sprache, die sich mit der Zeit anpasst und reift die sich mit der Zeit anpasst und reift Lassen Sie uns also die entscheidenden Komponenten untersuchen. Der erste Zweck und der Scherwert bilden die Grundlage. Gestaltungsprinzipien, aussagekräftige Entscheidungen und Markenidentität anhand eines einzigartigen Alphabets Komponenten und Muster wie Legosteine sind Bauanleitungen, keine Struktur. das richtige Designsystem muss man sich die richtige Frage stellen, ob ich strikt oder verliere, ob ich modular oder integriert, zentralisiert oder dezentralisiert bin? Ihre Entscheidung beeinflusst die Effektivität und Skalierbarkeit dieses Systems. Lassen Sie uns nun von einem Beispiel-Designsystem inspirieren . Das erste ist zum Beispiel die Befürwortung von Designsystemen durch IBM. Dieses ist das Designsystem von IBM. wie die US-Welt so offen ist, bieten sie uns alles , was mit Werten in dieser Farbe zu tun hat. Was bedeutet das? Was bedeutet diese Schrift oder etwas Ähnliches. Wie Sie sehen können, wird das gesamte Designsystem auf dieser Website bereitgestellt. Ich werde diesen Link zu den Ressourcen hinzufügen, also sieh ihn dir an und sieh ihn dir an. Und ich werde auch diesen Artikel von Medium Design Systems for Design in 10204 aufnehmen Medium Design Systems for Design . Also geh es durch Es enthält alles, was Sie wissen müssen, alle Ressourcen und all das. Lassen Sie uns nun zum Shopify-Polar übergehen. Dies ist das Systemdesign-System für Shopify. Danach haben wir material.ai, Materialpunkt O. Dies ist auch eine der großartigen Websites für Designinspirationen. Und Designsystem. Und wenn Sie alles über das Designsystem von Grund auf wissen möchten , besuchen Sie diese Website namens Designsystem Dort erfahren Sie alles über das Designsystem. Ein Designsystem ist ein Produkt für sich. Wie jedes gute Produkt wurde es kontinuierlich durch das Feedback der Benutzer, die Integration mit Designern und Entwicklern, die Steigerung der Effektivität durch Workflows und die Schaffung eines nahtloseren Benutzererlebnisses vorangetrieben Integration mit Designern und Entwicklern, die Steigerung der Effektivität durch Workflows und die Schaffung eines nahtloseren Die Zukunft verspricht spannende Entwicklungen in einem Designsystem Der technologische Fortschritt wird unser Leben vereinfachen und es uns ermöglichen, uns mehr auf die Ankündigung des Benutzererlebnisses zu konzentrieren Zusammenfassend lässt sich sagen, dass ein Designsystem ein dynamischer Plan ist , der es Teams ermöglicht, seine Integration im Fluss zu gestalten und einen konstanten Standort zu gewährleisten, der uns in die aufregende Ära der Designinnovation führt in die aufregende Ära der sich also alles um das Designsystem und den Zweck, der hinter dem Dies ist auch eine der Websites, auf denen Sie etwas über das Designsystem lernen können etwas über das Designsystem lernen Wenn ich zum Beispiel auf diese Website gehe, Design Dot Wonderful Dot Flow. Das ist die Website, und diese, diese Website hat jedes Designsystem. Wenn ich es durchgehe, wie Sie sehen können, geben sie alles heraus, sowohl die Farbe als auch die Symbole sowie den Zweck des Symbols. Alles. Und gehen Sie einfach auf die Website und erfahren Sie alles über das Designsystem. Es gibt auch eine Website namens Atlantis Design. Es ist auch eine der besten Websites, wenn Sie mehr über das Wissenschaftssystem erfahren möchten Gehen Sie es also durch und erfahren Sie alles über das Designsystem. Ich werde alle Ressourcen zu den Ressourcen hinzufügen . Also schau dir das an. Also hier dreht sich alles um das Designsystem. Erkundung des Designsystems. Machen Sie sich auf den Weg zu mehr Einblick und Innovation in jeder OLV-Designwelt Soziale Lernende, viel Spaß beim Design. 101. Intro - Reale Projekte Mit figma: Heather Design Tos, willkommen zur UX-Projektreihe der realen Welt Ihr Tor zur Kreativität und zur Verbesserung Ihrer Designfähigkeiten. Jetzt hör zu. Ich muss noch ankündigen , dass Sie im Begriff sind , sich auf eine spannende Reise zu begeben Sie ein echtes Designprojekt in Angriff nehmen werden . Aber hier ist der Haken Ich gebe Ihnen keine schrittweise Anleitung. Nein, du sitzt auf dem Fahrersitz. Stell dir das Sie haben die Aufgabe, einen Slick zu entwerfen und eine benutzerfreundliche App für die Lieferung von Lebensmitteln zu verwenden Sie können sich von Ihrer Lieblings-App wie Bots oder Zomato inspirieren lassen Ihrer Lieblings-App wie Bots oder Zomato oder Ihre eigene Version mit einem Twist erstellen. Okay. Ich weiß, dass du eine kleine Boostp-Installation brauchst. Schauen Sie sich die von mir bereitgestellten Ressourcenlinks an. Erkunden Sie verschiedene Websites und Apps, schauen Sie sich diesen Vortrag noch einmal an, wenn Sie mit Chad Jept oder Google Gemini chatten , um einige Brainwave-Parks zu finden In dieser Serie besteht Ihre Mission darin, alle Fähigkeiten anzuwenden , die Sie in diesem Kurs gelernt haben, vom automatischen Layout und den Komponenten bis hin zu intelligenten Animationen und zu intelligenten Und vergessen Sie nicht die Benutzererfahrung. Ihr Design sollte integrativ und nahtlos sein, um Ihrem Benutzer das Leben zu erleichtern In dieser Serie haben Sie die Freiheit, mit Schriften, Farben, Symbolen und Bildern zu experimentieren Farben, Symbolen und Lassen Sie Ihrer Kreativität freien Lauf. Aber denken Sie daran, dass Einfachheit der Schlüssel ist. Halten Sie Ihr Design sauber und klapperfrei, um eine maximale Wirkung zu Wenn Sie Ihrem Meisterwerk den letzten Schliff gegeben haben , ist es an der Zeit, Ihre Arbeit mit der Welt zu teilen Summieren Sie das Design und sonnen Sie sich in der Pracht Ihrer harten Arbeit und Ihrer neuen Fähigkeiten im Schriftdesign Bist du bereit, in die Welt des echten V-Designs einzutauchen ? Ich kann es kaum erwarten zu sehen , was dir einfällt. Lassen Sie uns also etwas Magie geschehen lassen. 102. Real World UIUX Project 2 StayWaveReal World UIUX Project 2 StayWave: Willkommen zur Real World X-Projektreihe. Ich sage Ihnen, dass Sie Ihre Designfähigkeiten zum Leben erwecken und gemeinsam Herausforderungen der realen Welt angehen sollen. Von der Gestaltung einer eleganten Oberfläche bis hin zur Verbesserung des Benutzererlebnisses ist diese Serie Ihre Chance, zu glänzen Lassen Sie uns also eintauchen und etwas Designmagie verwirklichen. Also gut, Mädel, heute habe ich ein aufregendes Projekt für euch alle. Wir werden die Benutzeroberfläche für eine Website namens Stay Wave entwerfen . Stays-Website zur Buchung Hostels für Touristen mit kleinem Budget. Unser Ziel ist es, eine benutzerfreundliche Oberfläche zu schaffen , die es Reisenden ermöglicht, auf einfache Weise nach Unterkünften zu suchen , sie zu vergleichen und zu buchen. Bevor wir uns mit dem Designprozess befassen, Sie sich unbedingt die mir bereitgestellten Ressourcendateien ansehen. Sie finden alle notwendigen Ressourcen und Informationen, um loszulegen. Lassen Sie uns nun über das Designkonzept sprechen, das wir in diesem Projekt anwenden werden. Sie haben die Freiheit, Ihrer Kreativität freien Lauf zu lassen, aber achten Sie darauf, Folgendes zu berücksichtigen Das erste ist das automatische Layout. Stellen Sie sicher, dass das Design ansprechend ist und sich nahtlos an unterschiedliche Bildschirmgrößen anpasst Zweitens ist Variante. Verwenden Sie Variante, um einen anderen Stil für Schaltflächen, Karten und andere Benutzeroberflächenelemente zu erstellen . Drittens: Minus-Komponenten erzeugen wiederverwendbare Komponenten, um die Konsistenz im gesamten Design aufrechtzuerhalten . Erzwingen Sie eine intelligente Animation, fügen Sie subtile Animationen hinzu, um das Benutzererlebnis anzukündigen ohne die Oberfläche zu überfordern, und lassen Sie diesen Effekt Experimentieren Sie mit Effekten wie Schatten, Farbverlauf wirken. Experimentieren Sie mit Effekten wie Schatten, Farbverlauf und Überlagerung, damit das Design wie gewohnt Ihr erster Schritt besteht also darin, den Aufgabenablauf zu definieren und die Projektbeschreibung zu verstehen Denken Sie an die Benutzerreise von der Suche nach dem Hostel bis zum Abschluss des Buchungsvorgangs. beim Entwerfen des Wireframes daran, es einfach zu halten und sich auf das Layout und die Funktionalität zu konzentrieren, sich auf das Layout und die Funktionalität zu konzentrieren bevor Sie visuelle Elemente hinzufügen Sobald Sie das Wireframe fertiggestellt haben, ist es an der Zeit, Ihr Design zum Leben zu erwecken Achten Sie auf Typografie, Farbe und Bildsprache, um ein visuell ansprechendes U Y zu erstellen. Wenn Sie mit dem Design der Benutzeroberfläche fertig sind, können Sie einen Screenshot oder, wenn möglich, Link zum Semar-Prototyp aufnehmen und die Projektanleitung als PDF auf weitere Details überprüfen die Projektanleitung als PDF auf weitere Details Wenn Sie mit dem Design der Benutzeroberfläche fertig sind, können Sie einen Screenshot oder, wenn möglich, den Link zum Semar-Prototyp aufnehmen und die Projektanleitung als PDF auf weitere Details überprüfen. Denken Sie daran, dass dieses Projekt eine Gelegenheit für Sie ist alles, was Sie in unserem Figma-Kurs gelernt haben, anzuwenden Zögern Sie nicht, sich an uns zu wenden, wenn Sie Fragen haben oder Hilfe benötigen Ich freue mich darauf zu sehen, was Sie sich einfallen lassen. Okay. 103. Real World UIUX Project 3 Food Delivery App: Willkommen zur dritten UIVx-Projektreihe aus der realen Welt. Heute habe ich etwas, das nicht nur deine Fähigkeiten herausfordern, sondern auch deine Kreativität anregen wird sondern auch deine Kreativität anregen Stellen Sie sich vor, Sie sind hungrig sehnen sich nach Ihrem Lieblingsgericht. Alles, und sehnen sich nach Ihrem Lieblingsgericht. Alles, was Sie brauchen, um dieses Verlangen zu stillen, gibt es in Ihrer wunderschön gestalteten App nur wenige Arten Das ist also die Stärke einer ausgezeichneten App für die Lieferung von Lebensmitteln. Und heute werden wir eine entwerfen. Aber bevor wir eintauchen, lassen Sie uns das noch interessanter machen. Hier ist der Deal. In diesem Video. Ich werde Ihnen keinen kurzen Überblick über das Projekt oder irgendeinen Tasklow und irgendein Wireframe Ihre Mission ist es, den Aufgabenablauf und die Projektbeschreibung zu entwerfen dann ein Wireframe für diese App , die nicht nur normalerweise rotiert, sondern auch benutzerfreundlich ist sondern auch Unsere Aufgabe ist also klar: ein nahtloses Erlebnis für Benutzer zu schaffen, ein nahtloses Erlebnis für Benutzer zu schaffen die online Essen bestellen Alles beginnt mit einem Prozess auf der Benutzerkonsole, gefolgt von der Gestaltung eines AZ-Menüs zur Navigation. Denken Sie darüber nach, wie die Benutzer ihre Gerichte auswählen, die Bestellung anpassen und zur Kasse gehen. Wir möchten, dass der gesamte Prozess glatt wie ein Seidenband abläuft. Um Ihrer Kreativität freien Lauf zu lassen, möchte ich Ihnen einige Beispiele für Apps zur Lieferung von Lebensmitteln zeigen , die die Messlatte hoch gelegt haben. Denken Sie darüber nach, was sie großartig macht , und listen Sie sie auf, um sie zu übertreffen. Für diese App müssen Sie ein wesentliches Element der App entwerfen Der erste ist der Hauptbildschirm nach dieser Hauptoption. Drittens ist die Anpassung der Bestellung und zuletzt der Zahlungsvorgang. Aber hier ist der spannende Teil. Ich möchte, dass Sie Ihrem kreativen Geist freien Lauf lassen, mit Schriften, Farben und Layouts experimentieren und die Interaktion nutzen Denken Sie an all die Gestaltungsprinzipien wir im Kurs behandelt haben Wenn Sie Auffrischungen benötigen, schauen diese Kursvideos Und vergessen Sie nicht, sich die beigefügte Rechnung mit zusätzlichen Richtlinien und Ressourcen anzusehen Es ist dein Kompass auf dieser kreativen Reise. Lass mich dich mit diesem Gedanken verlassen. Design ist visuell gemachtes Denken. Ihr Design wird also Ihr Denken, Ihre Kreativität und Ihre Innovation repräsentieren . Bevor ich dieses Video beende, hier ist die Herausforderung. nicht nur die Anforderungen, sondern übertreffen Sie sie auch auf Ihre einzigartige kreative Art und Weise. Wir haben keine Deadlines, aber denken Sie daran: Gestalten Sie eine Reise, nicht nur ein Ziel. Ich kann es kaum erwarten, zu sehen , was für ein fantastisches Design du dir ausgedacht hast. Okay. Lassen Sie uns diese Herausforderung unvergesslich, inspirierend und vor allem unterhaltsam gestalten. Bist du bereit, dich auf diese köstliche Reise zu begeben und eine App für die Lieferung von Lebensmitteln zu entwerfen , die Wirkung zeigen wird ? Also lass es uns tun. Gehen Sie jetzt raus, bilden Sie ein Team und beginnen Sie mit dem Entwerfen Teilen Sie der Klasse Ihre Fortschritte, Fragen und Ideen mit. Die App-Welt steht vor der Eroberung, und gemeinsam sind wir nicht aufzuhalten Also danke, dass du Teil der Reise warst. Ich freue mich darauf, deinen Schöpfer als den Besten zu sehen. Viel Glück und lass uns anfangen. 104. RealWorld UIUX Project 4 Musik-App: Willkommen zur UX-Projektreihe der realen Welt. Das ist Projekt vier. Das schätze ich. Heute habe ich ein spannendes Projekt für dich. Sie werden eine benutzerfreundliche und visuell ansprechende Musik-App entwerfen benutzerfreundliche und visuell ansprechende Musik-App , die es mit beliebten Plattformen wie Spotify und YouTube Music aufnehmen kann. Beginnen wir also damit, unsere Projektbeschreibung zu verstehen. Es ist nicht kurz, nur eine Anleitung. Wir möchten, dass Sie eine App erstellen, die Musikliebhabern aller Genres ein nahtloses und angenehmes Hörerlebnis bietet nahtloses und angenehmes Hörerlebnis . unserer Zielgruppe gehören Musikbegeisterte jeden Alters und jeder Herkunft. Das bedeutet, dass wir eine App entwickeln müssen, die integrativ und einfach zu bedienen ist , sowohl für erfahrene als auch für erfahrene Benutzer Unsere Musik-Apps sollten wichtige Funktionen wie die Entdeckung von Musik, die reibungslose Wiedergabe und das Teilen in sozialen Netzwerken beinhalten wichtige Funktionen wie die Entdeckung von Musik, reibungslose Wiedergabe und das Teilen in sozialen Netzwerken Du kannst dich von deiner Lieblings-App wie Musik oder Spotify inspirieren lassen . Oder du kannst deine eigene Version erstellen. Im Rahmen des Projekts neben High-Fidelity-Figma-Mopps Sie neben High-Fidelity-Figma-Mopps auch Drahtrahmen für Musik-Apps erstellen Und auch Freunde von Low-Fidelity Wire stehen für das Design der R Music App helfen dir bei der Planung des Layouts und der Funktionalität Ihre endgültigen Divs werden sowohl High-FGMA-Mockups als auch Wireframes enthalten , die die Benutzeroberfläche und das Benutzererlebnis der Musik-App zeigen . Außerdem erstellst du den Benutzerfluss für die wichtigsten Aufgaben, wie z. B. das Unterbinden neuer Musik, das Erstellen von Playlisten und das Verwalten der Wiedergabe . Und denken Sie daran, dass wir dem nutzerzentrierten Design Priorität einräumen, ein visuell ansprechendes Design sicherstellen und die App auch für Benutzer mit Behinderungen zugänglich machen müssen visuell ansprechendes Design sicherstellen und die App Benutzer mit Behinderungen zugänglich Jetzt, da wir ein klares Verständnis des Projekts haben, ist es an der Zeit, Ihre Fähigkeiten auf die Probe zu stellen, sich von öffentlichen Apps wie Spotify YouTube Music inspirieren zu lassen, aber auch Ihrer Kreativität freien Lauf zu lassen Experimentieren Sie mit Farben und Schriften , damit die App in der Regel ansprechend aussieht Spielen Sie mit verschiedenen Stilen herum und finden Sie die Kombination, die zur Zielgruppe passt. Sobald Sie das Design und das Wireframe fertiggestellt haben, stellen Sie sicher, dass Sie das Projekt gemäß den Anweisungen in der PDF-Datei einreichen gemäß den Anweisungen in der Es enthält alle Details, die Sie kennen. Und ich bin gespannt, was ihr euch alle einfallen lasst. Denken Sie daran: Wenn Sie einmal nicht weiterkommen oder ein Konzept auffrischen möchten, können Sie sich die Videos aus unserer vorherigen Lektion noch können Sie sich die Videos aus einmal ansehen und viel Glück bei Ihrem Musik-App-Projekt Ich kann es kaum erwarten, dein kreatives Design und deine Drahtgestelle zu sehen. Wenn Sie Fragen haben, zögern Sie nicht, sie zu stellen. Lass uns zusammen etwas Tolles machen. 105. RealWorld UIUX Project 5 DIY: Willkommen in der Serie I X Project aus der realen Welt. Dies ist das Projekt Nummer fünf. Sie haben die Figma in - und auswendig gelernt. Sie haben das Prinzip von UX gemeistert und jetzt ist es an der Zeit, zu glänzen Für dein letztes ultimatives Projekt habe ich einen besonderen Leckerbissen für dich Sie können wählen, ob Sie eine mobile App, eine Website oder sogar eine Textop-App entwerfen eine Website oder sogar eine Textop-App Der Himmel ist die Grenze. Und hier ist der Clou. Sie fangen bei Null an, keine vorgefertigten Wireframes oder Vorlagen. Es ist alles U. Choice ist komplett Was möchten Sie, um eine bahnbrechende mobile App, eine atemberaubende Website oder einen regionalen Desktop zu erstellen mobile App, eine atemberaubende Website oder Ihrer Kreativität freien Lauf zu lassen? Und ja, du hast mich richtig verstanden. Keine männlichen Ressourcen. Aber mach dir keine Sorgen. Sie haben alle Fähigkeiten, die Sie benötigen. Wenn Sie sich jemals festgefahren fühlen, denken Sie daran, dass es diese tollen Videos Culturales gibt Schau sie dir noch einmal an, sie sind wie ein UIX-Zauberspruch. Jetzt möchte ich, dass du deinen inneren Picasso erstrahlen siehst. Entwerfen Sie nicht einfach, schaffen Sie ein Meisterwerk, fügen Sie Ihre einzigartige Note hinzu, seien Sie kreativ und machen Sie es zu Ihrem. Nachdem Sie Ihr Herz und Ihre Seele in Ihre Projekte gesteckt haben, folgen Sie den sehr detaillierten Anweisungen in diesem Pip Darin erfahren Sie, wie Sie Ihre Kreation bei mir einreichen können. Es ist, als würde man eine Flaschenpost schicken. Okay, ich kann es kaum erwarten zu sehen, was du kommst. Die Reise von UoxVis zum Design war unglaublich Du hast die Fähigkeit. Jetzt geht es nur darum, sie in die Tat umzusetzen. Genießen Sie also jeden Moment dieses Projekts. Und wenn Sie Fragen haben oder einen Rat benötigen, bin ich für Sie da. Also, ohne weiter auf Wiedersehen, lassen Sie uns der Kreativität freien Lauf lassen und das Design beginnen Du hast das. Okay. 106. 10 psychologische Prinzipien für leistungsstarkes UX-Design: Designerkollegen und neugierige Köpfe. Willkommen zu einer weiteren spannenden Episode, in der wir das Geheimnis lüften, der bessere UX-Designer zu werden. Heute tauchen wir in die faszinierende Welt der psychologischen Prinzipien ein, mit denen Sie Ihr Benutzererlebnisspiel bewerten können Sie Ihr Benutzererlebnisspiel bewerten Schnappen Sie sich also Ihr Lieblingsgetränk, lehnen Sie sich zurück und lassen Sie uns lehnen Sie sich zurück und lassen Sie uns gemeinsam auf diese Designreise Als Ex-Designer sind wir nicht nur die Schöpfer. Wir sind verkleidete Psychologen. Das Verständnis unseres Ba und unserer Wahrnehmung in den USA ist der Schlüssel zu einem angenehmen Erlebnis Heute werden wir zehn psychologische Prinzipien untersuchen , die Sie in eine UX-Metropole versetzen werden Sie in eine UX-Metropole versetzen Lassen Sie uns also gleich loslegen. Das erste ist Hicks Law. Haben wir uns jemals von zu vielen Möglichkeiten überwältigt gefühlt? Als würde man vor der Sneaker-Kollektion von We stehen. So sieht das Higs-Gesetz in Aktion aus. Je mehr Optionen, desto länger die Entscheidungszeit. beim Entwerfen von Menüs oder Benutzeroberflächen Vereinfachen und priorisieren Sie beim Entwerfen von Menüs oder Benutzeroberflächen die Benutzerentscheidungen und machen Sie sie zum Kinderspiel Das nächste ist Jacobs Gesetz. Die Benutzer lieben die Vertrautheit. Anstatt es zu bereuen , studieren Sie erfolgreiches Design in Ihrer Branche Es ist, als würde man das perfekte Rezept finden. Warum es ändern. Stimmen Sie sich mit den Lesern der Branche ab, um ein nahtloses und komfortables Benutzererlebnis zu schaffen nahtloses und komfortables Benutzererlebnis Das dritte ist Millers Gesetz. Das Millersche Gesetz lehrt uns , dass unser Arbeitsgedächtnis Grenzen hat. Wir können nur etwa sieben Mal gleichzeitig umgehen. Wenn Sie also Informationen präsentieren, sollten Sie damit beginnen, sie zu überprüfen und sie in kleine Teile zu zerlegen, um ein reibungsloseres , kognitives Fünftens ist das Prinzip von Gzel. Es zeigt, wie unser Geist Informationen auf natürliche Weise organisiert. Es nutzt Nähe, Ähnlichkeit, Kontinuität, Geschlossenheit und Verbundenheit Fünftens: Farben sagen mehr als Worte. Achten Sie auf die Farbauswahl, sie beeinflussen Emotionen und Wahrnehmung Grün ist vielleicht perfekt für umweltfreundliche Produkte, aber nicht so sehr für Lebensmittel Probieren Sie und wählen Sie Farben aus , um die richtige Botschaft zu vermitteln. Das Geschlechtsprinzip besteht aus Metallmodellen, Metallmodelle sind wie Glaubenssysteme der Nutzer. Zusammen mit ihnen entwickeln wir benutzerfreundliche Produkte. Ihre App ahmt die Action im wirklichen Leben nach. Das Materialdesign ist von der physischen Welt inspiriert und orientiert sich an der Art und Weise, wie wir auf natürliche Weise interagieren Es geht darum, dass sich der Benutzer wie zu Hause fühlt. Das Sieben-Prinzip ist der One-Resto-Effekt. Möchten wir, dass sich der Benutzer an etwas erinnert, damit es sich von anderen abhebt. Der eine Effekt sagt uns, dass Deutlichkeit das Gedächtnis verbessert. Wie bei der Gestaltung einer Flightbookme-Plattform sollten Sie wichtige Informationen visuell unverwechselbar machen, damit sie sich besser erinnern können Ihr Prinzip ist das Gesetz, das am besten geeignet ist. Das passende Gesetz vereinfacht die Interaktion. Das große Element, das sich näher am Benutzer befindet, ist leichter zu erkennen und mit ihm zu interagieren. Betrachten Sie diesen Anmeldebildschirm. Die großen Elemente sind nicht nur auffallend, sondern auch leicht auffindbar , sodass der Benutzer direkt darauf zugreifen kann. Der neunte ist Peak Rural. Wie wir über Erfahrung denken hängt von ihrem Höhepunkt und ihrer Endbewegung ab. Disn die Höhepunkte der Benutzerinteraktion wie Produktentdeckung oder Kaufabwicklung Benutzerinteraktion wie Produktentdeckung oder Kaufabwicklung. Außergewöhnlich zu Denken Sie daran, mehrere Gipfel sorgen für eine unvergessliche Reise. Nicht zuletzt der ästhetische Usability-Effekt. Benutzer fälschen kleinere Usability-Probleme , wenn sie das visuelle Design lieben. Schönheit sollte jedoch niemals im Schatten der Funktionalität stehen. Testen Sie frühzeitig mit Opframes, um eine perfekte Mischung aus Ästhetik und Benutzerfreundlichkeit zu gewährleisten . Und da haben Sie es mit den zehn psychologischen Prinzipien , die das UX Design Zar verändern werden. Beachten Sie dieses Prinzip, lernen Sie es und implementieren Sie es in Ihrem Design, bleiben Sie neugierig und experimentieren Sie weiter und vor allem genießen Sie die Reise, eine wunderbare Benutzererfahrung zu schaffen, und ich werde alle Ressourcen aller Prinzipien beifügen aller Wenn Sie diese also tiefgründig kennenlernen möchten, gehen Sie sie bis zur Mittagszeit durch 107. Psychologie für personalisierte Nutzererfahrungen: Eine Fallstudie: Als Co-Designer werden wir dabei eine Fallstudie kennenlernen Das gilt für die Personalisierung, zum Beispiel dafür, wie Personalisierung im UI X-Design funktioniert Stellen Sie sich also vor, Sie verbringen 87 Stunden pro Jahr damit, auf einer Streaming-Plattform nach Inhalten zu suchen . Klingt anstrengend. Stimmt. Nun, das ist die Realität eines durchschnittlichen Benutzers. Tatsächlich leiden über 76% der Nutzer an Inhaltsmüdigkeit. Aber keine Angst, wir haben eine Lösung gefunden, die in der Psychologie verwurzelt Um unsere Nutzer wirklich zu verstehen, folgen wir einem Roboter-Designprozess Empathie entwickeln, Idee und Design anhand von Interviews und Recherchen definieren . Mit dem Kampf führt uns ein Gesicht zu einer Okay, dieses Problem, es ist immer täglich passiert, sagen wir ich möchte etwas sowohl auf ODD als auch auf Netflix sehen In diesem Fall ist es also zu überwältigend und sie sind zu inhaltlich. Ich war manchmal verwirrt, was ich mir ansehen sollte. Und jetzt haben sowohl Netflix als auch YouTube eine Schaltfläche namens „Etwas Zufälliges abspielen“. Es ist auch in der Röhre. Es kam vor Kurzem, ich glaube, ein paar Tagen habe ich gesehen, dass es einen Knopf gibt, der heißt. Quadratischer Knopf. Es war eine quadratische Taste, spiele etwas Zufälliges. Es war so. Und auf Netflix gibt es einen eigenen Bereich. Wenn du darauf klickst, wird etwas Zufälliges abgespielt . Überrasche mich. Als ich zu diesem Thema recherchierte, erfuhr ich von User Flow. Wo, sagen wir, nach 1/52 Scrollen werden die Nutzer dazu befördert, ihre aktuelle Stimmung zu wählen, zum Beispiel, ob sie glücklich, aufgeregt, niedergeschlagen oder angespannt sind aufgeregt, niedergeschlagen oder Das führt zu Inhalten, die mit ersten Aktionen vollgepackt sind. Glück erlaubt zwar vielseitige Genres, fühlen sich schlecht, aber wir verschreiben leichte Entspannungs- und Wohlfühlfilme. Und wenn wir uns anspannen, fügen wir hinzu, dass etwas kommt. Der erste Ort, der den emotionalen Ton angibt. Jetzt kommt die Magie. Je nach Lust und Laune werden den Nutzern Genres präsentiert, die auf ihren emotionalen Zustand zugeschnitten Egal, ob es sich um Romantik oder Komödie handelt, die Optionen sind personell, um ihren Gefühlen gerecht zu Und der große Finale-Nutzer Wahl zwischen internationalen oder regionalen Inhalten Und es erscheint eine personalisierte Filmempfehlung, ein nahtloses und emotional ansprechendes Nutzererlebnis sorgt . Mit einem sorgfältigen Design haben wir eine Benutzeroberfläche entworfen, die den Benutzermodus, z. B. Genres, liest und die Wahl zwischen internationalen und regionalen Inhalten bietet. Das Ergebnis ist liest und die Wahl zwischen internationalen und regionalen Inhalten bietet internationalen und regionalen Inhalten Eine Personz-Filmempfehlung mit einer vollgepackten Option für zusätzlichen Spaß. Aber wo es noch mehr gibt. Also, als ich dort einen Artikel gelesen habe , werde ich diesen lesen, denn in Zukunft stellen wir uns vor, Mausefalle zu verwenden, um Bewegungen zu wiederholen, um den Benutzer mehr zu bestimmen. Personon auf ein ganz neues Level bringen. Wenn du also deine Maus wie in Aufregung ziehst, wird dir das Spannung andauern lassen, wie Action und all Wenn du es langsam versuchst, zeigt dir das, wie Filme kommen Aus diesem Grund verfolgen Benutzer jede Move-Guides eine filmische Reise Nun, das war der erste Teil über die Personation. Lassen Sie uns nun darüber sprechen, dass MS für sie wie Google und Facebook ist . Die Personation. Große Unternehmen wie Google und Facebook beherrschen also die Kunst, Benutzerdaten zu sammeln, Action und Essenz zu kombinieren und so ein persönliches digitales Universum zu schaffen Aber wie wirkt sich das emotional auf die Nutzer aus? Design-Meister wie Don Norman betonte die Bedeutung von emotionalem Design, von visueller Ästhetik bis hin zur Benutzerfreundlichkeit, und reflektierendem Prestige, gutes Design sollte dem Nutzer Freude und Vergnügen bereiten, aber wie lässt sich das auf die digitale Welt übertragen Hier kommt die Personation ins Spiel der digitalen Welt, wo Benutzerdaten intelligente Kommunikation wie AIML ergänzen Lewis, Sie müssen im Google-Posteingang kategorisierte E-Mails gesehen haben Google-Posteingang Facebooks Sender zu neuen Inhalten. Es geht darum, personalisierte Daten zu präsentieren negative Emotionen nahtlos hinzuzufügen. Es gibt zum Beispiel eine Sache, die mir passiert ist, als ich mir einen Film auf YouTube oder irgendein zufälliges Video angesehen habe und ich dachte, ich werde mir danach etwas ansehen. Also genau das gleiche Video wurde in meinem Bereich erneut veröffentlicht. Also war es schockierend für mich. Sie sind stark und sie kennen dich tatsächlich. Sie kennen jede Bewegung, was du tust und all das. Und auf dieser Grundlage empfehlen sie dir Sachen und Werbung. Die Zukunft der Personation erstreckt sich auch auf das Internet der Dinge, z. B. auf intelligente Geräte wie Google Ns, Amazons, Alexa und Nutzerpräferenzen, und zwar nicht nur visuell, sondern auch durch Sprache und physisches Design Design und Emotion gehen heute über den Bildschirm hinaus. Donomos emotionales Designprinzip leitet uns. Freude und Vergnügen sollten den Einsatz von Technologie begleiten wenn wir neue digitale Produkte und Dienstleistungen entwickeln Emotionale Wirkung wird zu einem ausschlaggebenden Faktor für den Erfolg. Und wir müssen auch einige Auslöser untersuchen, wie wir auch einige positive und negative Auslöser finden müssen. Wie bei der Buchung eines Kinositzes oder eines Fluges, nutzen Sie diese Dringlichkeit und Knappheit für Aktionen, sportifi begeistert die Nutzer mit einem Es ist ein empfindliches Gleichgewicht zwischen der Schaffung eines positiven Erlebnisses und Die wahre Magie entsteht, wenn Personalisierung und emotionale Berichterstattung durch das Design entstehen Es geht nicht nur um visuelle Kommunikation. Es geht darum, Benutzer emotional zu beeinflussen. Um diese Magie zu erreichen, ist ein tiefes Verständnis der Motivation und des Begehrens der Benutzer erforderlich ein tiefes Verständnis der Motivation und des Begehrens der Benutzer Mit Blick auf die Zukunft Personation und Emotion im Design immer offensichtlicher Designer werden sich zu Designern für emotionales Engagement entwickeln und Erlebnisse schaffen, die bei der jeweiligen Benutzergruppe Anklang finden bei der jeweiligen also in dieser Ära der digitalen Entwicklung daran, dass gutes Design einprägsam ist, aber gutes Design ist sowohl einprägsam als auch bedeutungsvoll sich also alles um die Fallstudie sowie darum, wie die Persönlichkeitspsychologie in Uxfeld als auch im Bereich Grafikdesign funktioniert als auch im Bereich Grafikdesign Also werde ich alle Ressourcen hinzufügen sowohl in der Kategorie Pädophile als auch in Geh es durch, wenn du diese Dinge tiefgründig lernen willst. Und danke, dass Sie sich mit uns auf diese Reise begeben haben. Wenn Sie dieses Aufschlussreiche wertvoll fanden, lassen Sie es mich bitte wissen und entwerfen Sie bis zum nächsten Mal weiter mit dem Herzen und lassen Sie sich auf die magische Opposition 108. Farbpsychologie im UI/UX-Design: Willkommen zurück, Studierende. Heute verbinden wir die Welt der Psychologie mit dem VX-Design Dieser gesamte Abschnitt ist also der Psychologie für UI und X gewidmet Psychologie für UI und X EVA steht also für Benutzererfahrung Wir alle wissen, dass es eine zentrale Rolle bei unserer Interaktion mit Technologie spielt eine zentrale Rolle bei unserer Interaktion mit Technologie Nun, warum spielt Psychologie beim Design von Benutzererlebnissen Nun, Schumanns sind wunderbar komplexe Wesen, jedes mit einer eigenen Vorliebe und Vorsicht Wie also machen Technologieunternehmen ihre Bewerbung für ein so breites Publikum so attraktiv ? Indem wir in die eine Sache tippen , teilen wir alle unsere Sinne Wir haben fünf unglaubliche Sinne: Berührung, Hören, Sehen, Riechen und Wenn es jedoch um den Bauch geht, konzentrieren wir uns hauptsächlich auf Berührung, konzentrieren wir uns hauptsächlich auf Berührung, Leider können wir Geruch und Geschmack nicht wahrnehmen. Konzentrieren Sie sich. Vor zwei Jahren habe ich ein Video gesehen, zum Beispiel, wenn ein Display undicht wird, und wenn ein Fuß auf dem Display ist, wirst du das Essen probieren. Es oder so etwas Ähnliches. Ich weiß, dass es in Zukunft kommen wird, und wir werden diese Funktion auch in unserem Telefon haben . Ich weiß, dass es gruselig ist Lassen Sie uns nun die Auswirkungen der visuellen Darstellung auf die Entscheidungsfindung untersuchen visuellen Darstellung auf die Entscheidungsfindung Okay. Überlegen Sie mal, welcher Teller mit Essen teurer zu sein scheint, der auf der rechten oder der linken. Es stellt sich heraus, dass es nicht um die Menge des Essens geht. Es geht darum, wie es präsentiert wurde. Dabei wurde die Bedeutung der schönen Oberfläche unterstrichen , aber wie gestalten wir eine? Es läuft auf die beiden Schlüsselfaktoren hinaus. Die Menge der Informationen und deren Präsentation. Nehmen wir zum Beispiel ein Menü, zu viele Informationen können zu einer kognitiven Überlastung führen und Spuren in unserem Gehirn hinterlassen. Als ob es in meiner Gegend einen Bani-Laden gäbe. Ihre Munis sind also wirklich einfach, es gibt nur vier Optionen und es ist wirklich einfach zu bestellen, und es gibt noch einen weiteren Joint Sie geben uns eine Domini-Karte, und darin gibt es Hunderte von Optionen Also gehe ich heutzutage zu diesem neuen Laden , der nur vier und fünf Optionen hat und der wirklich einfach zu bestellen ist Lassen Sie uns jetzt über Farben sprechen. Farben spielen auch eine wichtige Rolle, da eine helle und nicht übereinstimmende Farbe den Geist belasten kann Dies bringt uns zur Verarbeitung und zu einer fließenden Wahrnehmung. Damit verarbeiten wir Informationen. Schauen wir uns nun die Informationen an , die auf der Website präsentiert werden. Beide Technologieriesen bieten ähnliche Funktionen. Sie wählen jedoch unterschiedliche Ansätze. Es geht nicht um richtig oder falsch. Es geht um die Benutzererfahrung. Lassen Sie uns jetzt noch einmal experimentieren. Schließe für einen Moment deine Augen und denke über die Emotionen nach, die mit dieser Farbe verbunden sind. Rot, Grün, Blau, Lila. Farbe beeinflusst unser Fühlen und Handeln. Aus diesem Grund verwenden App-Benachrichtigungen häufig die Farbe Rot, um unsere Aufmerksamkeit zu erregen. Was den Sound angeht, so ist es ein leistungsstarkes Tool für Apps, um unsere Aufmerksamkeit zu erregen und individuelles Verhalten zu fördern. Lass uns ein zweites Experiment machen. Schließ deine Augen. Ich spiele ein paar Sounds ab und du musst die Sound-App oder Website identifizieren. Ich hoffe, du hast die Sounds identifiziert. Sie haben eine hohe Frequenz entwickelt, um uns durch das Hören eines bestimmten Tons zu alarmieren Wir können die App nicht identifizieren. Lassen Sie uns nun über Reaktionsfähigkeit und positive Verstärkung beim App-Design sprechen positive Verstärkung beim App-Design Positives Feedback wie Vibrationen beim Senden eines Beitrags fördert die Interaktion Auf der anderen Seite hält uns eine positive Verstärkung des Internets, wie das Auffrischen eines Social-Media-Feldes, bei der Stange Ähnlich dem Nervenkitzel eines Spielautomaten. Personation ist entscheidend für das App-Design. Erstellen Sie mit der App ein Modell Ihrer Wahl, das auf Interaktion basiert. So entsteht ein Trailer und ein angenehmeres Erlebnis Aber denken Sie daran, es gibt einen Haken: die hedonische Adaption. Wir gewöhnen uns an positive und negative Stimuli Unternehmen dazu veranlassen , uns regelmäßig zu informieren, um uns bei der Stange zu halten Pursives Design ist ein wichtiger Motivator für Benutzer sich so zu verhalten, wie es sich die Entwickler wünschen Instagram bewirbt beispielsweise Benachrichtigungen für jede Interaktion Förderung von mehr Engagement. Letztlich zielen all diese Designelemente darauf ab, auf das Dopoinsystem in unserem Gehirn abzuzielen in der sich Telefone von einfachen Kommunikationsgeräten zu komplexen multifunktionalen Geräten entwickelt haben, die sich Unternehmen nach unserer Aufmerksamkeit sehnen, glücklich zu machen und die App wiederum einer Welt, in der sich Telefone von einfachen Kommunikationsgeräten zu komplexen multifunktionalen Geräten entwickelt haben, die sich Unternehmen nach unserer Aufmerksamkeit sehnen, glücklich zu machen und die App wiederum häufiger einfachen Kommunikationsgeräten zu komplexen multifunktionalen Geräten entwickelt haben, die sich Unternehmen nach unserer Aufmerksamkeit sehnen, glücklich zu machen und zu Das bringt uns also zu dem Gedanken, dass der Code kaputt ist. Es gibt zwei Branchen, die ihre Kunden als Nutzer bezeichnen: Erstens Tonnen illegaler Drogen und sekundäre Software. Es lohnt sich, sich darüber Gedanken zu machen. Ich hoffe, Sie sind begeistert von der Art und Weise, wie unsere Sinne und Emotionen durch die Appsit-Website, die wir täglich nutzen, beeinflusst werden , aber das ist die Spitze des Eisbergs In der digitalen Welt ist ein ganzer Ozean faszinierender Psychologie am Werk, und wir tauchen gerade erst Machen Sie sich bereit, tiefer einzutauchen, denn wir werden Tonnen von Videos drehen , die diese erstaunlichen Themen behandeln In der nächsten Runde werden wir unsere Laborcodes eingeben und super nerdig werden, wenn es um Farbtheorie, Klangwissenschaft, hedotische Daten, responsives Design und positive Verstärkung responsives Design Deshalb werden wir alle Themen in einem speziellen Video behandeln, und das ist Wir werden in einem Geschäft noch mehr überwältigende Themen wie hartnäckiges Design, soziale Anpassung und die Zukunft der menschlichen Interaktion anbieten bis zum nächsten Mal daran, dass die Apps zwar entworfen wurden, aber Sie sind der Benutzer, der die Kontrolle Nutze deine Formfähigkeit und dein Wissen, um bewusst durch die digitale Welt zu navigieren und die Erfahrung zu wählen, die dein Leben wirklich ankündigt. Bleib neugierig, bleib uniformiert und, was am wichtigsten ist, bleib menschlich 109. Das Happiness-Paradox: Hedonische Anpassung im UI/UX-Design verstehen: Weitere Designer. Heute möchte ich das Geheimnis lüften, indem ich ein außergewöhnliches Benutzererlebnis schaffe Heute tauchen wir in die faszinierende Welt der Psychologie und erfahren, wie sie Sie zu einem Ex-Design-Maestro machen kann So bin ich kürzlich auf den umwerfenden Podcast gestoßen, das Glückslabor mit dem Arzt Lures Ich werde die verknüpfenden Ressourcen hinzufügen. Wenn du es dir ansehen willst, schau es dir an. Es ist großartig. Und ich schätze was? Ich habe mich dabei erwischt, wie ich über einige tiefgründige Erkenntnisse nachgedacht habe, die sich direkt auf das UX-Design beziehen Also, Bakala, hast du jemals von hedonischer Adaption gehört? Ich weiß nicht, ob ich das für richtig halte oder nicht, aber es ist wie hedonische Anpassung. Ich denke, es Es ist also der unglaubliche menschliche Impuls, wir schnell zu einem stabilen Glücksniveau zurückkehren. Egal, das Leben ändert sich. Stellen Sie sich vor, Sie verdienen 50.000 Dollar und denken, Sie hätten 100.000 verdient. Wir machen aus Ihnen eine statische. Spoiler-Alarm Wird es nicht. Das Prinzip wirkt sich direkt darauf aus, wie wir mit positiven Erfahrungen umgehen. Lassen Sie uns nun über inkrementelle Spiele sprechen, die auch als Clicker-Spiele bekannt Ich habe dieses Spiel nicht gespielt, aber wenn du es gespielt hast, lass es mich bitte wissen Das war in der Fallstudie, also erzähle ich es dir nur. Als ich das recherchierte, erfuhr ich, dass man einfache Aufgaben erledigen muss . Als ob du auf den Bildschirm klickst und ein paar Belohnungen bekommst, es ist wie ein Glückslauf. Du verbesserst dich ständig und verdienst mehr. Und rate mal was? Es spiegelt menschliche Tendenzen wider. Diskutiert über handische Anpassung Diese Spiele greifen also auf die positive Psychologie zurück. Dieser Wunsch nach mehr Ressourcen entsprach unserer Aufmerksamkeit, nach mehr Glück zu streben. Es ist eine Meisterleistung im Spieldesign, die Spieler mit positivem Feedback bei der Stange hält . Das ist ein Genie, richtig. Aber wo es mehr gibt. Dieses Spiel bietet auch Offline-Belohnungen. Wie wenn du zurückkehrst, hast du mit Glück geschaffen, Boo. Es ist, als würde man in deine zukünftige Freude investieren. Die Psychologie hier ist weit verbreitet und spielt immer weiter. Lassen Sie uns jetzt den Gang wechseln. Denk an das glänzende neue iPhone. Ich habe kein iPhone. Okay. Nehmen wir an, ich kaufe das iPhone nach einem Monat. Anfangs werde ich sehr glücklich sein, und ich werde mich sehr freuen, das glänzende Cover und das glänzende Display auf dem farbenfrohen Display zu sehen . Aber im Laufe der Zeit werde ich es anpassen, und seine Auswirkungen werden sich auf die Lektionen auswirken. Wie gehen wir also beim Design damit um? Deshalb möchte ich einige Strategien vorstellen, bei denen es sich um Strategien wie UO X-Design und Handgrafikdesign handelt, das bezahlt. Wir kombinieren hedonische Anpassung. Unterstützen Sie zunächst die zwischenmenschliche Beziehung. Produkt, das gemeinsame Erfahrungen fördert, wie Muto IJ von Albert in Ich bin mir ziemlich sicher, dass ich es falsch geschrieben habe. Okay, ich werde es dir auf dem Bildschirm zeigen. Es ist schwer. Englisch ist schwer. Das ist kein Englisch. Ich weiß nicht, welche Sprache das ist, aber das ist schwer auszusprechen. Das wirkt sich also nachhaltig positiv aus. An zweiter Stelle steht das S-Erlebnis, das aktuelle Erlebnis mit minimalem Vergnügen zu optimieren. Indem wir persönliche Ziele unterstützen wie wir sie in der Plus Running App sehen, halten wir die Nutzer an einer Reihe positiver Ereignisse fest. Sie möchten eine Adaption veranstalten, neuartiges und überraschendes Erlebnis bieten, egal ob es sich um Uber handelt, die mit dem Sportwagen abgeholt werden, oder Telekommunikationsunternehmen, die unerwartete Geschenke schicken. Überraschungen sorgen dafür, dass die Erfahrung frisch bleibt. Und schließlich unterstütze ich Dankbarkeit, Produkte und Dienste wie Facebook, digitale Freundschaft zu feiern. 2018 gab es ein Video, das für jedes Symbol verwendet wurde, wenn du mit einer Person in dem Video chattest, es gibt Fotos von dir oder beiden, und sie machen ein wirklich fantastisches Video. So personalisieren sie sie und halten dich auf ihrer Plattform fesselnd Es hilft den Nutzern, das Erlebte zu schätzen und stellt fest, dass sie eine nachhaltige emotionale Wirkung zeigen Wie Sie sehen können, erinnere ich mich immer noch daran . Also ist es großartig. Und da haben Sie es, auf Glück auszurichten und dabei psychologische Prinzipien anzuwenden. Ist das nicht unglaublich? Wie kann das Verständnis menschlichen Verhaltens zu unvergesslichen Erlebnissen führen? Wenn Ihnen diese Reise gefällt, lassen Sie es mich bitte wissen. Ich war hier, um weitere VX-Design-Enthüllungen zu erleben. 110. Der Dopamine-Effekt im UI/UX-Design: In einer von Technologie dominierten Welt sehnt sich unsere Gesellschaft nach Quick sehnt sich unsere Gesellschaft 32. Video, ein 60-minütiger Weltbeitrag und einminütige Artikel sind Aber haben Sie jemals über die Konsequenzen dieses Wandels beim Konsum von Inhalten nachgedacht die Konsequenzen dieses Wandels beim Konsum von Inhalten Die Menschen suchen nach kürzeren, bewussteren und einfacheren Inhalten, um schnell Freude zu haben und eine einfache Aber führt uns dieser Inhalt des Glücks und der Einfachheit auf einen Weg, den wir vielleicht bereuen werden? Es entwickelt sich, nur rückwärts. Wir alle haben eine einfache Lösung, mit einem Hit von Glück, aber was ist mit der Freiheit Werden wir unwissentlich zu Feinden unseres eigenen Wohlbefindens , wenn wir in diesem Kreislauf gefangen sind, der durch Unternehmen und ständige digitale Belohnungen angetrieben wird Dopamin, das Vergnügen, einschließlich Neurotransmitter, die schon immer Teil des Belohnungssystems unseres Gehirns waren Teil des Belohnungssystems unseres Ob in der Freizeit, beim Essen oder sogar beim Einkaufen, wir erleben einen Dopaminrausch Aber was ist die digitale Verbindung? Wenn du einen Inhalt auf einem Gerät wie Real oder TikTok scrollst oder auch ein Instrument postest, erlebst du einen kleinen Tpamin-Rausch Sie Ihren Finger bewegen, werden Sie innerhalb einer Sekunde mit einem neuen Inhalt belohnt . Es ist ein ständiger Belohnungszyklus, ohne dass wir es merken Vergleichen wir das mit einem traditionelleren Vergnügen wie dem Kauf eines frisch gebackenen Kekses. Die Vorfreude, der Kauf, der Geschmack jeder Schritt löst Dopinpike aus, aber da Mir ist nicht aufgefallen, wie schnell Sie Ihren Dopinpike von digitalen Produkten erhalten Ihren Dopinpike von digitalen Produkten erhalten, vergleichbar mit dem Essen eines Kekses. Ihr Gehirn weiß vielleicht nicht einmal , wer die Kontrolle hat. Sobald Ihr Gehirn durch schnellen, in Grenzen gehaltenen Konsum belastet ist , sehnen Sie sich nach dem Ruf Es macht süchtig. Du willst nicht mehr zu Fuß zur Bäckerei gehen, du öffnest lieber, und ich muss Kekse bestellen, aber zu welchem Preis Kurzfristige Dopomiespitzen, vor allem bei Teenagern, nehmen zu Ein erheblicher Teil der Nutzer auf Plattformen wie TikTok, Stogam und YouTube sind junge Erwachsene, die ständig Freude haben, aber Herausforderungen vermeiden, die Jugendliche werden isoliert, leiden unter Schlafstörungen und entwickeln Gewohnheiten, die ihr Wachstum behindern Das Einfache ist zum Standard geworden und es beeinflusst ihr Leben Wie können wir als Designer also an vorderster Front stehen, um dieses Narrativ zu ändern? Wie wir sicherstellen können , dass unser Design langfristige Beziehungen statt Sucht fördert . Unsere Verantwortung ist klar. Helfen Sie Unternehmen dabei, eine langfristige Beziehung zu den Benutzern aufzubauen. Wir müssen vermeiden, die Ursache der Sucht zu sein , und das richtige Gleichgewicht zwischen den Dopaminspitzen finden Es ist an der Zeit, ethische Designer zu sein und die Auswirkungen unserer Kreation zu berücksichtigen Es gibt also einige praktische Möglichkeiten für Designer, Beziehungen aufzubauen, anstatt süchtig zu werden. Schaffung von Haltestellen , an denen Benutzer zwischen den Dopampikes hin- und herschalten können, als ich 2016 und 2018 Pop-Gin gespielt Nach drei Spielen gab es einen Timer. Du kannst nicht eine halbe Stunde spielen. Wie bei I Tub gibt es auch hier einen Knopf. Erinnern Sie mich daran, eine Pause einzulegen da es mehrere Apps gibt. Jetzt enthalten sie die Funktion. Zweitens sollten Sie sich auf die langfristige Kundenbindung konzentrieren und nicht nur auf die Durchführung von Engagements Drittens: Vermeiden Sie Angst einflößende Designentscheidungen. Benutzer sind keine Sklaven. Definieren Sie die gesamte Benutzererfahrung , um die Auswirkungen von Dopampie zu verstehen Fünftens: Langfristig das Gute für alle zu priorisieren , Lodges für kurzfristige Lodges für kurzfristige Designer, wir haben die Macht die Zukunft unserer Menschlichkeit zu gestalten, insbesondere im digitalen Zeitalter. Lasst uns Erfahrungen schaffen, die Wachstum, Lernen und Wohlbefinden fördern , Lernen und Wohlbefinden Und es gibt eine schockierende Tatsache: Ehemalige Führungskräfte und technische Ausreden begrenzen ihre digitale Abkühlung, der potenziellen Gefahren bewusst Es ist an der Zeit, ein Designer zu sein , der unsere Zukunft sichert und Verbesserungen vornimmt, die dem Zeitgeschmack entsprechen Sie sind der Designer, der einen Unterschied machen kann. Du verstehst, wie es funktioniert. Sie können derjenige sein, der dafür sorgt, dass unsere Reise in die digitale Zukunft positiv verläuft. wir uns also in der digitalen Landschaft zurechtfinden, wir uns an die Auswirkungen unseres Designs auf das Leben erinnern, insbesondere auf das der jungen Generation. Lassen Sie uns der Schaffung eines positiven, dauerhaften Erlebnisses, das zu einer besseren Zukunft beiträgt, Priorität dauerhaften Erlebnisses, das zu einer besseren Zukunft beiträgt, Vielen Dank, dass Sie mich auf dieser Reise in die Welt des Cpmin-Designs und der Zukunft begleiten die Welt des Cpmin-Designs und der Zukunft Bis zum nächsten Mal, bleib achtsam, bleib ethisch und gestalte weiter für eine bessere Zukunft 111. Die Macht des Sounds: So prägt Audio die Psychologie der User Experience (UX): Ob heute, wir tauchen tief in die oft alte Welt des Klangs im Design ein. Ja, du hast es richtig gehört, klingt. Es geht nicht nur darum, was Sie sehen, sondern auch darum, was Sie hören. Lassen Sie uns also auf die Symphonie des UX-Designs einstimmen und die unglaubliche Wirkung von Sound auf unser digitales Erlebnis erkunden Sound auf unser digitales Das Bild einer Welt ohne Sound ist ziemlich richtig Nun, Sound ist seit 1.000 Jahren ein Begleiter Kommunikation als Geschichtenerzählen hinzugefügt Heute erschließen wir das Potenzial von Sound im Design. Begeben Sie sich auf eine Reise in die auditive Dimension up vx O Grafikdesign. Haben Sie jemals das subtile heptische Feedback bemerkt wenn Sie mit Ihrem iPhone oder nur einem Pro-Telefon interagieren Oder ein Dating-Sound, der Sie in den Netflix einführt. Sound ist nicht nur ein Kumpel. Es ist ein Superheld in World VX. Es kündigt nicht nur Ihre Erfahrung an, sondern definiert auch die Markenidentität Lassen Sie uns nun untersuchen, wie Sound in digitalen Abenteuern zum unsoliden Helden Schließen Sie für einen Moment Ihre Augen und Sie können Ihre Lieblingsmarke wahrscheinlich an ihrem einzigartigen Sound erkennen Vom beruhigenden Klingeln von Microsoft Windows bis hin zum Getöse von Mercedes Carta Dieser Sound erzählt eine Geschichte und stellt eine Verbindung her. Es ist an der Zeit, herauszufinden, wie Sounds zu den geheimen Seifen der Markenidentität Sound ist mehr als nur ein Hintergrund. Es ist ein aktiver Teilnehmer an der Benutzererfahrung, sei es, den Benutzer durch die Benutzeroberfläche oder Feedback zur vollständigen Aktion zu geben. Sound ist nur ein leiser Assistent, X oder Design unvergesslich macht. Lassen Sie uns enthüllen, wie Sound Benutzer in einer virtuellen Welt Design ist für alle da und Sound ist entscheidend, Roni, um digitale Erlebnisse zugänglich zu machen Von der Audiodeskription oder Netflix für Sehbehinderte bis hin zum subtilen Klicken eines erfolgreichen Tastendrucks Der Sound verbindet sich mit Symplas und exklusivem Vx. Lassen Sie uns die exklusive Welt des Sounddesigns erkunden. Bereit, Ihr Vx-Design auf die nächste Stufe zu heben. Geben Sie UX-Sounddesign ein. Ein Game Changer Es geht nicht nur um Funktionalität, es geht darum, eine emotionale Verbindung zum Benutzer Entdecken Sie das Abenteuer eines durchdachten Sounddesigns von der Steigerung der Kundenbindung bis hin zur Steigerung der Markenbekanntheit Aber wo finden Sie den perfekten Sound für Ihre Design-Sinfonie Fürchte dich nicht. Wir haben eine Liste von Ressourcen für das VTY-Soundspiel Von japanischen lamellenfreien Soundeffekten bis hin zu lizenzfreien Melodien zu Wir haben Deckung. Bist du bereit, deinen Ex - oder Grafikdesign-Sound zu verstärken - oder Grafikdesign-Sound Tauchen wir ein in die Welt der Soundressourcen? Ich werde alle Soundressourcen in den Ressourcen sowie in der Ressourcendatei hinzufügen . Geh und sieh dir das an. Sie beim Abschluss unserer klanglichen Reise durch das EVx-Design daran, dass es bei großartigem Design nicht nur darum geht, was Sie sehen Es geht darum, was Sie hören. Lassen Sie sich vom Sound leiten, wenn es darum geht, ein unvergessliches, ansprechendes und exklusives Benutzererlebnis Bis zum nächsten Mal, hören Sie weiter zu und gestalten Sie weiter und lassen Sie der Klanglandschaft von UX leiten 112. Figma Final outro skillshare: Wow, herzlichen Glückwunsch. Er ist die fertige Linie. Diese Reise war ein ruhigeres Abenteuer, nicht wahr? Es war ein langer Kurs. Aber hier sind wir. Und lassen Sie mich Ihnen sagen, dass die Erstellung dieses Kurses auch keine leichte Aufgabe war. Aber wir haben es zusammen geschafft. Ich möchte mir einen Moment Zeit nehmen , um meine Dankbarkeit auszudrücken. Ein großes Dankeschön an alle meine früheren Schüler und an alle Coaching-Kunden. Sie waren ein wertvolles Rückgrat und Ihre Erkenntnisse haben eine entscheidende Rolle bei der Gestaltung dieses großartigen Kurses gespielt . Ohne dich hätte ich es nicht geschafft. Lassen Sie uns jetzt die Liebe erschaffen. Wenn Sie diesen Kurs hilfreich fanden, und seien wir ehrlich. Warum sollten Sie ihn nicht mit Ihren Kollegen, Freunden und allen anderen in Ihrem Kreis teilen und allen anderen in Ihrem Kreis , die davon profitieren könnten Ihre Unterstützung hat mir geholfen, zu wachsen und weiterhin das zu tun, was ich liebe, nämlich wertvolle Inhalte für großartige Menschen wie Sie zu erstellen. Oh, und vergiss nicht, dich mit mir in den sozialen Medien zu verbinden. Sie haben wahrscheinlich bereits alle Links in Ihren Klassendateien. Aber falls du es verpasst hast, sie sind genau hier. Bleiben wir in Verbindung und lassen Sie uns die Lernreise weiterführen . Und hey, hast du dir meinen Dip-Kanal angesehen? Es ist ein Schatz an zusätzlichen Inhalten von schnellen Tipps bis hin zu tiefgründigen Trails. Melde dich jetzt an und verpasse nie die neuesten Updates und Einblicke Lassen Sie uns nun über die ständig schreiende Branchenlandschaft sprechen die ständig schreiende Die Welt des Designs verändert sich ständig, und das macht sie so spannend Nehmen Sie die Reise an, auch wenn sie sich manchmal etwas zweifelhaft anfühlt Denken Sie daran, dass das Impostor-Syndrom ein gängiges Problem ist, aber Sie sind mehr als qualifiziert sich UX-Designer zu nennen keine offizielle Qualifikation erforderlich . Und rate mal was? Ihre Lernreise muss hier nicht enden. Wenn Sie tiefer in Grafikdesign, soziale Medien, KI oder Vdating einsteigen möchten , habe ich genau das Richtige für Sie Schau dir meine anderen Kurse auf Canva, Catbi oder Die Links befinden sich im Ressourcenbereich, also schauen Sie Und wenn Sie jemals Fragen haben oder einfach nur chatten möchten, kontaktieren Sie mich in den sozialen Medien. Du hast schon alle meine Handgriffe, also sei nicht schüchtern. Ich bin hier, um dich bei jedem Schritt auf dem Weg zu unterstützen. Nun, Leute, das ist ein Rap. Ich hoffe, Ihnen gefällt dieser Kurs genauso gut wie ich es genossen habe, ihn zu erstellen. Es war mir eine Freude, dieses Wissen mit Ihnen zu teilen, und ich kann es kaum erwarten, Sie bald in einem anderen Kurs zu sehen. Bis dahin, gestalte weiter, gestalte weiter und, was am wichtigsten ist, sei weiterhin großartig. Also tschüss fürs Erste.