Grundlagen des UI/UX-Designs mit Figma

1. Schulungskurs „Einführung in die Grundlagen von Figma“: Hallo zusammen. Mein Name ist Dan Scott und das ist der Figma Essentials-Kurs Gemeinsam werden Sie und ich alles lernen, was Sie wissen müssen , um als UX-Designer bei FGMA zu beginnen Während des Kurses lernen Sie, wie Sie alle Tools in Figma beherrschen Ich werde auch alle Grundlagen des UX-Designs vermitteln , um auf einfache Weise schöne Benutzeroberflächen und ansprechende Prototypen in Figma zu erstellen schöne Benutzeroberflächen und einfache Weise schöne Benutzeroberflächen und ansprechende Prototypen in Wer ist er? Ich bin Dan Scott. Ich bin jetzt seit mehr als 25 Jahren Designerin. Ich habe mehrere Lehrpreise gewonnen, und meine Online-Kurse wurden von mehr als 1 Million Menschen besucht inzwischen von mehr als 1 Million Menschen besucht, genau wie Sie. Zunächst geben wir Ihnen Ihr eigenes, einzigartiges Briefing und zeigen Ihnen, wie Sie mit einer UX-Persona arbeiten Du wirst lernen, wie man einfache Wireframes erstellt. Von dort aus lernst du, wie Farben und Bilder richtig in deine Sie lernen die Vor- und Nachteile bei der Auswahl von Schriftarten für Web- und mobile Sie lernen, wie Sie mithilfe der Zeichenfunktionen von Figm Ihre eigenen Symbole, Schaltflächen und alle Arten von UI-Komponenten mithilfe der Zeichenfunktionen von Figm Sie werden die gruseligen Begriffe wie Komponenten, Einschränkungen und Varianzen lernen Komponenten, Einschränkungen und Varianzen Sie sind alle sehr einfach, woher Sie wissen wie. Sie werden uns auch das Leben leichter machen, indem kostenlose UI-Kits und Plug-ins für FigMA verwenden, um unseren Arbeitsablauf zu beschleunigen Sie werden auch lernen, wie Sie einige der praktischen neuen KI-Funktionen von FigMA verwenden praktischen neuen KI-Funktionen von FigMA Wir erstellen einen einfachen Styleguide für die Übergabe an den Kunden bereit ist Sie werden lernen, wie man Mikrointeraktionen und Animationen erstellt Bis hin zur Zusammenarbeit mit anderen Teammitgliedern, einem Überblick über die FuGMA-Websites, einem Überblick über die FuGMA-Websites sodass Sie die Site selbst erstellen können, und dem Export aller richtigen Dateien, die zur Übergabe an einen Entwickler oder Softwareingenieur bereit sind Übergabe an einen Sie haben während des gesamten Kurses Aufgaben , die ich festgelegt habe, damit Sie das Gelernte üben können und am Ende etwas Einzigartiges für Ihr Portfolio haben etwas Einzigartiges für Ihr Portfolio Dieser Kurs richtet sich an Personen, die neu im Bereich Design, UIX-Design und User Experience Design Auch wenn Sie sich nicht wirklich sicher sind, was UX-Design ist, machen Sie sich keine Sorgen, wir werden gleich am Anfang beginnen und uns Schritt für Schritt durcharbeiten In Ordnung, mein Freund, es ist Zeit. Melde dich an und schließe dich mir an und gehe von Figma Zero zu Figma Hero. Entwirft er sein eigenes Hemd? Er hat es getan. Darauf bin ich so stolz. Es ist cool. Ich habe es irgendwie auf die Seite gedreht und es tropft. Nur dass sich das Gold nicht bügeln lässt. Jedes andere bisschen gut gebügelt. Dieses bisschen macht mich verrückt Warum bügelst du kein Gold? Warum? Äh. 2. Erste Schritte mit Figma Training: Hallo. Du bist dabei. Du hast es geschafft. Gute Arbeit. Hallo, als Erstes müssen Sie die Übungsdateien herunterladen. Irgendwo auf der Seite wird es hier einen Link geben. Laden Sie die Dateien herunter, die Sie für diesen Kurs benötigen. Außerdem wird es in diesen Übungsdateien ein Shortcut-Sheet geben, okay? In diesem Fall werden wir nicht zu tief in die Abkürzungen gehen. Wir werden es tun, aber es gibt einige , die einfach sehr natürlich und nützlich zu verwenden sind. Also habe ich ein Blatt gemacht, das du ausdrucken, neben deinen Computer kleben und die Blätter, die du häufig benutzt , einkreisen kannst. Die andere Sache ist, dass es eine kostenlose und eine kostenpflichtige Version von Figma Ich werde den Kurs so beginnen, dass ich viele der kostenlosen Funktionen verwende , und wir werden im Laufe der Zeit auf einige kostenpflichtige Funktionen stoßen Wenn Sie also nur die kostenlose Version verwenden möchten , ist das völlig in Ordnung In Figma kann man sehr weit kommen. Weißt du, du kannst mit der kostenlosen Version ein ziemlich kompetenter UX-Designer in Figma sein , und ich werde das tun, aber ich werde mich auch nicht vor der kostenpflichtigen Version verstecken , weil es dort auch einige wirklich coole Dinge zu tun gibt Selbst wenn Sie die kostenpflichtige Version nicht verwenden, können Sie es tun . Es ist gut zu sehen, was die kostenpflichtigen Funktionen sind und wie Sie sie verwenden Die andere Sache ist, dass es eine Desktop-Version und eine browserbasierte Version gibt. Ich werde die Desktop-Version verwenden. Sie sind genau gleich. Eine, die Sie herunterladen und auf Ihrem Computer haben können, eine, die Sie einfach in Ihrem Chrome-Browser verwenden können. Es gibt keinen Unterschied zwischen den beiden. Benutze beides. Ich werde die Browserversion verwenden, weil ich alt bin und es mag, wenn Dinge ohne triftigen Grund auf meinem Desktop sind. Also da hast du's Die andere Sache ist, dass ich sehr schnell sprechen kann, besonders wenn ich am Anfang eines Kurses stehe und gerade einen Kaffee getrunken habe. Vielleicht, ja, spreche für manche Leute zu schnell, vor allem, wenn vielleicht Englisch deine zweite Sprache ist. Die andere Sache ist, dass manche Leute denken, dass ich zu langsam spreche. Du kannst mich beschleunigen. Da ist ein Zahnrad Wo ist es? Ich glaube, es ist hier drüben. Klicke darauf. Du wirst eine Geschwindigkeit finden. Du kannst mich beschleunigen oder verlangsamen , wie es dir passt. Die andere Sache ist, dass Figment wirklich gut darin ist, Dinge zu aktualisieren Die sagen, mach es besser. Lass es uns ändern. Lass es uns klarer machen. Das Problem für mich als Kursersteller ist jedoch, als Kursersteller ist jedoch, dass sie Dinge ändern und verbessern , und das kann schwierig sein. Wenn es eine große Änderung ist, nehme ich das Video einfach erneut auf und du wirst es nicht wissen. Wenn es sich um eine winzige Änderung handelt, überprüfen Sie einfach die Kommentare. Vielleicht gibt es da unten eine Notiz, die hieß früher so und jetzt heißt sie so, okay? Aber es ist am selben Ort und es sieht genauso aus und macht dasselbe. Behalte das also während des gesamten Kurses im Auge. Die andere Sache ist, wer freut sich darauf, loszulegen? Das bin ich. Ich liebe es, diesen Kurs zu machen. Ich freue mich darauf, loszulegen. Lass mich in den Kommentaren wissen, ob du es auch bist. Ich liebe es, sie mir anzusehen, nachdem ich einen Kurs gemacht habe. Ich frage mich, wer ist vorbeigekommen, um anzufangen? Ordnung. Mach mit dem Kurs weiter, Dan. Okay, lass uns gehen. 3. Wozu dient Figma?: Okay, in diesem Video werden wir darüber sprechen, was Figma ist und was Figma nicht ist Also Figma, es sind tatsächlich viele Dinge geworden. Es wird hauptsächlich für UIUX-Arbeit verwendet. Wenn Sie es also auf den Punkt bringen, erstellen oder entwerfen Sie eine Website oder eine App Also kommt ein Kunde zu mir und sagt, Dan, du musst uns eine neue Website entwerfen. Du öffnest Figma und gestaltest es dort, und dann hast du es nachher zu einer echten Website entwickelt Figma ist also das Erscheinungsbild einer Website und eine schnelle Möglichkeit zu gestalten, dass Kunden sie abmelden Warum machen wir uns die Mühe , es in Figma zu entwerfen und es dann danach zu erstellen Es geht hauptsächlich um Geschwindigkeit. Es geht um schnelles Prototyping Das ist quasi der Schlüsselbegriff für Figma und eine Art Alternative zu Schnelles Prototyping. Wenn der Kunde also zu mir kommt und sagt, ich will all diese Funktionen, dann will ich diese Dinge machen Sie können es schnell entwerfen und dem Kunden geben. Sie können einen Prototyp erstellen, sodass er wie eine Website aussieht und wie eine funktioniert. Die Knöpfe klicken. Du gehst überall hin. Das werden wir im Kurs machen. Das nennt man Prototyping So können Sie daraus eine wirklich kompetent aussehende Website machen. Also kann der **** zurückkommen und sagen, äh, das ist nicht das, was ich will, oder das funktioniert nicht, oder was noch wichtiger ist, Sie können es mit den Kunden dieses Kunden testen und sie können diese Art von Prototyp verwenden. Okay? Es ist keine vollwertige Website, aber sie sieht aus und fühlt sich auch so an, und sie können verloren gehen. Und das kannst du reparieren Okay? Die Iteration macht uns zu einem UX-Designer und macht Figma auch so mächtig Ich kann sagen: Okay, hier, Kunde, hier ist dein Projekt, und sie sagen, nein, ich kann zurückgehen und schnelle Änderungen vornehmen, nicht zurück zum Entwickler gehen und diese riesige große Codebasis, die wir erstellt haben, neu aufbauen, okay? Einfach etwas in Figma herumziehen, superschnell und einfach, schneller Prototyp Und dann geh zurück zum Kunden oder seinem Kunden und sag: Was denkst du jetzt, okay? Und sieh zu, wie sie es benutzen und erkennen, dass sie sich immer noch verirren. Ändere die Dinge, ändere die Sprache, verschiebe die Größe , du weißt schon, passe die Dinge sehr schnell , sodass du an einen Punkt kommst an dem jeder es unterschrieben hat, der Kunde sagt, ja, ich liebe dieses Ding Dann kannst du mit einem Entwickler zusammenarbeiten, okay, um dieses Ding zu bauen Oder mit einer der anderen Figma-Funktionen namens Figma-Sites oder WordPress arbeiten der anderen Figma-Funktionen namens Figma-Sites oder was wir sonst noch haben In meinem Kopf gibt es noch andere Webflow, es gibt noch mehr, okay Elementor. Es gibt viele Möglichkeiten, es danach zu bauen, okay? Also werden wir uns hier auf die Design-Seite konzentrieren, die Art von UX-Designprozess, okay? Und erstellen Sie Websites, die so aussehen und sich auch so anfühlen, als ob sie funktionieren. Du musst nur wissen , dass es nicht einfach so ist, wie es am Ende gemacht wird, okay? Das ist die Art von Prozess. Und warum machen wir das? Weil es schnell und viel billiger ist, als Sie es entwerfen zu lassen oder die Zeit damit zu verbringen diese voll funktionsfähige Website zu erstellen, nur um viele Änderungen vorzunehmen. Da passt Figma also ins Spiel. Das ist es, was es wirklich gut macht Schnelles Prototyping. Was Figma sonst noch wirklich gut kann, ist, dass es sich irgendwie in den allgemeinen Designbereich einschleicht Figma wurde also geboren, um Websites und Apps zu erstellen , okay, Rapid Prototyping Aber jetzt haben die Leute die Tools übertroffen, okay? Und die Leute haben angefangen, es nur für allgemeine Designzwecke zu verwenden . Die Tools, die Sie in diesem Kurs lernen werden, werden wir auf Webdesign und App-Design aufbauen, aber wir werden das Tool lernen, damit Sie es auch als allgemeines Design-Tool verwenden können. Und die Leute benutzen es dafür. Also nennen sie es Figma Draw, aber das ist irgendwie einfach in diesen Kurs integriert Dazu gehören auch die Zeichenwerkzeuge. Sie werden sich also fragen: Oh, warum kann ich diesen Flyer nicht einfach hier entwerfen? Oder diese Social-Media-Anzeige, Sie können die Fähigkeiten aus diesem Kurs absolut nutzen. Wir müssen uns auf UIUX konzentrieren, aber Sie können es für all das verwenden Einige der anderen Dinge, die FIGMA tut und die in diesem Kurs nicht behandelt Sie haben also andere Werkzeuge, zum Beispiel. Es gibt einen namens FIG JAM, okay , der, du weißt schon, ein eigenständiges Produkt ist. Es ist wie ein Whiteboard-Tool wie Merro, okay, quasi wie Ideen und Brainstorming Sie haben Figma Buzz, ein spezielles Social-Media-Design-Tool, das eine Art Alternative zu Canva oder Sie haben Figma-Seiten, okay, wo du deine Figma-Datei nehmen kannst, okay, die wir da machen, das Design davon und daraus dann tatsächlich Okay? Figma stellt also fest, dass es den Rahmen dieses Kurses Wir werden es am Ende ein wenig behandeln, okay, weil es ziemlich cool ist und quasi der nächste Schritt in Ihrem Prozess Aber das wäre eine Alternative für so etwas wie Webflow oder Wordpress, okay? Aber oft baue ich Sachen in Figma, okay, und gebe sie dann einem Entwickler, damit er eine andere Art von Codebasis einbaut, okay? Aber wenn Sie es selbst erstellen, könnten Sie Figma-Sites verwenden Sie haben Figma-Folien, was im Grunde eine PowerPoint-Alternative ist Was haben sie sonst noch? Figma Buzz, soziale Medien? Lass mich meine Notizen überprüfen. Warte dort. Da haben wir's. Figma M ist eine Art Beta-Version der KI-Codierung Sie können sozusagen mit ihm sprechen, um Ihre Site zu codieren. Das ist außerhalb des Kurses ziemlich cool. Wir werden uns auf das konzentrieren, was sie Figma nennen. Und das ist die Art der allgemeinen Verwendung dafür, und sie nennen es Figma-Design. Also werden wir es tun Konzentrieren Sie sich auf das UX-Design der Benutzeroberfläche, aber seien Sie sich bewusst, dass Sie die Tools, die Sie lernen werden , auch für allgemeine Designzwecke verwenden können . Auch eine Art Alternative. Lassen Sie uns Photoshop More Adobe Illustrator verwenden, wenn Sie diese Software kennen In Ordnung, das ist es also, was es tut. Ich burbere ein bisschen mit. Ich hoffe aber, das ist hilfreich, denn Figma hat viele verschiedene Facetten Wir werden uns auf UI und UX-Design konzentrieren und es heißt Figma Design. Nächstes Video 4. Was ist der Unterschied zwischen UI und UX in Figma?: Okay, lassen Sie uns über den Unterschied zwischen UI und UX sprechen zwischen UI und Die Unterschiede sind also UY, Benutzeroberfläche, UX, Benutzererfahrung UI sind die Pixel auf der Seite, wie die Schriftarten, die Sie auswählen, die Bilder, die Farben, die Abstände. Du lässt es irgendwie gut aussehen. Okay, du warst ein UI-Designer, und so habe ich irgendwie in diesem Bereich angefangen. Der Kunde würde zu mir kommen und sagen, ich möchte eine Website. Ich habe es entworfen, es sah cool aus. Es hat ihm gefallen. Wir haben es geschickt. Okay, ich war ein UI-Designer. Wo ich UX-Designer wurde kam der Kunde mit einem Problem zu mir. Nehmen wir an, wir müssen den Checkout auf unserer Seite aktualisieren. Wir wollen es besser machen, okay? Also anstatt einfach etwas zu entwerfen, von dem ich dachte, dass es besser wäre, okay, ich würde etwas entwerfen. Ich hätte eine gute Idee und eine Hypothese darüber, was getan werden könnte, okay? Und dann würde ich es testen, okay? Also würde ich es mit ein paar Leuten testen und sehen, ob sie es einfacher finden? Finden sie es vertrauenswürdiger, okay? Wir führen kleine persönliche Tests durch, oder Sie können es online machen oder, sagen wir, bringen Sie Ihren Laptop mit. Wir führen viele AB-Tests durch, bei denen wir sagen: In Ordnung, wir machen das, wir schauen uns immer die Updates des Checkout-Flows an Updates des Checkout-Flows Wir führen AB-Tests durch, bei denen die Hälfte der Leute, die auf die Website kommen , zu den alten 1,5 gehen, davon zu dieser neuen Und ich denke, okay, ist es besser? Haben wir bessere Konversionen? Weniger Konversionen? Warum? Können wir das Ding ändern? Hat es es besser gemacht? Wir fangen an, in den UX-Bereich einzusteigen, okay, wo wir unsere Ideen testen, weißt du, schnell iterieren , was uns zu einem UX-Designer macht Wenn Sie jemals eine Website benutzt haben, als Sie auf etwas Frustrierendes gestoßen sind, dann sind das UX-Designprobleme, das UX-Designprobleme Und das ist etwas, das du jetzt viel mehr zur Kenntnis nehmen wirst und das solltest du Nehmen wir an, ich benutze meine Banking-Website über meinen Computer hier. Ich bin mir nicht sicher, warum ich vortäusche zu tippen, aber wissen Sie, eine der kleinen Frustrationen ist sie jedes Mal, wenn ich zu diesem Ding gehe, es aktualisiert Und jetzt, wenn ich mein Passwort eintippe und die Eingabetaste drücke, macht es nichts Du nimmst deine Maus und klickst auf die Art von Absenden-Taste. Du sagst, es ist so einfach, das anzupassen und wenn sie ein paar Tests damit gemacht hätten, okay, sie würden sehen, dass die Leute frustriert waren und dort aufgehört haben, und es wäre eine einfache Lösung gewesen und hätte die gesamte Benutzererfahrung viel benutzerfreundlicher gemacht viel benutzerfreundlicher Es ist kein Wort. Aber du verstehst die Idee. UI bringt uns auf die Seite, so wie sie aussieht. UX ist die Art und Weise, wie Menschen mit Ihrem Projekt interagieren. Und genau das werden wir in diesem Kurs tun. Wir werden uns beide Benutzeroberflächen ansehen und ich werde Ihnen im Laufe des Kurses einige Tipps zur Umsetzung von UX und zur Prototypenerstellung Wir werden uns irgendwie auf die Figma-Tools konzentrieren, aber ich werde versuchen, dort einige bewährte UX-Praktiken zu finden, um Ihnen den Einstieg zu 5. Was wir in diesem Figma-Kurs machen: Ordnung. Was machen wir in diesem Kurs? Wir werden das machen. Es ist eine Website für eine bestimmte E-Commerce-Marke. Jeder wird seinen eigenen bekommen. Die, die ich in diesem Kurs verwende ist für Geldbörsen, okay? Und lassen Sie uns es kurz vorführen. In Ordnung, ein kleiner Abonnement-Newsletter erscheint. Okay? Wir können gehen zu Lass uns mehr darüber erfahren. Wir machen es zu einer Art Homepage, einer Feature-Seite. Wir gehen zur Kaufseite. Die Leute können Dinge ankreuzen , Dinge hinzufügen und dann bekommst du eine Bestätigungsseite. Und ein Kippschalter, der derzeit nichts tut. Wir werden sowohl eine Desktop- als auch eine mobile Version unserer Website erstellen . Das mobile Navi. Wir werden auch Wireframes machen. Okay? Also werden wir in dieser Art von High-Fidelity-Version enden, dieser Art von Vollversion, aber wir bauen auch unsere Wireframes, um zu beginnen, alles miteinander zu verbinden, damit es überall hinkommt und wir testen können Wir werden dafür sorgen, dass alles responsiv ist , sodass es sich an unterschiedliche Bildschirmgrößen anpassen kann unterschiedliche Bildschirmgrößen anpassen Wir werden einen grundlegenden Styleguide mit Stilen und unseren verschiedenen Komponenten für Navigation und Schaltflächen erstellen unseren verschiedenen Komponenten . Es macht jede Menge Spaß. Also warum bauen wir das? Wir werden damit arbeiten. Also werden wir mit einem Briefing beginnen, in dem steht, was wir tun, und eine Persona, und wir werden dieses Ding namens Ta bauen. Oh, tun, und eine Persona, und wir werden dieses Ding namens Ta bauen. Oh, lassen Sie uns im Grunde darüber sprechen Im nächsten Video erhält jeder sein ganz eigenes Briefing Wir bauen alle etwas anderes. Sie erhalten unser Produkt und Sie erhalten eine kurze Persona Eine Persona ist nur eine beschreibende Beschreibung dessen, wer der Kunde ist, denn wenn wir etwas für jeden machen, wird es einfach ein bisschen klar und es ist nicht wirklich gut für eine bestimmte Wir werden herausfinden, für wen wir das bauen. In diesem Fall baue ich es für Sam. Ich kenne ihr Alter, ich kenne grundlegende Informationen über sie, also wenn wir während unseres Designprozesses Entscheidungen treffen verwenden wir den Benutzer, seine Persönlichkeit, um Entscheidungen zu treffen, anstatt etwas zu bauen, das Dan will, weil es nicht für mich ist, ich sollte nicht derjenige sein, der entscheidet, das ist cool Ich denke, es sollte so funktionieren. Ich muss mich trennen und überlegen, was würde Sam wollen? Jeder wird einen etwas anderen bekommen. Sam liebt Mode und die neuesten Trends, also werde ich das in meinem Kopf verwenden. Wohingegen Sie vielleicht jemanden finden, der sehr umweltfreundlich oder umweltbewusst ist. Das wird das Design wirklich verändern . Das Zielpublikum. Wir müssen es für sie bauen, nicht für Sie, nicht für den Kunden oder Ihren Kunden, für Sam. Jetzt werden wir nur einen kleinen Teil des UX-Designprozesses behandeln. Wir leiten hauptsächlich die Software, aber ich werde sie im Laufe des Kurses vorstellen , damit Sie ein grundlegendes Verständnis des UX-Designprozesses erhalten. Aber nach diesem Video oder nach diesem Kurs schauen Sie sich Personas an, ein bisschen mehr. Informiere dich über sie. Das ist wirklich einfach. Jetzt, wo wir wissen, was unsere Persönlichkeit ist, werden wir an diesem Aufgabenablauf arbeiten Wir werden alle den gleichen erstellen. Wir werden eine Homepage, eine Funktionsseite, eine Checkout-Seite und eine Zahlungsbestätigungsseite erstellen . Dies wird als Taskflow bezeichnet. Es ist eine sehr spezifische Aufgabe, die auf einer Website erledigt werden muss. Oft erhalten Sie einen Job für eine bestehende Website, bei der es sich nicht um ein vollständiges Redesign handelt Ich möchte, dass du den Anmelde- oder Kündigungsablauf aktualisierst, oder Kündigungsablauf aktualisierst, oder es geht vielleicht darum, wie man ein Dokument hochlädt Sie werden an einem bestimmten Aufgabenablauf arbeiten. Es ist wahrscheinlich wichtig, jetzt über den Unterschied zwischen einem Aufgabenablauf und, sagen wir, einem Benutzerablauf zu sprechen. Ich habe hier ein gutes Beispiel gefunden. Dies ist eher ein Benutzerfluss. Da der Ablauf sehr linear ist, dieser Benutzerfluss, gibt es viele verschiedene Möglichkeiten, viele Entscheidungen, um zu diesem letzten Teil zu gelangen , und Sie müssen sie alle berücksichtigen. Eine viel größere Aufgabe als das, was wir in diesem Kurs machen. Nehmen wir an, es gibt einen guten Benutzerfluss für die Bring Our Laptop-Website. Es kann sein, dass jemand auf der Homepage ankommt, sich anmeldet und um einen Kurs zu machen, gelangt er vielleicht über die Suchoption darauf . Vielleicht gibt es Leute, die suchen. Es könnten Leute in den Augenbrauen sein. Sie sind möglicherweise über eine Anzeige gekommen, die direkt zur Übersichtsseite führt Es gibt all diese verschiedenen Möglichkeiten , zu einem Videokurs zu gelangen. Als UX-Designer , der einen Benutzerablauf durchführt, sind das alles, was ich beachten muss. Größerer Job. Wir machen etwas Nettes und Einfaches, nur eine Aufgabe, okay. Also im nächsten Video gebe ich dir deinen einzigartigen Auftrag. Wir werden diesen Taskflow verwenden. Wir werden eine Wireframe-Version davon erstellen und testen. Wir werden dann eine Hidelity-Version davon erstellen. Wir werden auch eine Desktop-Version erstellen. Wir werden es entwerfen. Wir werden es inaktiv machen Währenddessen lernen wir alles Wesentliche für Figma, aber wir werden auch einen Teil dieses UX-Designprozesses Ordnung. Bist du bereit? Ich bin bereit. Ordnung. Lass uns gehen. 6. Klassenprojekt 01 - Erstellen Sie Ihre eigene Beschreibung: Ordnung, es ist Hausaufgabenzeit. Hat er Hausaufgaben gesagt? Ich meinte üben mit Lernen. Also werden wir während des gesamten Kurses Aufgaben stellen, nur damit Sie nicht einfach blind mitmachen , dass Sie etwas machen können Und das Coole daran ist, dass du etwas Einzigartiges für dich machen Wir werden dieses Ding namens Random Project Generator.com verwenden , um ein einzigartiges Briefing zu erstellen, aber wir werden alle demselben Aufgabenablauf folgen Also werden wir das alle machen. Wir werden alle eine Homepage für ein Produkt erstellen , die Produktmerkmale. Es wird eine Checkout - und eine Bestätigungsseite geben. Wir machen also den gleichen Aufgabenablauf. Aber wenn wir den Zufallsgenerator für Projekte verwenden, wir alle etwas anderes erstellen, das wir verwenden können und das für unser Portfolio einzigartig ist. Öffnen Sie also die Klassenprojekte, Doc. Es sollte in Ihren Übungsdateien sein. Da ist es da, okay? Und deins wird viel voller sein als meins. Also sind wir hier dran, Projekt 01. Besuchen Sie also random project generator.com und klicken Sie auf die UyX-Schaltfläche. Also lass uns das machen. Okay? Das ist ein Tool, das ich und das Team hier gemacht haben, und du kannst auf uyXO klicken und einen Namen eingeben Es spielt keine Rolle, was es ist. Okay? Ihr Nachname, der Name eines Freundes, der Name des Haustiers, der Name des Kindes, der Name der Großmutter, was auch immer Sie möchten, und dann ein Ort Okay? Also, ich lebe in Limerick und werde auf Mein Projekt generieren klicken In Ordnung, und Sie erhalten Ihre eigene Persona. Sie werden sich sehr ähnlich sein und der Unterschied wird das Produkt sein, das zufällig generiert wird, und der Name, den Sie verwenden, aber alles andere wird strukturell gleich sein Wir entwerfen also alle das Gleiche, aber mit ein bisschen Einzigartigkeit Wenn dir nicht gefällt, was du hast, drücke nicht auf Erneut versuchen. Es ist nicht ohne Grund rot Ich warne dich. Okay? Also mache ich Scott Wallets. Mein Kunde ist Sam. Und es erzählt mir ein bisschen über sie. Was wir tun können, ist als PNG herunterzuladen. Sie haben es also, damit Sie darauf zurückgreifen können, laden Sie es einfach für Ihren Computer herunter. Bewahren Sie es an einem sicheren Ort auf. Wir werden es während des gesamten Kurses verwenden, und wir werden es auch gegen Ende verwenden, wenn wir es kombinieren, um mehr aus einem Portfoliostück zu machen. In Ordnung, so funktionieren Klassenprojekte. Ich sage dir, was zu tun ist, und manchmal bitte ich dich, es auf die Website hochzuladen , wenn wir etwas Interessanteres zu teilen haben , aber für den Moment speichere dein Briefing einfach irgendwo und behalte es im Kopf, wenn wir während des gesamten Kurses entwerfen. Ordnung. Das ist alles. Nächstes Video-Time. 7. Was ist Lo Fi Wireframe im Vergleich zu High Fidelity in Figma?: In Ordnung. Lassen Sie uns über Wireframe versus High Fidelity sprechen Wireframe versus High Fidelity Oh. Es ist ziemlich einfach Wireframes sind Wireframes, und High Fidelity sind diese In diesem Kurs werden wir also zuerst das Wireframe erstellen , es testen und dann einige weitere Designfunktionen für dieses High-Fidelity-Feature entwickeln Designfunktionen für dieses High-Fidelity-Feature Es wird also normalerweise als Y-Frame bezeichnet, manche Leute nennen es Low-Fi und Hi-Fi oder Wireframe und High Fidelity Mein Rat ist, das nicht zu überspringen. Ich rate, den Wireframing-Schritt nicht zu überspringen . Jemand kommt mit einem Projekt oder einem Auftrag zu Ihnen, Sie können ein Wireframe zum Laufen bringen und es testen, zum Beispiel, dass die Tasten funktionieren und die Navigation einige grundlegende Dinge innerhalb von Minuten erledigt Sie gehen zurück zu Ihrem Stakeholder, Chef und Kunden und sagen: Ist das, was wir versuchen zu tun? Und sie können sagen: Ja, du kannst weitermachen, anstatt ewig damit zu verbringen, Bilder zu scannen und zu verfolgen und Bilder auszuwählen und sie richtig zu machen Das habe ich nicht gemeint. Das ist schnell, es ist dreckig, es ist einfach. Und du wirst es für diesen Kurs machen müssen , weil wir das zuerst bauen werden. Und es wird uns viele der grundlegenden Funktionen von Figma vermitteln der grundlegenden Funktionen von , bevor wir weitermachen und hübsch machen Warum Frames nicht so aussehen müssen. Es gibt keine wirkliche Regel dafür, was sie tun können. Normalerweise ziehen die Leute einen Strich durch das Bild, aber es. Lass uns ein paar Beispiele auf Figma suchen. Ich bin in Figma. Ich gehe hier oben zu diesem Home-Button Ich gehe zu diesem Punkt, wo es um Vorlagen und Tools geht. Sie bewegen diesen Button ständig herum, aber schauen Sie mal, früher hieß er Community. Ich werde hier oben rechts tippen. Ich werde Wireframe eingeben. Schauen wir uns ein paar Beispiele an. Du kannst dir also einfach die Ausrüstung von jemand anderem leihen. Also schau dir das an. Klicken Sie einmal darauf. In wird es sehen. Dieser hier ist noch weiter zurückgegangen, da sie den Text dieses Textes herausgenommen haben den Text dieses Textes herausgenommen kannst du auch tun. Sie werden jedoch feststellen, dass sie einfarbig sind Manche Leute verwenden eine Farbe, aber nicht mehr als eine. Wählen Sie eine harmlose Farbe oder verwenden Sie einfach Schwarzweiß und Grauversionen und wählen Sie eine sehr anstößige Schriftart Wir suchen hier nach langweiligem Zeug, denn was wir nicht tun wollen, schauen wir uns auch dieses gute Okay? Sagen wir mal, es ist viel vollständiger. Es ist ein bisschen schicker Auch hier gibt es keine wirklichen Regeln. Sie können eine auswählen , die etwas mehr Designgeschmack hat . Was Sie vermeiden möchten, ist Gespräche mit Ihren Kunden und Stakeholdern darüber zu führen, dass das nicht Alfon ist Oh, das ist das falsche Bild. Oh, das sagen wir nicht. Viele mehr in unserer Überschrift. Was Sie hier machen, ist nur das Testen der Funktion. Wenn ich auf diese Schaltfläche klicke, geht es hierher und dann geht das hier weiter, baue ich die richtigen Seiten? Ja. Fantastisch. Dann können wir zu High Fidelity wechseln. Halte es langweilig, mach es funktionstüchtig. Wir werden uns später mit der Verwendung von Vorlagen anderer Leute befassen. Aber wenn Sie hier reingestolpert sind, denken Sie an Home, Vorlagen und Tools Ich habe hier oben eine Suche durchgeführt und du kannst sie öffnen. Lass uns das hier öffnen. Und da steht nur „Öffnen“ und „Abb.“ Das Coole daran ist, dass ich jetzt diese Datei habe. Es ist in einem anderen Tab geöffnet, ich kann hier zurück nach Hause gehen. Aber wenn ich zu den letzten gehe, ist es jetzt nur meine Datei. Figma ist eine großartige Community, in Menschen ihre Dateien teilen und man sie sich ausleihen, sich aneignen und stehlen kann aneignen und stehlen Natürlich wollen wir es nicht einfach duplizieren und als unser eigenes ausgeben, aber wenn dir das Styling einiger Vorlagen von Okay, gefällt, kannst du sie aber wenn dir das Styling einiger Vorlagen von Okay, gefällt, durchgehen und anfangen, sie dir zu schnappen. Sie sind alle auswählbar Sie können anfangen, mit ihnen zu arbeiten. Aber das ist ein kleiner Sprung in der Klasse. Ich werde diesen Tab schließen. Ich gehe zurück zu den Vorlagen und habe den Drahtrahmen von hier gelöscht , nur um Ihnen High-Fidelity zu zeigen. So schick ist es nicht. Es sind einfach wirklich gemachte Websites. Diese hier könnte ich öffnen und anfangen zu arbeiten. Dieser hier sieht aus wie für eine Anwaltskanzlei. Sie haben viel harte Arbeit geleistet. Vielleicht mache ich auch einen Job für einen Buchhalter oder einen Anwalt Das gefällt mir. Ich kann damit anfangen. Und fange an, es von meinen eigenen Schriften, meinen eigenen Bildern abzuändern , aber ich mag die Struktur. Das ist High-Fidelity, die Wireframing-Phase wird übersprungen Schlecht. In Ordnung. Das war's. Lass uns in den Kurs einsteigen und anfangen, Sachen zu machen. Das ist alles. Das ist Wire-Framing versus High-Fidelity-Infigma Lass uns zum nächsten Kurs übergehen. Fangen Sie an, Sachen zu machen, Dan. 8. Erstellen unserer Designdatei und Einführung von Rahmen in Figma: Dort. In diesem Video werden wir unsere allererste Designdatei erstellen und dann beginnen wir , Seiten hinzuzufügen , die Frames genannt werden. Wir werden einige grundlegende Navigationselemente durchführen und — ganz aufregend — vier weiße Felder erstellen Kannst du sie auf dem Bildschirm sehen? Wie dem auch sei, das wird unser Handy-Layout für unser Projekt sein. Lass uns reinspringen. In Ordnung, also habe ich Figma geöffnet. Ich habe hier ein neues Exemplar. Was wir also tun wollen, ist, dass sich dieser Bildschirm ziemlich stark ändert. Jedes Mal, wenn ich einen Kurs mache, ist dieser Bildschirm anders. Im Grunde das Gleiche. Was Sie suchen, ist diese kleine Home-Ikone. Sie verschieben das auch ein wenig, aber es sollte sich in der oberen linken Ecke befinden. Dann wollen wir eine sogenannte Designdatei erstellen . Denken Sie daran, dass es in diesem Kurs um Figma-Design geht. Beim ersten Bild hier ist meine Maus in Zeitlupe Ordnung, warte dort. In Ordnung, meine Maus ist zurück. Also gibt es einen Design-Button. Darauf kannst du klicken. Aber in Figma gibt es ungefähr zehn Möglichkeiten, überall hinzukommen. Ich werde versuchen, Ihnen den beständigen besten Weg oder den besten Weg für unser Niveau Falls du einen anderen Weg entdeckst. Gute Arbeit. Wenn dir das besser gefällt, mach es so. Sie können zum Beispiel auf die Design-Datei klicken, Sie können auf diese Plus-Schaltfläche dann auf die Design-Datei klicken. Sie können zu Reese gehen und wissen, was es entworfen hat, und auf Plus klicken, um eine Designdatei zu erhalten Es gibt viele Möglichkeiten, an eine Designdatei zu gelangen. Ordnung, also lass uns eine erstellen. Bam Im Grunde öffnet es sich hier auf einer neuen Registerkarte, siehe Startseite der unbenannten Datei, die wir geöffnet haben, Startseite unbenannte Datei die wir geöffnet haben, Startseite unbenannte Sie können mit Vorlagen arbeiten , um loszulegen. Das werden wir nicht. Du kannst über ihnen schweben und es zeigt sie dir einfach. Das fängt gerade erst an. Wir werden später Vorlagen verwenden , wenn wir besser werden, aber wir müssen bei Null anfangen. Lassen Sie uns das alles schließen und wir bekommen dieses langweilige Ding. Alles klar, lass uns eine Seite erstellen. Du machst es mit diesem Button unten hier unten. Es heißt Frames. Frames sind wie Seiten oder höher aus Adobe Land, klicken Sie auf dieses kleine Symbol hier unten, klicken Sie und zeichnen Sie etwas heraus. Sie haben jetzt eine Seite. kleine Cursor verwendet standardmäßig das Auswahlwerkzeug, nachdem Sie ihn gezeichnet haben Wenn Sie also eine weitere Seite möchten, kehren Sie zum Rahmenwerkzeug zurück und zeichnen eine weitere Geht zurück zum Auswahlwerkzeug, das ist eigentlich sehr praktisch Jetzt wollen wir eine bestimmte Größe, weil wir unsere Telefongröße wollen , für die wir unser Modell erstellen werden Was wir tun können, ist diese zu löschen indem wir einfach auf den Namen oben Sie sehen, wenn ich oben auf den Namen klicke, das Ganze hervorhebt und ich auf meiner Tastatur auf Löschen klicken kann . Ich will den Kerl auch loswerden. Ich werde jetzt zu meinem Frame-Tool gehen. Was Sie feststellen werden, ist auf der rechten Seite, Sie müssen darauf achten, dass Design so ist, wie es sein sollte. Dieser Rahmen kann eine Reihe von voreingestellten Größen haben. Entweder Telefon, Tablet, Desktop, lassen Sie uns telefonieren und lassen Sie uns die Größe verwenden, die derzeit am häufigsten verwendet wird. iPhone 16 ist ich weiß es nicht. Sie sind alle ungefähr gleich und es wird nicht erwartet, dass Sie für all die verschiedenen Telefongrößen entwerfen. Möglicherweise wird von Ihnen erwartet, dass Sie Telefon, Tablet und Desktop verwenden, wenn Sie beispielsweise eine Website erstellen. Wenn es sich um eine App handelt, werden Sie natürlich nur eine Größe verwenden, nämlich das Telefon. Wir werden mit dem iPhone 16 beginnen. Wenn Sie sich das in Zukunft ansehen und es ein iPhone 500 gibt, googeln Sie einfach, welche Handygröße am häufigsten verwendet wird. Google wird dir sagen, was der Großteil der Welt hat, oder du kannst herausfinden, was dein Chef, Kunde und Stakeholder als Telefon haben, weil sie es testen werden und du sie am meisten beeindrucken willst, also solltest du ihre Website nutzen Ich werde das iPhone 16 benutzen. Wenn wir es für soziale Medien oder so machen, muss es eine bestimmte Größe haben. Kannst du sehen, ob ich den Namen oben ausgewählt habe, also aus hier auf der rechten Seite, du kannst jede Größe eingeben. Wenn es 500 mal 800 sein muss, kannst du das tun. Das will ich nicht. Also werde ich das Undo auf einem Mac verwenden, es ist Command Z, Control Z auf einem PC, um es wieder auf die normale iPhone-Größe zu bringen. Es befindet sich auch in Undo unter Bearbeiten, oder wenn Sie in der Browserversion sind, haben Sie hier oben eine kleine Leiste, in der Sie auf Bearbeiten und Rückgängig machen als klicken können. Es ist hoch. Ich sagte, wir werden nicht zu viele Abkürzungen machen, aber es gibt einige, die einfach unvermeidlich Der andere Weg ist super lang. Der kurze Weg, die Abkürzung ist, ich möchte die Ansicht vergrößern und verkleinern, Befehlstaste gedrückt halten und Plus auf meiner Tastatur drücken, und Minus kommt wieder heraus. Halten Sie die Befehlstaste auf einem Mac Strg-Taste auf einem PC gedrückt und zoomen Sie hinein und heraus. Du kannst das hier benutzen. Es gibt ein kleines manuelles Drop-down-Menü, aber du wirst verrückt werden, wenn du versuchst , dieses Ding hier zu benutzen. Verkleinern. Geh wieder hoch. Verkleinern. Befehl oder Strg plus und minus. In Ordnung. Also, wir haben dieses Dokument und es heißt iPhone 6-1. Das macht keinen Spaß Wir können es umbenennen, indem wir es einfach hier doppelklicken und diese eine Homepage aufrufen und die Eingabetaste drücken. Die Leute ziehen es vor, hier auf der linken Seite rüber zu gehen. Stellen Sie sicher, dass Sie sich in den Akten befinden, nicht im Besitz. Das machen wir später. Gehen Sie zu Datei und Sie werden hier unten unter Ihren Ebenen sehen Sie können auch hier einfach darauf doppelklicken . Es liegt an dir. Ich will zwei davon. Ich kann zu meinem Frame-Tool zurückkehren und sagen, ich möchte ein anderes iPhone 16 und ich lege es daneben Nennen wir das hier. Was ist das? Keine Funktionen. Sie können dies auch tun indem Sie das Wort Funktionen auswählen und einfach kopieren und einfügen. Befehl C, Befehl V, auf einem Mac, Steuerung C, Steuerung V, auf einem PC, das Standard-Kopieren und Einfügen. Nein, danke. andere Abkürzung, die ich dir zeigen möchte, halte die Leertaste gedrückt, wir sind nur ein Video und machen Sachen und schon machen wir die Abkürzung, Stan, die wirklich wichtigen Du hältst die Leertaste gedrückt und du wirst sehen dein Cursor in eine Hand verwandelt. Du klickst auf Halten und ziehst ihn hin und her Halten Sie die Leertaste gedrückt und klicken Sie auf Ziehen halten. Jetzt haben wir diese drei. In Ordnung. Je nach Job kann von Ihnen erwartet werden, dass Sie sowohl ein Telefon als auch ein Tablet und eine Desktop-Version verwenden. Was Sie tun können, ist, die Ansicht ein wenig zu verkleinern. Befehl minus oder Steuerung minus auf einem PC. Lass uns auf Funktionen klicken, sie kopieren und einfügen. Ich werde einfach auf „ Halten“ klicken und dann kann ich diese Typen herumziehen. Ich kann diese Frames herumziehen und sagen, ich will, dass das hier gemacht wird. Kannst du den Namen ziehen? Wenn Sie die Kanten ziehen, können Sie die Größe Ihres Rahmens quasi manuell ändern . Ich werde das rückgängig machen. Und hier drüben kann ich sagen, dieser Frame hier, ich möchte, dass du nicht nur ein Frame bist, sondern ich möchte, dass du nicht Android 16 bist, ich möchte, dass du bist, was werden wir tun? Ich bete P 11. Okay? Kannst du sehen, dass der Rahmen viel größer geworden ist? Leertaste, gedrückt halten, klicken und ziehen. Wenn es ausgewählt ist, kannst du hier sehen, wie es rotiert. Sie können entscheiden, ob es sich um ein Querformat oder Hochformat handelt. Doppelklicken Sie einfach darauf. Nenn es Homepage. Okay. Nochmals dasselbe, Spiel kopieren und einfügen. Wir können Funktionen hinzufügen. Das habe ich vergessen. Das hier heißt Checkout. Ich muss es kopieren und einfügen. Tauchklick. Dieser wird Bestätigung genannt werden. Das können Sie für Mobilgeräte, für Tablets und auch für den Desktop tun. Schnappen wir uns beide. Ich habe einfach auf beide geklickt und ein Kästchen gezogen und dann kopiert und eingefügt Ich glaube, sie sind übereinander gelandet . haben sie getan. Also hier gehen wir hier runter. Dieser hier wird ein Rahmen sein . Ich möchte, dass er die Desktop-Größe hat. Desktop ist, du kannst sehen, es gibt eine Menge Zeug. Du kannst die Apple Watch machen. Sie können einige Papierformate verwenden. Twitter-Posts, sie sind alle hier drin. Ich suche nach Scroll Scroll Scroll. Ich habe es hinter mir gelassen. Es ist Desktop. Das ist eine sehr verbreitete Desktop-Größe und das, was die meisten Leute für die Gestaltung einer Website verwenden, obwohl es online viele verschiedene Größen gibt . Ich kann das da rüber ziehen. Du verstehst die Idee. Ich tendiere dazu, zuerst etwas zu entwerfen. Wir werden für dieses Wireframe zuerst für Mobilgeräte entwerfen , dann werden wir zuerst für den Desktop entwerfen , wenn wir an unserer Website arbeiten Das ist ein Gespräch, das Sie mit Ihrem Kunden führen sollten. Sie möchten vielleicht beide sehen. Aber sagen wir, bringen Sie Ihren eigenen Laptop.com mit. Meine Seite Wir sind ein Unternehmen, bei dem der Desktop an erster Stelle steht, weil die meisten Leute kommen , um sich die Videos anzusehen und mit Software zu interagieren. Sie sind auf ihrem Computer. Wir entwerfen zuerst dafür und finden dann heraus, wie es ins Handy passt. Viele Websites werden jetzt zuerst für Mobilgeräte verfügbar sein. Wir entwerfen zuerst für Mobilgeräte und danach eine Desktop-Version. Sie können sie gleichzeitig entwerfen. Oft entwerfe ich eine davon, die wichtigste, und berechne dann die anderen Größen dazwischen Ich werde die Ansicht so weit verkleinern , dass ich alles sehen kann. Denken Sie daran, Befehl minus oder Steuerung minus auf einem PC. Ich werde einfach eine Kiste um all diese Leute herumschleppen , weil ich zuerst auf dem Handy arbeiten werde. Ich werde einfach auf Löschen klicken, damit sie weg sind. Wenn du dich verirrst, kannst du manchmal versehentlich hineinzoomen oder du hast dein Scrollrad gedrückt und zoomst, zoomt versehentlich hineinzoomen oder du hast dein Scrollrad gedrückt und zoomst, und zoomt und du denkst, wo zum Teufel bin ich Okay, du könntest diese kleinen Scheuerbalken hier gebrauchen. Hallo. Haltet diese kleinen Kerle hier und versucht, einen Ausweg zu finden. Oft ist es einfacher , einfach hierher zu gehen und zu sagen, kannst du zoomen, bis es passt? Ich passe einfach alles, was du hast, in die Mitte des Bildschirms. Es gibt also einen Namen für unser Dokument. Zum Beispiel werden Sie von einigen Programmen aufgefordert, die Datei zu benennen , sobald Sie sie erstellen. Solche Zahlen. Am Ende haben Sie also 1 Million unbetitelte Dateien. Nein, das ist üblich. Aber wir werden super toll sein und wir werden unsere Datei umbenennen. Also habe ich hier doppelt geklickt, ich werde ihr einen Namen geben Wir werden Scott anrufen, du nennst deinen Namen, okay? Du machst also nicht Scott eCom. Du machst, ich weiß nicht, Sandy oder Jim, was auch immer du für deine Firma heißt Und das ist unsere eCom-Seite, und wir werden zuerst nach V gehen, weil wir keine Höhlenmenschen sind . Sei nicht diese Endgültig. Endgültig. Eins, neu. Du lachst, weil du es tust. Okay? Lass uns gehen. Es spielt keine Rolle, ob es V eins oder A, B, C oder so ist. Wenn wir also alte Dateien aktualisieren müssen, ja, es ist einfacher, sie zu finden. Es gibt eine ausgefallene Art der Versionierung innerhalb von Figma, aber das wird jetzt für uns funktionieren Sie können es auch hier doppelt anklicken. Okay. Und du kannst es schließen, indem du auf Datei schließen gehst oder einfach auf das kleine Kreuz in der Ecke klickst und es ist weg. Du bist wieder zu Hause. Und Sie werden feststellen dass meistens die neuesten Versionen standardmäßig Wenn nicht, gehen Sie zu Recence und Sie werden sehen, dass er dort ist. Schau, wir kommen. Also klicken wir darauf und öffnen es in einem neuen Tab. Lass uns zurück nach Hause gehen. Und wenn Sie viele Dateien haben , die als unbetitelt bezeichnet werden, können Sie sie hier auf einem Mac mit der rechten Maustaste anklicken , wenn Sie keinen Rechtsklick mit der Maus haben, Sie können Strg auf Ihrer Tastatur drücken und klicken PCP, du wirst einen Rechtsklick haben. Ich mache das auch auf meinem Mac. Aber Sie können mit der rechten Maustaste klicken und sie hier umbenennen. Es ist nicht wirklich wichtig, wo du es machst. Und diese Dinge hier, das sind Nervensäge. Ich werde sie einfach auswählen. Go zog einfach ein Kästchen um sie herum und ließ es löschen Okay, das ist so, als würde man sich an Figma-Dateien gewöhnen. Ich finde einfach, dass sie mein Leben chaotisch aussehen lassen. Ich frage mich, habe ich die gemacht? Woher kommen die? Sie können sie hier lassen, oder Sie können sie mit der rechten Maustaste anklicken und in den Papierkorb verschieben. Ja. Schnapp dir auch diese beiden und lösche sie, nur um die Dinge aufzuräumen Ordnung, lassen Sie uns wieder darauf zurückkommen, entweder indem wir darauf doppelklicken oder auf die bereits geöffneten Tabs Und das war's. Wir haben vier weiße Boxen gezeichnet. Gute Arbeit. Wir dachten alle, Figma wäre aufregender Aber wir haben gelernt, was Frames wie Seiten sind, und wir haben herausgefunden, was eine Figma-Designdatei Es ist die Art von Ding , in dem alles untergebracht ist. Ordnung, lass uns gehen und im nächsten Video noch ein paar Sachen machen . Wir sehen uns dort 9. Grundlagen von Schriftarten und Schriftarten in Figma: Hallo zusammen. In diesem Video werden wir einige der Grundlagen der Schrift behandeln. Wir werden nicht jede einzelne Einstellung im Textmenü durchgehen , sondern nur die Grundlagen, um loszulegen. Sie wissen, wie man Schriften und Schriftgrößen ändert, oder? Ich zeige dir nur die Macken von Figma. In Ordnung, gehen wir und fügen unserer Seite etwas Text hinzu. Ordnung, also starten wir die Leertaste, um quasi über den Befehl zu fahren, oder Strg-Plus , um die Ansicht zu vergrößern Nochmals Leertaste. Ich hole mir das Textwerkzeug Es ist hier unten, klicken Sie darauf. Sie werden feststellen, dass die wirklich gebräuchlichen Tools, wenn Sie mit der Maus darüber fahren, wenn Sie sehen, dass neben ihnen ein C steht , bedeutet, dass ich zum Kommentarwerkzeug springen kann, indem ich C überschreibe, T für das Textwerkzeug, F für das Rahmenwerkzeug Die wirklich gebräuchlichen Werkzeuge zeigen einfach über ihnen und Sie werden sehen, dass es Ihnen die Also wollen wir T für das Textwerkzeug. Es gibt zwei Arten von Typboxen. Es gibt eine, bei der Sie einmal klicken und mit der Eingabe beginnen. Und dieser wird für immer und ewig so weitergehen. Okay? Wenn Sie einmal klicken, erhalten Sie ein Textfeld, das sich gut für Überschriften oder Schaltflächen eignet, nur für kleine Textteile, und das Textfeld läuft einfach weiter Ist das hier, heißt es Auto mit Box. Ich kannte den Namen. Die andere Art von Textfeld ist , dass ich im Hintergrund klicke und dann zu meiner T-Taste gehe. Wenn der Cursor hier blinkt und Sie die Tastenkombination T drücken, erhalten Sie natürlich Cursor hier blinkt und Sie nur Ts Okay, also werde ich im Hintergrund aus klicken, dann meine T-Taste drücken und auf Halten klicken und ein Feld herausziehen Dies wird als Feld mit fester Größe bezeichnet. Ich möchte, dass es genau diese Breite hat. Der Unterschied ist, wenn ich anfange zu tippen, man sieht, dass es am Ende der Zeile unterbrochen wird. Besser für den Fließtext, alles, was einen Zeilenumbruch benötigt. Sie können sie anschließend konvertieren. Ich kann das hier anklicken und sagen, du hast jetzt eine feste Größe, und ich kann es verstehen. Ich werde im Hintergrund abklicken. Lass uns den ganzen Weg gehen und nochmal klicken. Wenn ich einmal darauf klicke, kann ich die Kante hier erfassen, und jetzt hat sie eine feste Breite. Das Gleiche gilt für diesen hier. Ich habe den Text nicht ausgewählt. Was funktioniert das überhaupt? Das tut es. Es ist nicht wirklich wichtig, wie Sie es ausgewählt haben. Ich möchte, dass dies eine automatische Breite ist, eher wie eine Überschrift oder eine Schaltfläche oder ein kleiner Textteil. Sie können sie anschließend konvertieren. Wir werden uns später im Kurs mit der automatischen Höhe befassen. Das sind unsere beiden Textfelder. Ich werde sie rückgängig machen, um sie loszuwerden. Also auf einem Max, Command Z auf einem PC, es ist Control Z oder auf meiner Desktop-Version ist es Bearbeiten rückgängig machen. Wenn Sie die Browserversion verwenden, haben Sie eine weitere Bearbeitung. Es wird gleich darunter sein. Du kannst auf Bearbeiten gehen, rückgängig machen. Das Gleiche. Also werde ich ein paar Mal rückgängig machen dt, dt, so viele rückgängig machen. Lass uns zum Tiki gehen und unser Logo für die Marke einbauen. Wenn Sie nun ein Logo für das Unternehmen haben, für das Sie arbeiten, und es existiert, können Sie das Logo verwenden Aber weil wir quasi gleichzeitig eine Marke für diese App entwickeln, eine Marke für diese App entwickeln, werden wir nur einfache Texte verwenden. Wir werden uns noch nicht mit Logodesign befassen. Also wird meins heißen. Ich werde Caps benutzen. Ich gehe Scott oder Caps. Okay, wir werden es klar halten, um es zu verschieben. Ich werde im Hintergrund abklicken. Benutze mein Auswahlwerkzeug, ich wollte es hierher verschieben. Als Nächstes wollen wir unsere Marketingbotschaft hier haben. Ich nehme ein Textwerkzeug, klicke und ziehe es heraus und denke daran, dass wir durch Klicken und Ziehen ein Feld mit fester Breite erhalten Wir werden einfach eine Marketingnachricht eingeben. Die Marketingbotschaft steht hier. Ich werde dich nicht damit langweilen, den ganzen Schriftkram durchzugehen. Du weißt, wie man Schriften ändert. Aber der Trick, lass uns einfach die Schriftgröße ändern , etwas Schönes und Großes. Ich möchte es so einrichten, dass es in zwei Zeilen aufgeteilt wird, damit wir uns die automatische Höhe ansehen können. Standardmäßig versucht es, es automatisch zu tun. Sie können etwas eingeben. Es sind 24, es ist wirklich üblich, weitere acht oder weitere vier hinzuzufügen . Lass uns 28 gehen. Genial, Dan. Lass uns gehen. Was ist 832. Was Sie tun können, ist diese kleinen Symbole hier zu sehen Am Ende mache ich das in diesem Kurs ziemlich oft. Ich zeige Ihnen jetzt, ob Sie Mauszeiger über dieses Symbol bewegen, dieses Symbol Sie können auf Halten klicken und es ziehen. Wenn du es dir eher mit ausgestreckter Zunge ansiehst , ist das die richtige Größe? Vielleicht etwas Abstand zwischen den Buchstaben. Anstatt zu versuchen, es einzutippen und Mathekram zu machen. Sie können auf eines dieser Symbole ziehen. Da hast du's. Zurück zu 32. Schriften angeht, so verbringen Sie bei der Erstellung eines Wireframes, wenn Sie High-Fidelity verwenden, natürlich viel Zeit damit wenn Sie High-Fidelity verwenden, , Schriften auszuwählen Wenn Sie ein Drahtmodell erstellen, ist es am besten, es als superlangweilige Schrift zu belassen. Etwas, das niemanden beleidigen wird , denn was Sie tun möchten, ist, wenn Sie einen Test mit jemandem durchführen, vor allem mit Stakeholdern, vor allem mit Stakeholdern wenn sie vielleicht eine Meinung zu der Schrift haben , und das ist nicht das, was Sie für einen ersten Test tun Sie erstellen ein Modell, um die Mechanik dieses Dings zu testen . Können sie auf die Knöpfe klicken? Kommen sie dahin, wo sie hin müssen? Nun, du willst nicht zurückkommen und sagen: Hey, die Schrift gefällt mir nicht. Okay? Also bleib bei Schriften , die einfache Dinge sind , die, ich weiß nicht, Charaktere haben , die keinen Charakter haben, wie Roboto Tut mir leid, Roboto. Oder die Standardversion, die kommt Weißt du, der Inter ist der Standard Figma. Also benutzen die Leute das oft. Roboto ist gut Sauce schickt, welche Schrift du willst, solange es ist, ich weiß es nicht Langweilige Schriften. Außerdem mag ich es, wie Roboto, weil es langweilig ist Tut mir leid, Roboto. Aber es hat all diese anderen Gewichte hier. Ich habe eine Fettschrift und eine Kursivschrift und alle möglichen anderen guten Sachen dazu Also halte deine Schriften einfach. Die andere Sache ist, wenn Sie Schriften auswählen, ist es am besten, dies auf dem eigentlichen Gerät zu tun. Ich zeige Ihnen später, wie Sie eine Vorschau auf Ihrem Telefon anzeigen können. Wenn ich an meinem Computer arbeite, spiele ich ewig mit dem Buchstabenabstand, der Nachverfolgung und dem Zeilenabstand herum Buchstabenabstand, der Nachverfolgung und . Es ist einfach zu groß. Was Sie also einfach als Hack tun können, ist, herauszuzoomen, bis Ihr Telefon das Gefühl hat, die richtige Größe zu haben. Wortes nehme ich jetzt mein Handy in die Hand und Es ist ein bisschen klein, 100 sind zu groß, also vielleicht hier oben kann ich es eintippen. Vielleicht ist 75 gut. Handy hochhalten, immer noch zu groß. Kannst du herausfinden, was es auf deinem Handy ist , damit du siehst, wie winzig das jetzt ist? Du sagst, okay, das ist zu klein. Aber wenn ich mein Handy hochhalte, hat es die richtige Größe für das Telefon. Ordnung, also werde ich etwas weiter gehen . Der andere Trick mit irgendwelchen Feldern hier drin ist, ich habe 12. Diese Zahlen sind ziemlich gut, um zwischen Dingen zu springen, aber was Sie tun können, ist einfach 12 anzuklicken und einfach den Aufwärtspfeil zu benutzen. C steigt einfach in Schritten von eins. Wenn Sie die Umschalttaste gedrückt halten und nach oben drücken, erfolgt dies in Schritten von zehn. Wir sind also bei 38, es steigt auf 48. Aber wenn ich nur meinen Ra-Key benutze, muss er einfach da drin geklickt werden Das funktioniert. Rauf und runter. Dann finde ich, das ist ungefähr da, sieht gut aus. Dieser hier muss jetzt größer sein, hier reinklicken , Pop, Pop-up Pol Shift, los geht's. Sie können sehen, dass es ein bisschen komisch wird, weil ich eine feste Zeilenhöhe habe, 32 , und meine Schriftgröße 53 ist , und meine Schriftgröße 53 ist. Wenn Sie zur automatischen Zeilenhöhe zurückkehren müssen, löschen Sie einfach den Inhalt und es wird wieder automatisch angezeigt. Sie können hier sehen, dass es aus dem unteren Teil meines Textfeldes herausquetscht dem unteren Teil meines Textfeldes herausquetscht Es macht hier keinen wirklichen Unterschied, aber ich kann es dort etwas größer ziehen Der andere Grund ist, dass ich zur Ausrichtung übergehe. Ich werde nicht all das durchmachen. Du weißt, wie man Text benutzt. Was ich erwähnen möchte , ist , dass Sie oft, wenn Sie es mit, sagen wir, zu tun haben, eher sehen, wie Ihre Marketingbotschaft hier ankommt und nicht mit der eigentlichen Marketingbotschaft. Vor allem, wenn Sie sich in einer wirklich neuen Phase der App befinden, füge ich gerne wirklich generische Dinge hinzu, wie diese generischen langweiligen Schriften mit nicht anstößigen Titeln. Sie wissen, wo die Marketingbotschaft hingehört, aber wenn ich anfange, ich weiß nicht, meine eigene Kreativität zu nutzen, um hier in aber wenn ich anfange, ich weiß nicht, meine eigene Kreativität zu nutzen dieser frühen Testphase Marketingbotschaften hinzuzufügen , wird jemand zurückkommen und sagen: Hey, so sitzen wir nicht da. Das muss ans Copywriting gehen. Nein, nein, nein, klicken Sie einfach auf den Button. Ich möchte sehen, ob es funktioniert. Oft entferne ich alles, was beleidigend oder falsches Feedback hervorruft Die Marketingbotschaft, die hier steht, ist in Ordnung. Ich brauche ein paar Kleinigkeiten, bevor wir weitermachen können und andere Dinge , auf die wir hinweisen müssen. Wenn ich das mit meinem Zeiger herumziehe. Wenn ich auf Halten klicke und herumziehe, siehst du dann, wie es einfach herumspringt? Es ist ziemlich praktisch. Sie können den Link in der Mitte meiner Seite sehen . Ich kann es nach unten ziehen. Das ist die Mitte der Seite. Oh, nett. Ich werde das da draufkleben. Ich werde kopieren und einfügen. Das ist eine weitere interessante Sache an Figma und Zoom In Kopieren, Einfügen und du denkst, Was ist passiert? Eigentlich wurde es oben drauf geklebt. Standardmäßig klebt es alles, was Sie kopiert haben, direkt darüber Es sieht also so aus, als ob du es nicht kopiert hast. Aber jetzt weißt du das, das ist in Ordnung. Okay, ich habe es kopiert und eingefügt. Hier werden meine Produktfotos hingehen. Produktaufnahme. Ich werde das kleinere machen, weil es eher ein Ich weiß nicht warum. Es wird kleiner sein. Die andere Sache, die Sie tun müssen, ist , wenn Sie kopieren und einfügen möchten, ich oft die Optionstaste auf meinem Okon auf einem PC gedrückt halte . Ich habe es ausgewählt Ich verwende mein Move-Tool, nenne es weiterhin das Pointer-Tool. Das Verschiebe-Tool, halten Sie die Optionstaste auf einem OK auf einem PC gedrückt. Schau dir die kleinen Doppelpfeile an, die erscheinen. Die Doppelpfeile bedeuten, wenn ich sie ziehe. Ich habe die ganze Zeit die Maus gedrückt. Ich habe diese Option oder Olkey ist ausgefallen. Ich mache ein Duplikat. Hier gilt das Gleiche. Ich will noch einen. Da haben wir's. Da sind zwei davon. Ich kann beide verwenden, und alles, was ich tun werde , ist sie wahrscheinlich fett zu machen Und sie ein bisschen größer machen. Nun, die Typografie hier hat die Grundlagen. Wenn du sagst, Oh, wo ist der Rest? Da ist der Rest. Es gibt hier ein paar Optionen, gib Einstellungen ein, du bekommst all die zusätzlichen Dinge. In diesem Kurs werden wir verschiedene Teile davon behandeln. Aber hier sind die anderen Dinge, nach denen Sie vielleicht gesucht haben. Ich werde dafür sorgen, dass es duftet. Ich werde sicherstellen, dass alles in Großbuchstaben mit Großbuchstaben geschrieben ist. Da ist es da Ich doppelklicke auf diesen und sage, dieser ist jetzt mein B, und dieser wird mein Learn More sein. Erfahre mehr. In Ordnung, ich glaube, das ist es. Schau, was wir gemacht haben. Wir haben Text auf die Seite geschrieben. In Ordnung, das wird es sein. Langweiliger alter Text. Lass uns im nächsten Video langweilige alte Boxen machen. 10. Rechtecke, Kreise, Schaltflächen und abgerundete Ecken in Figma: Zurück, wir haben dem Video Rechtecke hinzugefügt. Ich zeige dir, wie man Rechtecke und Kreise macht. Wir machen abgerundete Ecken. Es ist sehr aufregend. Ich verspreche es. Lass uns reinspringen. Okay, fangen wir an, indem wir uns das Rechteckwerkzeug schnappen. Hier unten ist es dieses Ding. Es ist ein Rechteck. Es gibt noch eine Menge anderer Sachen. Da ist ein kleiner Pfeil daneben. Okay, es gibt noch eine Menge anderer nützlicher Zeichenwerkzeuge, aber wir werden mit dem Rechteckwerkzeug beginnen. Und ich werde eine Art Platzhalterbild haben wollen Platzhalterbild haben Es ist ein großes Rechteck, wie du es am Anfang gesehen hast. Also klicke ich auf „Halten“ und „ Ziehen“ und es ist grau. Whoo. Aber es betraf auch meinen Text. Es ist immer noch da. Schau, hallo, du bist da drunter. Schauen wir uns also etwas an, das sich Ebenen nennt. Sie wissen, was Schichten sind. Wie funktionieren sie in Figma Es gibt ein paar Möglichkeiten, dorthin zu gelangen. Also werde ich dir ein paar Möglichkeiten zeigen, nur um dir die verschiedenen Möglichkeiten in Figma zu zeigen, nicht um dich zu verwirren, aber es ist gut, die wichtigsten Arten zu kennen Und du wirst diejenige finden, die auf deinem Level am besten zu dir passt Es ist einfach, mit der rechten Maustaste darauf zu klicken und sagen, dass Sie die Ebene nicht auswählen sollen. Ich möchte es zurückschicken. Ich würde sagen, an die Rückseite der Ebenen schicken , und es ist jetzt da hinten. Ich werde das rückgängig machen. Der andere Weg ist hier in diesem linken Bereich. Du solltest die Datei sehen. Du bist vielleicht auf Seite eins und wir sollten Ebenen sehen. Das Einzige, was Sie sonst noch haben könnten, sind Vermögenswerte. Gehen Sie zur Datei Ihrer Ebenen Das ist eine Seite namens Bestätigung, ich habe Checkout genannt, eine heißt Funktionen, und wir sind auf dieser Startseite. Darin befinden sich alle Details und Sie können sehen, dass es eine Ebenenreihenfolge handelt, wie bei herkömmlicher Designsoftware. Das Rechteck befindet sich oben, wo ein Produkt abgebildet ist. Ich muss auf Halten klicken und das Rechteck ziehen, um zu sehen, dass es dort Linien gibt. Versuch es mal. Mach es rückgängig, wenn es furchtbar schief geht. Sie könnten das Produktfoto ziehen, auf Halten halten klicken und es über das Rechteck ziehen Das funktioniert auch. Ich möchte Ihnen zeigen, dass ich auf der Desktop-Version bin, also habe ich hier oben das Objekt File Edit View. Wenn du die Browserversion verwendest, würdest du sagen, die habe ich nicht. Deiner versteckt sich einfach hier drin. Datei, Objekte bearbeiten. S? Sie sind dort genau dasselbe Objekt, dort Objekt. Es spielt keine Rolle. In diesem Kurs gehe ich oft nach oben, um Sachen zu finden, und du sagst, ich habe sie nicht. Es ist knapp unter diesem F hier für Figma. Sie werden sehen, ich kann zu Bearbeiten gehen, zu Objekt gehen und ich kann nach unten gehen um es nach vorne zu bringen, nach vorne zu bringen Ich kann das eigentlich nicht, weil es abgestuft ist, es liegt daran, dass ich es nicht ausgewählt habe Ich werde es rückgängig machen, also ist es ganz oben. Also werde ich auf das Rechteck klicken. Dann kann ich zu Bearbeiten gehen. Ich war unter Objekt. Sie können Hinterholz schicken, das heißt, gehen Sie einfach eine Ebene runter, damit es hinter der Marketingbotschaft Ich möchte ganz hinten nach hinten schicken. Auch hier ist es genau an der gleichen Stelle, ich widerspreche und es wird zurück geschickt. Okay? Du sagtest auch, dass es eine Abkürzung gibt. So viele Möglichkeiten. Objekt, ich benutze dieses ziemlich oft. Es kommt darauf an. Wenn du bereit für Abkürzungen bist, diese hier, ist die eckige Klammer einfach auf deiner Tastatur. Du siehst es normalerweise neben deinem Peki und bringst es nach vorne Ich kann eckige Klammern vorwärts , eckige Klammern rückwärts, vorwärts, rückwärts, vorwärts, rückwärts Es spielt keine Rolle , welches Sie verwenden. Aber in diesem Video möchte ich dir all die verschiedenen Möglichkeiten zeigen, weil ich dir das Gefühl geben möchte , dass es mehrere Möglichkeiten gibt und es egal ist, für welchen Weg du dich letztendlich entscheidest. Aber das ist es. Ich werde ab jetzt nur noch einen einfachen Weg gehen. In Ordnung, lassen Sie uns hier nach unten zoomen, Leertaste drücken, klicken und ziehen, Command-Plus zum Vergrößern. Control Plus auf einem PC. Nehmen wir unseren Bogen für das Rechteckwerkzeug, ziehen ein Feld heraus und ich verwende meine eckigen Klammern, weil wir mit unseren Abkürzungen schick sind, aber verwenden, wie Sie möchten. Ich habe einen B-Now-Knopf. Nun, ein weiterer Trick in Figma ist, wenn Sie zwei Dinge auswählen möchten, kann ich auf diese beiden klicken und ziehen oder ich kann auf eines klicken, Umschalttaste auf meiner Tastatur gedrückt halten und auf das andere klicken, und schon sind beide ausgewählt Jetzt möchte ich ein weiteres Rechteck. Anstatt es zu zeichnen, klicke ich einmal darauf und verwende Copy-Paste. Was am Ende dazu führt, dass es übertrieben wird, aber keine Sorge, wir wissen, und das wird es sein. Ich habe darüber gesprochen, Design aus diesem Wireframe herauszuhalten Design aus diesem Wireframe herauszuhalten Wi-Frames sollen einfach generisch sein. Aber auf manche Dinge wie abgerundete Ecken kann ich mich nicht vorbereiten. Oh, ich mag abgerundete Ecken wirklich. Wenn du hier auf dieses Rechteck klickst und weit genug hineinzoomst, siehst du die kleinen Punkte in der Ecke. Sie können auf Halten klicken und diese ziehen. Wenn Sie sie nicht sehen können, wenn ich die Ansicht verkleinere und sie ausgewählt habe und Cursor darüber blinkt Kannst du sehen, dass es nicht da ist? Es zeigt dich nur auf bestimmten Ansichtsebenen. Man muss ziemlich nah dran sein, um sie zu sehen. Wenn Sie sie manuell ausführen möchten, haben Sie es ausgewählt. Hier drüben, unter Aussehen, hast du diesen Eckradius, und ich kann acht eingeben. Ich kann ihn entweder ziehen und Sie können sehen, dass er Ihnen sagt , dass das acht ist, es liegt an Ihnen. Halten Sie die Leertaste gedrückt und gehen Sie nach oben. Klicken Sie auch auf diesen, und ich werde es konsistent machen , indem ich auch acht eintippe. Sie könnten den Eckenradius festlegen, Sie möchten nicht, dass sie acht in allen Ecken haben, sondern dass eine davon unterschiedlich ist. Sehen Sie sich diese kleine Option hier an, erweitert die einzelnen Ecken. Im Moment sind sie alle bei acht, das kannst du unten rechts entscheiden. Sie sehen, es ist oben links, oben rechts. Du hast es unten rechts, ich kann daraus 130 machen. Das heißt nur, wenn ich rauszoome, ist einer von ihnen anders. Das kannst du auch manuell machen. Sie können die Optionstaste auf einer Mac-Taste auf einem PC gedrückt halten und Sie können sie auch einzeln ausführen. Kannst du das sehen? Nur einer von ihnen bewegt sich. Ordnung, ich gehe zurück zu konsistenten, gemischten Ecken. Ich werde Mixed loswerden und es einfach löschen und acht überschreiben und Enter drücken. Jetzt sind sie alle gleich. In Ordnung, wir zeichnen Rechtecke mit abgerundeten Ecken. Lass uns einen Kreis zeichnen. Hier unten ist unser Kreis. War Ellipse, was eine Abkürzung für O ist. Lisa sieht aus wie ein Kreis Ich drücke die O-Taste auf meiner Tastatur und ziehe einen Kreis heraus Eine andere Sache, wenn du entweder Kreise oder Quadrate oder etwas anderes zeichnest , wenn du willst, dass es kein Oval ist, okay, okay. Hier hältst du gedrückt. Welcher Schlüssel ist das? Du weißt, welcher Schlüssel es ist. Umschalten. Wenn Sie beim Ziehen die Umschalttaste gedrückt halten, werden Höhe und Breite gesperrt Also etwas über diese Größe. Sie können die Größen hier sehen. Meins ist 32 mal 32, ungefähr da. Es ist nicht wirklich wichtig. Ich werde es vergrößern, Leertaste drücken und das Textwerkzeug nehmen, weil ich die Plus-Schaltfläche haben möchte. Also nehme ich das Tiki, ich klicke einmal und tippe einfach ein Plus auf meiner Tastatur Schriftart, ich werde zwischendurch fett formatiert sein, das ist in Ordnung. Geh zurück zu meinem Auswahlwerkzeug. Wenn du das jetzt verschieben willst, wirst du sagen, A, ich möchte es über diese Schaltfläche setzen. Ja. Manchmal musst du einfach im Hintergrund abklicken und es dann ziehen. die Schriftgröße angeht, werden wir unseren süßen Shorku verwenden , klicken Sie hier rein und den Pfeil nach oben F finde die richtige Größe. Es springt herum Es versucht, sich an Pixel zu binden. Das ist okay. Also ungefähr die richtige Größe. Denken Sie noch einmal daran, wir sind bei 400%. 60 haben irgendwie für mich gearbeitet. Jetzt denke ich mir, okay, das sieht gut aus. Der andere Trick, den ich Ihnen zeigen möchte, ist, dass es ziemlich knifflig sein kann, wenn Sie versuchen, etwas in eine Reihe zu es ziemlich knifflig sein kann Ich werde es dir später genauer zeigen. Aber wenn ich es herumgezerrt habe, versucht es zu zerbrechen. Kannst du sehen, es ist wie, Oh, ich möchte hier sein. Meinst du hier? Du meinst, nein, nein, nein, genau mittendrin . Also will ich es herumschubsen Also, Sie haben es ausgewählt, ich klicke im Hintergrund ab, klicke sofort und ich kann meine Pfeiltaste, die Tasten, auf meiner Tastatur benutzen , um es einfach zu bewegen, um es an die gewünschte Stelle zu bringen Das ist gut. Oh, was macht dieser Knopf ? Du hast nicht gefragt. Wenn du nah genug an deinen Kreis herangezoomt hast, siehst du diesen Punkt und du fragst dich, was macht das? Bist du bereit? Nein, nein, nein, nein, nein. Das ist absolut nicht nützlich, aber es macht mich glücklich. Wie dem auch sei, ich stelle mir Balkendiagramme und Kreisdiagramme vor und. Ordnung. Lass uns rauszoomen. Ich werde die Abkürzung verwenden, um zu gehen. Ich werde versuchen , es Ihnen Laufe dieses Kurses in den Sinn zu Auf einem PC ist es Command Zero oder Control Zero. Nein, es ist Verschiebung auf Null. Nein, es ist nichts davon. Befehl Null? Oh, verdammt. Mein Gehirn ist weg. Je nach Größe zoomen. Das will ich. Okay? Also der, den ich dir gerade gezeigt habe, Befehl Null ist, auf 100% zu gehen. Das ist in Ordnung. Das hier gefällt mir sehr gut. Passen Sie es an. Okay, und Schicht eins. Das weiß ich. Okay, halten Sie die Umschalttaste sowohl auf dem Mac als auch auf dem PC gedrückt und drücken Sie die eine Taste, und schon passt alles in Ihr Fenster. Da haben wir's. Wir machen ein paar Rechtecke. Schau uns an. Gut, ich wähle beide aus und verschiebe das einfach hierher. Wir werden das etwas später verwenden. Das wird hier in die Mitte gehen. Und dann kommen wir zum nächsten Video. Lass uns das machen. 11. Wie man Farbe in Figma verwendet: Hallo, da. In diesem Video gehen wir von hier zu hier über. Grau bis zu dieser Farbe. Blaugrün, Grün, Blau. Wie dem auch sei, wir werden uns die Grundlagen der Farbe in Figma ansehen. Überspringen Sie nicht. Hier sind ein paar nützliche, saftige Sachen drin und am Ende noch eine kleine Abkürzung Ordnung. Lass uns reinspringen. In Ordnung, Farbe ist einfach. Lass uns auf unser graues Rechteck klicken. Es ist die Standardfarbe für Figma und hier unter Phil kannst du auf dieses kleine Farbquadrat hier klicken und du erhältst diesen Farbwähler Möglicherweise haben Sie den Farbwähler schon einmal verwendet. Wenn Sie keinen kleinen Punkt haben ist hier die Farbe , die Sie ausgewählt haben Sie können darauf klicken und ziehen, um eine beliebige Farbe auszuwählen , solange sie rot ist. Ich werde es hier nach oben verschieben und Sie können den Farbtonregler nehmen und ihn einfach mitziehen. Kannst du sehen , was mit der Farbe passiert? Angenommen, Sie möchten, dass es blau ist, Sie können entscheiden, ob es eher blau sein soll und ich möchte, dass es ein dunkleres Blau ist, oder ich möchte, dass es ein weniger gesättigtes Blau ist. Die Sättigung entspricht der Helligkeit von links nach rechts, von oben und unten. Sie können hier etwas auswählen, das für Sie funktioniert. Schwarz und Weiß, es ist komisch. Du kannst sie hier unten verwenden. Dies sind einige Standardfarben. Oder die Leute neigen dazu , auf Halten zu klicken und zu ziehen, ziehen, ziehen, ziehen, ziehen, ziehen, ziehen, ziehen, ziehen, an der Ecke vorbeiziehen. Ich habe meine Maus immer noch gedrückt. Wenn du es über die Ecke ziehst , wird es komplett weiß und genauso wie das Schwarz, wenn du es so nach unten ziehst, wird es ganz schwarz gezogen wird es ganz schwarz Es liegt an dir. Es ist ein riesiger Slider. Das ist die Transparenzfolie. Ich werde diese Farbe hier verpacken. Ich werde die Transparenz nach unten ziehen, damit sie etwas durchsichtiger ist. kann man jetzt nicht wirklich erkennen, weil es das Weiß im Hintergrund durchschaut. Lassen Sie uns es über all das stellen und es im Ebenenbedienfeld nach vorne verschieben , so oder so, wie Sie wollen. Ich werde die eckige Klammer unten neben dem Piki verwenden. Kannst du sehen, dass es Zuckerguss ist und wenn du das durchschaust? Manchmal muss man das nicht offen haben . Ich kann das auswählen lassen. Wenn ich das Transparenz-Backup haben möchte, können Sie sehen, dass es bei 47% liegt? Da habe ich es in das letzte Fenster gezogen. Ich kann 100 eingeben und hier eingeben. Ich setze es mit der ersten eckigen Klammer wieder nach hinten und setze es wieder an die Stelle, an der es sein sollte . Ich werde eine Farbe wählen. Es ist sehr üblich, hier Blau oder Hellblau oben zu verwenden. Ich werde ohne triftigen Grund Blaugrün verwenden. Der Trick dabei ist, nur eine Farbe zu verwenden. Versuche, nicht zu weit Auswahl von Farben für alles zu gehen, besonders in diesem Iframe Denken Sie daran, dass es hier darum geht, die Mechanik zu testen, nicht darum, es wirklich zu stylen Aber du willst okay, also wähle eine Farbe, die du magst. Nun, die Standardeinstellung hier unten ist diese Hexadezimalzahl, es ist also ein sechsstelliger Code , der die Farbe im Internet darstellt Sie können es hier unten auf RGB ändern. Wenn Sie ein Dokument mit Spezifikationen für das Unternehmenshandbuch haben, müssen Sie die offizielle Firmenfarbe verwenden Sie können sie hier eingeben Es ist RGBA, das ist Rot, Grün, Blau, und Alpha steht Du kannst den Slider entweder ziehen oder es hier nach unten machen. Es spielt keine Rolle. Andere, die nützlich sind, sind CSS. Wenn Sie eher ein Entwickler sind und sich mit den CSS-Farben auskennen , können Sie sie eingeben, oder ich verwende das nicht oft, Hue Saturation Luminant Ich verwende Farbtonsättigung und Helligkeit. Ich finde das sehr nützlich, wenn ich es dunkler machen will, muss ich es hierher ziehen, aber am Ende sagst du, wow, wenn ich es herunterzackst , sagst du, nein, direkt Sie können auf Helligkeit klicken. Die Helligkeit ist hoch und runter. Also was du tun kannst, ist einfach hier reingehen und los, siehst du meinen Pfeil? Ich benutze nur. Du kannst meine Finger nicht sehen. Du kannst einfach hier reinklicken, wie wir viele andere gemacht haben , und es einfach nach oben ziehen. Halten Sie die Umschalttaste gedrückt, und es wird in großen Stücken scherzen. Wie gesättigt die Farbe ist, hängt von links nach rechts ab. Anstatt also auf diese Weise zu wackeln, kannst du einfach hier in dieses Bild klicken und nach oben nach unten gehen Sie sehen, es geht von links nach rechts. Das Gleiche gilt für den Farbton. Wollte ein bisschen blauer sein. Es wird hochgehen, hoch, hoch, p , p, p, p, p, p. ist allerdings üblich, es auf Hex zu lassen . Lass es auf zehn stehen. Die andere Sache ist , dass du hier unten einen Haufen Farben haben wirst. Es ist wie Farben, die du bereits benutzt hast. Da ist das Grau. Da ist es, wenn du darauf zurückkommen willst. Da ist das Blau, das wir gerade verwechselt haben, also können wir sagen, du oder willst, dass es die Farbe des Blaues ist, die jetzt weg ist, weil sie auf dieser Seite nirgends verwendet wird. Guter Wick, Dan. Macht es rückgängig, dann kommt es zurück. Ich kann es jetzt benutzen und sagen, dass du diese Farbe hast. Ich mag es nicht. Du wartest dort. In dieser Farbe gehe ich zu uns. Die andere Sache, die Sie tun können, ist das Eyedrop-Atol zu verwenden . Sie können hier klicken und sagen, ich möchte, dass die Pipette diese Farbe hat Das Gute an der Pipette ist, dass Sie sich auf einige wirklich wichtige Dinge einlassen können. Das Gute an der Pipette ist, dass Sie sich auf einige wirklich wichtige Dinge einlassen können. Kannst du das sehen? Neben dem Symbol dort ist diese kleine, du siehst es, eine kleine vergrößerte Version davon Sag mal, ob du nur diese komische graue Farbe am Rand dieses Typs Sie können es nur sehen, wenn Sie es wirklich vergrößern. Nein, Sie können es nicht einmal sehen, wenn Sie es vergrößern. Es ist da. Tolle Auswahl der Farben von Bildern. Ich werde Ihnen jedoch die Abkürzung zeigen , indem ich darauf klicke. Ich mache das sehr oft. Ich werde die Umschalttaste gedrückt halten, um auf beide zu klicken. Ich habe beide ausgewählt und mache damit die Bewegung rückgängig. Halten Sie die Umschalttaste gedrückt, klicken Sie auf beide verwenden Sie meine Tastenkombination. Das ist I auf Ihrer Tastatur, der Buchstabe I, nicht Ihr Augapfel Das ist I auf Ihrer Tastatur, der Buchstabe I, nicht Ich kann hier reinklicken und beide nehmen diese Farbe an. Es ist wirklich egal, wo du es machst. Manchmal ist es schwierig , Dinge anzuklicken. Wenn es Ihnen wirklich schwer fällt, auf Dinge zu klicken, ist es am einfachsten, sie ein wenig zu vergrößern und zu sagen: A, jetzt ist es einfacher zu klicken. Ich kann hier reingehen und meine Pipette benutzen. es. In Ordnung. Ich werde die erste Schicht bekommen, um mir alle meine Frames in einem Dokument zu zeigen . Sie können die Rahmenfarbe des Telefons, das wir hier haben, hier unten ändern , Sie können sagen, es ist voller Weiß, was bedeutet, ob, wenn, wenn, Sie es in etwas anderes ändern können. Manche Leute machen es gerne hellgrau. Wir lassen es vorerst weiß. Rahmen können genauso eingefärbt werden wie Rechtecke. Sie sind sich sehr ähnlich Etwas, das Sie vielleicht ändern möchten oder ich kann mich nicht erinnern, ist die Standardeinstellung. Es ist die Themenfarbe. Im Grunde ist das Layout meiner Oberfläche sehr weiß , alles ist weiß Die Hintergründe sind hellgrau. Du kannst hier auf dieses kleine F gehen und du kannst zu den Einstellungen gehen. Du kannst sagen, ich möchte, dass das Thema hell oder dunkel ist. Im Moment ist dein System-Theme, meins bezieht es von meinem Mac. Mein Mac sagt ihm, es ist Tag, du nimmst einen hellen und wenn es Nacht ist , wechselt er zu Schwarz, was seltsam ist Du könntest es erzwingen, schwarz zu sein. Es ändert nicht das Dokument, sondern nur die Oberfläche. Das heißt auch, wenn ich ein neues Dokument oder eine neue Designdatei erstelle, siehst du, dass der Hintergrund schwarz ist. Wenn ich mein Rahmenwerkzeug nehme und etwas anderes zeichne, befinden wir uns an derselben Position, aber die Oberfläche sieht ganz anders aus. Es ist nur eine schwarze, dunkle Version. Es liegt an dir. Wenn du es auf dunkel änderst und du sagst, aber der Hintergrund ist immer noch hell. Du kannst nichts ausgewählt haben, in den Hintergrund klicken und bis hierher gehen und sagen, ich möchte, dass es dunkel ist. Ich kann mich nicht erinnern , was die Standardeinstellung ist. Ihre wird je nach Ihren Systemeinstellungen unterschiedlich sein . Also werde ich es zwingen, hell zu sein und für den Rest des Kurses im Lichtmodus zu bleiben, aber du kannst es ändern. Thema, leicht, nett. Eine weitere nützliche Sache ist, dass Sie je nach Sehvermögen und Bildschirm zur Ansicht und dann zur Schnittstellenskala wechseln können. Du kannst sagen, ich würde es gerne vergrößern oder versuchen, diese Hieroglyphen zu dekodieren. Aber wenn ich das mache, können Sie sehen, dass alles in den Panels größer wird, und Sie können immer größer und größer Sie haben einen riesigen, großen Rundumbildschirm. Es wäre vielleicht schöner, wenn die Benutzeroberfläche größer wäre Geh, soll ich es in dieser Größe lassen? Ich lasse es für das Video bei dieser Größe damit du etwas leichter sehen kannst, was ich mache. Eine letzte Sache ist, dass mich das verrückt macht. Macht es dich verrückt? War es dir egal? Das passt nicht überall hin. Also kann ich das etwas größer ziehen. Ich weiß es nicht. Es muss größer sein. Ich zeige dir eine kleine Abkürzung. Ein kleiner Bonus fürs Warten bis zum Ende. Wenn ich diese Seite ziehe und ich möchte, dass sie gleichmäßig von dieser Seite entfernt ist, was Sie tun können, anstatt nur eine Seite und dann die andere zu ziehen , können Sie eine nette Abkürzung drücken Ich habe keine Abkürzungen versprochen, aber wir sind mit einer Menge fertig. Halten Sie den Optionszähler Mac gedrückt. Ok, Counter PC, und Sie sehen, dass er es von beiden Seiten tut. Oh. Elegant. Siehst du, es hat sich gelohnt, rumzuhängen und farbige Quadrate zu machen. In Ordnung, das ist es. Das Wichtigste dabei ist wirklich , nicht viel Farbe zu verwenden Versuchen Sie, Ihre Y-Frames wirklich simpel zu halten, verwenden Sie Grau, verwenden Sie Blau Versuchen Sie nicht wieder, Dinge farblich zu kennzeichnen. Wir möchten nicht von unserem Ziel dieses Y-Frame-Tests ablenken unserem Ziel dieses Y-Frame-Tests Testen Sie einfach die Mechanik. Klicken die Leute dort, wo wir glauben, dass sie klicken werden? Ist das die Art von Dingen, die der Kunde ohne Schriften, ohne Farben, ohne Styling will ? Ordnung, das ist es. Wir sehen uns im nächsten Video. 12. Striche Plus Aktualisieren der Farbstandardwerte in Figma: Hallo zusammen. In diesem Video werden wir uns den Strich ansehen, der die Linie innerhalb von Figma darstellt, all die Dinge, die man damit machen kann und was nicht Außerdem zeige ich Ihnen, wie Sie die Standardeinstellung ändern können. Immer wenn Sie ein Rechteck zeichnen, entspricht es einem früheren Stil, den wir erstellt haben. Ordnung. Lass uns reinspringen. In Ordnung. Lass uns einen Strich hinzufügen. Strich ist nur ein anderes Wort für eine Linie. Ich klicke auf dieses große Rechteck oben hier und hier drüben Wenn wir etwas mit einem Rechteckwerkzeug zeichnen, erhalten wir standardmäßig eine Füllung, aber keinen Strich. Wir können einen Strich hinzufügen, indem wir auf die kleine Plus-Schaltfläche klicken. Lassen Sie sich von außen einen kleinen Strich verpassen. Standardmäßig ist es ein Strich mit einem Punkt oder sie nennen es das Gewicht. So dick ist die Linie. Ich kann hier reinklicken und meinen Aufwärtspfeil verwenden oder ihn eingeben. Ich lege etwas Schönes und Dickes hinein , damit du es drei sehen kannst. Du kannst den Strich loswerden indem du auf dieses kleine Minus klickst, ihn wieder einfügst, du kriegst ihn. Ändere natürlich die Farbe. Wenn du grasen willst, willst du einfach ein helleres Grau, lass es einfach an diesen Rand hier ziehen und finde etwas hier drin oder mach es einfach schwarz, mach es zu Nehmen wir an, du verbringst etwas Zeit und du sagst, ich will eigentlich, dass das was ist? ich will eigentlich, dass das Drei. Verbringe etwas Zeit du sagst, ich liebe diese grüne Farbe. Nun, du liebst es nicht, aber du musst es immer wieder benutzen. Wenn ich hier rübergehe und sage, Rechteckwerkzeug, was Archie ist, und ein weiteres Feld herausziehe, sagst du, es hat keine abgerundeten Ecken, es hat nicht die Farbe, es hat nicht den Strich. Ich könnte mein Augentropfen beim Werkzeug benutzen, darauf klicken, Auge um Augentropfen beim Bam, ich habe mir einen Teil davon geschnappt, aber nicht die abgerundeten Ecken . Es hat einfach die Farben aufgenommen Was Sie tun können, ist die Standardeinstellungen zu ändern. Nehmen wir an, ich möchte, dass dies die Standardeinstellung für jedes Mal ist, wenn ich ein Rechteck zeichne Sie können es einfach auswählen lassen, zum F hier oben gehen, runter zu Bearbeiten gehen und da steht zum F hier oben gehen, runter zu da dieses Bild, da steht, legen Sie die Standardeigenschaften fest. Sie müssen es zuerst auswählen oder das Ding, von dem Sie alle Eigenschaften stehlen möchten. Du klickst darauf. Es passiert nichts , außer dass es unten erscheint. Jetzt klicke ich im Hintergrund ab, drücke mit meinem Bogenschießen auf das Rechteck und zeichne etwas anderes Schau uns an. Wir haben unsere Standardwerte zurückgesetzt Nehmen wir auch an, wir machen etwas anderes für Buttons Das ist die Standardeinstellung für jedes Mal, wenn Sie ein Rechteckwerkzeug verwenden, aber es gibt offensichtlich unterschiedliche Anwendungsfälle, wir haben unser Platzhalterbild gezeichnet Der erste ist ein Button. Nehmen wir an, der Knopf ist anders und wir haben eine andere Farbe und wir haben einen anderen Strich auf der Außenseite. Schrecklich, aber wir müssen es hierher bringen. Was du tun kannst, ist, es zu sagen und du hast es wahrscheinlich dort gesehen, an derselben Stelle unter dem F, und zur Bearbeitung gehen Sie können die Eigenschaften kopieren und die Eigenschaften einfügen. Wenn du das oft machst, gibt es dort eine Abkürzung, so dass ich die Eigenschaften kopieren kann und du, mein Freund, wenn du Eigenschaften editierst und einfügst, und ich nehme alles von dort und füge es dort ein. Fantastisch. Ich will das nicht tun , aber jetzt weißt du wie. Ordnung, rückgängig machen, rückgängig machen und fertig. Das sind die Standardwerte Schauen wir uns das Zeichnen einiger Linien an. Wir haben Linien an der Außenseite angebracht. Lassen Sie uns selbst eine Linie zeichnen, sie versteckt sich unter dem Rechteckwerkzeug. Da ist das Linienwerkzeug. Ich werde darauf klicken. Ich fange hier an, klicke auf Halten und ziehe, ziehe, ziehe und bringe es in die untere Ecke. Ich möchte, dass es das gleiche Gewicht hat, also klicke ich hier rein und gehe zwei hoch, also sind es drei. Gewicht, und ich habe es nicht sehr gut angeordnet. Das machen wir in einer Sekunde. Zurück zum Linienwerkzeug , der L-Taste. Klicken Sie auf Halten und ziehen Sie von dort nach unten. Es ist wirklich üblich, dass Ug das ständig ändert. Ich würde sagen, zwei, drei, wir könnten Eigenschaften kopieren und einfügen. Lass uns das nur zum Üben machen. Ich klicke darauf. Ich wähle Command Option C auf einem Mac. Das ist Strg, Alt, C, und klicken Sie auf diese andere und wählen Sie Befehlsoption V. Dadurch wird die Eigenschaft eingefügt. Benutze das. Nochmals, das sind zu viele Treffer, du meinst, Mann, er sagte, keine Abkürzungen, warte zu viele Abkürzungen. Ich habe dir den langen Weg gezeigt. Du kannst deine Ohren schließen, wenn ich anfange, Abkürzungen zu machen. In Ordnung, das ist also gut. Außer dass ich das vermassle, also zoome ich rein. Befehl plus plus plus. Leertaste, ziehe es heraus. Sie können in dieser Zeile hier einmal darauf klicken. Wenn ich darauf klicke und ziehe, wird das Ganze mitgenommen. Ich möchte auf die Linie doppelklicken und am Ende erhalte ich die beiden Punkte . Kannst du das sehen? Wenn ich darauf klicke, wird es zu Kreisen und ich sehe die kleinen Endpunkte Leertaste bewegt sich nach unten, wenn ich nicht im Hintergrund aus klicke Wenn ich darauf klicke, denke ich, ich werde das Quadrat verschieben. Am Ende macht es komische Sachen. Also ich doppelklicke darauf, ich kann sagen und die Leertaste drücken, das sieht in Ordnung Dieser braucht Arbeit. Doppelklicken Sie. Los geht's. In Ordnung, wir haben also ein paar Linien in den Ecken. Um das zu beenden, musst du ein paar Mal in den Hintergrund klicken , nur um diesen Modus hier zu verlassen. Es ist nicht so, dass du dreimal klicken musst . Das ist es, was du tun musst. In Ordnung. Da haben wir unsere Leitungen durchgezogen. Lass uns unser Burger-Menü machen. Das Burger-Menü ist bei der Navigation für Mobiltelefone üblich . Schnappen wir uns Alky für das Linienwerkzeug oder gehen wir den langen Weg. Du kannst auf jeden Fall den langen Weg gehen. Wofür auch immer du bereit bist, hier ist der Alky, ich werde klicken und herausziehen Nun, es ist ziemlich gut im Schnappen, aber wenn du das tust, was ich mit Schnappen meine , ist, sieh dir das an. Es will wirklich geradeaus gehen Du bist ein bisschen daneben, es ist leicht, es zurückzubekommen. Was Sie tun können, ist, wie wir es mit dem Kreis gemacht haben Denken Sie daran, als wir den Kreis herausgezogen haben, haben wir die Umschalttaste gedrückt, . Denken Sie daran, als wir den Kreis herausgezogen haben, haben wir die Umschalttaste gedrückt, sie haben ihn an die erhöhte Breite gebunden, Sie haben dasselbe mit einer Linie gemacht, die Sie durch Klicken und Herausziehen Wenn ich die Umschalttaste gedrückt halte, bewegt der Moment überall hin. Wenn ich die Umschalttaste gedrückt halte, sehen Sie, dass er in 90-Grad-Winkeln fixiert wird, sogar in 45-Grad-Winkeln . Das ist praktisch. Bring es auf eine Größe, die du willst. Nochmals, wenn wir bald auf einem echten Handy testen , ist es schwer zu wissen, wie groß der Burger sein sollte. Im Grunde nur drei kleine Zeilen. Ich nenne es gerne Nav-Sandwich. Niemand sonst nennt es Nav-Sandwich, aber die meisten Leute bezeichnen es als Burger. Ich werde ein bisschen reinzoomen. Schauen wir uns noch ein paar Zeilen an. Wir wollen drei davon. Sie können mit Command C, Command V oder Control C, Control V kopieren und einfügen Command V oder Control C, Control . Wir kennen unsere Suite-Abkürzung. Denken Sie jetzt daran: Halten Sie die Wahltaste auf einem Mac gedrückt, können Sie einen PC verwenden und wir können es duplizieren. Wir machen das Gleiche noch einmal. Ich möchte noch eine Abkürzung machen. Schließ deine Ohren, wenn du sagst, nicht mehr. In Ordnung. Noch eins. Für diejenigen unter Ihnen, die noch da sind, halten die Wahltaste gedrückt und ziehen Sie sie heraus. Was Sie jetzt tun können, ist, dass Sie sagen, ich möchte dasselbe noch einmal tun. Duplizieren Sie es einfach, dieselbe Menge, dieselbe Entfernung. Du hältst Command auf einem Mac, Control auf einem PC und D gedrückt . Das dupliziert Command D oder Control D. Das ist wirklich praktisch. Du kannst weitermachen, toll für Listen und so. Jedes Mal, wenn du etwas in die Länge ziehst, ist es eine kleine Liste dafür Zuallererst muss ich es duplizieren . Du sagst, ich werde das machen. Dann denk an Command oder Control D, um es nochmal zu machen. Es eignet sich hervorragend, um kleine Listen wie diese oder Quadrate, Kreise oder Punkte zu erstellen . Wir haben diese Typen. Wir müssen uns einige Sachen für Fortgeschrittene mit Schlaganfällen ansehen. Nicht wirklich. Nehmen wir ich werde es die Größe nach auf zwei erhöhen, nur damit du es dir etwas leichter vorstellen kannst Bei diesem Top nennt man das eine Butt-Cap. Es ist ein unglücklicher Name, aber es ist die Linie, die kommt und hier endet. Du hast noch eine andere Option. Klicke darauf. Der Schlaganfall hier. Dieses kleine Stroke-Panel. Sie haben diesen Start - und Endpunkt und hier verbinden sie eine Menge Dinge. Ich mag Pfeile. Da hast du's. Wenn du den Pfeil loswerden willst, drücke auf Rückgängig. Ich möchte, dass das andere Ende ein Pfeil ist. Da hast du's. Da sind ein paar grundlegende Dinge drin. Ich wollte dir zeigen, dass ich nicht weiß, warum es nervt. Diese Butt-Cap am Ende hier, du kannst sagen , ich will, dass es entweder ist, ich muss ein bisschen nach unten scrollen. Ich kann es auf meinem Monitor sowieso nicht richtig sehen , da ist rund und eckig. Ich sage rund. Kannst du sehen, dass es das Ende abrundet? Mir gefällt es besser. Dieser hier, die letzte Option ist, dass Sie es auf eine der beiden Arten tun können. Es hat beide Enden. Es gibt auch einen quadratischen. Was ich dir zeigen will, ist im Grunde die Linie. Kannst du sehen, dass das kleine blaue Ding durch die Mitte ragt? Das ist der eigentliche Schlaganfall. Dann legen Sie ein Gewicht darauf und Sie können sehen, dass die kleine blaue Linie bestehen bleibt , aber die blauen Linien in der Mitte und sie dehnt sich einfach auf beiden Seiten aus. Wenn ich Square Cap mache, schauen wir uns das an. Kannst du sehen, schiebt die Linie ein wenig nach innen und wird am Ende quadratisch Ich benutze das nicht oft. Die Leute fragen. Es ist da, aber ich verwende die abgerundete Kappe ziemlich oft, um die Kanten von Strichen zu glätten, vielleicht möchtest du eine um die Kanten von Strichen zu glätten Buttcap Ich werde sie alle auswählen. Das ist ein gutes Argument. Kannst du hier sehen, dass es gemischt heißt. Sie mehrere Dinge ausgewählt haben, werden Sie überall gemischt sehen Wenn Sie mehrere Dinge ausgewählt haben, werden Sie überall gemischt sehen. Ich bin gerade auf meinem Zeigerwerkzeug und ziehe das Feld um alle drei. Es heißt, der Startpunkt ist, es ist eine Mischung aus Butt-Caps, abgerundeten Kappen und eckigen Kappen, ich weiß nicht was ich sagen soll, es schreibt einfach gemischt. Es heißt gemischt, es ist nicht sicher, was angezeigt werden soll. Ich sage sie alle unten, rund. Und ich habe es nur einem von ihnen angetan. Das ist komisch. Rund. Es läuft schlecht. Das ist ein seltsamer Bug. Das macht es normalerweise nicht, wenn ich es unterrichte. Was ist falsch? Ich gebe auf. Ich glaube, es ist die quadratische Kappe, sie haben die Art und Weise geändert, wie sie das machen. Wenn sie die quadratische Kappe herstellen, ragte sie früher heraus. Jetzt haben sie es hineingesteckt, also die quadratische Kappe, und die Linie hat am Ende die gleiche Größe Aber es hat die Breite meines eigentlichen Strichs verändert. Du machst keinen Sinn, Dan. Mach dir keine Sorgen. wirst du nicht allzu oft tun, aber es ist ein Bug, und ich werde es im Kurs belassen , weil du vielleicht auch darauf stoßen könntest Seltsam, verwirrend und sogar niedergeschlagen, der Kursleiter ist ein bisschen komisch. Ich mache sie einfach neu Wie dem auch sei, das Hauptziel hier ist es, den Unterschied zwischen der Kappe mit flachem Ende, der Kolbenkappe und der abgerundeten Kappe zu untersuchen den Unterschied zwischen der Kappe mit flachem Ende, Kolbenkappe und der abgerundeten Kappe Ich gehe einfach auf Shift One, um das Ganze zu sehen, und ich wähle all diese aus, und oft benutze ich einfach meine Rakey, um sie zu bewegen, weil es schwierig ist, sie auf die gewünschte Größe zu ziehen Es ist wie Schnappschüsse. Du sagst, nein, tu D. Ich bringe es gerne dahin, wo ich es haben will , und dann benutze ich einfach meine Harke, um Taperoni zu machen In Ordnung. Du gehst. Wir haben ein Burger-Menü oder ein Navi oder ein Nav-Sandwich. Fangen wir damit als eine Sache an. In Ordnung. Ich werde das einfach nach oben verschieben. Ich benutze wieder meinen Rakey. Oh, nette kleine Abkürzung für dich ist, dass wir es schon einmal gemacht haben. Wenn ich meine Harke benutze, schiebe ich sie einfach herum. Wenn du dabei die Umschalttaste gedrückt hältst, macht sie es zehnmal so schnell wie zehn sondern Wenn Sie also die Umschalttaste gedrückt halten und die Harke verwenden, bewegt es sich nicht um ein Pixel nach oben und unten, um zehn Pixel Dinge, die ich benutze, von denen ich vergesse, dass ich sie tue. Da hast du's. Du weißt es auch. In Ordnung. Das ist es. Striche und ein Blick auf die Standardfarben in Figma. Auf zum nächsten Video 13. Objektbearbeitung und Flucht in Figma: Hallo, in diesem Video werde ich dir dieses Ding zeigen Es heißt Objektbearbeitungsmodus. Vielleicht steckten Sie schon hier fest. Ich werde dir zeigen, wofür es ist und wie ihm entkommen kannst. Ich sehe gestreifte Linien. Ich möchte dir das früh im Unterricht zeigen. Wir werden später auf Fortgeschrittene eingehen. Aber die Leute bleiben früh stecken. Wenn Sie ein Doppelklicker sind, sind Sie wahrscheinlich schon hier. Vielleicht haben Sie Ihren Ausweg schon gefunden. Aber wenn ich ein Objekt habe und du doppelklickst und Dinge doppelklickst , denkst du, was ist los Wie komme ich raus? Um rauszukommen, doppelklicken Sie einfach auf den Hintergrund. Lass es uns mit neuen Rechtecken machen. Zeichne die Archie für das Rechteckwerkzeug heraus. Verwenden Sie standardmäßig wieder das Verschieben-Werkzeug. Doppelklicken Sie darauf und Sie sind drin Sie fragen sich, was ist das? Das heißt im Grunde, wenn du nicht im Objektbearbeitungsmodus bist, greifst du nach den Ecken des Rechtecks und es macht rechteckige Sachen Es ist gezwungen, ein Rechteck zu sein. Mit einem Doppelklick gehe ich in das Objekt hinein und kann es zerstören Ich kann mir jetzt die Ecke schnappen. Sie stellen fest, dass die Kanten von einem Quadrat zu einem Kreis ändern. Schau dir das an. Schau, wir haben es zerstört. Jetzt erhältlich, und jetzt macht es keine rechteckigen Bits mehr. Sie sind in dieses Objekt eingedrungen und haben es bearbeitet. Es heißt Objektbearbeitungsmodus. Du kannst ein paar andere coole Sachen machen. Schau Double Click Go into an. Ich kann hier auf diese Zeile klicken. Ich habe einfach auf meinem Schlüssel auf Online, Löschen geklickt. Ich habe die Linie entfernt, wodurch die Füllung weggefallen ist. Ich kann sagen: Wenn du diese Linie los wirst, kannst du anfangen dieses Ding zu zerstören und es auseinanderzunehmen. Kein Rechteck mehr. Dies kann später nützlich sein, wenn wir anfangen, unsere eigenen Symbole zu zeichnen. Ich werde es rückgängig machen, um zurück zu kommen. Aber das ist der Objektbearbeitungsmodus. Da sind wir auch bei dieser Linie gelandet. Und wir haben auf die Linie doppelgeklickt und wir sind so, als hätten wir die Punkte Wir sind im Objektbearbeitungsmodus. Wir wissen es auch , dass die Linie keine Streifen hat. Das Ding hier unten erscheint. Schau dir das an. Ich doppelklicke hier drüben darauf. Sie sehen, das war vorher nicht da, klicken Sie auf aus, klicken Sie auf. Sagt: Hey, willst du mit dem Umzug herumspielen? Willst du ein Lasso-Werkzeugzeug? Wir werden den Shape Builder machen . Wir werden all diese Tools später machen. Sie können es verlassen , indem Sie auf das offizielle Kreuz klicken , oder wenn Sie drin sind, doppelklicken Sie einfach auf den Hintergrund. Gehen Sie in den Objektbearbeitungsmodus und dort, wo sich die Leute früh verirren. Ordnung, das ist es. Wir sehen uns im nächsten Video 14. Scale (Skala) vs. Selection Tool (Auswahlwerkzeug) in Figma: Hallo. In diesem Video werden wir uns den Unterschied zwischen dem Verschieben-Tool und dem Skalierwerkzeug ansehen . Das Verschiebe-Tool haben wir bisher verwendet. Ich werde die Größe ändern und es wird einfach größer, aber das ist nicht das, was wir wollen. Wir wollen es vergrößern Also werden wir das Skalierungstool verwenden, okay? Wählen Sie alles aus und es wird das tun. Sie haben beide ihren Platz. Lassen Sie mich Ihnen zeigen , wie beide funktionieren. Wir verlieren uns ein bisschen, aber wir reparieren es. Es ist okay. Lass uns reinspringen. Zunächst möchte ich den Strich um diese Knöpfe herum hinzufügen den Strich um diese Knöpfe herum , also werde ich mir das holen. Gehen Sie hierher, gehen Sie zu Bearbeiten und ich sage Eigenschaften kopieren, oder Sie können eine Tastenkombination verwenden und ich wähle beide aus. Nicht der Typ, ich brauche nur zwei kleine Rechtecke und ich verwende die Befehlstaste Umschalt-V oder Strg-Shift V auf einem PC In Ordnung. Figma funktioniert standardmäßig so, wie Sie es verwalten. Ich wähle das aus Ich habe mir beide geschnappt. Sowohl der Text als auch dieser Button hier und du sagst, ich möchte das ein bisschen herausnehmen Und vielleicht die Größe ein bisschen ändern. Aber nehmen wir an, ich möchte, dass es größer wird. Nehmen wir an, dieser hier, ich denke, A, der ist zu groß. Ich muss es kleiner machen. Schau zu. Die Schrift wird nicht kleiner. Ändert die Größe des Rechtecks, aber nichts darin. Gleiche gilt für den Strich hier unten. Wenn ich will, dass der ganze Knopf größer ist, dann pass auf. Wenn ich ihn größer ziehe, sagst du, der Strich hat dieselbe Breite. Der Text hat dieselbe Größe, , wie mache ich das dann? Ich will, dass alles größer ist. Ah, Schicht. Es skaliert es quasi proportional zum Rechteck, aber die Schrift hat immer noch dieselbe Größe Also werden wir das Skalierungswerkzeug verwenden. hin- und herschalten diesem Kurs werden Sie häufig zwischen dem Verschieben-Werkzeug und dem Skalieren-Werkzeug Ich nehme die Waage und das macht genau das, was wir machen wollten Skalieren Sie sowohl den Strich die Schrift und das Rechteck zusammen. Es tut es proportional. Ich werde das rückgängig machen, weil ich es damit machen will. Ich werde beide auswählen. Ich gehe zu meinem Waage-Tool. Es ist bereits standardmäßig darauf eingestellt. Jetzt kann ich sehen, dass du ein bisschen kleiner wirst. Sie können sehen, dass das Kreuz nach unten schrumpft, was eine Schrift oder das Plus ist, und ich werde das hierher verschieben Eigentlich möchte ich einen Strich an der Außenseite machen . Lass uns das am Ende machen. Es geht mehr um die Waage als um den Schlaganfall. Sie müssen ziemlich viel zwischen den beiden hin- und herschalten . Wir haben es geschafft, wenn ich hier reinklicke, kann ich mit meiner Schriftgröße spielen. Doppelklicken Sie in das Textfeld. Nehmen wir an, ich will es größer machen, du sagst, oh ja. Aber mach dir keine Sorgen, es gibt eine super einfache Abkürzung für Skala, die eindeutig S für Skala ist. Nein, S steht für das Slice-Tool, das ich niemals benutze. Es ist K ohne triftigen Grund. V ist das Verschiebewerkzeug, siehe unten, V und K. Du redest ziemlich viel zwischen den beiden. Siehst du, wie es sich hier unten verändert? K, VK. Ich würde K für Skala nehmen, ich kann sagen, alles klar, eine größere. Dieses Ding hier, ich möchte das alles auswählen. Ich bin auf meiner Waage. Ich kann sagen, ich wechsle mein Sketol. Ich werde das alles auswählen und es einfach verkleinern, sodass es kleiner ist Irgendwie habe ich das nicht verstanden. Schnapp dir alles. Dann verkleinern? Was stimmt nicht mit dir? Was habe ich mit dem Kerl gemacht? Lass uns einen Blick darauf werfen. Er arbeitet. Mm. Bitte warte. Ordnung, ich bin zurück. Jetzt weiß ich, was ich getan habe, um es kaputt zu machen. Deins funktioniert bestimmt. Ich werde dir zeigen, warum meins kaputt ist. Das liegt daran, dass ich dir vorhin etwas gezeigt habe und du vielleicht trotzdem darauf stoßen könntest Lass uns das im Kurs behalten. Diese Zeile hier, kannst du den Unterschied zwischen diesen beiden erkennen? Dieser hier hat diese Kiste drum herum. Der Grund dafür ist, dass, als ich dir gezeigt habe, wie man hineingeht, darauf doppelklickt und sich auf dieser Seite bewegt, habe ich dir gezeigt, wie man es falsch macht, nämlich dir gezeigt habe, wie man hineingeht, dass, als ich dir gezeigt habe, wie man hineingeht, darauf doppelklickt und sich auf dieser Seite bewegt, diese Uhr. Wenn ich mir die schnappe, dann du. Ich habe mir das Rechteck geschnappt und versucht, es zu vergrößern. Am Ende habe ich eine Kiste darum gelegt , anstatt dass es eine Linie Jetzt ist es eine Linie innerhalb eines Rechtecks. Was ist also passiert, als ich mir den quadratischen Kopf schnappte , um zu zeigen , wie man Dinge falsch macht? Normalerweise mache ich das nicht, deshalb bin ich ein bisschen ausgeflippt, weil ich mich verirrt habe Wir werden nicht zu sehr darauf eingehen, wie das Problem behoben werden kann. Es ist zu Beginn des Kurses sehr kompliziert und nicht wirklich nützlich. Wir können es einfach kopieren und einfügen. Ich habe noch eins davon, ich werde es rausziehen und ich werde dir zeigen, dass du einen Bonus bekommst, weil wir uns verirrt haben. Ich werde hier rüber gehen und sagen das um und ich werde es in die Ecke stellen. Wenn ich es ziehe, klicken wir hinten ab . Klicken und ziehen Sie die Linie Am Ende stellen wir eine Kiste darum herum so wie wir es getan haben. Schau dir das an. Wenn ich auf „Halten“ klicke und das Bild ziehe, treten beim Ändern der Größe Probleme auf. Versuchen Sie nicht, die Ränder dieser Felder zu verschieben , da dies zu Problemen führen könnte. Wenn Sie die Linie bearbeiten müssen, stellen Sie sicher, dass Sie in den Objektbearbeitungsmodus wechseln indem Sie darauf doppelklicken und sie dann verschieben anstatt die Quadrate nach außen zu ziehen , da dies das Problem verursacht In Ordnung, das ist das Problem. So kann es repariert werden. Wo waren wir? A, Auswahl versus Skala Hoffentlich kann ich jetzt all diese auswählen. Gehe zu meiner supersüßen Abkürzung, die K ist. Du hast es verstanden, und jetzt sollte ich in der Lage sein, das nach oben und unten zu skalieren. Und der Strich kommt mit der Schrift. Alles skaliert. Zurück zum Verschieben-Tool, das wahrscheinlich das gängigste Tool ist. Denken Sie daran, dass ich nichts ausgewählt habe. Drücken wir V auf der Tastatur. Da haben wir's. Abkürzungen oder nutze den langen Weg. Es ist nicht wirklich wichtig. Das ist der Unterschied zwischen der Verwendung des Verschieben-Werkzeugs und der Verwendung des Skalierungs-Werkzeugs. Sie werden ständig zwischen den beiden wechseln. Ideal für Schriften. Okay, verkleinern Sie es. Da haben wir's. Kleinere Schrift. Ordnung. Das ist es. Wir sehen uns im nächsten Video. Lass uns versuchen, uns im nächsten nicht zu sehr zu verirren , Dan. In Ordnung. 15. Frames und Groups (Gruppen) in Figma: Und in diesem Video werden wir uns Frames im Vergleich zu Gruppen ansehen Wir haben beide benutzt. Nun, zumindest weißt du, was eine Gruppe ist. Das ist eine Gruppe hier oben. Es hält die Dinge einfach zusammen und ich kann es zerquetschen und verschieben. Macht Groupie-Zeug Aber Rahmen, was ganz Besonderes. Sie sind Gruppen, aber sie können lustige Sachen wie diese machen. Schau, es klebt an den Ecken. Ich kann es kleiner machen und ich kann Sachen zuschneiden. Rahmen haben besondere Fähigkeiten. mag Gruppen, und ich möchte sie ziemlich früh im Kurs vorstellen , wenn du so meinst, Mann. Nach diesem Video bist du immer noch etwas verwirrt, was Frames angeht. Mach dir keine Sorgen. Wir stellen es früher vor, damit es später im Kurs nicht nur ein großes Problem ist, weil Sie auf viele Vorlagen und Werke anderer Leute stoßen werden viele Vorlagen und Werke anderer Leute stoßen , die alle Frames statt Gruppen verwenden. Sie werden sich fragen, warum? Warum? Wir werden einen Teil des Y behandeln. Lassen Sie uns jetzt loslegen Beginnen wir damit, einige Formen auf dieser Seite zu zeichnen. Nehmen wir das Rechteckwerkzeug. Ich zeichne ein Rechteck und halte die Umschalttaste gedrückt, sodass es ein perfektes Quadrat ist. Lassen Sie uns das Polygon, das ein Dreieck ist, machen wir auch eine Ellipse Ungefähr die gleiche Größe. Das muss ich nicht sein. Ich zoome mal rein. Ich werde sagen, alle habt keinen Schlaganfall. Ich wähle beide aus und sage, dass Sie ohne triftigen Grund keinen Eckradius haben . Ich will nur einfache Formen. Wir haben drei Formen und ich kann sie ohne triftigen Grund aneinanderreihen. Komm runter, mach weiter. Lassen Sie uns alle drei auswählen und ich kann mit der rechten Maustaste darauf klicken und Gruppe sagen. Befehl G, Steuerung G auf einem PC. Wirklich übliche Gruppierung. Gruppierung funktioniert, so wie du es dir vorstellst. Ich kann jetzt im Hintergrund abklicken und jetzt kann ich sie alle anklicken und ziehen weil sie in einer Gruppe sind Die andere Sache , auf die Sie achten sollten, ist , ob Sie hier in meinem Ebenen-Panel sehen können. Denken Sie daran, dass Sie in der Datei sind, Seite eins, und wir sind auf dieser Funktionsseite, da gibt es diese Seite mit dem Namen „Wird dieses eine Symbol nennen“. Sie können es hier umbenennen. Hier drinnen sie manchmal zusammengebrochen, manchmal sind sie offen. Hier ist ein kleiner Chevron . Du kannst sie öffnen. In meiner Gruppe gibt es eine Ellipse, ein Polygon und ein Dreieck Hervorragend. Gruppen. Sie können Gruppierung aufheben, indem Sie mit der rechten Maustaste klicken und „ Gruppierung aufheben“ sagen . Die Gruppe verschwindet und es ist nur noch die Form, die jetzt von alleine hier sitzt jetzt von alleine hier Machen Sie das rückgängig, weil ich diese Gruppe haben möchte. Das sind Ikonen. Runter. In Ordnung. Ich zeige dir den Unterschied zwischen einer Gruppe und einem Rahmen. Also werde ich das duplizieren. Ich habe zwei davon. Ich verwende mein optionales Alt-Ziehen. Ich werde die Gruppierung aufheben. Ist meine Gruppe ganz oben, sie heißt Icons, und das sind meine drei Ich werde sie im Ebenenfenster nach oben verschieben , damit Sie sie besser sehen Da sind meine Icons, und dann habe ich diese Typen, die einfach rumhängen. halte ich Schicht, schnappe dich, dich und dich. Sie sind alle ausgewählt. Anstatt Gruppe zu sagen, werden wir Frame-Auswahl sagen. Wir haben eine ähnliche Abkürzung. Du wirst sagen, oh, sie sehen sich sehr ähnlich. Da das alles nur Mist zusammen ist, kannst du sie bewegen Dieser hier, der jetzt in einem Frame ist, nicht in einer Gruppe. Ich kann sie bewegen. Was ist der Unterschied, Dan? Nun, Gruppieren von Dingen angeht, eigentlich nichts Sie können einen Frame oder eine Gruppe verwenden. In Figma verwenden sie Frames für alles anstelle von Gruppen Warum? Weil sie wie Gruppen sind, aber du bekommst einige zusätzliche Bonusfunktionen. Ich werde in diesem Video ein bisschen darauf eingehen, vielleicht nur ein kleiner Vorgeschmack darauf, wie Frames funktionieren, hauptsächlich weil, wenn du Vorlage einer anderen Person öffnest, du es von jemand anderem verwendest oder das Projekt einer anderen Person öffnest, diese Frames für alles verwenden können Das hat mich verwirrt , als ich anfing. Ich dachte mir, warum sind überall Frames? Ich sage komisches Zeug, aber in Wirklichkeit machen sie mächtige Sachen. Im Laufe des Kurses werden wir mehr über sie erfahren, aber ich möchte sie frühzeitig vorstellen damit Sie nicht wie die verdammten Frames Cool. Lass uns über Frames sprechen. Hier drüben können Sie den Unterschied im Symbol sehen. Wie Sie sehen können, werden Gruppen durch dieses kleine gepunktete Quadrat und die Rahmen dieses kleinen Pfundsymbols dargestellt dieses kleine gepunktete Quadrat und . Es funktioniert genauso. Schau, da ist Zeug drin. Sehen Sie sich einige der grundlegenden Unterschiede an. Wenn ich in meine Gruppe gehe. Also das ist meine Ikone. Nennen wir das einfach Gruppen , um es einfacher zu machen. Wenn ich hier drinnen doppelklicke, um reinzugehen, ist das der Objektbearbeitungsmodus, du gehst hinein. Ich habe es doppelt angeklickt Also in meiner Gruppe, oder du kannst einfach hier drüben darauf klicken Ich lösche die Ellipse, lösche das Polygon, lösche das Rechteck und die Gruppe verschwindet Eine Gruppe , in der nichts enthalten ist, hat keinen Sinn. Mach das rückgängig. Was passiert mit dem Rahmen? Wenn ich in meinen Frame gehe, lösche das, lösche das, lösche das. Der Rahmen ist immer noch da. Das ist komisch. Das ist der Grund, warum du am Ende viele leere Frames haben wirst. Du fragst dich, wofür zur Hölle ist ein leerer Rahmen? Ich kann alleine existieren. Das bringt uns zurück zu dem, wie wir in diesem Kurs angefangen haben. Schau dir das an. Denken Sie daran, als wir unsere Telefonseiten erstellt haben. Sie benutzten das Frame-Tool hier unten, das wir benutzt haben. Hier unten benutzen wir das Frame-Tool, das FK. Ein Rahmen kann für sich alleine existieren, mit Dingen darin oder nicht. Gruppen können das nicht. Das ist einer der Vorteile eines Rahmens. Es macht sie komisch, wenn man Dinge aus ihnen löscht, sie existieren immer noch Du sagst, das ist komisch. Das stimmt. Wir gewöhnen uns an die Verrücktheit. Schauen wir uns die Unterschiede etwas genauer an. Wenn ich eine Gruppe verwende und die Gruppe gerade ausgewählt habe und ihre Größe ändere , wird alles zusammengedrückt. Wenn ich mir diesen schnappe, kann der Frame QC seinen eigenen kleinen Platz einnehmen Er zerquetscht den Inhalt nicht. Das ist wirklich praktisch, weil Frames, sagen wir, ich mache das so und ziehe es hoch, du tust quasi nichts, Dan Wow, du kannst sagen, ich möchte den Inhalt ausschneiden damit du ihn wie eine Maske verwenden kannst. Das ist ein Vorteil eines Frames, und das mache ich rückgängig. Lass mich dir noch ein paar zeigen, damit wir uns daran gewöhnen können. Warum mache ich allen Angst vor Frames Wenn ich bis zum Ende warte und dir Frames zeige, ist es zu viel zu früh. Wir werden hier ein bisschen machen und wir werden den Kurs durchgehen. Am Ende wirst du Meister der Frames sein. Schauen wir uns die Gruppe an. Die Gruppe hier hat ein paar verschiedene Einstellungen auf der rechten Seite. Schau dir das an. Wenn ich auf den Rahmen klicke, gibt es ein paar zusätzliche Teile wie das Layout. Wir können auf Flow klicken. Im Moment gibt es gemischte Freiformen. Schau dir das an. Ich kann sie so stapeln. Ich kann sie vertikal stapeln. Siehst du? Geh zurück zum freien Fluss. Eigentlich musst du es rückgängig machen. ein paar andere coole Dinge machen. Lass mich noch einen vorführen, die Gruppe nach oben verschieben, diesen Frame nehmen und wir werden eine komische Sache über Frames herausfinden, ist, dass man Frames nicht unframe Sie gruppieren und lösen die Gruppierung auf, aber Sie rahmen ein und Beide verwenden die Methode „Gruppierung aufheben“, um sie wieder voneinander zu trennen . Wir haben unseren Rahmen verloren Ich hole dir das, kopiere und füge es ein und verschiebe es. Es ist ein kleiner Sprung, aber ich möchte Ihnen ein Gefühl dafür vermitteln, warum Frames so mächtig sind und warum Sie sie in den anderen Dokumenten so vieler Leute sehen. Also werde ich alle drei auswählen , vier davon jetzt. Ich klicke mit der rechten Maustaste, ich sage Frame-Auswahl. Was ich tun kann, ist in den Rahmen zu gehen , indem ich darauf doppelklicke. Bearbeitungsmodus für Mitgliedsobjekte, gehe hinein. Ich kann sagen, dass Sie standardmäßig die Einschränkung von oben und links haben werden. Diese drei habe ich jedoch mit meiner Umschalttaste ausgewählt. Ich befinde mich also innerhalb des Frames, indem doppelt geklickt habe. Ich musste die Shift-Taste drücken, um alle drei auszuwählen. Ich werde sagen, nicht oben links. Ich werde oben rechts sein, nichts ändert sich, außer wenn ich rauskomme, jetzt schnappe ich mir die Kanten, sieh dir das an. Kannst du sehen, dass die Symbole hier oben rechts bleiben wollen , weil ich sie auf die Beschränkung oben rechts gesetzt habe? Das ist später sehr praktisch, wenn du sagst, ich habe nichts ausgewählt, F mein Rahmenwerkzeug. Ich möchte, dass wir jetzt an der Tablet-Version arbeiten. Wir werden ein iPad Pro 11 Zoll machen. Ich ziehe den Namen hierher und nehme das, kopiere und füge es ein und verschiebe es hierher. Steck es da hin und beobachte, was passiert. Schau, zieh es raus, es klebt oben rechts. Sie können viele Elemente innerhalb von Rahmen wo Sie sie herausziehen können und sie dann ihre Größe gut Wenn Sie sich ein wenig überfordert fühlen, ist das okay. Wir werden das immer und immer wieder behandeln, aber ich möchte nur zu Beginn ein bisschen in die Rahmenhandlung einsteigen , damit es später nicht zu einem großen Schock Aber Sie werden auch sehen, dass jeder Frames verwendet. Sie schauen sich online das Tutorial von jemand anderem an und verwenden Frames. Das ist der Grund. Sie sind wirklich mächtig. Ich brauche das jetzt nicht. Ich werde auf den Namen klicken und auf meiner Tastatur auf Löschen klicken. Ich brauche das auch nicht wirklich. Also werde ich alles loswerden. Oh, eine letzte Sache an Frames, die interessant ist, ist, sieh dir das an. Wenn ein Rahmen im Hintergrund ist, hat er einen Namen. Dieser Rahmen hat keinen Namen. Lass uns einen Blick darauf werfen. Ich habe dieses Feature-Panel. Denken Sie daran, dass wir das benannt haben. Das ist meine iPhone-Größe, und das ist ein Rahmen, der genau dem Rahmen entspricht, den wir gerade hergestellt haben. Sie können entweder mit der F-Taste Rahmen zeichnen oder Sie können Dinge auswählen und einen Rahmen darum wickeln. Rahmenauswahl. Es spielt keine Rolle, wie Sie Ihren Rahmen erhalten, sie sind dieselben, wenn sie einmal hergestellt sind. Das Seltsame daran ist, dass dieser hier oben einen Namen hat und dieser hier nicht , obwohl er Frame One heißt. Ich kann das Wort Features hier sehen, aber nicht für Frame eins. Das passiert nur , wenn das draußen ist. Siehst du? Wem ich jetzt einen Namen habe. Aber ich habe keinen Namen. Also alle Dinge finden, du sagst, die haben einen Namen , der keinen Namen hat. Das liegt einfach daran, dass sie nicht verschachtelt sind, was nur bedeutet, dass sich innerhalb eines Rahmens ein Rahmen befindet. Der Name verschwindet. Oh, Dan. Das soll Ihnen helfen, weniger verwirrt zu sein, wenn es um Frames geht. Aber lass uns einfach weitermachen. In Ordnung. Mach weiter. Das sind Frames versus Gruppen in einer Figur. Eine Sache ist, sollte ich niemals Gruppen verwenden? Sind sie schlecht? Sie sind nicht schlecht. Ihnen fehlen nur einige Funktionen. Wenn Sie also Gruppen verwenden möchten, können Sie sie verwenden. Wenn Sie sie für andere Dinge benötigen, wie zum Beispiel das Zuschneiden oder das Einschränken , wo es an den Kanten haftet, dann müssen Sie Rahmen verwenden Aber an einer Gruppe ist nichts falsch . Die Leute benutzen aber nur Frames In Ordnung. Das ist es. Ich werde dich im nächsten Video sehen. 16. Klassenprojekt 02 - Wireframe: Hallo. Es ist Klassenprojekt Nummer zwei. Wir bauen unser Wireframe auf eine vollständigere Version aus auf eine vollständigere Version Also im Grunde nur das . Wir haben diesen Teil quasi zusammen gebaut. Ich möchte, dass du diese anderen Seiten ausbaust. Sie sind nicht besonders schwer, weil sie nur Rechtecke mit einem bestimmten Typ Ich habe hier etwas Platzhaltertext eingefügt, nur mit Xs. Es muss nicht genau so sein, wie ich es habe, sondern einfach etwas Ähnliches Wir wollen uns bei der Bearbeitung relativ ähnlich sein , weil wir gemeinsam Dinge bauen werden. Also, selbst wenn du anderer Meinung bist, nein, sie sollten nicht da sein Mach es ähnlich wie Okay. Die einzige andere Sache ist der Pfeil. Wir haben uns mit Pfeilen befasst, also musst du vielleicht zu diesem zurückkehren. Aber ja, baue das einfach für die drei Seiten aus. Wir folgen unserem Aufgabenablauf. Falls Sie sich bei all dem nicht sicher sind, denken Sie daran, dass das Dokument in den Übungsdateien Klassenprojekte enthält. Es gibt ein PDF mit Klassenprojekten. kannst du dir ansehen. Da wir diesen Aufgabenablauf verwenden, den wir uns zuvor angesehen haben. Wir sind dabei, die Produktfunktionen auf der Startseite, die Checkup-Seite und die Bestätigungsseite zu erstellen die Checkup-Seite und die Bestätigungsseite Das ist es, was wir bauen. Denken Sie daran, wählen Sie eine einfache Farbe und nur eine einfache Schrift. Es ist wahrscheinlich auch ein guter Zeitpunkt, um zu erwähnen , dass es illegale Schriftarten gibt, die Sie auswählen können. Sie können sich nicht für Papyrus, Comic Sans, Times New Roman, Luft- oder Pinselschrift entscheiden Comic Sans, Times New Roman, Luft- oder Pinselschrift Damit wirst du eingesperrt. Also jede andere Schrift als diese. Wenn du fertig bist, möchte ich, dass du einen Screenshot von allem machst. Es gibt also eine Möglichkeit, Frames zu exportieren. Im Moment weiß ich, dass ich auf einem Mac die Befehlstaste und die Umschalttaste 4 gedrückt halten und ein Kästchen um sie herum anklicken und ziehen kann , und ich erhalte so einen praktischen Screenshot , der auf meinem Desktop erscheint. PC, ich bin mir nicht ganz sicher, was es ist. Überprüfe einfach noch einmal, was es auf einem PC ist. Die verschiedenen Versionen unterscheiden sich geringfügig. Oder machen Sie ein Foto mit Ihrem Telefon und laden Sie es dann in den Aufgabenbereich dieser Website hoch. Okay, du wirst einen Ort finden , an dem du sie ablegen kannst. Und für die Leute, die bis zum Ende rumhängen , bekommst du einen Bonus. Sie werden feststellen, dass MO diese nicht ganz oben hat, weil ich dachte, oh, kopiere das einfach und klicke auf dieses Feature und füge es ein. Du meinst, hm? Aber warum ist das da? Es ist wegen einiger Seltsamkeiten, die ich dir eigentlich zeigen möchte passiert normalerweise nicht, aber in diesem Fall ist es passiert, und ich dachte , ich behalte es im Video Also Scotts Brieftasche ist auf dieser Homepage. Kannst du die Homepage sehen? Im Laos-Panel, da drinnen, quasi eingerückt, steht Scott Aber so wie hier, du hängst irgendwie auf keiner Seite rum. Es ist nicht bei der Bestätigung. Es ist nicht auf dem Bildschirm, Checkout, Funktionen oder Homepage. Es ist einfach, alleine rumzuhängen. Das ist mein Burger-Menü. Deshalb kopiert es das, wenn du es auswählst, damit es weiß, wo es sich auf der Seite befindet. Dieses Ding weiß nicht wirklich, wo es hin muss. Wenn ich es also kopiere und einfüge, wird es einfach auf die Feature-Seite geworfen und es ist wie, M, das passiert ab und zu. Nicht sehr oft, oft. Wie dem auch sei, ich werde nur sichergehen, dass dieses Burger-Menü auf meiner Homepage ist , wo bis dahin, das muss nur sichergehen, dass es hier drin ist. Kannst du mit der Maus darüber fahren und gehen, Wow da drinnen. Wenn ich jetzt beide auswähle und zum Kopieren gehe, klicke ich auf das Wort Funktionen und füge es ein. Es ist an der richtigen Stelle Das ist eine Eigenart von Figma. Es passiert hin und wieder, wenn sich Dinge nicht innerhalb des Rahmens befinden , den Sie hätten haben müssen Das hängt einfach von alleine rum. Ich weiß nicht, wie ich das gemacht habe. Da hast du's. Am Ende gibt es da noch einen kleinen Bonus-Tipp für dich. Mach dein Projekt und wir sehen uns im nächsten Video. 17. Wo bekomme ich kostenlose Symbole für Figma?: Hallo. Hallo, wir werden über kostenlose Icons sprechen. Es sind viele online. Ich werde Ihnen gute Orte zeigen, an denen Sie sie sowohl von Websites als auch von der Figma-Community erhalten von Websites als auch von der Figma-Community Ich zeige dir, welche Dateitypen wir benötigen und wie man sie bereinigt, um sie nutzbar zu machen Lass uns reinspringen. In Ordnung. Es gibt viele Orte, an denen man kostenlose Icons finden kann. Ich benutze iconfnder.com. Ich mag es Ich habe eine kostenlose benutzt. Lass uns ein Symbol suchen und über die Vor- und Nachteile sprechen Ich werde eintippen. Ich brauche einen Einkaufswagen. Also gib den Einkaufswagen ein. Ein paar Dinge, vor denen Sie vorsichtig sein sollten , hängen davon ab, wie Sie das verwenden Nehmen wir an, wir verwenden es nur zum Üben im Studium, Sie können jedes davon verwenden Diejenigen, die dir gefallen , sind kostenlos und kostenpflichtig, also werde ich für diesen Kurs kostenlos wählen. Du könntest für sie bezahlen, das ist in Ordnung. Wir suchen nach. Die andere Sache ist, wenn ich sie kommerziell nutzen will, also für die Arbeit, muss ich sicherstellen, dass ich sie kommerziell nutze. Nun, für einige dieser kommerziellen Zwecke benötigen Sie einen sogenannten Backlink Wenn Sie mit der Maus darüber fahren, heißt es, dass Sie einen Link zurück zur Website des Designers hinzufügen müssen Sie lassen es dich benutzen, aber du musst es irgendwo auf deiner Website oder App tun, du musst einen Link zurücksetzen, um zu sagen: Hier habe ich diesen Spaß Vielleicht suchst du nach einem Einkaufswagen, der kommerziell genutzt wird, aber es gibt keinen Backlink Da ich es einfach frei verwenden kann ohne den Ersteller angeben zu müssen Also, wonach suche ich? Finde im Grunde etwas, das dir gefällt. Ich mag diesen. Ich werde darauf klicken. Es gibt verschiedene Möglichkeiten , es herunterzuladen. Es gibt PNG und SVG. Sie kennen PNG wahrscheinlich. Ähm, weißt du, es ist nur eine Bilddatei. Es hat Transparenz, was perfekt ist, und dann gibt es EfGi, das für diesen Fall besser ist Schauen wir uns also beide an. Ich werde ein PNG herunterladen. Es werden 28 Pixel sein. Ich werde es herunterladen. In Ordnung. Ich werde auf Speichern klicken. Sie können das PNG einfach in die Zwischenablage kopieren und dann zu Figma gehen und einfach zum Einfügen gehen, weil ich es gerade kopiert und eingefügt Okay, das ist offensichtlich ein schnellerer Weg oder du kannst es herunterladen, wenn du es brauchst, um es Wie dem auch sei, schauen wir uns den anderen an. Gehen wir zu EFG. Lass es uns herunterladen, weil ich dir ein paar Sachen zeigen möchte Ich lade auch SVG herunter und werde die Zwischenablage kopieren und einfügen Du sagst, sie sehen irgendwie gleich aus, Dan. Wenn ich mir beide schnappe und sie vergrößere, denke daran, dass unser Skalierungswerkzeug das K-Tool ist. Okay, und ich werde sie vergrößern. Kannst du den Unterschied zwischen SVG hier und PNG hier sehen? PNG besteht aus Pixeln. Es ist transparent, was cool ist, aber es ist nicht skalierbar. Das ist es, was SVG für skalierbare Vektorgrafik steht. Ich werde mir das schnappen und es ist skalierbar und es ist transparent. Sie können natürlich ein größeres PNG bekommen. Ich kann hier reingehen und sagen, ich will ein PNG, Dan, wenn ich es groß mache, wird es funktionieren. die Zwischenablage kopieren. Perfekt. Bei dieser Größe ist es schön und klar. Es besteht jedoch immer noch aus Pixeln. Irgendwann, wenn ich es vergrößere, werde ich anfangen, sie zu sehen. Man sieht die kleine Unschärfe draußen. Die andere Sache ist, wenn ich es herunterlade, möchte ich dir zeigen, dass du es nochmal herunterlädst Schauen wir uns die Größen an. Okay, SVG ist also ziemlich klein. Es sind 500 Byte. Da ist das erste PNG, das kleine, das zu klein war, oder? Und es ist ziemlich nah an der Dateigröße. Aber sobald ich ein größeres PNG mache, ist die Dateigröße viel größer. Also 5 Kilobyte. Das sind Bytes, das sind Kilobyte. Das sind 5.000 Byte. Es ist also zehnmal so groß. Und wenn es um Web- und App-Design geht, möchten Sie, dass diese Symbole bei der Erstellung einer Website superklein sind, superschnell geladen und skalierbar sind. SVGs gewinnen Der andere Vorteil für SVGs ist , dass Sie diesen loswerden. Außerdem sind sie farblich veränderbar. Schau dir das an. Ich kann darauf doppelklicken, um hineinzugehen. Ich bin im Objektbearbeitungsmodus und kann sagen, dass Sie jetzt rot sind. Bei PNGs kann ich das nicht so einfach. Ich muss zu etwas springen und es schwieriger neu einfärben es schwieriger SVG ist für den Wind. Manchmal ziehen Sie jedoch ein Symbol mit weißem Hintergrund herunter . Es wird einfach so weitergehen. Manchmal sind sie an, manchmal nicht. Kannst du jetzt sehen, dass es nicht durchsichtig ist? Weil es außen einen Rahmen hatte , der weiß im Hintergrund war. Sie können das beheben, indem Sie. Lass uns einen Blick darauf werfen. Lasst uns das loswerden. SVGs, wenn man sie von anderen Leuten bekommt, von Websites, sind oft ein Chaos Das Durcheinander ist, dass es einen Rahmen gibt und in diesem Rahmen ein Rechteck und meine kleine Vektorzeichnung , die ich vom Einkaufswagen haben will Ich brauche diesen anderen Müll nicht. Ich kann es einfach in meinem Rahmen auswählen . Hier ist mein Vektor. Ich möchte sie aus diesem Rahmen herausziehen und dieser Rahmen hier ist jetzt nicht sehr nützlich. Ich kann sie danach aufräumen. Am Ende machst du das ziemlich oft , wenn du mit den SVGs anderer Leute arbeitest SVGs anderer Leute , so wie Figma mit ihnen umgeht Sie sind kompliziert, ich weiß, Sicherheit komplizierter als PNG, aber das ist genau der Weg, den wir gehen müssen Die andere nette Sache an SVGs ist, wenn ich auf sie doppelklicke, kannst du anfangen, diese Punkte zu sehen Wir haben diese Punkte gesehen, als wir mit dieser Linie gearbeitet haben. Schau dir das an. Zouk. Sie können damit beginnen, sie auf dem Mad Max-Trolley anzupassen. Super schnell Ein weiterer guter Ort , um kostenlose Symbole zu erhalten ist von Figma selbst Es hat eine Community. Ich werde hier zu dieser kleinen Home-Ikone zurückkehren. Ich gehe zu Vorlage und Tools. Sie benennen das ständig um Manchmal heißt es Community und manchmal gab es hier unten eine Schaltfläche und dann war da oben eine Schaltfläche. Halte einfach Ausschau danach, wo sie hingegangen sein könnte Jedes Mal, wenn ich das ändere, ändere ich es. Also aus der Community, ich werde diese Community durchsuchen, ich werde Symbole eingeben, und was Sie finden werden, ist, dass es hier in Gruppen jede Menge brillantes Zeug gibt . Nehmen wir an, ich möchte Heldensymbole verwenden, ist ein sehr verbreitetes Symbol. Es ist eine Gruppe von Icons, die viele Designer und Entwickler verwenden werden. Ich werde das öffnen. Es ist eigentlich egal , welche du benutzt. Du suchst nach dem Stil, den du magst. Das wird ein gutes Argument ansprechen. Ich öffne im Grunde die Akte von jemand anderem. Das ist die Vorschau. Ich bin in die Community gegangen und habe etwas gefunden, das mir gefallen hat. Hier gibt es noch viele andere Dinge wie Wireframes von anderen Leuten, Mockups oder komplette Wir werden später noch einmal darauf eingehen. Im Moment heißt es aber, ich möchte das in Figma öffnen, was seltsam ist Du überprüfst es nicht. Du öffnest es tatsächlich und jetzt gehört diese Kopie dir. Was ich damit meine, ist bei Hero Icons, wenn ich zurück nach Hause gehe, das hier schließe und zu meinen Entwürfen gehe Das ist quasi der Ort, an dem wir angefangen haben. Da ist der Aufgabenablauf, da ist der Wireframe , an dem wir gerade arbeiten Und jetzt ist Hero Icons eine Datei, die ich habe. Es ist in der Cloud, aber denken Sie jetzt daran auf Ihrem Desktop. Es ist wie deine Datei. Es ist nicht mit dem Original verbunden. Das kann ein bisschen chaotisch Ich habe, wenn du viele verschiedene Symbole öffnest , stapeln sie sich hier. Was du also tun kannst, ist, wenn du das Zeug gefunden hast und es vielleicht von hier weggeholt hast, kannst du zu diesem Home-Tab zurückkehren, rechten Maustaste klicken und es in den Papierkorb verschieben, damit du es aufgeräumt hältst Wenn Sie also viele verschiedene Vorlagen durchgehen, Community-Inhalte anderer Leute, werden sie Ihre Dokumente durcheinander Ordnung, schauen wir mal hier rein und Sie können eine Menge cooler Sachen in verschiedenen Größen sehen . Das Schöne daran ist, sagen wir mal, so etwas ist eine Haus-Ikone. Das ist ein Gebäude hier. Sie haben eine solide Version im Vergleich zu einer Entwurfsversion. Aber wenn es kleiner wird, können Sie sehen, dass sie es tatsächlich ändern. Wenn es in einer wirklich kleinen Größe betrieben werden muss, gehen viele Details verloren. Sehen Sie, wie die Fenster kleiner werden. Ein Designer hat das durchdacht und gedacht, wenn es so groß ist, sieht es so aus, aber wenn es kleiner ist, passen wir es irgendwie an. Sie können sehen, dass dieser hier etwas aufwändiger ist. Wenn es kleiner wird, wird es nur ein bisschen kleiner, um bei kleinerer Größe besser sichtbar zu sein. Jede Menge coole Sachen hier drin. Eines der anderen Dinge : Wenn du etwas anderes als die Heldensymbole heruntergeladen hast , findest du das vielleicht unter den Seiten hier, es gibt vielleicht ein Deckblatt und dann sind da vielleicht die Symbole. Das haben sie hier getan. Du könntest etwas öffnen, du würdest sagen, ich kann es nicht finden. Weil es Seiten gibt. Wir werden später Seiten zusammen machen, aber schauen Sie mal, vielleicht gibt es noch etwas anderes. Die andere Sache ist der Versuch, die Icons hier zu finden. Sie können suchen, suchen, aber es gibt eine Option. Symbole. Ich kann es mir hier ansehen. Da sind all meine Icons, jede Menge Zeug. Sie sind sehr gut organisiert, aber Sie können eine Suche durchführen. Sie können tun, wonach wir suchen? Einkaufen? Gibt es einen Einkaufsbummel? Ich kann mir vorstellen, dass es einen gibt. Oh, sieh dir das an. Okay? Also ist es direkt darauf eingesprungen Nun, wie ziehe ich es in mein Dokument? Was ich tun werde, ist zu sagen: In Ordnung, ich mag diesen Typen hier, doppelklicken Sie darauf, um reinzugehen Nun, hier wird es ein bisschen chaotisch. Ich werde die Suche beenden. Da ist es da. Ich doppelklicke erneut darauf. Okay? Also war es innerhalb einer Gruppe. Jetzt ist es wieder drinnen. Ich kann wieder reingehen und dort direkt zum Vektor gehen. Okay? Weißt du, am Ende hast du diesen Objektbearbeitungsmodus. weißt du, dass du tief genug gegangen bist , weil es Gruppen innerhalb von Gruppen innerhalb von Gruppen sein könnten . Sie versuchen also, diese zu finden. Ich werde es kopieren und dann zu meinem anderen Tab wechseln. Oh, kurze Zeit. Befehl eins, zwei, drei auf einem Mac, Steuerung eins, zwei, drei. Wir werden hier oben zwischen diesen Tabs wechseln. Wenn du vier Dinge geöffnet hast, kannst du eins, zwei, drei, vier wählen. Wenn du nichts geöffnet hast, kannst du nur zu Command or Control 1 wechseln . Das ist nur die Heimatbasis. Ich kann zurück zu Befehl zwei wechseln, einfügen und los geht's. Ich benutze mein Skalierungswerkzeug, Juk Okay, und wir haben das Symbol von jemand anderem Eine letzte Sache, die passieren könnte, ist, dass Sie, sagen wir, es ist dieses und ich nehme einfach , dass ich glaube, ich habe es, und ich werde Befehl zwei, Steuerung zwei auf einem PC drücken, den ich einfüge Ich will dir zeigen, dass ich es habe. Aber es hat dieses komische Symbol hier drüben. Im Grunde sieht dieses kleine Symbol hier und diese kleine Gruppe hier komisch aus. Es hat eine lila Farbe. Es liegt daran, dass es eine Instanz ist. Wir werden uns später Fälle ansehen. Es ist zu weit von dem entfernt, wo wir jetzt sind, aber du kannst dann gehen, okay, was ist das alles? Denken Sie daran, ich kann hineingehen, sagen, ich will Sie, ich kann es entweder ausschneiden und einfügen, es kommt heraus und dieser kleine Container , der als Instanz bezeichnet wird, kann gelöscht werden und wir haben wieder unseren Vektor. Ich glaube, ich will dir das zeigen, weil du nach Sachen suchen wirst und du denkst, was ist dieser ganze Müll Im Grunde wollen wir nur den Vektor später herausziehen , wenn wir wissen, was eine Instanz ist, sie werden nützlich sein Aber wir wissen noch nicht, welche das sind. Schnapp dir den Vektor. In Ordnung, davon brauchen wir momentan nichts. Alles in allem haben wir herausgefunden , wo wir sie herbekommen können. Ich werde dir einen anderen Ort zeigen, wo du sie bekommen kannst, bevor wir es zu einem Klassenprojekt machen. Aber das werden wir in einem anderen Video machen, weil es eine andere Funktionsseite von Figma ist, die Plugins genannt wird. Das ist es in Figma mit Icons arbeiten, versuchen Sie SVGs zu finden und versuchen Sie, den Vektorteil dieses Icons herauszukramen, den Rahmen in jeder Instanz, die ihn umschließt, wegwerfen habe ein nettes Tastenkürzel gelernt: Befehl oder Strg, eins, zwei, drei, wir springen Beeindrucken Sie Ihre Kollegen mit Ihrem Tab-Jumping . Wir sehen uns im nächsten Video. 18. Wie man Plugins in Figma für Symbole verwendet: Hallo. Hallo, wir werden uns die Plug-ins in Figma ansehen Plug-ins in Figma Im Grunde ist ein Plugin ein kleines Mini-Programm , das innerhalb von Figma läuft, um es irgendwie zu erweitern Okay, es könnte das Finden von Schriften und Bildern sein. Es kann alle möglichen Dinge tun. Hey, es gibt viele verschiedene Plug-ins. Ich zeige Ihnen, wie Sie sie im Figma-Designdokument finden , auch in der Community Es gibt eine sehr leistungsstarke Möglichkeit, Figma zu erweitern , die für uns sehr nützlich Also tauche ein und ich zeige dir , wie du sie findest und benutzt . Richtig, Plug-ins. Sie finden sie hier unter Aktionen. Sie bewegen das. Jedes Mal, wenn ich dieses Video aufnehme, ist es irgendwo neu. Sie sehen sich ein wenig um. Wir suchen nach Aktionen, und wir werden zu dieser Aktion namens Plugins und Widgets übergehen . Also werden wir uns jetzt die Plug-ins ansehen. Wir werden uns später Widgets ansehen. Schauen wir uns etwas an, das wir bereits wissen, also schauen wir uns die Symbole an. Ich werde Heldensymbole eingeben. Weil das ist, für das wir das Community-Dokument gefunden haben . Es ist nicht wirklich wichtig, aber es gibt zufällig auch ein Plugin dafür, anstatt das Community-Dokument zu öffnen, in den Dateien zu suchen und es dann einzufügen. Das bedeutet, dass Sie nur ein kleines Mini-Programm einbauen, das auf Ihrem Bildschirm läuft. Es ist einfach einfacher, als Dateien zu durchsuchen Ich kann hier reingehen und sagen, ich will die Kontoseite. Sie haben ein Konto, lass uns loslegen. Es gibt kein Konto. Ich suche eine Person. Mann. Haben sie überhaupt einen? Kundenbetreuer, Mann, Frau, niemand. Komm schon, Brain. Lass uns aufgeben. Lass uns buchen gehen. Okay, es gibt also ein Buch. Lass uns dieses Lesezeichen verwenden Sie können also darauf klicken und es einfach herausziehen und schon haben Sie ein Symbol, das sofort einsatzbereit ist Schau dir das an. Super cool, super schnell, super einfach. Denken Sie daran, es ist in einem Rahmen mit einem Vektor im Inneren dargestellt. Es ist nichts Falsches daran, einen Rahmen zu haben. Ich glaube, in den letzten paar Videos habe ich gesagt, werde den Rahmen los. Nein, es ist wie eine Gruppe. Da ist der Vektor drin. Es hält es in einem schönen Quadrat. Daran ist nichts falsch. Manchmal haben sie jedoch einen weißen Hintergrund. Sie können sehen, wie man den Augapfel ausschaltet, um ihn zu verstecken. Manchmal kommen sie damit durch und du kannst es ausschalten Manchmal wird oft ein Rahmen verwendet, weil wir einen anderen herausziehen , damit sie aneinandergereiht werden können. Kannst du das sehen? Es handelt sich um Vektoren unterschiedlicher Größe, aber lassen Sie uns beide auswählen. Sie sind auf demselben Quadrat, wenn du weißt, was ich meine? Das ist praktisch für Icons , weil sie dieselbe Höhe mal Breite haben, also 24 mal 24 vom Aussehen her. Du musst es nicht loswerden. Ich mache dir nur den Rahmen bewusst, denn was am Ende passiert, ist, lass uns etwas anderes finden, lass uns etwas mit Bits finden. Da haben wir's. Das hier, manchmal mache ich das und du sagst, okay, ich will diesen Teil loswerden und dann diesen Teil, und du hast am Ende Müll übrig weil es diesen Frame gibt , den ich nicht Hier drüben kann ich es sehen. Da ist nichts drin. Ich kann es löschen. Ich gewöhne dich daran. Sie können Plug-ins auch auf andere Weise finden. Ich werde diese Typen loswerden. Oh, siehst du, ich habe es dort gemacht. Ich habe die Rahmen nicht losgeworden. Ich habe die Innenseiten losgeworden. Ich dachte, ich hätte es getan Ich habe einfach keine ausreichend große Auswahl um sie gezogen , bevor ich sie gelöscht habe. Gehen wir also zur Community und dann zu Vorlagen und Tools, die früher Community genannt wurden, die sie immer noch Community nennen. Und lass uns zu den Plug-ins gehen. Tatsächlich gibt es ein Set, in dem es heißt speziell Find-Me-Plug-ins für die Dateiorganisation gibt. Da ist viel drin. Mein Rat an Sie ist, nach diesem Video einfach 5 Minuten damit zu verbringen, sich die Plug-ins anzusehen. Sie werden überrascht sein, wie viele Dinge hier in Figma für uns gemacht wurden Es ist wirklich nützlich. Wenn es etwas gibt, das du wiederholt machst oder etwas Seltsames für deinen Job , dass du diese andere Firma benutzt, Splash oder eine Archivseite oder eine Datenbank, wirst du wahrscheinlich feststellen, dass jemand ein Plug-In erstellt Hier gibt es so viel. Nehmen Sie sich etwas Zeit und schauen Sie sich bei der Bearbeitung von Effekten um. Zu den Plugins, da sind wir. Der Grund, warum dieser Weg so nützlich ist, ist, dass man oft sagen kann, ich will die kostenlosen. Die andere Sache, die hier praktisch ist, ist, sagen wir, iconfy. Lass uns eine Suche machen. Lass uns gehen, Ikone, Pio? Es soll ein Unternehmen sein, aber es gibt viele verschiedene Leute. Ich habe knifi alle Produkte eingegeben, denen ich Plugins zeigen möchte. Du kannst diese Ikonofie sehen, es gibt noch eine andere Ikonofie. Sie können es sich ansehen und sagen: A, dieser wurde von 23.000 Menschen benutzt, was nach einer Menge klingt, bis Sie diesen sehen und dieser wurde von 3,5 Millionen Wenn du neu bist, ist das ein gutes Signal, zu gehen. Ordnung. Viele Leute benutzen diesen. Das ist wahrscheinlich der, den ich will. Es sind dieselben Plugins. Wir können es einfach anders angehen, entweder über die Community oder über unser Design-Dokument. Ich werde es öffnen , in der Datei, an der wir gerade arbeiten, dort arbeiten wir, und da ist mein Plug-In. Hier ist es. Sie werden feststellen, dass alle Plugins unterschiedlich gemacht sind , da es keine Konsistenz gibt. Ich habe dir gezeigt , wie man dieses benutzt, ganz anders als das Hero-Icon. Also einige von ihnen sind wirklich groß, wie dieser hier, es ist ziemlich im Weg. Der andere Herro Con war ziemlich klein. Dieser hier hat ein paar coole Funktionen wie das, wenn ich gehe, ich mag diesen hier. Ich kann entscheiden, welche Farbe es hat, bevor ich zu Figma komme, und ich kann entscheiden, welche Größe es haben muss Es wird ein SVG sein und ich kann es als Rahmen oder als Komponente importieren Wenn wir später im Kurs weiter fortgeschritten sind, könnten Sie zu diesem Thema übergehen . Das erspart uns später einen Schritt. Aber im Moment wissen wir, was ein Rahmen ist. Wir werden das reinbringen. Wo ist es hingegangen? Nur auf meiner Seite kannst du sie einfach herausziehen als. Okay. Denk dran, sie sind nicht von FIGMA, wenn sie nicht funktionieren, es könnte sein, dass sie nicht mehr unterstützt werden oder sie sind ein neues Plug-In und da ist ein armes Mädchen, das versucht, den Plug In in ihren Mittagspausen am Leben zu halten Manchmal denkt man : Oh, das sollte funktionieren, aber das tut es nicht Warum funktioniert es nicht? Plug-ins werden von der Community erstellt, manchmal von Unternehmen, aber nicht von FIGMA Die eine Sache hier unten, die ich auch erwähnen möchte, ist, suchen wir uns eine andere. Lass uns auf Unsplash gehen Eine wirklich gute für kostenlose Stockbilder. Wenn ich danach suche, gehe ich zu Plugins und Widgets und sagen wir mal , klicke auf dieses. Das gibt mir eine kleine Vorschau. Du hast Run and Save. Okay? Lauf ist der, den du willst. Es läuft einfach in diesem Dokument. Okay, ich fange einfach an zu arbeiten. Das ist der, den du willst. Speichern speichert es für Ihre Organisation Wenn Sie FIGMA also als Teil eines größeren Teams verwenden , z. B. in einer Organisation und einem großen Unternehmen mit mehreren Figma-Benutzern, können Sie es speichern, und das bedeutet, dass jeder Zugriff darauf hat In den meisten Fällen möchten Sie es jedoch nur ausführen . Da haben wir's. Schrägstrich. In Ordnung, es gibt jede Menge Plugins, und das ist deine Einführung in Plugins letzte Sache ist, wenn du zurück nach unten und hier in deinem Aktionen-Menü gehst , wirst du sehen, dass es aktuelle gibt, sodass du sie nicht jedes Mal durchsuchen musst . Alles, das ist es. Das sind Plug-ins innerhalb von Figma. Wir werden uns im Kurs noch ein paar Buchstaben ansehen, aber das ist ein gutes Intro Lass uns zum nächsten Video übergehen. 19. Klassenprojekt 03 - Symbole: Hallo, es sind keine Hausaufgaben, sondern super lustige Klassenprojektzeit. Ich möchte, dass du drei Icons für deine Seite findest. A, ich möchte, dass du einen Einkaufswagen im Bild und ein Erfolgssymbol findest. Schauen wir uns meinen an. Das Einkaufswagensymbol erscheint also auf jeder Seite, hier oben, okay? Und das Bildsymbol, wir werden es gegen die Kreuze austauschen, okay? Es ist also wirklich üblich , ein solches generisch aussehendes Platzhaltersymbol für Imanbilder zu verwenden generisch aussehendes Platzhaltersymbol für Imanbilder Okay, also ich möchte, dass du das dort auswechselst , wo du es benutzt hast Und auch auf der Bestätigungsseite findest du irgendeine Art von guter Arbeit. Du hast es geschafft, Icon. Es muss kein Tipp sein. Es kann ein Ti sein. Ihr Bild kann anders aussehen als meins. Ihr Einkaufswagen könnte eine Einkaufstasche sein. Das hängt von Ihrem Produkt ab. Sie finden einen guten Platz für einen anderen, Sie können mehr als drei haben. Das ist in Ordnung. Ein paar Dinge, die ich dir zeigen möchte, bevor wir weitermachen, sind ein kleiner Trick. Diejenigen unter Ihnen, die die Hausaufgaben machen und sie nicht übersprungen haben, können gewinnen. Ich werde diesen kopieren Ich muss sichergehen, dass ich mir den Rahmen geschnappt habe , der meinen Vektor enthält, oder nur den Vektor, falls du ihn ausgeräumt hast Ich werde auf Funktionen klicken. Klicke auf den Seitennamen und ich drücke auf Einfügen. Ich gehe an derselben Position auf diese Seite. Gleiche gilt für diesen. Halten Sie die Umschalttaste gedrückt, nehmen Sie beide und fügen Sie sie ein. Landet auf beiden Seiten. Schau uns an. Es eignet sich hervorragend für Navigationen oder alles , was auf der gesamten Seite konsistent ist Konsistent auf vielen Seiten. Stellen Sie sich vor, Sie haben, ich weiß nicht, 20 oder 30 dieser Frames für Ihr Handy, verschiedene Seiten. Sie können sie ganz einfach in viele von ihnen einfügen. Die andere Sache, die ich Ihnen zeigen möchte, ist, dass ich das IConfiPlug In verwendet habe das IConfiPlug In verwendet Sie können sie vom Icon Finder abrufen. Sie können sie von überall in der Community bekommen. Mir ist egal, wo du sie herbekommst. Ich werde jetzt in die Vergangenheit reisen und Ihnen einige der Probleme zeigen , die ich habe, ich weiß nicht, nur um Ihnen weiterhin einige der Macken von Figma zu zeigen , wenn Symbole von anderen Leuten importieren Gut, lass es mich dir jetzt zeigen. Also habe ich Icon Phi benutzt und einfach ein paar Versionen davon rausgezogen Ich bin hier auf dieser Seite gelandet, und hier ist es komisch. Lass uns rauszoomen. Nehmen wir an, ich ziehe das hier hoch, das hat gut funktioniert. Die Vektoren innerhalb des Rahmens, ich lasse es so , und es ist da oben. Das hier, ich werde den Vektor herausziehen , der aus diesem Rahmen kam, der Rahmen ist immer noch hier unten. Das ist nur eines der seltsamen Dinge an FIGMA. Das ist okay. Wir gewöhnen uns dran. Das Komische daran ist, dass, wenn ich auf diesen Vektor klicke, es ein Vektor in diesem Ding ist, der Ix-Erfolg heißt. Irgendwie habe ich auf den Vektor geklickt und nicht auf den Rahmen. Wenn ich auf den Rahmen klicke und ihn dann herausziehe , erhalte ich das Ganze Manchmal kann man den Vektor vergrößern und hat ihn nicht verstanden, Dan. Die andere Sache, die es zu beachten gilt, ist, dass ich den ersten rückgängig machen werde. Dieses Symbol hier befindet sich meiner Feature-Seite, weil es so aussieht. Schau, da ist es da. Das andere, wenn ich auf dieses hier klicke, das Erfolgs-Fenster, hängt in Wirklichkeit mein Ebenen-Panel raus, nicht innerhalb von Features. Es ist einfach oben. Stellen Sie sich vor, Sie kennen sich mit Schichten aus, Sie werden es wissen. Aber wenn Sie das nicht tun, bedeutet das nur, dass es so aussieht, als ob es darüber liegt, aber es befindet sich nicht wirklich innerhalb des übergeordneten Frames, der als Features bezeichnet wird. Was ich tun werde, ist nur etwas, worauf Sie achten sollten, und ich werde Sie in der Klasse immer wieder daran erinnern , weil wir dann erwischt Ich werde sagen, Sie wählen den gesamten übergeordneten Frame aus und dann ziehe ich ihn Okay, jetzt ist es komplett draußen. Das ist in Ordnung. Das Gleiche gilt für diesen. Er hat keine Features mehr, also ist er nicht mehr da drin, und dann dieser hier drin, ich habe den Vektor versehentlich wieder genommen, ich nehme den übergeordneten Frame und ziehe ihn raus Jetzt hängen diese Typen rum, nicht an irgendwas, und ich werde etwas konkreter sein Manchmal ist es einfacher, einfach hineinzuzoomen , weil es einfacher ist, die kleinen Namen zu finden. In diesem Fall ist es ein Punkt Punkt, weil er ziemlich klein ist. Ich werde es zu einer letzten Sache hinzufügen, die ich Ihnen zeigen möchte, ist, dass ich mir drei verschiedene geschnappt habe Sie stammten aus derselben Familie. Sie stimmen größenmäßig überein. Aber dieser tut es nicht. Was ich tun muss, ist, es hochzuziehen und ein bisschen größer zu machen . Der Grund, warum das kam, ist 24 mal 24. Der ist 24 mal 24. Dieser kam um 16 Uhr. Jetzt kann ich mein Skelett benutzen, es einfach hochziehen. Es sollte einrasten und abknallen . Bitteschön, 24 mal 24. Jetzt hat es die richtige Größe. Sie können im übergeordneten Frame auswählen und sagen, dass Sie tatsächlich 24 Jahre alt sein werden. Siehst du, da die Abmessungen nach und angegeben werden, weil Höhe und Breite gesperrt sind, werden sie als Seitenverhältnis bezeichnet. Ich mache beides gleichzeitig. War das hilfreich? Ich muss diese Dinge hinzufügen, weil ja, Figma hat einige Macken Die wirklich leichten, sich an sie zu gewöhnen. will ich hier reinwerfen, nur für den Fall, dass du dich verirrst. Und was ich tun könnte, um es ein bisschen netter zu machen , ist, ich werde sagen Ich nenne dieses eine Symbol Bindestrich. Dieses hier. Vielleicht kannst du sie hier oder im Las-Panel doppelklicken . Dieses Bild wird als Symbolbild bezeichnet, und dieses Bild hier wird heißen. Klicken Sie nicht auf diese Schaltfläche. Das ist es, lassen Sie uns das entfernen. Das ist ein kleines Symbol, wenn Sie es anklicken, das dem Entwickler nur sagt wenn Sie diesen Kurs abgeschlossen haben, dass ich damit fertig bin und bereit ist, mit der Entwicklung zu beginnen. Wenn es ausgeschaltet ist, heißt das, dass es nicht ist. Sie werden versehentlich darauf klicken, so wie ich es getan habe. Wir werden uns etwas später mit dem Dev-Modus befassen, und wir werden diesen einen Erfolg oder Technologie nennen. In diesem Stadium ist es nicht wirklich wichtig. Ich werde sie jetzt in mein Dokument schreiben und sie verschieben wie Sie es am Anfang gesehen haben. Ich will dich dort haben. Eigentlich hätte dieser nicht so groß sein müssen , weil ich ihn viel umfangreicher verwenden werde, um dich durchzuarbeiten und das Projekt zu beenden. Wir sehen uns nach dem Klassenprojekt. 20. So verwenden Sie Seiten in Figma: Ordnung, alle zusammen. In diesem Video werden wir uns die aufregende Welt der Seiten ansehen Ich möchte ein eigenes Video haben , weil es ein paar Dinge beinhaltet. Ich möchte einen zusätzlichen Mehrwert hinzufügen, und wir werden ihn brauchen, weil wir im Moment mit nur einer Seite beginnen, unserem mobilen Wireframe, aber wir werden eine Reihe weiterer Seiten hinzufügen , um unsere Persönlichkeit und unseren Aufgabenfluss aufrechtzuerhalten unsere Persönlichkeit und unseren Aufgabenfluss Wir werden diese, an der wir gerade arbeiten, in einer Desktop-Version haben , und ich möchte es dir auch zeigen weil man mit einer Seite ziemlich weit kommen kann, aber irgendwann wird man mit solchen Sachen enden. Das ist eher ein Projekt aus der realen Welt von mir. Es wird chaotisch, am Ende hast du viele verschiedene Seiten. Anstatt nur Seite eins mit all dem Müll drauf zu haben, müssen Sie die Dinge trennen, sodass Sie verschiedene Inhaltsgruppen haben verschiedene Inhaltsgruppen , um die Dinge ein bisschen einfacher zu machen werden wir im Kurs machen. Lass uns loslegen und Seiten in Figma lernen Lass uns gehen. In Ordnung, Pages. Sie erhalten standardmäßig Seite eins. Wenn Sie sie nicht sehen können, befinden Sie sich möglicherweise auf Assets. Vergewissern Sie sich, dass Sie in den Akten sind und Seite eins sehen. Mit einem Dokument kann man ziemlich weit kommen. Du brauchst keine Seiten, werde ich sagen. Du musst sie aber verstehen, denn ja, sie sind praktisch, zusätzliche Seiten zu haben. Und wenn Sie mit den Dokumenten anderer Leute arbeiten. Lassen Sie uns das jetzt durchgehen und sicherstellen, dass Sie in den Akten sind. Nennen wir uns eins. Statt Seite eins ist diese mobile Version und sie wird Wireframe sein, nicht Wi-Fi Lass uns eine neue Seite hinzufügen. Wir sind bei der kleinen Plus-Schaltfläche. Nennen wir das einen Desktop. Wir werden wahrscheinlich Y-Frames überspringen. Ich nenne das einen Desktop und schon hast du zwei Seiten. Diese fühlen sich an wie Seiten, sind aber nur Frames. Gehen wir zum Desktop und erstellen wir einige Seiten. F ist die Abkürzung für das Rahmenwerkzeug oder nimm es dort unten. Ich gehe hier rüber und wir wechseln von Tablet-Phone, Desktop, wir werden zu Pug, Desktop wechseln, 1440 mal Ich weiß nicht, warum Sie 1024 sagen müssen, aber so bezieht sich jeder auf diese Größe Aus irgendeinem Grund nicht 1024. Okay, wie viele von denen wollen vier. Ich werde meine Option unten auf einem Mac auf einem PC verwenden . Zieh das einfach raus. Ich habe zwei oder du könntest dein Copy&Paste benutzen. Klicken Sie einfach zuerst oben auf den Namen und dann auf Command. Wer erinnert sich an welchen Duplikator? Stimmt. Gute Arbeit. Es ist Command D auf dem Mac Control D auf dem PC. Ich habe vier davon. Dann gehen wir zum Shortcut Shift über. Halten Sie die Umschalttaste gedrückt und drücken Sie eins. Damit passt alles auf die Seite. Das gefällt mir. Ich werde das beschleunigen , weil ich kopieren und einfügen werde . Eigentlich weiß ich, was das ist, Homepage. Lassen Sie mich sie kopieren und einfügen, damit sie übereinstimmen. Du wartest dort. Ich werde einfach zwischen diesem und diesem hin- und herwechseln Die Abkürzung, um zwischen den beiden Seiten zu wechseln, ist einfach Seite hoch, Seite runter auf Ihrer Tastatur Möglicherweise haben Sie es der Funktionstaste gesagt , wenn Sie an einem Laptop arbeiten. Ich kopiere, was entkommen war, um mit der Seite nach unten wieder herauszukommen. Das ist schmerzhaft. Das überspringe ich. Lass uns zum Ende springen. Wir werden eine dritte Seite erstellen. Diese wird auf Plus klicken und diese wird eine A-Persona und ein Taskflow sein Nun, auf dieser Seite möchte ich, dass es ganz oben steht, also kann ich auf Halten klicken und es ziehen, sodass es ganz oben angezeigt wird und kein Rahmen Ich werde einfach aus den Übungsdateien reinkommen. Ich werde ein Beispiel aus meiner Person hinzufügen. Sie sollten Ihren Screenshot machen oder von früher herunterladen lassen oder Ich verkleinere die Ansicht ein wenig und füge dann meinen Aufgabenablauf hinzu. Hier gibt es zwei Aufgabenabläufe. Es ist die P&G-Version, die wie ein Screenshot aussieht. Die können wir benutzen Schalten Sie eins, um sie alle reinzuquetschen. Es gibt also einen großartigen Ort, um das Briefing und das, was wir mit dem Dokument machen, aufzuzeichnen. Wie Sie sehen können, brauchen diese Typen keine Frames, um weiterzumachen. Sie können einfach auf eine Sache geworfen werden, die ich Ihnen zeigen möchte , ist , dass, wenn der Aufgabenablauf momentan ein PNG ist, weil es einfach hinzuzufügen ist, aber sehen Sie, wir wollen die Figma-Datei von jemand anderem hinzufügen Sie haben es heruntergeladen, Sie haben es gefunden, es ist auf der Festplatte, jemand hat es mit Ihnen geteilt Es ist am einfachsten, einfach einen Link zu der Datei zu teilen, aber die Leute teilen Figma-Dateien, die eigentliche Datei, Sie können eine lokale Version speichern Ich habe das in Übungsdateien gemacht. Ich zeige es dir bei Hope und eins. Wir gehen zurück zur Startseite und gehen zu diesem kleinen Symbol hier, Import, und wir werden von meinem Computer importieren. Wir werden die Übungsdateien herausfinden. Wir werden Punkt FIG sagen. Man sieht es dort, nicht das Wireframe. Ich nehme den Task-Flow-Punkt ABB. Ich will das, weil es eine funktionierende Datei ist. Ich habe es eingegeben oder ist es da? Das sind statt eines Bildes eigentlich all die Rechtecke und Dinge Anstatt dieses Bilds kann ich das kopieren, zu meinem Was verschieben wir zwei Befehl zurückkehren und sogar zu diesem zurückkehren und dieses PNG loswerden und einfach die eigentlichen Dateien einfügen, denn dann können wir es ändern und modifizieren und die schlechte Schreibweise korrigieren und neue Farben auswählen liegt an Ihnen, aber ich wollte Ihnen auch zeigen, wie Sie die Figma-Dateien anderer Leute importieren können, wenn es sich um Figma-Dateien anderer Leute importieren können, wenn es eine physische Datei handelt Wir werden das Teilen später richtig machen. Warum machen wir uns die Mühe , Seiten durchzugehen? Ich habe es am Anfang erwähnt, aber ich möchte Ihnen ein anderes gutes Beispiel zeigen. Ich gehe nach Hause, ich gehe zu Vorlagen. Lassen Sie uns nach suchen, sagen wir, Sie erstellen eine IOS-App, IOS, wir drücken die Eingabetaste. Wir werden eine finden, die das für IOS 17 hat, lassen Sie uns das öffnen. Und was Sie finden werden, ist offen und Figma, dem wir wissen, dass wir uns darauf einigen werden, wird uns eine lokale Kopie unserer eigenen Version geben Wir arbeiten nicht wirklich daran, es ist jetzt die Person , die das gemacht hat Wir arbeiten gerade an der Version, dass, wenn ich nach Hause gehe und zu meinen letzten gehe, sie da ist Sie ist jetzt tatsächlich auf meinem Computer. Aber wenn ich drin bin, sagst du, oh, es ist nett. Es ist sehr bequem. Es ist nicht viel los. Aber dann stellst du sicher, dass Dateien unter Seiten sind. Schau, Deckung. Protokoll ändern. Erste Schritte. Aber sieh dir das an. Ich kann nach unten scrollen und es gibt viele Seiten für dieses eine bestimmte Dokument. Offensichtlich ist das Betriebssystem für mobile Geräte riesig. Also können wir runtergehen und sagen, können Sie tatsächlich sehen, was sie getan haben, ist, sie gruppiert zu haben? Statt Mobilgerät oder Desktop sie weg, ich möchte das Problem lösen. Lass uns etwas Interessantes finden. Schauen wir uns die Benachrichtigungen an. Super interessant. Aber hier ist eine Seite mit Links zu den Richtlinien für sie und Dingen, die Sie verwenden können. Sie sind jetzt ein bisschen kompliziert, weil sie in sogenannten Komponenten enthalten sind , aber wir werden sie lernen. Sie werden später den Dreh raus bekommen. Aber es gibt Ihnen nur Seitenkontrolle. Schau dir das an. Alle Punkte, die du brauchst, wenn du Popover durchwischst . Also schau Oh. Das ist nur für das iPad, aber es kann passieren, dass Leute Dinge auf Seiten gruppieren, und wenn Sie neu sind, finden Sie es vielleicht nicht oder sind etwas verwirrt oder verlieren sich. Auf den Seiten hier sind viele Dinge versteckt. Ordnung, lassen Sie uns das schließen. Ich gehe wieder hierher und halte alles sauber. Das wirst du nicht. Du wirst hier jede Menge Müll herumliegen haben. Das ist okay. Ich werde hier reingehen und sagen, um für diesen Kurs aufgeräumt zu sein, entferne den Müll Hervorragend. Das ist es. Wir haben ein ganzes Video darüber gemacht, wie man eine Seite hinzufügt. Gute Arbeit, Dan. Hoffe, da war etwas Nützliches für dich drin und wir sehen uns im nächsten Video. 21. Wie man Prototypen in Figma erstellt: Hallo zusammen. In diesem Video werden wir Prototypen erstellen. Eine der leistungsstarken Funktionen von Figma ist die Möglichkeit, unsere Designs nachzuahmen und sie mindestens auf einem virtuellen Telefon und später auf einem physischen Telefon zu testen mindestens auf einem virtuellen Telefon , wo wir uns zu unseren verschiedenen Seiten durchklicken und überprüfen können , wie es funktioniert Wir können es auf eine geeignetere Größe bringen. Wir können die Größen überprüfen, und wir können das offen lassen und weiterarbeiten und die ganze Zeit testen. Das nennt man Prototyping Lassen Sie uns einsteigen und die Grundlagen lernen. Richtig, als Erstes, verschiebe eins einfach so auf dem Bildschirm, dass wir zu dieser Option wechseln , die hier Prototyp genannt wird. Sie werden ziemlich oft zwischen Design und Prototyp hin- und herschalten und sich am Anfang wahrscheinlich ein wenig verirren, weil Prototyp, wenn ich jetzt darauf klicke, alle Design-Dinge verliert, also die Farbe und die Schrift und die Größen Also sei einfach achtsam. Ich werde dich im Laufe des Kurses daran erinnern. Klicken wir auf Prototype. Klicken wir auf diesen ersten Frame. Sie klicken auf die erste Überschrift des Frames, wir gehen zur ausgewählten Startseite. Wir werden beobachten, wie diese Stimme um diesen Punkt schwebt , der hier an den Ecken erscheint Was ich tun kann, ist zu sagen, klicken Sie auf Halten und Ziehen. Geh da hin. Standardmäßig heißt es einfach, dass alles in Ordnung sein wird. Es heißt: Der Auslöser ist, wenn ich darauf tippe, ich navigiere sofort zur Funktionsseite Lassen Sie uns die Seite mit den Funktionen erstellen. Das hier, zieh es einfach hierher. Du kannst es auf diese Weise zurückziehen. Sie können alles ziehen, sehen Sie sich diese Dinge hier an, sie werden Nudeln oder Drähte genannt, und wir werden es von Funktionen auf diese Seite ziehen. Wenn wir dann zur Kasse gehen, werden wir über die Leertaste scrollen und es auf diese Seite ziehen Wir werden alle Standardinteraktionen verwenden. Ordnung. Mach dich bereit. Bist du bereit für den Prototyp? Du machst es, indem diesen kleinen Knopf hier oben drückst. Der kleine Play-Button. Es heißt Geschenk. Bereit, wird geladen. Da ist es. Es ist in einem Telefon. Es ist nicht gut. Hier ist mein ganzes Logo und alles, was darin steckt. Wir werden uns später damit befassen. Okay, sieh dir diesen Kampf an. Klicken Sie einmal. Ich gehe zur nächsten Seite über. Nächste Seite. Nächste Seite. Oh, sehr aufregend. Und dann geht es nirgendwohin, weil wir nichts haben, wo es hingehen kann, wenn es fertig ist. In Ordnung. Wenn Sie sich mit dieser Prototyp-Ansicht befassen, sollten Sie beachten mit dieser Prototyp-Ansicht , dass sie tatsächlich in einem anderen Tab geöffnet wurde. Da ist also der Tab, an dem wir gerade arbeiten. Alles, was es getan hat, war, als wir die Play-Schaltfläche hatten unser Design im Tab geöffnet. Ein paar Dinge, die wir uns ansehen werden , sind, uns das anzusehen. Im Moment gibt es hier nichts, aber wenn du es richtig heftig mit der Maus wackelst, wackle oder klicke im Hintergrund, weg davon. Ich würde sagen, schau, all diese anderen Optionen hier. Die wichtigsten, die Sie sich ansehen werden, sind der Neustart. Sie sehen hier unten Restart oder die Arche. Wir bringen es einfach zurück zum Anfang, damit wir es noch einmal durchgehen können Wunderbar. Hier oben gibt es mehr Optionen. Sie können in den Vollbildmodus wechseln, um das Chrome zu entfernen, wenn Sie möchten, dass es einem Kunden präsentiert wird. Klicken Sie das erneut aus. Hier gibt es mehr Optionen. Ich werde nicht alles durchmachen. Die einzige andere Sache, die Sie tun könnten, ist das auch manuell erledigen können. Also einfach vor und zurück durch das Okay, das kannst du offen lassen. Sie müssen das nicht schließen , wenn Sie fertig sind. Du kannst es einfach dort lassen und es ist live. sehen sich das an, wenn ich darauf klicke. Sie werden feststellen, dass ich die Farbe nicht sehen kann. Warum kann ich die Farbe nicht ändern, Dan? Ja. Ja, stimmt. Ich bin am Prototyp und werde zum Design übergehen. Ich suche mir hier unten eine neue Farbe aus. Ich werde einfach irgendein altes Ding da rein schleppen. Und wenn ich zur Vorschau zurückkehre, muss ich sie nicht wirklich starten. Ich kann es neu starten und Sie können sehen , dass ich wieder hier bin und geöffnet bleiben kann. Ich neige dazu, auf diesen Tab zu klicken und ihn zu ziehen. Ich kann ihn bewegen und sagen, richtig, ich möchte, dass er sich hier auf der rechten Seite befindet. Ich kann auf dieser Seite arbeiten, die jetzt etwas matschig ist Aber es ist ein Live-Update. Ich kann das sagen. Eigentlich möchte ich zu dieser Originalfarbe zurückkehren. Was war es rückgängig machen, rückgängig machen, rückgängig machen. Sie können hier sehen, dass es aktualisiert wird. Und was ich noch mehr mache, ist weniger Seite an Seite. Und ich ziehe das tatsächlich und lasse es öffnen. Was ich tun werde, ist das zu schließen. Normalerweise mache ich eine Vorschau und nehme dann diesen Tab Sie können ihn tatsächlich aus dem Browser auf meinen anderen Desktop ziehen , den Sie nicht sehen können. Ich mache genau das Gleiche. Ich höre zu meinem anderen Dokument. Es liegt an dir. Ich werde es schließen. Eine weitere gute Art der Vorschau ist hier drin, es gibt noch eine andere Anstatt also auf die Play-Taste zu klicken, gibt es eine Vorschau-Schaltfläche Okay? Also, du klickst auf diesen kleinen Chevron hier, diesen kleinen Abwärtspfeil, klickst auf Vorschau und es öffnet sich in einem kleinen Fenster, das bewegt werden kann Es hängt einfach da draußen. Es ist zu groß. Ich kann es verkleinern, um meine Telefonansicht zu vergrößern. Was das wirklich praktisch ist, ist hier, ich kann es sagen, also arbeite ich an der Größe von Click on Features. Kannst du sehen, dass es aktualisiert wird? Ich klicke hier rein und der Produkttext ist einfach zu klein. Ich gehe hier durch und sage bup bup, bup, du kannst sehen, dass es Ich bewege es näher, du greifst da oben drauf, du kannst in meiner Dist-Up-Ansicht beginnen, ich kann ziemlich herangezoomt werden, an Sachen arbeiten und dann gehen, richtig, wie sieht es in Bezug auf die Schriftgröße auf einem mobilen Gerät Schriftgröße Ich entwerfe nicht die falsche Größe. Weil du siehst, dass 99 viel zu klein sind. Also werde ich hier reingehen und einen großen, großen, großen, großen, größeren, größeren, größeren, größeren, größeren, größer, größer machen . Du verstehst die Idee. Shift-Klick, nett und groß. Auch hier können Sie diesen neu starten und schließen , wenn Sie fertig sind. Ich gehe zurück zu meinem Prototypmodus. Sie können diese Kabel löschen, indem Sie einfach auf sie klicken und auf Ihrer Tastatur auf Löschen klicken, sie einfach physisch zu löschen. Klicken Sie auf den Rahmen selbst und klicken Sie hier hinein und klicken Sie auf Löschen , wenn Sie sie entfernen möchten. Ich mache das Rückgängigmachen rückgängig, weil wir sie löschen werden. Das möchte ich tun. Lösch den Kerl, du isst dort. Eigentlich werde ich sie wieder reinlegen , weil ich dir ein paar andere interessante Dinge zeigen will , die dich vielleicht auffallen. Wenn ich an der Kasse bin und spielen gehe, ist es tatsächlich weg, ja, das ist in Ordnung. Wenn ich auf klicke, hast du von der Vorschau zur Gegenwart gewechselt . Welcher Frame auch immer Sie ausgewählt haben, ist der erste , der angezeigt wird Kannst du sehen, dass ich zur Kasse gegangen bin ? Du meinst, das ist nicht die erste Seite Es bedeutet nur, dass das, Sie gerade arbeiten , zuerst angezeigt wird. Wenn du willst, dass es die Startseite für die erste ist, setze ich sie zurück, sie wird auf dieser Seite sein. Eine Sache, die es nicht kann, ist, dass wir das nicht in der richtigen Richtung löschen können. Sie können keine Verbindung zu einer anderen Seite herstellen. Ich bin immer noch im Prototypmodus. Ich kann auf Homepage klicken. Ich kann diesen kleinen Punkt sehen. Das kannst du auf beiden Seiten machen. Es spielt keine Rolle, ob Sie möchten, dass es ganz oben angezeigt wird, geht einfach automatisch an bestimmte Stellen, aber Sie können es nicht auf eine andere Seite bringen. Mag das nicht. Also musst du zu einem anderen Bild wechseln, das ist in Ordnung. Siehst du, sie lassen zu früh los, also ziehst du es rüber und die Leute fragen manchmal hast du nicht den mobilen Rahmen, also gehe ich auf die Homepage und du sagst, wie bin ich an das Handy gekommen oder vielleicht will ich kein iPhone, ich will ein Android oder etwas anderes. Klicken Sie im Prototypmodus auf den Hintergrund, sodass Sie nichts ausgewählt haben Hier können Sie Ihre Prototyp-Einstellungen sehen. Vielleicht möchtest du ein älteres Telefon, wirst du in Zukunft sein. Du kannst es nur in der Zukunft sein. Du hast wahrscheinlich 17, 18, 19, du könntest sagen, richtig, ich will ein Google Pixel Two aus dem Mittelalter. Wenn ich dann ein Geschenk habe, wird es es als Rahmen verwenden. Das Gleiche gilt für den Desktop, gehen wir zum Desktop, nichts ausgewählt ist, können Sie es durchgehen. Ich glaube, ich habe meins geändert. Deiner steht wahrscheinlich auf nichts. Ich habe meins auf das Macbook Pro gelegt , weil es cool aussieht. Und wenn ich eine Vorschau dieser Seite ansehe, ist nichts drauf. Nicht sehr aufregend, aber es ist auf diesem MacBook Pro. Ich gehe zurück zu meinem Handy. Sie können es auf horizontal und vertikal ändern. Sie schneiden nicht besonders gut ab da es sehr ungewöhnlich ist, Mobilgeräte im vertikalen Querformat zu entwerfen , es sei denn Sie entwerfen speziell dafür eine App. Oft nimmt sie die Form eines Tabletts an und lässt sich in der Vorschau nicht besonders gut anzeigen, Vorschau nicht besonders gut weil sie dort eingequetscht wird Lo, da hast du es. In Ordnung, das ist es. Das ist grundlegendes Prototyping. Wir werden etwas Aufregenderes machen als das nächste. Lass uns die Interaktionen löschen. Also klicke ich auf diese und lösche sie einfach. Und verabschiede dich von den Nudeln. Nicht viele Leute nennen sie Navigationsnudeln. Vielleicht bin es nur ich, also seien Sie vorsichtig wenn Sie in das Meeting gehen und über Nudeln sprechen. Wie dem auch sei, lass uns zum nächsten Video übergehen. Lass uns die Tasten verbinden. 22. Prototypanimation und -erleichterung in Figma: Hallo. In diesem Video werden wir uns ansehen, wie Interaktionen zu Schaltflächen hinzugefügt werden und wann wir sie anklicken. All dieser eine hat es nicht getan. Wir werden auf diesen klicken. Kannst du sehen, dass wir dem Übergang zwischen den verschiedenen Frames eine Animation hinzufügen werden Wir werden die Navigation hier oben zum Laufen Erfahren Sie mehr. Oh, leicht Okay, lassen Sie uns Interaktionen zu Schaltflächen hinzufügen und ein paar Animationen dazwischen hinzufügen. Steigen Sie Gut, um anzufangen, stellen Sie sicher, dass Sie sich im Prototypmodus befinden und sicherstellen , dass Sie die alten Nudeln losgeworden Also werde ich dich, dich und dich loswerden . Also gut, und verschiebe eins, damit wir sie alle sehen können. Ordnung, wir haben also Seitenübergänge oder Seite und Wegbeschreibungen gemacht . Was wir jetzt machen werden, ist es tatsächlich mit den Knöpfen zu machen. Wir klicken auf die Schaltfläche Inzwischen, stellen sicher, dass Sie sich auf dem Prototyp befinden, und Sie können sehen, wie Sie die kleinen Punkte hier haben, wie wir es für den gesamten Rahmen getan haben. Wo sie erscheinen, können wir sie verschieben. Wir können es für alles tun. Schau, der Text hier, da ist ein Symbol. Wir haben diesen Button hier. Ich möchte, wenn auf die Schaltfläche „B now“ geklickt wird, auf „ Halten“ klicken und „Ziehen“ auf die Zahlungsseite Wir haben die Seite mit den Funktionen übersprungen. Lassen Sie uns das testen. Drücken Sie die Leertaste , um diese kleine Vorschau zu öffnen Wenn das so ist, werde ich dich dorthin bringen. Wenn ich auf Jetzt klicke, springt es zur Checkout-Seite und überspringt die Seite mit den Funktionen Fantastisch. Ich werde das kleiner machen, damit wir Dinge sehen können. Das andere Nun, bevor wir zu viel weiter gehen, werde ich auf Reset drücken. Ich kann die Knöpfe nicht sehen. Das ist ein guter Punkt, auf den man hinweisen sollte. Wir entwerfen für das Ich scrolle nach oben für das iPhone 16? Und die Knöpfe sind in Ordnung. Sehen Sie sie sich an, aber möglicherweise müssen Sie ältere Telefonmodelle unterstützen. Möglicherweise müssen Sie nur überprüfen, was derzeit die gängigsten Telefone sind, welche Größen sie haben und an einigen von ihnen testen , um sicherzugehen, dass, denn wenn ich darauf zurückkomme, wo ist es? Pixel zwei, wenn sich diese Schaltflächen unter dem Bildschirm befinden, dem Startbildschirm, heißt es Below the Fold. So nennen sie es. Alter Druckbegriff, bei dem ich sie nicht sehen kann und sie auch nicht so wahrscheinlich finde , weil sie hier scrollen müssen. Was ich tun werde, ist, dass sie auf dem Telefon scrollen können. Aber hier drüben kann ich mir das ansehen. Ich kann mir beide schnappen. Das Interessante an Figma ist, dass ich immer noch Dinge bewegen kann, wenn ich an einem Prototyp arbeite , nicht am Design Ich kann die Farbe nicht ändern. Es ist schwer, sie zu erwischen. Ich habe mir dort eine ganze Menge Sachen geschnappt. Ich weiß nicht, was ich mir geschnappt habe. Ich schnappe mir, dass du sie bewegen kannst. Komm schon, Dan. Ich werde reinzoomen. Offensichtlich nicht so nützlich im Prototypmodus, aber Sie können Dinge verschieben. Kannst du meine kleine Vorschau sehen? Ich meine, ich will sie da haben. Das heißt, sie sind auf dem iPhone 16 und diesem alten Handy zu sehen . Und was können wir noch tun? Lass uns diesen Knopf machen. Seien Sie jetzt vorsichtig, von wo aus Sie den Prototyp auswählen. Sie können auf den Text klicken und ihn für den Prototyp auf unsere Funktionsseite bringen , und das wird funktionieren. Der Klickbereich, das, worauf sie klicken müssen, ist der Text , der viel kleiner ist als die eigentliche Schaltfläche. Also werde ich das rückgängig machen und nur sicherstellen, dass ich auf die Schaltfläche klicke. Ich möchte, dass das Ganze ein Button ist. Ich klicke, halte und ziehe. Das nächste, was ich dir zeigen möchte, ist die Animation. Standardmäßig ist es also auf Instant. Ich möchte, dass, wenn auf die Schaltfläche „Weitere Informationen“ geklickt wird, etwas Interessanteres wie Dissolve angezeigt wird. Auflösen ist Wenn du jetzt hier mit der Maus über diesen kleinen Daumen fährst , erhältst du eine kleine Vorschau Dissolve ist eindeutig ziemlich einfach zu verstehen. Animate überspringen Hier gibt es eine Menge verschiedener Animationen. Es fehlen die besten der Welt, Page Peel. Aber deine normalen Leute ziehen ein, ziehen aus. Lass es mich einfach demonstrieren. Ich will da durchgehen, du kannst sie erkunden. Lassen Sie uns den Unterschied machen zwischen, sagen wir, einziehen. Siehst du? Es ist sehr aufregend. Ich schwebe drüber , rutscht da rein. Pass auf, es gibt etwas Spezielleres zum Schieben oder Hineinschieben , das mir sehr gut gefällt Siehst du Slide in, ich schiebe den anderen rein und löse ihn gleichzeitig auf Der weiße da wird rausgeschoben. Lass uns einfach eine Vorschau davon sehen. Hier drüben kann ich darauf klicken. Sie können sehen, wie sich der andere nach links bewegt hat und sich aufgelöst hat, während dieser, der zweite Frame, hereingezogen ist. Das ist ziemlich cool. Einige der anderen Dinge, die wir uns ansehen sollten, sind die Richtung. Wir können es von der anderen Seite zum Laufen bringen. Ich werde zuschlagen. Ich klicke hier rein und drücke Alpha-Reset . Ich gehe ein bisschen mehr. Kannst du sehen, wie es von links drückt? Ich gehe zurück nach rechts. Du kannst rauf oder runter gehen. Lass uns über die Kurve sprechen. Ease Out ist die Standardeinstellung, und das bedeutet , dass sie sehr schnell kommt und am Ende langsamer wird. Es lässt nach. Wenn du willst, dass es wirklich langsam reinkommt, du willst, dass es sich entspannt und am Ende schnell ist, kannst du Ease In verwenden. Du kannst beides machen. Ein einfaches Ein- und Aussteigen ist oft nur eine gute Standardeinstellung. Ich mag es. Langsam am Anfang, schnell in der Mitte, langsam am Ende. Einige der anderen schönen sind das einfache Ein- und Aussteigen. Das hat wieder einen schönen kleinen Sprung. Schau dir das an und erfahre mehr. Es hat das wie man es nennt, Vorfreude aus der Animation Es kommt rein und geht ein bisschen über die Stelle hinaus, wo es sein muss, springt ein bisschen ab. Es gefällt mir Du kannst damit herumspielen. Du darfst Bouncy nicht benutzen. Es ist legal. Also versuch es mit Bouncy Tun tun, das darfst du tun. Ich werde die hinten benutzen. Schauen wir uns die Dauer an. Die Dauer gibt an, wie lange es dauert, bis die gesamte Animation stattfindet. Millisekunden, MS, in einer Sekunde sind 1.000 Millisekunden, das ist also genau 1 Sekunde das ist also Du willst also, dass es länger ist, du willst, dass es 1 Sekunde ist, die 0,3, du kannst das machen und dir das ansehen. Ist es. Nicht mehr. Es dauert viel länger. Du erarbeitest dein Timing. Die Standardwerte sind allerdings ziemlich gut. Ich gehe zurück zu 400. Du hast gesetzt. Ich schleppe es Wahrscheinlich sogar ein bisschen schnell. Ich gehe auf 700. Da hast du's. Lassen Sie uns nun einige der anderen machen, die wir inzwischen in Betrieb haben . Erfahren Sie mehr. Sie können einfach alles auswählen, sodass Sie nichts auswählen müssen. Ich werde die Ansicht verkleinern, Schicht eins. Ich sehe alles. Ich mache es zu. Und du kannst nichts auswählen, indem du in den Hintergrund klickst und dann auf Alles auswählen gehst, es ist Bearbeiten Ich kenne die Tastenkombination nicht. Dort heißt es Alles auswählen oder Befehl A auf einem Mac Control A auf einem PC, und du kannst all die verschiedenen Nudeln sehen. Kannst du sie dort sehen, es gibt zwei. Also welche anderen brauche ich? Beim Kauf auf der Schaltfläche. Ziehen wir das in die Länge, ich habe es gekauft. Herzlichen Glückwunsch. Und was es tun wird, ist, sich an das Letzte zu erinnern, was du getan hast. Es wird mit der gesamten Kurve und Dauer reinrutschen . Perfekt. Ein weiterer Tipp ist, dass wir nicht weiterkommen. Denken Sie daran, die Leertaste zu drücken, um die kleine Vorschau zu öffnen , oder Sie können hier oben eine kleine Play-Taste drücken, ganz wie Sie möchten. Ich gehe zu Jetzt kaufen. Ich komme zu diesem Teil und dann stecke ich fest. Ich kann wirklich nichts anderes tun . Was machen wir? Bring ihn da runter. Schnapp dir das weiße Stück , um es herumzuschleppen. Es ist wirklich typisch , dass auf das Logo geklickt wird , um zur Startseite zurückzukehren. Lass uns das machen Ich bin ganz nah dran und ich brauche das, um auf die Homepage zu gehen. Natürlich könnte ich rauszoomen und den Draht rüber ziehen oder die Nudel Aber deine Designs werden sehr, sehr komplex. Manchmal weiß man einfach, wo es hin muss, aber man möchte nicht herauszoomen und versuchen müssen , es über all das Zeug zu ziehen , was man gerne macht Es kann ein bisschen nervig sein. Was Sie tun können, ist es einfach manuell zu tun. Wenn es ausgewählt ist, stellen Sie sicher, dass es sich um einen Prototyp handelt. Sie können hier Umleitungen sehen. Sie können ein Plus daneben hinzufügen . Ich habe ein neues Interrection Der Auslöser ist beim Klicken. Wenn auf dieses Ding geklickt wird, wird die Aktion ausgeführt. Wir werden uns später damit befassen Aber wir werden sagen, ich möchte, dass es navigiert. Welches Ziel? Nun, schau, hier ist auf meinen Seiten. Ich möchte, dass es zu meiner Homepage navigiert. Was für eine Animation werde ich dafür sorgen, dass sie sich auflöst. Ich werde alles standardmäßig belassen. Du kannst es schließen und du kannst sehen, dass das Kabel hier runtergeht. Manchmal ist es einfach einfacher, es manuell zu machen. Also ist es jetzt gut zu gehen. Es geht wieder dahin zurück. Mehr. Nein. Kann nicht zurückgehen Ich habe es auf dieser Seite nicht gemacht. Ich habe es nur mit diesem einen Logo hier gemacht, aber nicht mit diesen beiden. Das ist ein gutes Argument. Was Sie tun können, ist, sich einfach durchzuarbeiten und für all diese Dinge dasselbe zu tun. Oder was Sie tun können, ist, diesen zu löschen. Lösche den. Sie werden feststellen, dass Sie in einem Prototyp einige grundlegende Designarbeiten ausführen können. Ich glaube, das haben wir besprochen. Das haben wir getan. Das wähle ich aus und kopiere es. Ich habe auf der Bestätigungsseite ausgewählt ich es mit meiner Tastenkombination kopiert habe, und ich werde auf Checkout klicken, damit ich weiß, wo es hingehen soll, und dann einfach einfügen. Siehst du, es ist genau an der richtigen Stelle gelandet. Darüber haben wir schon einmal gesprochen , aber durch die Interaktion haben wir es auch verstanden. Es funktioniert nicht, wenn man im Design ist. Schau dir das an, wenn ich darauf klicke und kopiere, ich gehe hierher und füge es ein und gehe dann zurück zum Prototyp. Ich habe gearbeitet. Früher war es das nie. Das tut es jetzt. Hurra. Das wusste ich Wie auch immer, du kannst also Elemente kopieren und einfügen und sie bringen die Interaktionen mit sich. Jetzt sollten wir in der Lage sein, hierher zu gehen und zu gehen und zurückzugehen. Gehen Sie zur Seite Jetzt, es ist gekauft, gehen Sie zurück zur Startseite. Oh, wir machen es. Wir entwickeln Prototypen Wir müssen ein altes aktualisieren, wie dieses hier, ich glaube nicht, dass es das Gleiche macht, du kannst darauf klicken oder vielleicht ist es dieses Du kannst auf das Kabel klicken und es darunter sehen oder du kannst es hier ändern . Es spielt keine Rolle. Wenn du hier ein bisschen mehr sehen willst, kannst du darauf klicken und es öffnet sich alles, was erscheint , wenn du hier auf den Draht klickst. In Ordnung. Also experimentiere ein wenig mit den verschiedenen Animationen. Okay? Du weißt schon, all diese. Leider gibt es kein Seiten-Peeling, wie wir es alle lieben. Ich denke, es wurde in den meisten Ländern illegal gemacht. Also ja, das ist es. Experimentieren Sie, legen Sie sich nicht mit Smart Animate an. Machen Sie sich eine gute Idee Redakteur, können Sie uns dieses Video mit dem superschönen Seiten-Peeling verlassen ? Lass uns gehen. Ich sagte, tu es. Da hast du's. 23. So fügen Sie die iOS-Statusleiste in Figma hinzu: Hallo zusammen. In diesem Video werden wir uns die Statusleiste ansehen, die die Uhrzeit, den Akku und das Wi-Fi-Signal anzeigt. Wir werden es zu unserer Vorlage hinzufügen , weil es im Moment hier auf dem iPhone 16 gebündelt wird Wir werden es hinzufügen, damit wir ein bisschen Platz haben , damit wir den Briefkasten und die Fensterpille vermeiden können . Ich kann mich nicht erinnern, wie es heißt Aber wie dem auch sei, wir wollen die Kamera vermeiden , die bei den meisten neuen Handys durch den Bildschirm ragt . In Ordnung, lassen Sie uns einsteigen Es heißt Statusleiste. In Ordnung, also lass es uns zusammen machen. Ich mache das schon eine Weile, also lass es uns herausfinden Ich gehe nach Hause. Ich gehe zu Tools und Vorlagen und gehe davon aus, dass ich IOS eingeben kann. Es wird Statusleiste genannt. Okay? Ich verwende IOS, weil ich das iPhone verwende. Sie könnten die Android-Statusleiste verwenden. Okay? Und dann entscheide ich , welches ich benutzen soll, ich weiß es nicht. Fangen Sie einfach an, sie anzusehen, sehen Sie , welche, die gut aussieht. Es hat viele Likes, viele Downloads. Es gibt wahrscheinlich noch mehr. Es ist mir nicht wichtig genug. Ich schnappe mir eins, öffne es, schaue, ob ich iOS 7 holen kann, schau mal, Statusleiste. Da ist sie, also werde ich sagen, sie sehen tatsächlich aus wie Teile der Statusleiste, schauen Sie mal. Oh, okay. Sie haben viele Möglichkeiten. Wir werden uns nur für das Einfache entscheiden. Machen wir es im Dunkeln oder im Licht? Wir brauchen den dunklen. Ich kopiere das, gehe hier rüber und sage, lass es uns auf der Startseite machen. Gehen wir zur Startseite, gehen wir zurück zum Design und ich gehe zu. Zuallererst weiß ich, dass ich das alles nach unten verschieben muss. Sie müssen die Statusleiste nicht hinzufügen. Das Erste ist, dass Ihr Entwickler es nicht will, aber wenn Sie es in der Vorschau ansehen, kann es ein bisschen komisch sein, es nicht zu haben Los geht's. Ich stelle es da oben auf Perfekt. Ich werde es wahrscheinlich tun. Gehen wir zu unserer Vorschau und stellen wir sicher, dass wir einen Blick darauf haben, es ist da oben. Wir werden die Telefone wechseln. Lass uns zurückgehen. Gehen wir zum Prototyp. Gehen wir hier rein und gehen zurück zum iPhone 16, das ganz oben ist. Lassen Sie uns jetzt eine bessere Vorschau anzeigen. Weil es drin steht, wie nennen sie das? Die Pille, nein, der Briefkasten, die Tür. Ich kann mich nicht erinnern. Aber jetzt haben wir unser Navi hier drin. Was vor allem im mobilen Internet häufig passiert, ist Sie es nicht benötigen, weil der Browser es sowieso nach unten schiebt und oben ein bisschen Browser-Chrome ist. Aber für unser Template finde ich es gut. Wir haben es zusammen ausgearbeitet. Wir könnten nur eins tun Will ich es haben? Ich will es wirklich nicht. Vielleicht wählen wir es aus und gehen zum Design und geben ihm vielleicht einfach eine Füllfarbe, damit wir es beim Entwerfen umgehen können. Kann ich es hochziehen? Oh, ich kann. Hübsch gestaltet. Die eine Sache ist jedoch, wenn Sie anfangen komplexe Komponenten von jemand anderem hinzuzufügen , wird dies einige Dinge mit sich bringen. Dieses Ding hier ist eine Instanz einer Komponente, von der Sie noch nicht wissen, was sie ist. Du gehst also vorsichtig hin und sagst, brauche ich das wirklich? Könnte sein. Es gibt eine Option für den Dunkelmodus. Schau, heller Modus, dunkler Modus. Das ist das Zeug, das wir auch bauen können . Das wirklich Interessante ist, dass diese Symbole tatsächlich aus diesem Dokument hier drüben stammen. In Figma gibt es eine Möglichkeit, das zu tun. Ich werde es hier in den Kurs aufnehmen nur weil du es am Ende machen wirst Sie werden sagen, ich möchte, dass Sie es von jemand anderem nehmen und es wird anfangen, es aus anderen Dokumenten zu ziehen , was etwas verwirrend sein kann. Sie können es nur auswählen. Sie können mit der rechten Maustaste darauf klicken und sagen, ich möchte diese Instanz trennen, und Sie können dasselbe für alle tun All diese kleinen Diamanten verweisen auf das Originaldokument Ich kann auch zu dir gehen und zur Dienststelle gehen. Jetzt ist es nur ein Teil dieses Dokuments, genauso wie dieses. Dies ist eine etwas grobe Methode da es toll wäre, wenn Sie wüssten, was Instanzen und Komponenten sind, was Sie später tun werden. Aber ich möchte jetzt nicht zu tief in das Zeug gehen. will nur Dinge hier reinwerfen und ein bisschen davon hier reinpacken damit ich, wenn du vorwärts springst , schnappe ich mir das. Du kriegst ein paar Probleme und weißt, dass du es nicht bist, es ist nur so, dass dein derzeitiges Wissen noch nicht ganz da ist. Aber mach dir keine Sorgen, darauf kommen wir zurück. Das haben wir. Will ich es haben? Ich werde es ausziehen. Natürlich. Du schaffst es. Das darfst du absolut. Okay, aber für den Rest werde ich es ausziehen. Wir machen es einfach, Mann. Da hast du's. Und lass uns weitermachen. Wo ist die Linie um meinen Button geblieben? Hm. War es schon immer weg? Ist es. Es hat dich geärgert, nicht wahr? Ich habe keine Ahnung, wann das weg war. In Ordnung, ist es So schnappen Sie sich die Statusleiste und spielen damit herum , damit Sie sie ein bisschen besser in der Vorschau anzeigen können Richtig, lass uns zum nächsten Video springen. Vergiss, dass dieses Video passiert ist. Ich schätze, das ist die Moral der heutigen Geschichte. In Ordnung, nächstes Video 24. Testen auf dem Handy mit Figma Mirror: Hallo. Das ist die andere Seite meines Büros. Normalerweise schaust du von dort drüber. So sieht es aus wie mein Müll und meine Soundboards um zu versuchen, es nett klingen zu lassen Und es ist Nacht. Es ist nicht irgendwie launisch. Es ist einfach wirklich dunkel Es ist ungefähr 11:00 Uhr abends und wir machen Kurse für uns. Und in diesem Video werden wir uns etwas ansehen, werden wir uns etwas ansehen Figma-Spiegel genannt wird. Was ist das? Es ist eine Möglichkeit, unsere zu testen. Weißt du, wir sind am Computer und versuchen, eine Telefon-Website zu entwerfen, eine mobile First-Website, okay, oder eine App, okay? Es hat keinen Sinn, deine ganze Zeit damit zu verbringen. Du musst es auf dem Gerät testen, das Ding, okay? Es gibt also eine App, die Sie entweder aus dem Android- oder dem Mac-App Store herunterladen können . Man merkt, dass ich sie nicht benutze. Aber es heißt Figma Mirror. Möglicherweise ändern sie diesen Namen, überprüfen Sie in den Kommentaren, ob sie ihn aktualisiert haben, aber er heißt Figma Richtig, pausiere dort für eine Sekunde. Hey, sie haben die Mirror-App ein kleines bisschen aktualisiert. Okay? Also, sobald Sie es auf Ihrem Telefon installiert haben, okay, was Sie tun können, ist, es einfach automatisch zu starten. Jetzt müssen Sie nur noch auf die Spiegelungsschaltfläche klicken , die sich unten rechts befindet Klicken Sie einfach auf Mirror und dann hier in Figma auf Ihrem Desktop einfach auf die Seite , auf der Sie einen Spiegel haben möchten Okay, ich werde auf eine Homepage klicken und sie wird auf deinem Handy erscheinen Es ist magisch. Eigentlich musst du vielleicht auf die Schaltfläche „Mit der Spiegelung beginnen“ klicken, aber dann ist es magisch. Zurück zum Video Du meldest dich mit deinem Figma-Benutzernamen und Passwort dann passiert es irgendwie auf magische Weise Sie müssen sich nicht im selben Netzwerk befinden. Magie. Und was im Grunde passiert, ist, kann ich es dir hier zeigen? Ich zeige es dir. Kannst du das vergrößern? Das kannst du irgendwie. Im Grunde genommen, wenn ich hier auf meinem Desktop auf verschiedene Dinge klicke , kannst du nicht sehen, was ich hier mache. Aber wenn ich auf meine Detailseite klicke, wo ist sie? Seite mit den Details? Da ist es. Klicke auf „Meine Kasse“. Es ist also eine Art Live-Aktualisierung. Und sogar Verda, es ist tatsächlich live in der Regie. Also, wird das funktionieren? Vielleicht. Also, klicken Sie auf meinen Home-Button. Was kannst du sehen? Home-Taste. Die Home-Taste ist zu klein, weil ich sie kaum anklicken kann und du nicht siehst, was ich mache. Inzwischen Button. Schau dir das an. Okay, Käufe. Worauf konzentriert es sich? Konzentriert es sich auf das Richtige? Vielleicht. Verblasst. Oh, sieh dir an, wie gut das ist Also kann ich tatsächlich daran arbeiten. Und das Wichtigste, was ich dir zeigen werde ist die inzwischen zu kleine Schaltfläche, der Text. Sieht auf dem Desktop gut aus, aber da ist es winzig klein, okay? Der Kaufen-Button sieht ganz gut aus, wenn ich zu Jetzt gehe. Und wie filmt man die Kamera? Das ist wahrscheinlich schrecklich, aber hey, dieser Kaufknopf fühlt sich für mich gut an. Es fällt mir auch sehr schwer , auf die Schaltflächen im Navi zu klicken. Sie müssen nur sein, sie müssen nicht größer sein. Sie müssen kleiner sein und einen größeren Bereich um sie herum haben, also einen Rahmen, um sie größer zu machen. Logos sind zu klein. Der Text auf der Kaufseite ist gut. Die Checkout-Seite. Und ich bleibe auf der Seite „Weitere Informationen“ hängen. Ich habe kein Prototyping von der Seite mit den weiteren Produktdetails Ich habe vergessen, es hinzuzufügen. Du hast es wahrscheinlich im letzten Video gesehen, aber wenn du in diese Phase kommst und es selbst testest, sagst du, du hast das bisschen vergessen. Nun, das ist viel zu klein oder das ist eine scheußliche Farbe. Grün. Okay, also, das ist wahrscheinlich ziemlich gut. Oh, lass uns erstens ein Live-Update machen, denn das ist ziemlich cool Ich passe den Zoom an, damit wir es ein bisschen besser machen können. Du wartest dort. Ich werde die Kamera wechseln. Ordnung. Also hätte ich das wahrscheinlich am Anfang tun sollen. Schau dir das an. Es sind Live-Updates. Ich verschiebe Sachen auf meinem Desktop, also schaust du auf meinen Laptop. Da, mein Handy da drüben. Und ja, du kannst einfach irgendwie arbeiten. Also, wenn ich arbeite, vor allem in der Anfangsphase , in der Schriftgrößen und so fertig sind, habe ich einfach irgendwie keine Stütze Mein Handy liegt einfach auf dem Boden . Aber damit du es sehen kannst. Das ist jetzt wirklich praktisch. Ich kann das hier durchgehen und die Schriftgröße angeben, was möchte ich tun? Es ist eine Gruppe, also gehe ich in meine Gruppe und verwende rauf und runter. Bis ich etwas finde, halte ich hier mein Handy im Auge . Okay? Genau das sehe ich mir an. Ich frage mich, ist das eine annehmbare Größe Was du finden wirst, ist so ziemlich immer, 16 ist gut. Okay? Du kannst es nicht sehen, weil es auf dieser Seite meines Desktops ist, aber ich habe 16 Punkte erreicht. Das Fitnessstudio ist wirklich ein Hirngespinst, ein gutes. Okay, ich kann es nicht ruinieren. 15, wenn du versuchst cool und schick zu sein und versuchst, es klein zu halten Aber wenn du um die 12 und 13 Punkte runterkommst, wird es eine ziemlich knifflige Sache. Für manche Dinge ist es in Ordnung, aber für einen großen alten Click-Now-Kaufen-Button fühlt es sich ein bisschen klein an. Also möchte ich das durchgehen und lassen Sie uns das etwas größer machen. Bring sie rüber. Lass uns sie zusammen schicken. Da. Ich muss dasselbe für die Schaltfläche „Mehr erfahren“ tun. Es ist schwer, es mit einer Hand zu machen. Ich brauche meine Hände hier, aber ich will nicht, dass meine haarigen Knöchel im Video sind. Aber du verstehst Sie können sehr schnell Änderungen vornehmen und sehen, wie es auf einem Telefon aussieht, okay? Es ist ziemlich augenblicklich. Ich weiß es nicht. Ich bin ziemlich erstaunt, wie das funktioniert. Also ja, wenn Sie für ein Tablet entwerfen, sollten Sie ein Tablet haben. Wenn Sie für den Desktop entwerfen, ist es etwas einfacher, Sie können es einfach auf Ihrem Desktop tun. Aber Handy oder eine App, okay, oder eine mobile First-Website, wie wir es tun, okay? Desktop ist Teil unseres Plans, aber zweitrangig. Großteil unseres Publikums wird über bezahlte Werbeanzeigen kommen, weil ich mit dem Kunden darüber gesprochen habe diese Art von Über diese Art von Konversationen sprichst du auch, wie Lead-Generierung, wo kommt das alles her Es kommt von Facebook-Anzeigen. Es wird alles von Mobiltelefonen kommen. Wenn es von YouTube-Anleitungsvideos kommt, wie es in vielen meiner Kurse der Fall ist, dann ist es zuerst der Desktop. Also, mit welchen Fragen wirst du dich als UX-Designer auseinandersetzen? Wofür entwerfen wir zuerst? Okay, es ist spät und überraschend heiß mit all diesen Kameras und Lichtern. Ich werde noch ein Video machen, Ich werde bevor wir ins Bett gehen Okay, das ist Figma Mirror und wir testen deinen Prototyp auf deinem Handy. Ein bisschen gesehen 25. Klassenprojekt 04 - Testen auf Ihrem Telefon: Es ist Zeit für ein Klassenprojekt. Wir werden einen Prototyp Ihrer mobilen Website erstellen und sie auf Ihrem Handy testen. Verwenden Sie die Techniken, die Sie bereits angewendet haben und die wir in den letzten Videos gelernt haben , um Ihre Schaltflächen so zu melden , dass sie, wenn Sie auf die Schaltflächen klicken , auf die richtigen Seiten springen. Laden Sie dann die Figma-App herunter. Ich denke, es ist jetzt gerade als Figma aufgeführt. Du solltest es finden. Es hat die Spiegeloption. Sie finden es bei Google Play und im App Store. So heißt es und teste es. Klicken Sie auf die Schaltflächen, um zu sehen, ob es funktioniert. Wenn Sie die App aus irgendeinem Grund nicht zum Laufen bringen können , die herunterladbare App. Sie können tatsächlich einfach zu figma.com Slash Mirror gehen und das auch verwenden Das machst du auf deinem Handy. Ich bitte dich, dich einzuloggen. Es ist eine Problemumgehung. Wenn Sie also in der App sind, melden Sie sich an und testen Sie Ihr Design Was Sie suchen, ist nur ein paar leichte Anpassungen vorzunehmen, sind die Schaltflächen anklickbar? Sind sie groß genug? Ist der Text lesbar? Eines der großen Dinge, die Sie vielleicht als kleinen Bonus für dieses Video finden , ist , dass es hier im Einkaufswagen Ich habe es nicht manipuliert. Das sollte es sein. Gehen wir zum Prototyp. Gehen wir und das ist angeklickt. Du gehst zur Checkout-Seite. Das einzige, was passieren könnte, ist, dass diese Tasten ziemlich klein sind. Es ist schwer, auf das Menü zu tippen oder es vielleicht zu nahe zu bringen. Was Sie also durch Ihr Prototyping lernen könnten , ist das Heranzoomen Ich werde sagen, das muss eigentlich etwas weiter weg davon sein, damit ich es tatsächlich mit meinem großen Finger anklicken kann Die andere Sache, die Sie tun können , ist , dass Sie je nachdem, wie Sie Ihr Symbol haben, möglicherweise ein anderes ausgewählt haben. Es könnte anders funktionieren. Lass uns das durchgehen. Es ist gut zu entwerfen. Nehmen wir an, ich möchte, dass der anklickbare Bereich größer ist, aber nicht das eigentliche Symbol darin Ich möchte , dass das Symbol die richtige Größe hat, aber ich möchte, dass der aktive Bereich, auf den ich klicken kann, größer ist aktive Bereich, auf den ich klicken kann, größer Ich habe das Verschiebe-Tool. In diesem Fall wird alles darin vergrößert. Wir sind hier etwas fortgeschritten , aber es ist etwas, das Sie vielleicht tun möchten. Bedecke es später richtig. Doppelklicken wir, um in diesen Rahmen zu gelangen. Wenn Sie keinen Rahmen haben, zeige ich Ihnen gleich, wie das geht. Das Zeug in meinem Icon-Schnitt ist maßstabsgetreu eingestellt. Ich kann es so zentrieren , dass dort Einschränkungen stehen. Das heißt, wenn ich auf den übergeordneten Frame aus und dann wieder auf den übergeordneten Frame klicke, siehst du hier nicht den Vektor, den Rahmen, der sich um die Außenseite herum befindet. Schau jetzt, was passiert. Ich kann es vergrößern, weißt du, den Bereich um es herum vergrößern, aber das Symbol bleibt gleich. Es gibt mehr Stellen, an denen Ihr Finger tatsächlich berühren und klicken kann. Wenn Sie keins haben, nehmen wir an ich habe ein Symbol und das tut es, und ich werde es kopieren und einfügen. Nehmen wir an, Sie sind mir schon früher gefolgt und hatten keinen Rahmen, sondern nur das Symbol. Was Sie tun können, ist , mit der rechten Maustaste darauf zu klicken und Rahmenauswahl zu sagen. Jetzt bist du da, wo ich angefangen habe. Wir gehen rein und sind standardmäßig zu weit reingegangen. Gehen wir hier zum Vektor. Oh. Okay, das ist ein gutes Argument. Wenn ich genug klicke, erhalte ich kleine Symbole. Ich möchte eigentlich den Rahmen auswählen, den Vektor korrigieren und dann herausfinden ob er skaliert oder zentriert ist. Also da hast du's. Kleine Prämien für Leute , die die Klassenprojekte machen. Du kannst den Rahmen vergrößern, aber nicht die Dinge darin. Ordnung, teste es aus, wenn du fertig bist Ich möchte, dass du ein Foto von dem Rahmen deiner Entschuldigung machst . Mach ein Foto vom Telefon, okay? Nur um zu beweisen, dass Sie es getan haben, laden das Foto Ihres Telefons mit dem Projekt darauf, dem Y-Rahmen, hoch und laden Sie es in den Projektbereich hoch. Ich kann mir vorstellen, dass viele Leute sagen, ich habe kein zweites Telefon oder einen Kumpel, einen Partner oder ein Kind oder irgendjemanden, der ein Foto von deinem Handy macht. Okay, du kannst einfach einen Screenshot hochladen, wenn du willst. Und wenn du es einmal getan hast, möchte ich , dass du dich freust. Ich weiß es nicht. Ich wette, du hast wahrscheinlich dasselbe. Wenn du es auf deinem Handy zum Laufen bringst, gibt es eine Art Magie. Sogar ich habe 1 Million davon gemacht. Ich denke, wenn ich es auf meinem Handy sehe und anfange, daran zu arbeiten, die Tasten berühre, denke ich: Oh. Es ist echt. Es ist live. Es ist aufregend. Ich hoffe, du fühlst das auch. Also übe, protiere es, nimm ein paar Anpassungen vor. Vielleicht haben die Schriften nicht die richtige Größe, vielleicht sind die Schaltflächen nicht anklickbar und laden Sie sie dann in den Aufgabenbereich Sogar im Projektbereich. In Ordnung. Genieß es. Wir sehen uns im nächsten Video. 26. Was ist Smart Animation und Verzögerungen in Figma?: Hallo. Hallo, es ist Zeit zu lernen , wie man grundlegende Animationen in Figma Okay, wir werden diesen Pfeil zu unseren Glückwünschen animieren Ihr Kauf befindet sich auf der Versandseite. Die Animation in Figma ist ziemlich interessant. Es ist ein bisschen schnell. Wir werden etwas lernen, das sich Smart Animate nennt Lass uns reinspringen. Richtig, zuerst. Schicht eins. Gib einfach alles auf der Seite. Leertaste, klicken und ziehen. Wir werden zwei Versionen dieser Bestätigungsseite erstellen dieser Bestätigungsseite Wir werden zwischen ihnen animieren . Sie können es also kopieren und einfügen Ich werde meine Optionstaste KaniMaCo auf einem PC gedrückt halten und sie herausziehen Ich habe also zwei Kopien davon. Also ich möchte, dass wir diesen Pfeil animieren Was passiert in Figma. Es ist ein bisschen seltsam, dass wir im Grunde nur zwischen diesen beiden Seiten animieren zwischen diesen beiden Seiten und etwas anders sein muss Dieser Pfeil wird anders sein. Wir werden ihn hierher verlegen. Bewege es einfach ein bisschen nach links. Alles, was wir tun, ist Bestätigungsseite zu sagen , wenn ich zum Prototyp gehe, und wenn dieser Prototyp erstellt ist, wenn wir ihn abspielen und wir auf die Bestätigungsseite kommen, möchte ich, dass du dann hier rüber gehst Wir belassen einfach alle Standardeinstellungen und testen es Gehen wir also zu unserem kleinen Prototyp. Was wird laufen? Lass uns das Geschenk benutzen. Nein, benutze Present nicht. Gegenwart ist in Ordnung. Geh. Ich werde eine kleine Version verwenden, damit wir sie alle sehen können , also bekommen wir eine Vorschau. Riesiges Telefon. Ich gehe auf die VywPage und kaufe und dann geht es Wenn ich einmal klicke, bewegt es sich. Funktioniert. Was wir tun müssen, ist die Magie hinzuzufügen. Die Magie in diesem Fall besteht darin, dass ich auf Bestätigungsseite klicke und dann auf diesen Übergang zwischen den beiden klicke. Anstatt Instant zu verwenden, werden wir den verwenden, den wir vor Smart Animate ignorieren vor Smart Animate Wir werden alles standardmäßig belassen und die gleiche Vorschau anzeigen Lassen Sie uns das schließen. Ich werde Shift Enter verwenden, um diese kleine Vorschau zu öffnen. Es ist kein Wechsel zu Dan. Es ist Shift Space. Leertaste und gehen Sie jetzt zu den Bildern und klicken Sie, sobald ich sie animiert habe. Wie unaufregend. Aber wir haben es verstanden Wir haben es geschafft. Gute Arbeit. Deine erste Animation. Lass es uns besser machen. Eigentlich machen wir es kaputt, weil ich wette, dass du deins kaputt machst. Nun, eines der Dinge, die ich tun möchte, ist, dass es nicht sehr schnell eingetreten ist. Ich möchte, dass es vom Bildschirm kommt . Ich werde es also hierher verlegen. Sie können die Umschalttaste gedrückt halten, damit es angezeigt wird , wenn Sie es in einer geraden Linie ziehen Großartig. Also ist es hier drüben. Ich werde von dieser Bestätigungsseite aus eine Vorschau anzeigen. Wenn Sie zuerst darauf klicken und dann die Umschalt-Leertaste drücken. Ich fange eher hier als auf der Startseite an. Wenn Sie nichts ausgewählt haben, beginnt es mit dem ersten Frame. Wenn Sie jedoch den Namen des Frames ausgewählt haben, beginnt er an der Stelle, an der Sie ihn ausgewählt haben. Lass uns einmal darauf klicken und es hat nicht funktioniert. Hat es irgendwie funktioniert? Ich werde meinen Zurück-Pfeil benutzen, um einen zurückzugehen. Einfach meine Pfeiltasten oder du kannst Reset drücken. Ich benutze einfach meine linken und rechten Pfeiltasten , um vorwärts und rückwärts zu gehen. B, einmal klicken funktioniert nicht. Warum funktioniert es nicht? Das passiert oft. Wenn die Dinge verblassen, ist es kaputt Das Erste, was wir tun werden, ist auf den Titel hier oben zu klicken und ihn etwas näher zu rücken Ich halte die Umschalttaste gedrückt und nehme beide Bestätigungsseiten und verschiebe sie, sodass wir etwas Platz haben. Es ist wirklich üblich , die Animationen ein wenig voneinander zu trennen, damit Sie etwas Platz haben. Der Typ hier drüben, was macht er? Wenn ich ihn da hinlege, okay, halte die Schicht. Er wird immer noch nicht zur Arbeit gehen. Das liegt daran, dass Sie sich die Schichten ansehen. Ich habe meine Bestätigungsseite eins, zwei, und ich bin auf meiner Ebenenseite und ich kann mein Ebenen-Panel hier sehen. Datei, Handy, Wireframe, du kannst diese Bestätigungsseite sehen und diese, wenn ich sie hochdrehe und schließe, dieser Typ, Zeile 13, einfach alleine rum Er ist auf keinem dieser Frames. Er spielt diese Seite ab. Und diesen Kerl zu ignorieren. Was es tut, es heißt, nun, er ist nicht hier, aber er taucht hier auf, während wir einfach eintauchen. Was wir tun müssen, ist sicherzugehen das auf dieser Seite steht. Sie können es tun, indem Sie es ziehen Sie sehen jetzt, es befindet sich auf der Bestätigungsseite. Schau, er ist da drin, aber wenn ich es herausziehe, auf einmal klicke, Shift gedrückt halte, springt es heraus Ich kann es einfach erzwingen. Welche Seite ist es? Lassen Sie uns diese benennen. Doppelklicken Sie darauf, Bestätigung eins. Bestätigung zwei, nur damit ich den Unterschied zwischen erkennen kann. Ich möchte, dass es auf der ersten Bestätigungsseite steht. U-Linie 13 sollte da sein. Sie verschwindet. Es ist da drin. Es ist nur versteckt , weil es auf dieser Seite eingeblendet Probieren Sie es aus und sehen Sie es sich an. Wisse, wo es da ist. Lassen Sie uns eine Vorschau darauf werfen. Klicken Sie auf diesen, Shift Space. Lass uns darauf klicken. Wir haben es geschafft. Es hat sich animiert. Wir sind Genies. Wir schließen es. Eines der Dinge, die Sie tun können, ist, wenn Sie Animationen machen , die außerhalb der Seite erscheinen, Sie können auf diese Bestätigungsseite klicken und einen der Vorteile eines Frames über einer Gruppe haben, das ist diese Seite hier Wenn ich zu Design gehe, gibt es hier eine Option mit der Aufschrift Clip-Inhalt Siehst du den hier? Fühlen wir uns, als hätten wir das schon früher gelernt, oder? Ich kann mich nicht erinnern. In Ordnung. Es war das Wochenende. Ah, also lass uns das ausschalten und es bedeutet , dass du es tatsächlich sehen kannst. Du kannst gehen. Eigentlich möchte ich, dass es etwas näher oder etwas weiter weg ist oder ich ändere die Strichstärke oder -breite. Wenn ich eine Vorschau habe, verschiebst du die Gesichtsleiste, klickst erneut, es funktioniert immer noch genauso. Es ist einfach nicht abgeschnitten. Nun, es ist nicht wirklich wichtig, wie Sie das veröffentlichen, ob es gekürzt ist oder nicht Manchmal möchten Sie, dass der Ausschnitt einfach ausgeschaltet ist, während Sie arbeiten, und ihn dann wieder einschalten wenn Sie das Projekt abgeschlossen haben Noch ein paar Dinge , die dich ruinieren könnten Wenn deins immer noch verblasst, bleichst du immer noch, Dan Überprüfe, ob es im richtigen Rahmen ist, also gib ihnen vielleicht Die andere Sache, die wichtig ist zu wissen, ist, dass es im Grunde sagt, ich habe diese beiden Frames und Dan hat beschlossen, intelligent zwischen den beiden zu animieren Was es bedeutet, sich all die Dinge hier anzusehen. Wenn sich etwas bewegt, wird es animiert, was großartig ist. Aber es muss wissen, wovon es spricht. Nehmen wir an, ich habe Linie 13 und ich habe Linie 13. Wenn du sie irgendwie, aus welchem Grund auch immer , kopiert und eingefügt hast und das ist Zeile 14, dann weiß sie nicht, was sie tun soll Es muss derselbe Name sein. 13 und 14 werden nicht funktionieren. Lass es uns versuchen, es wird klicken und es wird verblassen. Du sagst, es verblasst. Verblassen bedeutet kaputt, weil es so ist wie, A, dieses Ding erscheint einfach auf dieser Seite, ich lasse es einfach Du musst nur sichergehen , dass deine Namen identisch sind. Es spielt keine Rolle, wie sie heißen, solange sie identisch sind. Wenn es immer noch nicht funktioniert, können Sie zwischen Ihren beiden Frames sagen, dieser funktioniert nicht. Ich denke, ich schaffe es nicht, es loszuwerden, Dan. Ich kann mir diese Version hier holen, sie kopieren, auf den Rahmentitel klicken und sie einfügen, und Sie werden sehen, dass Zeile 13, Zeile 13 eingefügt wurde, und sie dann erneut animieren Stellen Sie sicher, dass es die Seite nicht verlässt. Es ist etwas schwer zu erkennen. Kannst du sehen, ob ich die aufdrehe? Zeile 13 ist tatsächlich von dieser Seite abgekommen, also muss ich sie wieder hineinziehen. Das haben wir gelernt. Manchmal kann das dein Problem einfach lösen. Lass es uns ändern, einmal klicken. Das nächste, was ich tun möchte, ist das Einmalklicken. Offensichtlich werden die Leute nicht klicken, nachdem sie diese Seite aufgerufen haben. Wir werden eine andere Animationstechnik lernen. Lass uns auf Bestätigung eins klicken. Lassen Sie uns sichergehen, dass wir den Prototyp haben. Was wir sagen werden, ist der Moment, in dem es um diese Interaktion geht, die als Tippen bezeichnet wird, zur Bestätigung. In diesem Fall geht es um Bestätigung zwei. Oder du kannst hier auf dieses Y klicken. Materie. Okay, wir wollen also nicht, dass es vom Fass läuft. Wir wollen den anderen. Wir wollen noch eine, die sagt, nach einer gewissen Verzögerung, wie lange, lassen wir es einfach als Standard fahren dann mit Bestätigung zwei fort. Es wird nicht um Erlaubnis gebeten. Es wird nur darauf warten. Kannst du wissen, wie viele Sekunden das sind? Es ist richtig 0,8. Okay, lass uns gehen. Schuss plus. Und jetzt ist C einfach von alleine gegangen. Ich werde meine Ara-Tasten benutzen, um zu gehen. Zurück zur Homepage. Sie können links und rechts verwenden. Ich möchte die Homepage finden. Wo sind wir? Da sind wir. Gehen wir zu Bis jetzt. Lass es uns kaufen und warten. Warte, warte, warte, warte. Schau dir das an. Hat es alleine gemacht. Das wird erst nach Verspätung genannt. Du kannst mit dem Timing herumspielen. Okay? Wir haben es bei 0,8. Wir schaffen es auf 100 Millisekunden Sie können also im Grunde keine Null eingeben. Kannst du nicht Null eingeben? Ja, du musst eine Millisekunde eingeben Wir können sofort nach einer Millisekunde gehen. Die andere Sache, die wir uns ansehen könnten ist übrigens, dass Sie sie anklicken und ziehen können , ist übrigens, dass Sie sie anklicken und ziehen können, wenn sie im Weg sind Oft können sie so enden. Sie müssen nur auf diesen oberen Teil klicken und ihn ziehen , um ihn nach oben zu verschieben. Schauen wir uns unsere Lockerung an. Wir haben uns mit einer Lockerung befasst. Lassen Sie uns die machen, die mir am besten gefällt, nämlich das Ein - und Ausziehen , das kleine Sprunggefühl. Wie schnell sollte es sein? Lass uns eine Sekunde draus machen und es ausprobieren . Dauert zu lange. Vieles davon ändert die Dauer, Shift Plus, einfach viel zu schnell checken. Alpha-Reset. Das fühlt sich gut an. Jetzt haben wir nur die Bewegung gemacht. Du kannst alles animieren. Solange Sie den Namen nicht ändern, können Sie alles animieren. Lass uns finden Lass uns auf Bestätigung eins klicken und zurück zum Design gehen. Am Ende wirst du oft zwischen diesen beiden hin- und herschalten müssen. Ich möchte in der Abkürzung nicht zu schwer werden, also wenn Sie sie blockieren, wenn Sie schon getankt haben Aber wenn Sie nach Abkürzungen suchen, schalten Sie mit Shift E zwischen Design und Prototypendesign und Prototyp um Design und Prototypendesign und Prototyp Halte die Umschalttaste sowohl auf dem Mac als auch auf dem PC und tippe einfach auf E und wir wechseln zwischen ihnen Ich möchte also bei Design sein. Lassen Sie uns den Inhalt ausschneiden, damit wir das Ding sehen können, und ich sage, ändern wir die Transparenz des Strichs , sodass wir ihn auf Null setzen können. Es verblasst, je nachdem, wie es kommt. Du verschiebst den Raum. Du siehst es verblasst. Ich kann es nicht wirklich sehen, aber es hat es getan. Wo bist du jetzt? In Ordnung. Es ist weg. Zeile 13. Da ist es da. Lassen Sie uns das Erscheinungsbild wieder auf 100 erhöhen. Wir können uns für das Dreieck entscheiden. Vielleicht hat das Dreieck zunächst keins und es wird ein Dreieck. Lass uns das versuchen. Ich werde es ein bisschen verschieben, damit wir die Animationen sehen können , die uns fehlen. Zurücksetzen. Okay, ich glaube nicht, dass du das anbauen kannst. Ja, es ist irgendwie gewachsen. Da hast du's. Ich konnte es einfach nicht wirklich sehen. Kannst du sehen, dass es so aussieht , als ob es aussieht? Das macht nicht so viel Spaß, Dan. Lass uns das Schlaggewicht ändern. Versuche, nicht auf diese zu klicken. Diese werden Variablen genannt. Wir werden sie uns später ansehen. Siehst du, das sind kleine Diamanten. Sie sind in vielen Dingen zu sehen. Wir werden später Variablen machen. Sie sind ziemlich hart. Versuche sie zu vermeiden. Versuchen wir es mal. Ordnung. Zur Erfrischung kommt ein riesiger Pfeil rein. Ordnung. Also das ist es. Das ist Animation, die Grundlagen von Animation und Figma. Sie haben zwei Frames, bei beiden ist etwas anders. Solange die beiden Dinge auf beiden Frames erscheinen, können Sie nicht zulassen, dass sie hier nicht erscheinen. Sie können es nicht aus diesem Frame löschen und einfach hoffen, dass es hier erscheint, wird es, aber es wird einfach ausgeblendet. Sie benötigen zwei Dinge, denselben Namen für beide, und Sie müssen sicherstellen, dass sie sich tatsächlich auf den Frames befinden, zwischen denen Sie animieren Schauen Sie sich diese Ebenen hier an und schließen Sie sie alle. Ich finde, das ist der einfachste Weg, das zu sehen. Hängt hier irgendwas rum, das nicht sein sollte? Dann ändere einfach zwischen ihnen. Entweder Bewegung oder Größe oder Farbe oder was auch immer du magst. Der große Trick dabei ist, zu Prototyp oder Shifty zu wechseln oder auf die Schaltfläche hier oben zu klicken und einfach auf diese Seite zu klicken. Du klickst auf Halten und Ziehen und du stellst sicher, klicken. Du klickst auf Halten und Ziehen und dass sie zwischen den beiden animiert ist und dass sie zwischen den beiden animiert und sie dann intelligent animiert werden Wenn Sie versehentlich zwei Interaktionen haben , wie ich es gerade getan habe, klicken Sie einfach auf den Frame und sagen, welche möchte ich antippen Ich möchte dieses Tippen loswerden. Ich will meine Verzögerung haben und alles in Ordnung machen. Das sind die Grundlagen der Animation in Figma. Es ist ein bisschen ungeschickt. Wenn Sie von einem anderen Animationstool mit einer Zeitleiste kommen, ist das in Figma einfach so , aber wir wissen jetzt, dass es ein bisschen klobig ist In dieser Wireframe-Phase machen wir nicht viele Animationen . Aber es macht Spaß und ich möchte es früher vorstellen, damit wir später kompliziertere Dinge machen können Ordnung. Das ist es. Animation innerhalb von Figma Das sollte das Ende sein und ich nehme die Intros am Ende auf Und dann habe ich das Intro aufgenommen und meins war kaputt. Ich frage mich, was machen sie? Ich bin zurückgekommen, um es dir zu zeigen. Ich werde die Vorschau vom Checkout hier aus ansehen , also Shift plus. Dann hatte ich diesen großen Pfeil dabei. Dann sagst du, wo ist das hergekommen. Hat sonst noch jemand dieses Problem beim Testen? Der Pfeil bewegt sich in diese Richtung. Was passiert? Und wie reparieren wir das? Wir haben eine Animation zwischen dem Checkout und der Bestätigungsseite. Es ist diese kleine Nudel hier. Der Button geht hierher und da steht: Beim Tippen möchte ich, dass du hineinschlüpfst Ich benutze das rein und raus. Was es macht, ist, dass es in diese Richtung rutscht. Ich war ein bisschen animiert. Sie sehen also, dass die ganze Seite rüberrutscht. Das Ding dort kann man sehen, weil ich das Unterdesign etwas verändert habe. Unter Design habe ich den Inhalt des Clips weggelassen. Wenn ich es jetzt ausschalte, sollte es funktionieren. Weil ich das weggelassen habe, kann ich es auch in der Vorschau sehen, weil die Animation zwischen hier und hier eine Folie ist, ganze Einheit gleitet rüber, zu Zook, und wir können sie an diesem Übergang sehen Es gibt zwei Möglichkeiten, es loszuwerden. wo ich diese Seite sage, werde ich sie so zuschneiden, dass sie versteckt ist. Mal sehen, ob das funktioniert. Ich bin mir ziemlich sicher , dass es funktioniert. Okay, ich habe gearbeitet. Die andere Sache, die wir tun können, ist das hier, wenn es um das Prototyping zwischen den beiden Anstatt all diese Slides zu machen, können wir einfach sofort loslegen Zwischen diesen beiden gibt es nichts Sichtbares. Es geht einfach nach und ich bin schon da, das wird auch funktionieren. Das hoffe ich. In jedem Fall ist es wahrscheinlich einfacher, Inhalte zu schneiden, nachdem Sie mit der Arbeit daran fertig sind. Möglicherweise hatten Sie dieses Problem. Ich hatte dieses Problem. Jetzt machen wir das Finale, das Finale. Sehen Sie im nächsten Video. 27. Klassenprojekt 05 - Meine erste Animation: Hallo, es ist Zeit für ein Klassenprojekt. Wir können eine Animation machen. Ich möchte, dass du das tust, was wir im letzten Video gemacht haben, und etwas auf der Bestätigungsseite animieren Es muss nicht der Pfeil sein. Wenn Sie ein bisschen neu bei Figma sind, finden Sie das ziemlich schwierig, besonders in der Animation, wenn Sie einfach das tun, was wir im letzten Video gemacht haben. Das ist völlig in Ordnung Wenn du dich mutig fühlst und ein bisschen mehr Erfahrung hast, sagst du, ja, ich schaffe das. Versuch etwas anderes. Versuche es mit einer Kugel, einem Quadrat, einem Häkchen, Symbol oder etwas anderem, das du animieren möchtest. Mir ist egal, was es ist Und wenn Sie mit Ihren Ergebnissen fertig sind, möchte ich, dass Sie einfach einen Screenshot von Ihren beiden Seiten A, die beiden Bestätigungsseiten. Das ist absolut. Laden Sie es in die Projekte hoch. Wenn Sie jedoch eine Person sind, die weiß, wie man Bildschirmaufnahmen macht, machen Sie eine Vorschau, nehmen Sie Ihren Bildschirm auf und laden Sie ihn hoch. Sie können Vmeo - oder YouTube-Links hochladen. Aber wenn das im Moment etwas außerhalb Ihres Zuständigkeitsbereichs liegt , keine Sorgen. Der Screenshot ist in Ordnung. Wenn Sie jedoch anfangen, schauen Sie sich die Projekte an, um zu sehen, was andere Leute gemacht haben. Ja, holen Sie sich ein paar Ideen, passen Sie sie an, kopieren Sie sie, fügen Sie Ihr eigenes Flair hinzu. Und es gibt ein bisschen, dass du es vielleicht zuerst schaffst. Die meisten Leute werden ein wenig Mühe haben die klobige Animation von Das ist völlig zu erwarten. Machen Sie sich nicht selbst fertig, wenn Sie so sind, als ob ein bisschen Prüfung und Ära im Gange Möglicherweise müssen Sie sich das letzte Video noch einmal ansehen. Sie werden den Dreh raus haben. In Ordnung. Das ist es. Wir sehen uns im nächsten Video. Frohes Animate. 28. Freigeben und Kommentieren einer Figma-Datei mit Stakeholdern: Eins. In diesem Video werden wir uns ansehen, wie Ihre Dateien mit Stakeholdern teilen können. Es könnte Ihr Kunde, Ihr Chef, Ihr Freund sein. Sie möchten das Wireframe frühzeitig mit ihnen teilen , damit sie sehen können , was Sie tun, es testen und sagen können, dass Sie auf dem richtigen Weg sind Ich zeige dir, wie du es am besten teilen kannst und auch, wie du Kommentare hinterlassen und mit ihnen arbeiten Wir arbeiten mit diesem Typen namens Doug zusammen. Doug ist mein nicht so kluges Alter Ego. Ich werde dir zeigen, wie du es ihm leicht machen kannst, mit mir als UX arbeiten zu können Spring rein. Um Ihr Dokument mit Ihrem Kunden, Kunden, Stakeholder zu teilen, wer auch immer es sehen muss Ich teile meine gerne schon früh. Klicken Sie einfach auf den riesigen Share-Button. Ich werde auf diesen klicken, auf dem Link kopieren steht. Da steht „Verlinkt kopiert“. Dann kann ich das einfach in eine E-Mail einfügen . Damit jeder, der diesen Link hat, ihn sehen kann, kann ich ihn in einem Browser öffnen. In Ordnung. Das ist es, was Ihr Kunde und Ihre Stakeholder sehen. Ich bin der Kunde. Ich heiße Doug und Dan erledigt etwas Arbeit für mich und er hat mir gerade diesen Link in einer E-Mail geschickt Ich habe darauf geklickt, es geöffnet und das ist, was ich sehe. Ich brauche kein Login, ich brauche kein Passwort. Ich kann mir das Ding ansehen, ich kann klicken und herumziehen. Ich kann nicht viel tun. Aber ich kann es mir ansehen, genehmigen, sagen wir, Sie sind auf dem richtigen Weg. Vielleicht könntest du das ändern, warum machen wir das? Sie können diesen Dialog früh beginnen. Benutze einfach die Share-Taste. Wenn du das zu Hause übst kopierst und den Link kopierst und in einen anderen Browser einfügst, musst du ihn in ein Inkognito-Fenster einfügen, etwas, das nicht in deinen Konten angemeldet ist, weil du sonst den Link verwendest und es weiß, dass in deinen Konten angemeldet ist, weil du sonst den Link verwendest und es weiß, du sonst den Link verwendest und es du bei Figma angemeldet bist, also sind wir InFigma also sind wir Sie müssen einen Browser verwenden, entweder müssen Sie eine Figma in Ihrem Browser abmelden sie zu testen, oder ein Inkognito-Fenster öffnen. Das musst du nicht tun. Es ist eher de Okay, also ich bin Doug, der Kunde Es gefällt mir. Wenn ich noch etwas tun muss, müssen sie sich anmelden. Es ist kostenlos. Sie können sich bei Google anmelden oder sich einfach mit ihrer E-Mail-Adresse anmelden. Lass mich das machen. Jetzt, wo ich bei Doug angemeldet bin , musst du das nicht mehr tun Das zeigt dir nur, was die anderen Kunden sehen. Ich denke, es ist nützlich zu sehen, was sie tun können. Es ist ein bisschen kompliziert. Wir haben all das Zeug am Laufen. Aber das Coole daran ist jetzt, dass sie Kommentare abgeben können. Das ist der große Sie können Kommentare abgeben und Doug kann sagen: Ar Dan, was ist los Ar Dan, was ist los Warum gibt es hier keinen Schlaganfall? Doug schreibt das und das Coole daran ist, lass uns wieder herunterkommen Mach das zu. Was Sie sehen werden, ist, schauen Sie, da ist zunächst Doug, was wirklich seltsam ist . Sie können diesen Kommentar sehen Schau, warum gibt es Astra, ich habe das geschrieben. Ich muss es nicht lesen. Und was ich tun kann, ist, dass wir einfach über diese einfachen Kommentare kommunizieren können . Ich kann Updates vornehmen. Ich kann solche Dinge tun und sagen: In Ordnung, Doug, perfekt, lächelnd Erzähl es niemandem. Du kannst sagen, L, ich habe es geschafft. Tick, das ist gelöst und es ist weg. Eine weitere interessante Sache an Figma ist, dass es ein echtes kollaboratives Tool ist, besonders wenn man mit anderen Designern zusammenarbeitet Siehst du da Hunde? Lass es mich dir zeigen Lass mich die Bildschirme organisieren. Das ist Daniel. Das ist Doug, mein Kunde, und er schaut sich das Dokument gerade Das Seltsame daran ist, dass Sie sehen können, wie Doug sich bewegt. Kannst du das hier auf der rechten Seite sehen? Da bewegt sich Doug. Ich kann sehen, wie er sich auf meinem Bildschirm bewegt, es ist live. Das Gleiche auf meiner Seite. Er kann sehen, wie ich mich bewege, was Doug Angst einjagen könnte Wie dem auch sei, das andere coole daran, dass ein Live-Collaboration-Tool handelt, ist, dass ich Dougs Gedanken lesen kann Ich kann ihn hier an diesem Schild herumstochern sehen und ich weiß, dass er sich Sorgen um die grüne Ich kann sagen, du bist grün. Nun, was war das für ein Schlaganfall? Nein, das war es. Ich kann sagen, gehen wir zum Design, lassen Sie uns den Strich aktualisieren, den Sie dort auf der rechten Seite sehen , er wird aktualisiert. Ich benutze diese linke Seite hier, wenn ich designe, aber Doug kann sehen, wie ich Dinge bewege und sie live anpasse Schau dir das an. Ich werde es verschieben. Das ist einfacher. Schau, es ist ein Live-Collaboration-Tool. Das Coole daran ist, dass Doug kein kostenpflichtiges Konto benötigte, Infigma Er kann meine Arbeit überprüfen. Er kann sich darüber auf dem Laufenden halten. Du kannst dich wieder einloggen und sehen, wie weit ich gekommen bin. Sie müssen keinen neuen Link und keine neue E-Mail erneut senden. Die andere Sache ist, lass uns wieder Dug sein. Ich bin Doug Ich kann darauf klicken und mir eine Vorschau ansehen. Ich glaube nicht, dass du es dir ansehen kannst, ohne eingeloggt zu sein. Aber er kann die Animationen auch durchgehen und testen. Das Letzte, was ich dir zeigen möchte, ist, dass ich immer noch Doug bin, und Doug könnte das ziemlich verwirrend finden Es gibt viele Dinge, mit denen sie nicht herumspielen können. Sie können Sachen glatt machen, aber sie können sie nicht bewegen. Es gibt Dinge wie die Pixelbreiten und -höhen, alle möglichen Dinge hier drüben, du denkst vielleicht, Oh, das wird Doug ausflippen Doug kennt sich nicht mit Computern aus. Ich muss es ihm zeigen, aber es muss viel einfacher sein Was du tun kannst, ist in einer Figma. Ich teile das. Ich kann sagen, teilen. Sie können diese Option hier verwenden. Ist der Link Prototyp kopieren. Also überspringst du das alles und gehst direkt zum Prototyp. Lass es uns aufrufen, Inkognito-Fenster, damit es nicht als ich angemeldet Okay, ich muss ausgegraben werden. Doug meldet sich an und es geht direkt zum Prototyp, und sie können damit arbeiten Aber sie bekommen einfach nicht alle Extras. Außerdem können sie Sachen machen. Es ist ein bisschen schwer. siehst du hier oben. Da ist der Kommentar Ich kann sagen, warum sind das 99? Es kommt sowohl auf meiner Website als auch auf Dan zu mir zurück. Dies könnte einfach eine nette, einfachere Version für sie sein. Schauen Sie sich den Kommentar kurz an, Bec afigma, Sie werden es hoffentlich sehen Bec afigma, Sie werden es hoffentlich sehen. Da ist es da, Doug Und zu guter Letzt kannst du Doug hier antworten. Sie können sagen, warum sind das 99? Das ist nur ein Platzhalter. Geh und es geht zurück zu Doug auf dieser Seite. Schau, auf die Antwort, da ist er da, nur ein Platzhalter. Cool. In Ordnung. Das ist das Teilen mit Stakeholdern, damit sie es sich ansehen und alles von Figma kommentieren Ordnung. Das ist es. Wir sehen uns im nächsten Video. 29. Was sind Teamprojektentwürfe in Figma?: Eins. In diesem Video werden wir unsere Dokumente teilen, damit sie bearbeitet werden können. Wir werden auf sogenannte Teams und Projekte und Dateien und Seiten stoßen Teams und Projekte und Dateien und Seiten Es ist die Art und Weise, wie Figma strukturiert, es ist so, wie Dateien organisiert werden Ich fand es ziemlich verwirrend, als ich angefangen habe, also möchte ich hier ein Video darüber machen, damit du weißt, wo alles ist und was diese Toms bedeuten Lass uns reinspringen. In Ordnung. Falls wir das mit jemand anderem teilen müssen , der diese Arbeit bearbeiten muss , und noch viele andere Dinge. Damit sind viele Funktionen verbunden. Lass uns teilen gehen. Ich kann nicht sagen, Doug, du kannst es bearbeiten. Du bist ein Kollege, du musst daran arbeiten. Du bist ein Entwickler, du musst daran arbeiten . Ich möchte zur Bearbeitung übergehen. Es wird heißen: Hey, du musst dieses Ding in eines deiner Teamprojekte verschieben . Lassen Sie uns das erklären. Denn wenn ich nochmal zum Teilen gehe , siehst du hier, um Leute zur Bearbeitung einzuladen, verschiebe diesen Entwurf in deine Projekte. Was sind all diese Dinge? Das hat mich verwirrt, als ich angefangen habe, also werde ich es dir erklären. Lass uns nach Hause gehen. Wir sind in letzter Zeit, was normal ist. Wir haben dieses Ding hier, ein Team. In diesem Team gibt es Entwürfe und Projekte. Hey, du bekommst also ein Team umsonst. Denken Sie, Team ist Ihr Unternehmen , für das Sie arbeiten. Vielleicht bringen Sie Ihren Laptop mit und Sie benötigen möglicherweise keine weiteren Teams. Möglicherweise müssen Sie nur Ihr Laptop-Team mitbringen. Aber wenn Sie ein Freelancer sind, haben Sie vielleicht vier Kunden, 20 Kunden, und das sind alles nur separate Teams, verschiedene Unternehmen, in denen Sie arbeiten Von diesem Team haben wir Entwürfe und Projekte. Entwürfe Immer wenn man etwas Neues macht , landet es im Wenn Sie es dann für jemand anderen bearbeitbar machen und es teilen müssen, damit sie daran arbeiten können, müssen Sie es in eines dieser Projekte verschieben Genau darum ging es vorhin. Ich sagte, hey, du musst sicherstellen , dass du das von Entwürfen in eines deiner Projekte für eines deiner Teams überführst. Wir haben nur ein Team Sie können in Ihrem Team nur ein Projekt kostenlos haben. Projekt könnte, in diesem Fall, unsere eCom-Website sein, aber Sie benötigen möglicherweise ein anderes Ject, das hat vielleicht mit etwas anderem innerhalb des Unternehmens zu tun Vielleicht ist es der Anmeldefluss, vielleicht ist es der Sommerschlussverkauf. Sie können all diese Projekte erstellen. Sie können ihnen standardmäßig eines kostenlos zur Verfügung stellen, und wenn Sie mehr benötigen, wechseln wir hier zum Plan vom Starter zum Professional-Plan. Das wird sich ändern, die Preise werden unterschiedlich sein. Sie spielen die ganze Zeit mit uns herum. Aber hier könnten Sie entscheiden, dass ich tatsächlich einen Platz brauche. Ein voller Sitz kostet in meinem Fall 16 Euro pro Monat. Es wird in allen möglichen Ländern anders sein. Sehen Sie hier, das Limitierte ist, dass Sie ein Projekt bekommen. Das ist das Ding hier, wenn es um unsere Econ-Website geht, aber vielleicht benötigst du eine zweite, das könnten deine Social-Media-Kampagnen sein Sie können drei Dateien darin haben, und die andere Einschränkung ist, dass Sie nur drei Seiten pro Datei haben können drei Seiten pro Datei Lass es uns aufschlüsseln. Wenn du es schon hast, sagst du, ja, verrate es nicht noch einmal. Fahren Sie mit dem nächsten Video fort. Da ist nichts. Ich werde es nur noch einmal behandeln, nur um sicherzugehen , dass ich weiß, dass ich dieses Video gebraucht habe, als ich anfing . Wir haben ein Team. Wir haben das kostenlose Konto, also haben wir nur ein Projekt. In diesem Projekt kann ich drei davon haben, die Designdateien, die wir erstellt haben. Ich habe diesen gemacht. Ich kann noch einen für das Design machen und es wird ein Rahmen sein , sagen wir, wir entwerfen einen Twitter-Post in den sozialen Medien. Das sind zwei Dateien. In meinem Projekt kann ich drei haben. Der Trick ist jedoch, dass Sie so viele Entwürfe haben können , wie Sie möchten Sie können sie einfach in Entwürfen belassen. Als Freelancer ist das vielleicht alles, was Sie brauchen. Sie müssen sie nur am Ende in die Teamprojekte verschieben , um sie zu exportieren Entwickler zu senden Mit dem kostenlosen Konto können Sie ziemlich weit kommen. Die letzte Sache war, wie viele Seiten du haben darfst. Sehen Sie sich das hier an. Bisher haben wir die Seiten 1, zwei und drei. So viele Seiten können Sie in einer Designdatei haben. Das ist in einem Teamprojekt. Da hast du's. Ein Projekt, drei Dateien, und sie können nur drei Seiten haben. Das ergibt Sinn. Was machen wir? Wir müssen umziehen, wir wollen das Teilen für diesen hier in Gang bringen. Denken Sie daran, es hieß: Hey, Sie müssen das von Ihren Entwürfen in Ihre Projekte verschieben das von Ihren Entwürfen in Ihre Projekte Wir können es von hier aus machen. Du klickst einfach auf den Verschieben-Knopf, schon ist es erledigt. Es weiß, wo es hin muss. Wir machen es einfach manuell, weil ich es dir zeigen will. Ich arbeite an Entwürfen Hier sind alle meine Dateien. Ich brauche das nicht in meinem Projekt, weil das nur irgendein seltsames Ding in der Statusleiste war , das ich kopiert und eingefügt Das brauche ich nicht. Aber diesen brauche ich. Was ich tun kann, ist es anzuklicken und zu ziehen. Ich kann sagen, machen Sie sich mit meinen Projekten vertraut. kann es nicht tun, weil ich es nicht sehen kann. Das war mal Abdu Jetzt klicken Sie mit der rechten Maustaste darauf und sagen Datei verschieben. Ich möchte es bitte in dieses Team verschieben. Es ist aus deinen Entwürfen verschwunden. Wenn ich an Projekten arbeite, ist es hier, mein Teamprojekt Da ist meine kleine Akte drin. ist diese unbetitelte , die ich nicht brauche Ich werde in den Papierkorb ziehen. Ich habe nur drei. Ich will keine verschwenden. Es ist nur ein neues Zuhause dafür. Aber wenn ich zu derselben Datei zurückkehre , die ich immer noch geöffnet habe, kann ich jetzt zu Shear gehen und das kleine Banner ist von oben verschwunden und ich kann sagen, dass Doug es jetzt bearbeiten kann Er kann Dinge verschieben, Schriftarten ändern, im Grunde alles tun, was ich tun kann Das ist also eines der Dinge , auf die Sie stoßen könnten. Ich möchte es dir schon früh zeigen, nur um Projekte und Teams vorzustellen und zu zeigen, wo du auf um Projekte und Teams vorzustellen und einige der kostenpflichtigen Funktionen stoßen könntest einige der kostenpflichtigen Funktionen stoßen Sie können jetzt sehen, dass sich meine Datei in meinem Projekt befindet. Da steht: Hey, du darfst nur drei Wenn Sie mehr wollen, müssen Sie ein Upgrade durchführen. Nun, führen Sie später im Kurs ein Upgrade durch, um Ihnen einige der Premium-Pro-Funktionen zu zeigen . Aber im Moment werden wir das einfach ignorieren. Im Moment gibt es hier noch einen Vorbehalt. Nun, solange Figma existiert , kannst du mehr als ein Team haben Also lass uns dieses Team umbenennen , weil das ein lustiger Name für ein Team Okay, ich werde hier reingehen. Also habe ich auf das Team geklickt. Geh hier hoch und ich werde es umbenennen und mein Ding wird Scott Wallets heißen Das ist der Kunde , für den ich arbeite. Aber was ich tun kann, ist, ein neues Team zusammenzustellen. Das könnte die Laptop-Firma Binger sein und ich arbeite für sie. Ich brauche keine Mitarbeiter. Ich werde den Starterplan wählen, und Sie können hier oben sehen, dass ich zwei Teams habe Das Gute daran ist, dass das zweite Team, das ich gebildet habe , sein eigenes Projekt und seine eigenen drei Dateien mit eigenen drei Seiten hat. Mit einem kostenlosen Konto kommen Sie ziemlich weit. Ordnung, also gehe ich zurück zu Scott Wallets, um mir all diese Projekte anzusehen Da ist es, mein Öko, mach das zu, alles zusammengebunden und fertig War das hilfreich? Ich weiß. glaube, ich hätte es verwirrender gemacht als das, was es ist. Vielleicht nicht. Hoffentlich war es hilfreich. Das ist es. Lass uns zum nächsten Video übergehen. 30. Wie ich Inspiration für UX-Projekte finde: Eins. In diesem Video werden wir von unserem Wireframe, okay, wo es nur Quadrate und Klartext sind, zu unserem High-Fidelity-Modell Und bevor wir das tun, schauen wir uns an wie wir von leeren Wireframes zu Schriftarten, Farben und Stilen und zum Aussehen der Dinge übergehen könnten leeren Wireframes zu Schriftarten, Farben und Stilen und zum Aussehen Und es ist irgendwie der unterhaltsame Teil des Prozesses, bei dem wir versuchen, uns von anderen inspirieren zu lassen Lassen Sie mich Ihnen also die Orte zeigen, an die ich gehe, um mich inspirieren zu lassen, bevor ich anfange, hochauflösende Modelle und Figma zu erstellen hochauflösende Modelle und Figma Okay, es gibt also eine Menge Orte, an denen du vielleicht deine eigenen hast Das sind die Orte , die ich normalerweise zuerst besuche und so etwas wie Dribble oder Behance oder irgendeine dieser Archivseiten. Sie müssen nur nach dem Begriff UI-Kit Dribble oder Behance oder irgendeine dieser Archivseiten suchen dem Begriff UI-Kit Benutzeroberflächen-Kit reduziert es im Allgemeinen auf mehr mobile Dinge für Websites als nur auf generisches Design UIKits und du kannst es einfach durchgehen und du sagst , oh, ich mag das, und du machst einen Screenshot davon und wir werden als Nächstes anfangen, sie in einem Moodboard zusammenzustellen in einem Moodboard zusammenzustellen Aber geh einfach durch und finde Sachen, die dir gefallen. Verwenden Sie den Begriff UI-Kit. Sie können auch UX eingeben, nur um es zu reduzieren und mit dem Erstellen von Screenshots zu beginnen Behance ist ein weiterer guter. Es konzentriert sich auf das Internet, was gut für uns ist. Fangen Sie an, Screenshots zu machen, Dinge, die Ihnen gefallen Sie könnten für ein Kit von einer dieser Websites bezahlen. Wir stehlen hier nicht, wir bekommen nur Ideen von Dingen, von denen wir glauben, dass sie mit Invado Elements funktionieren werden, oder sagen , Adobe Stock, sie haben auch gute, und dann gehen wir zu einigen anderen über Ich mag diese. Das sind Auszeichnungen. Okay, das ist css design awards.com, und dieser hier heißt Awards with ThreeWST. Das ist wirklich praktisch, weil es einfach großartige Designs sind , die für Auszeichnungen eingereicht wurden, also ist es ein wirklich guter Ort, um nach Dingen zu suchen. Lassen Sie uns eines dieser beiden verwenden. Ich mag Auszeichnungen, denn wenn ich Brieftasche eintippe, wird es auf Dinge reduziert, in denen Brieftaschen enthalten sind, was wirklich cool ist Woran auch immer du gerade arbeitest, tippe es ein und es wird es reduzieren Hoffentlich findest du etwas, das dir meins vielleicht nicht gefällt. Es gibt nicht viele echte Geldbörsen. Es gibt eine echte Brieftasche. All dies scheinen digitale Krypto-Wallets zu sein. Okay. Aber egal, es ist einfach praktisch, es durchzugehen und nachzuschauen. Was an dieser Award-Website auch wirklich gut ist, ist, dass Sie sie erkunden können. Ich schaue mir gerne die Nominierten an, nicht nur die Gewinner, und ich gehe gerne hier rein und sage Schlagworte Hier sind jede Menge guter Schlagworte drin. Nehmen wir an, Sie müssen auschecken, weil Sie sie noch nie zuvor gemacht haben und sehen möchten , wie die anderer Leute aussehen. Also habe ich Checkout eingegeben. Es gibt keinen Checkout. Okay, es funktioniert nicht, weil es keinen Check-out gibt. Ich führe keine Suche durch. Ich suche nach Schlagwörtern. Sie können durch die Tags scrollen. Ich weiß, dass da eine Fußzeile drin ist, also Footer Design Awards. Wer wurde nominiert? Okay, dann kannst du das alles durchgehen und sagen: In Ordnung, schauen wir uns diese Seite an Und es geht zur eigentlichen Seite selbst. Wir werden die Pop-Ups schließen. Schauen wir uns ihre Fußzeile an. Gehen Sie sogar zu ihrer Fußzeile. Wie dem auch sei, du verstehst die Idee Sie können bestimmte Dinge durchgehen und auswählen. Möglicherweise haben sie ihre Website seitdem geändert. Nein, das wird beworben. Ich habe auf eine Anzeige geklickt Gute Arbeit, Dan. Schauen wir uns Footer Award dieser Leute Ich schaue mir die Designs an. Gehen wir zur eigentlichen Website. Wie kommst du zur eigentlichen Website, Dan? Das ist es. Sie klicken auf Website besuchen. Sie haben diese Seite ziemlich oft geändert Wenn Sie also hier ankommen, sieht sie vielleicht anders aus. Ich gehe zu dieser und schaue mir dann ihre Fußzeile an. Lass uns einen Blick darauf werfen Oh ja, es ist eine ziemlich gute Fußzeile, schätze ich. Verstehst du, was ich meine? Weil Sie manchmal ein bestimmtes Element in Ihrem UX-Designprozess neu gestalten , vielleicht nicht eine ganze Website, also ist das praktisch Lassen Sie uns das schließen . Andere, die ich mag, eine Seite love.com Dann sind die letzten paar hier nur Geldbörsen. Ich habe gerade angefangen, online über Google nach Designer-Geldbörsen zu suchen , und bin gerade auf die Ridge-Geldbörse Ich möchte nur ihre Website sehen und sehen, wie sie Brieftaschen gemacht haben Sie haben diese mechanische Geldbörse, die hübsch ist , und schauen wir uns einige andere an. Es ist einfach ein guter Weg, man muss sich nicht nur das Design ansehen. Sie können sich die eigentlichen Websites selbst ansehen. Versuchen Sie, einige Marken zu finden, die Ihnen gefallen, insbesondere für Brieftaschen. Ich weiß, was eine Brieftasche ist. Ich habe schon einmal Brieftaschen gekauft Aber wenn ich etwas wie Shampoo machen müsste, was ich schon lange nicht mehr auf dem Markt habe, müsste ich vielleicht auf Websites nachschauen Shampoo-Websites im Moment aussehen, welche gut sind, welche Marken gut abschneiden, und einfach durchgehen und Screenshots von Dingen machen und einfach durchgehen und Screenshots , die ihnen gefallen Du sagst, oh, ich mag die Art, wie sie das hier machen, du fängst an, kleine Teile für dein Moodboard zu sammeln . Lass dich inspirieren. W Ich musste auf Ihrem Computer mit dem Command Chef 4 auf meinem Mac einen Screenshot machen und Sie können ein Feld um Dinge ziehen. Sie können sagen, ich mag das hier ein bisschen, aber ich werde es mir ausleihen oder mir zumindest eine Idee von einem PC machen, ich bin mir ziemlich sicher, dass es auf dem Bildschirm ist, aber Sie müssen einfach überprüfen, was es auf einem PC ist Mach jede Menge Screenshots. Lass es mich auch in den Kommentaren wissen, wenn du meinst, wir haben diese Seite nicht zur Inspiration erwähnt. Lass mich in den Kommentaren wissen , ob du welche hast , die dir gefallen. Ich liebe diesen Teil des Prozesses. sich inspirieren, finden Sie Dinge, werfen Sie sie alle auf ein Dock, was wir im nächsten Video tun werden . Wir sehen uns dort. 31. So erstellen Sie ein Moodboard in Figma: Ordnung, alle zusammen. In diesem Video werden wir uns ansehen, wie unsere Inspiration in ein Moodboard umsetzen. Wir machen ein schickes und dann machen wir das, das überall ist , wo ich es normalerweise benutze. Aber wir brauchen beides. Einer geht zu einem Kunden, einer zu unserer eigenen Referenz. Lass uns jetzt ein Moodboard in Figma erstellen. Lass uns den ersten chaotischen Weg machen , den du alleine benutzt Es ist im Grunde so, dass Sie es zu Ihrer eigenen Seite machen könnten und dann die Seiten ausgehen Ich kann das wieder zu Entwürfen überführen und mehr als eine Seite haben Aber ich bin bei drei Seiten festgefahren, also könnte ich eine machen, die eine Moodboard-Seite ist, die völlig Wenn Sie ein professionelles Konto haben, könnte es gut sein. Aber wenn ich an meinen Designkram arbeite, mag ich es oft, dass meine Stimmung oder Screenshots direkt über dem stehen, woran ich gerade arbeite. Ich muss nicht zwischen den Tabs wechseln. Alles, was ich tue, ist, ein Bild einzubringen . Falls ich viele Screenshots gemacht habe, kann ich diesen Weg gehen. Es gibt eine Option hier unten unter dem Rechteck, da steht: Bild mitbringen. Okay? Und ich kann darauf klicken. Ich kann in meinen Übungsdateien nachschauen. Es gibt einen namens Mo Board. Ich habe alle meine hier reingetan. Benutze meine nicht. Ich lege sie einfach hier rein, um einfach los zu gehen. Hier sind alle meine Bilder. Ich kann das alles durchgehen und sagen, dass ich das alles will. Ich klicke auf das erste , halte die Umschalttaste gedrückt, nehme das letzte, klicke auf Öffnen, und ich habe 21 Bilder und klicke einmal für eins, und ich kann einfach anfangen, sie einzufügen Okay, das ist meine Inspiration, alles erledigt. Das ist mein Moodboard. Oft reicht mir das, während ich arbeite. Klicken Sie weiter. Okay? Ich brauche das hier oben, während ich Schriften entwerfe und auswähle, und ich denke, oh, das ist eine coole Farbe, und ich ändere das vielleicht, um zu sehen, ob ich sie anpassen kann. Das ist irgendwie genug. Sie können sie natürlich danach bewegen. Sie können den Rand mit einem Bild ziehen und einfach neu skalieren. Du könntest das offizielle Tool zum Skalieren benutzen, aber das Bild an sich, du kannst einfach die Ecke nehmen und los geht's, das ist cool, aber das, was ich wirklich mag, ist dieses Ding hier aus irgendeinem Grund, ich mache es schön groß Zuschneiden und so machen wir später, aber das reicht mir oft gerade, um mit der Arbeit anzufangen Was ich allerdings tun könnte , um das Board aufzuräumen, ist dass Sie es hier unten sehen können, bevor wir Home-Features hatten, Checkout, sehr ruhig in seinen eigenen Ich habe diesen hier. Was macht das ganze Zeug? Du kannst all diese Junkies sehen, die rumhängen, all diese Screenshots, die einfach auf mir rumhängen nebenbei mein geliebtes Menü ruinieren Was ich tun werde, ist, dass du danach einen Rahmen hinzufügen kannst. Schau dir das an. Lass uns den etwas kleiner machen. Mm, bitte warte. Was Sie tun können, ist, einen Rahmen um alles herum zu zeichnen, sodass Sie sich Ihr Rahmenwerkzeug schnappen können. Wenn du den Rahmen um die Außenseite all dieser Dinge ziehst , werden sie einfach hineinplumpsen Kannst du sehen, dass ich das jetzt geschlossen habe? Siehst du Bild eins, ich nenne das vielleicht Moodboard. Nur damit es auf sich allein gestellt ist. Ich kann es verschieben, wenn ich damit fertig bin. Du verstehst, was ich meine, oder? Lassen Sie uns ein offizielleres, schickeres Moodboard weil wir sagen, wir müssen zurück zu unseren Stakeholdern Okay? Ich benutze dieses Wort, ich hasse es, aber es ist üblich. Stakeholder, alle, die mit diesem Projekt zu tun haben, es könnten, ich weiß nicht, einige der Investoren sein oder jemand, der ein Projekt als Stakeholder berührt, es wäre üblich, vor allem, wenn Sie an einer neuen Marke arbeiten, mit einem Moodboard zu ihnen zurückzukehren, bevor Sie mit Moodboard zu ihnen zurückzukehren, bevor Sie Arbeite am Iframe. Dann das Move-Board, sobald sie abgesegnet sind und die Richtung in Bezug auf das Thema und den Stil festgelegt sind, dann gehst du los und fängst an, einige High-Fidelity-Mockups zu machen Eine gute Möglichkeit, dies zu tun, besteht darin, sie alle durchzugehen und sie aneinander auszurichten und sie gut aussehen zu lassen, einige Beschriftungen hinzuzufügen und das Ganze ein wenig zu verschönern Ich finde es einfacher, einfach mit der Vorlage von jemand anderem zu beginnen . Also gehen wir zum Startbildschirm. Wir gehen zu Vorlagen und Tools, die sie bestimmt inzwischen umbenannt haben. Suchen Sie Community und ich gebe Moodboard ein und sehe, was andere Leute gemacht haben Wir werden einen finden, einen auswählen. Möglicherweise müssen Sie einige durchgehen, um das zu finden, was Sie wollen. Wir suchen jedoch diesem kleinen Bleistiftsymbol und dieses ist anders. Fig Jam ist eine andere Software, die Figma herstellt. Es ist wie Merro oder PowerPoint. Es ist ein Whiteboard-Tool. Es ist ziemlich cool. Aber wir wollen Figma-Dateien Ich werde auf diesen klicken. Denken Sie daran, wenn ich Open Infig sage, ist diese Vorlage oder diese Community-Datei jetzt tatsächlich Teil meiner Entwürfe für Scott Das ist jetzt meins. Ich könnte daraus nehmen was ich brauche, und es löschen oder es einfach behalten. Was ich tun möchte, ist eine Menge Zeug auf diesem zu finden. Schau mal, denk dran, wenn du die Arbeit anderer Leute benutzt, sieh dir die verschiedenen Seiten an. Die Gitter. Das will ich Ja, schauen wir uns die Raster hier an. Welches will ich? Pesldk diesen. Die eine Sache ist jedoch, wie ich bereits erwähnt habe, wenn ich das kopiere und es zu meinem Dokument zurückbringe, an dem sie gerade arbeiten, kann ich keine weitere Seite einfügen, weil ich im Moment durch das kostenlose Konto eingeschränkt bin Ich werde meine einfach hier rüberstellen und es ist eine Instanz einer Komponente, von der Sie nicht wissen, was sie ist. Wenn es einen kleinen Diamanten für den Moment hat , bis wir lernen, mit ihnen zu arbeiten, klicken Sie einfach mit der rechten Maustaste darauf und sagen Sie, L ist angehängt. Jetzt ist es nur noch ein Teil dieses Dokuments. Siehst du, es ist ein normaler Rahmen mit Rahmen darin, und ich möchte ein paar Bilder einfügen. eine kleine Abkürzung für das Einfügen von Bildern in Oft öffne ich gerne eine kleine Abkürzung für das Einfügen von Bildern in meinem Finder, sodass ich nicht mehr Figma bin Das ist Mac oder PC. Öffnen Sie Ihr Finder-Fenster, suchen Sie die gewünschte Datei, ziehen Sie sie einfach hinein und ich füge sie einfach dem Dokument hinzu. Ich finde, das ist oft einfach. Ich mache das trotzdem, zieh sie einfach rein. Dann kannst du gehen, du willst hier in diesen Rahmen gehen. Wenn es nicht in den Rahmen passt, ziehst du es hin und her. Siehst du, es wurde blau. Jetzt weiß es, dass es drinnen sein muss . Jetzt ist es wieder herausgesprungen Wenn es nicht in das rechte Raster geht, dann dieses hier, Frame Null Ich möchte, dass der Screenshot da drin ist. Jetzt werde ich es davor bewegen , es darin zu bewegen. Ich versuche nicht, das Ganze zu zeigen. Ich gebe nur eine visuelle Referenz. Das ist die Stimmung, die Stimmung der Sache. Sie können es auch tun, wenn es ausgewählt ist. Sie müssen es eigentlich nicht ausgewählt haben, aber Sie können hier runter gehen, zu Bild und Video gehen. Du kannst den finden, den du willst. Ray hat den. Mach das, klicke auf Öffnen und dann kann ich einfach die Stelle anklicken, wo ich es haben möchte. Das könnten die verschiedenen Arten sein, Bilder einzufügen. Das Ziel hier ist, dass ich versuche, sie so aufzustellen, dass sie ein bisschen schöner sind, sodass ich das an einen Kunden schicken kann Das ist nicht so kundenfreundlich. Was das sein kann. Sie können dafür sorgen, dass diese größeren Bilder Dinge darstellen, von denen Sie stärker beeinflusst sind . Es ist so, aber ein bisschen davon. Verstehst du, was ich meine? Ich mache das früh. Teile das Wireframe, lass das unterschreiben, gib ihnen ein Moodboard, das ist die Richtung , in die Sie haben vielleicht keine wirklich klare Vorstellung, vielleicht ein oder zwei, also müssen Sie vielleicht ein paar verschiedene Moodboards erstellen , bevor Sie loslegen Was denkst du? Diese Richtung, Richtung , bevor ich viel Zeit damit verbringe , etwas zu entwerfen. Hübsche Version. Unordentliche Version, die ich verwende, wenn ich nur alleine arbeite. Auch hier geht es nicht um Kopieren, sondern darum, dass Sie das sehen können. Du sagst, oh, ich habe nie darüber nachgedacht, den Hintergrund zu machen, diese cremefarbene Farbe. Es ist eine ziemlich graue Farbe. Und diese Kombination Blaugrün ist wirklich cool. Das gefällt mir. Ich fange an , das für einige meiner Knöpfe und so zu verwenden. Es weckt einfach Kreativität und ein wirklich unterhaltsamer wichtiger Teil des Designprozesses, denke ich Das ist es. So macht man ein Spielbrett. Zwielichtige Version, schicke Version. Ordnung. Gehen wir zum nächsten Video über. 32. Kursprojekt 06 – Moodboard: Okay, es ist Zeit, dein eigenes Moodboard zu erstellen. Dieses Klassenprojekt besteht darin, ein Moodboard für das Unternehmen zu erstellen , das Sie aus dem Zufallsgenerator für Projekte erhalten haben Mir gehören Scotts Brieftaschen. Und ich möchte, dass du im Internet suchst und dich inspirieren lässt und viele Screenshots machst Okay, also all die aus dem letzten Video, schau dir diese Seiten an, aber schau dir auch deine eigenen an. Vielleicht schaust du dir Pinters und Instagram an. Die habe ich nicht gezeigt. Mir ist noch ein anderer in den Sinn gekommen, Mobinn. Okay, mobin.com. Das ist wirklich gut für spezielles App-Design, okay? Hier sind einfach viele coole Sachen drin. Und wieder gibt es eine kostenlose und eine kostenpflichtige Option. Sie müssen sich anmelden, um es verwenden zu können. Im Moment könnte sich das ändern, aber Sie können sehen, dass Sie nach UI-Elementen suchen , was nett ist. Okay, das ist eine andere, dann speichern Sie sie einfach alle in Ihre Figma-Designdatei Sie können eines von zwei Dingen tun. Du kannst beides machen, wenn du willst. Du kannst die große, hässliche Version machen wo es nur in einem Rahmen ist, einfach herumgeworfen und halbherzig aufgereiht Oder Sie können den netten Teil machen, bei dem Sie eine Vorlage finden. Üben Sie, die Vorlagen anderer Leute zu verwenden, legen Sie sie gut an. Sie können eines oder beide machen und einfach einen Screenshot davon machen und ihn hochladen. Wo ist unsere Klassenprojektdatei. Du kannst das oder das oder beides machen. Und eine Sache, die Sie vielleicht tun könnten, ist, dass ich zuerst mein Spielbrett, den Rahmen, koloriert habe. Sie können die Rahmen tatsächlich einfärben. Du kannst also statt eines weißen Meins hinzufügen, abdunkeln, um es zu trennen Die andere Sache, die Sie tun können, ist, wenn Sie eine weitere Seite wollen, wissen Sie, dass wir jetzt, wo es ein Team gibt, nur noch drei Seiten haben müssen dass wir jetzt, wo es ein Team gibt, nur noch drei Seiten Wenn Sie zu den guten alten Zeiten zurückkehren möchten als Sie die Entwürfe hatten und so viele Seiten hatten, wie Sie möchten, weil Sie die Bearbeitungsfähigkeit im Moment nicht benötigen Was du tun kannst, ist nach Hause zu gehen, und ich glaube, ich habe meins schon gemacht Ich habe es getan. Meine waren Entwürfe An dem arbeite ich gerade. Ich kann Dateien in meine Teamprojekte verschieben, Scott Wallets. Und da haben wir die Einschränkungen von nur drei Seiten. Wenn du das zurück zu Entwürfen haben willst, kannst du zu „Alle Projekte“ gehen und doppelklicken, nicht auf die eigentliche Datei, sondern nur in diesen weißen Bereich auf der Außenseite, sondern nur in diesen weißen Bereich auf um sie zu öffnen, und du kannst mit der rechten Maustaste auf diesen Typen klicken und sagen: Hey, ich möchte dich zurück an einen Ort bringen, wo Entwürfe Vielen Dank. Die Dateien sind immer noch geöffnet. Es lässt sich nicht wirklich öffnen und schließen. Es wurde gerade verschoben, und Sie werden feststellen, dass es in meinen Entwürfen ist, in den Bereichen dort, und ich komme auf meine Seiten zurück, sodass Sie hier eine Moodboard-Version erstellen können eine Moodboard-Version erstellen Neue Seite, Moodboard, und erstelle sie hier, um sie getrennt zu halten. Es liegt an dir und deiner OCD. Ich werde diese Seite löschen. Ich werde meine einfach auf derselben Seite belassen , nur weil ich sie beim Entwerfen gerne sehe. Es liegt an dir. Das ist es. Das ist ziemlich einfach zu tun. Platzieren Sie Screenshots auf einer Seite und machen Sie daraus irgendwie ein paar Minuten Video. Gute Arbeit, Dan. Gut, geh los und lass dich inspirieren. Und stell sicher, dass du es hochlädst. Laden Sie es in die Klassenprojekte, den Aufgabenbereich hoch. Mich würde interessieren, was du machst. Vor allem, wenn wir deine späteren sehen, ist es toll, zurückzublättern und zu sehen, wo die Inspiration angefangen haben könnte. Ordnung. Nun, das ist das Ende. Auf Wiedersehen. 33. Arbeiten mit Spalten und Rastern in Figma: Hallo. Willkommen zum Epic-Video , in dem es um diese 12 kleinen Kolumnen geht. Irgendwie ist es ein langes Video, weil das Anwenden der Spalten wirklich einfach ist. , warum wir die Spalten anwenden Ich hoffe, Sie finden es nützlich, warum wir die Spalten anwenden, vor allem, wenn Sie nicht viel im Web- oder App-Design gearbeitet haben . Es gibt auch einige wirklich praktische Tricks wir überall behandeln, also ich weiß nicht, überspringen Sie es nicht. Neben dem bloßen Erstellen von Kolumnen gibt es hier einige nützliche kleine Tipps und Tricks. Es ist ein guter. Lass uns nachforschen. Lass uns anfangen. Sogar das Intro ist lang Ordnung, spring rein. Richtig. Zuallererst brauchen wir ein paar zusätzliche Seiten. Wenn du in sowas nicht weiterkommst, oh, ich kann nur drei haben. Wir müssen das wieder in die Entwürfe aufnehmen. Okay, um das zu tun, geh zurück nach Hause und finde in deinen Entwürfen den Typen, an dem du arbeitest Nein, es ist in Projekten. Okay? Und diese Person hier, ich werde mich mit meinen Teamprojekten befassen. Doppelklicken Sie also auf den äußeren Teil, nicht auf die eigentliche Datei. Okay, ich kann mit der rechten Maustaste darauf klicken und MoveTo Move File sagen Okay, zwei, Entwürfe und klicken Sie auf Verschieben. Oder Sie können auf Halten klicken und es in die Entwürfe ziehen. Okay? Dann öffnet sich die Datei, die immer noch geöffnet ist, irgendwie und du kannst mehr Seiten haben. Lass uns das durchgehen und etwas umbenennen. Ich werde zoomen. Ich habe gerade das Handy OFI für mein Handy und meinen Desktop umbenannt Ich werde zwei neue Seiten hinzufügen und diese aufrufen. Hi-Fi für Mobilgeräte und Desktops. Dies sind meine Y-Frame-Versionen. Du kannst sie Y-Frame nennen, das ist in Ordnung. Ich nenne sie gerne Lo Fi. Wir gehen zum Desktop und ich werde mir die Spalten ansehen. Lass uns die F-Taste auf meiner Tastatur drücken. Klicken wir auf Notiz. Gehen wir rüber und sagen, ich möchte einen Desktop. Ich möchte die wirklich übliche Desktop-Größe, nämlich 14 x 40 mal 1024. Du musst es so sagen. Wenn du zu einem Meeting gehst und sagst dass du eine Website mit 1.440 x 1024 Pixeln hast , wissen sie, dass du neu bist Aus irgendeinem Grund musst du 14 40 mal 1024 sagen. Ich bin mir nicht sicher warum. Aber geh auf unseren Desktop. Lass uns eine Spalte hinzufügen. Ich werde sie ein bisschen ausarbeiten. Sie sind hier drüben und heißen Layout Guide. Drücken wir in der Layoutanleitung auf Plus und Sie erhalten ein Raster. Wir möchten es auf Spalten umstellen und die Spaltenanzahl ist aus irgendeinem Grund standardmäßig fünf, obwohl die wirklich übliche Anzahl von Spalten 12 ist. Lass uns einen kleinen Blick darauf werfen. Nun, zuallererst, was sind sie? Sie sind einfach hier. Wenn ich das Fk für den Rahmen nehme, kann ich so etwas machen, wo ich mein Navi nehme und ihm eine Farbe gebe. Dann nenne es Farbe. Okay. Und ich dupliziere es Das ist meine Heldenbox, das ist die Art, in der die Marketingbotschaft oft lautet: Hey, komm zu uns Ein inspirierendes Bild finden Sie hier. Als Nächstes wollen wir diese Karten unten haben. Ich werde es noch einmal duplizieren. Nun, diese Karten sind oft die Features, wie: Hey, trete uns bei und erhalte bessere Leistungen, verdiene mehr Geld. Sparen Sie jetzt Gewicht, die Funktionen für das Produkt befinden sich offensichtlich oft in diesen drei oder vier kleinen Boxen. Diese werden Karten genannt, manchmal Feature-Karten oder UI-Karten, und das ist eine wirklich grundlegende Struktur für eine Website Deshalb ist dieses Raster sehr praktisch. Es ermöglicht Ihnen, darauf zu klicken, sodass Sie einfach „ Do“ wählen können, und es gibt uns auch ein bisschen Flexibilität, wenn Sie drei wollten, aber was Sie wirklich wollten, ich werde diese löschen, Sie wollten vier. 12 ist leicht teilbar. Durch eins, zwei, drei, vier, sechs. Fünf schaffst du nicht. Mach einfach nicht fünf. Hör auf, Fragen zu stellen. Es hängt also davon ab, wie viele Funktionen Sie haben. Der andere Grund, warum wir es tun, ist, dass es einfach sehr verbreitet ist. Und warum das wichtig ist, ist , dass es keine wirkliche Regel gibt. Du könntest 13 Spalten haben, aber dein Entwickler wird dich finden und dir wehtun. Weil die Person, die die Website erstellt, oder wenn Sie sie programmieren oder Wordpress- oder Webflow- oder Figma-Seiten verwenden, was auch immer es ist, die zugrunde liegende Codebasis, die Ihnen hilft oft einen Standardspaltenbereich von 12 hat Es kann außer Kraft gesetzt werden, aber es ist einfach ohne triftigen Grund schmerzhaft Gut. Der Grund, warum es gut ist: Wenn Sie ein Webdesigner sind, werden Sie ein wirklich gutes Verständnis von Breakpoints und Reaktionsfähigkeit haben von Breakpoints und Reaktionsfähigkeit Für die Leute, die das nicht tun, möchte ich Ihnen eine kurze kleine Demo geben nur um zu erklären, warum es wichtig ist, sich darauf zu konzentrieren Also habe ich diese Website hier, HubSpot, keinem guten Grund, außer dass sie wirklich gut und responsiv ist wirklich gut und responsiv Also, wenn wir entwerfen, haben wir die Seite hier. Schauen wir uns ihre Feature-Box an. Sie haben drei. passiert, wenn es darauf ankommt, ich bin ein Desktop, ich bin ein Desktop, ich bin ein Tablet. Ich bin dort ein Tablet. Was sie tun, sind ein paar Dinge. Sie wechseln das Menü auf ein Burger-Menü im schicken Restaurant dort. Also haben sie beschlossen, das zu tun. Aber sie haben auch beschlossen , sie aufzubrechen statt sie einfach weiter zu zerquetschen , weil sie langsam ziemlich klein werden, sie sagen, alles klar, Buch, sie gehen, Ihren eigenen Soundeffekt hinzufügen ist runter zum Raster zu kommen Sie haben sich also entschieden: Okay, ich habe Ich werde das duplizieren und ich werde für Tablets entwerfen, also gehe ich hier zu Frame und ich kann es auf iPad Pro ändern es auf iPad Pro Lass uns ein paar Dinge löschen und das aufräumen. Zuallererst verwenden wir auf dem iPad Pro dieselbe Navigations - und Heldenbox, die immer noch da ist Aber sie werden von drei auf zwei Seiten wechseln , genau das tun sie. Das ist das Design, das dem Entwickler gegeben hätte und gesagt hätte: Hey, hier ist meine Desktop-Ansicht. Hier ist meine Tablet-Ansicht , damit sie wissen, was zu tun ist. Drücken sie es einfach weiter runter? Wenn du es ihnen nicht sagst, drücken sie es einfach weiter Okay? Okay, gute Entwickler werden wissen, dass sich etwas ändern muss, und du kannst es ihnen überlassen, oder du kannst es ihnen sagen und sagen: Schau, wenn es soweit ist, werde ich das machen. Manchmal gehen die Leute so. Ich habe es schon einmal gemacht, wo ich dachte, richtig, dieser letzte ist eigentlich nicht so wichtig und es nervt mich wirklich, dass es hier diese große Lücke gibt. Offensichtlich stört es Hubspot nicht , aber hier gibt es diese große Lücke. Ich denke, du brauchst das wahrscheinlich. Was machen wir? Also könntest du es ausschalten, wie ich es gerade getan habe, und was habe ich gerade getan? Ich habe gerade das Ich schalte den Augapfel aus auf die Farbe gestellt , immer noch da, schwer auszuwählen Okay, du könntest es also ausschalten oder ein neues hinzufügen. Ein vierter erscheint. Okay? Vielleicht nicht so wichtig, also ist es nicht auf dem Desktop, aber es erscheint hier. Wir haben vier, also würde es gut funktionieren . Siehst du, ich mag vier. Vier ist gut. Okay? Aber es bedeutet, dass es hier für Tablets gut zusammenfällt, aber manchmal sind drei einfach üblicher, und du musst dir etwas überlegen, was du tun Und was sie mit Handys machen, sieh dir das an. Bereit für das Also, jetzt ist es eine mobile Website und sie haben gesagt, richtig, sie werden auf Mobilgeräten so groß. Schau dir an, dass sie von dieser Größe auf Mobilgeräten zu einer riesigen Größe wechseln . Sie sind wie, richtig, mobiles Design, ziehen Sie das in die Länge. Ich lösche und dich. Ich werde das machen. Ich tippe es gerade ein. Sie können das Tippen sehen. Du wirst unser iPhone 16 sein. Und was wir beschlossen haben, ist dies und das wird sich einfach verschlechtern Dann diese, ich werde einfach die volle Breite haben, und ich werde eine haben, ich werde sicherstellen, dass sie auf dem mobilen Rahmen sind Ich kann sie nicht sehen, also klicke ich auf Mobilgerät, sagen wir Clip-Inhalte, r. Ich zeige dir später, wie man scrollt, aber im Grunde müssen für Mobilgeräte scrollen, damit sie passen. Da hast du's. Das ist die Reaktionsfähigkeit auf Mobilgeräten und deshalb machen wir uns hier die Mühe, dieses Grid zu erstellen Es gibt uns nur ein paar Dinge, auf die wir konzentrieren können, denn was der Entwickler tun wird, ist, dass er sagen wird, diese Box hier, diese Wenn es so viele Pixel breit ist, 14 40, hat es ein bisschen Code, den man an diese kleine Karte hier anhängen kann, also B drei Spalten breit. Aber wenn die Breite der Seite 800 Pixel beträgt, B, wie groß ist dieser Durchmesser? Es ist also wirklich einfach. Man kann es einfach irgendwie begründen und sagen, wenn es diese Größe hat, seien es so viele Spalten, und wenn es, du weißt schon, 600 Pixel breit ist, wie bei einem Mobilgerät, muss es 12 Spalten breit sein Ich weiß nicht, Malusa USA. Schauen wir uns das Handy an. Das Handy ist ein bisschen anders. Also gehe ich hierher, geh ans Telefon, geh Dean, du kannst sie alle auf ihrer eigenen Seite entwickeln. Ich werde sie nur für diesen Kurs heraussuchen. Oft mache ich das. Ich entwerfe das, was für die Website am wichtigsten ist. bringen einen Laptop mit, wir sind eine Website, bei der der Desktop an erster Stelle steht, wir entwerfen zuerst Dinge für den Desktop und finden dann heraus, wie das auf dem Handy funktioniert. Viele Websites werden jedoch zuerst mobil sein, was bedeutet, dass ihr UI-Design zuerst für Mobilgeräte konzipiert ist und dann eine Desktop-Version davon ausarbeitet , weil es sich hauptsächlich um eine mobile Website Ich habe ein iPhone 16. Ich gehe zum Grid und Dan sagte, wir sollten 12-Spalten verwenden. Das ist nicht so nützlich. Wenn Sie also mit einem Mobiltelefon arbeiten, wird die zugrundeliegende Technologie 12 sein, aber es ist einfacher, mit sechs zu entwerfen. Sechs ist teilbar durch 12, also weißt du, es ist in Ordnung Es ist einfach viel einfacher, es mit sechs statt mit 12 zu tun. Also werde ich meinen Rahmen von hier holen. Okay? Eigentlich müssen wir es nicht tun. Du verstehst die Idee. Entwerfen Sie einfach mit sechs für Mobilgeräte und 12 für den Desktop. Und wahrscheinlich immer noch 12 für Tablets. Sollten Sie für ein Tablet entwerfen, liegt es an Ihnen. Das hängt vom Job ab. Ist es ein großer Job, bei dem Sie viel Zeit und Ressourcen haben , um auch eine Tablet-Version zu entwickeln? Vielleicht ist es ein großer Nutzen für Ihre Website. Dann verbringen Sie auf jeden Fall Zeit damit , die so genannte Tablet-Version zu entwickeln. Manchmal überspringen Designer jedoch das Tablet und machen es einfach mit Desktop und Handy und lassen den Entwickler einfach das Tablet ausarbeiten. Das ist nicht richtig, aber oft findet man einfach spezielle Vorlagen und so, sie haben nur Mobilgeräte und Desktop-PCs. Warum kann ich diese Namen hier sehen? Es ist wie ein Pop-Quiz. Warum kann ich Bild drei sehen und das ist alles durcheinander Das liegt daran, dass sie nicht wirklich auf oder in meinem mobilen Rahmen sind. Die Namen verschwinden, sobald sie drin sind. anderen Dinge, die ich Ihnen zeigen möchte , sind, dass ich zu F gehe, ich gehe zu U. Wenn Sie eine mobile Website entwerfen, verwenden Sie Spalten. Wenn Sie eine App für IOS, für Apple oder für Android entwerfen . Es ist wirklich üblich, keine Spalten zu verwenden, weil es nicht so flexibel ist. Es gibt nicht das ganze Herumspringen. Eine App erscheint nur auf einem Telefon und es ist wirklich üblich, das Grid zu verwenden, das zuerst angezeigt wurde. Es ist wirklich üblich, die Rastergröße 12 zu verwenden. Okay, das ist eine wirklich übliche Größe oder Arbeitsweise , wenn Sie eine App entwerfen , weil Sie bei einer App etwas genauer vorgehen können . Sie kennen die Höhe und die Breite. Ist dir bei einer App aufgefallen, dass du weniger scrollst. Es ist so, als ob alles irgendwie in einer Art erzwungener Benutzung des Telefons angeordnet erzwungener Benutzung des Telefons ist alles irgendwie durchdacht und Am Telefon ist alles irgendwie durchdacht und sehr bewusst Es wäre also üblich, ein Acht-Punkte-Raster für ein App-Design zu verwenden ein Acht-Punkte-Raster für ein App-Design Es ist das, was die IOS-Entwickler verwenden werden. Sie werden ein Acht-Punkte-Raster verwenden. Also nochmal, wenn Sie es am Ende nicht verwenden, um Dinge voneinander zu trennen, wird es ihnen ein Problem bereiten. Also bleib bei einem Acht-Punkte-Raster. Habe noch ein paar andere Dinge. Gehen wir zu Disk Top. Lass uns hier unten auf Disktop klicken. Klicken wir auf dieses kleine Symbol, um die Einstellungen zu öffnen. Okay? Also haben wir 12. Schauen wir uns die anderen an. Schauen wir uns Magin an. Magin ist also der Rand. Okay? Ich könnte einen Rand von acht setzen und nur eine kleine Lücke an den Rändern machen. Lass uns etwas Großes machen. Lass uns 80 machen. Okay? Hier sind es nur die Ränder. Wenn Sie die Ränder einer Website entwickeln oder sie entwerfen, ist es nicht besonders wichtig, was diese genaue Zahl ist, weil sie so flexibel ist. Schau dir das an. Wenn wir auf diese Hubspot-Seite gehen, werden Sie die Disktop-Ansicht bemerken Sie sehen, dass die eigentliche Site nur in diesem mittleren Bit angezeigt wird. All das erstreckt sich bis zum Rand. Oft tun die Leute das nicht. Einige Websites tun dies. Sie entwickeln tatsächlich für wirklich große Bildschirme, wie die großen riesigen Rundumbildschirme oder den großen IMAX-Bildschirm, und sie werden einen weiteren Breakpoint haben Oft sagen sie aber einfach: Okay, wir entwickeln für diesen mittleren Teil, und dieser Teil hier drüben wird einfach matschig sein, indem man wir entwickeln für diesen mittleren Teil, und dieser Teil hier drüben wird einfach matschig sein, ihn einfach ausdehnt und diesen Schlagschatten bis ins Unendliche ausdehnt . Das Gleiche gilt für diese Farbe hier. Siehst du, hier drüben ist nichts, aber es fühlt sich an, als würde es die Kontrolle über die gesamte Site übernehmen. Das ist einfach auch eine sehr übliche Sache. Um eine Marge zu haben, werde ich 100 verwenden. Es bedeutet nur meine Website , weil sie einen Durchmesser von 14 40 hat. Ich habe sie um 100 auf jeder Seite verschoben. Wirklich, ich entwerfe hier eine Seite in der Mitte , die 12 40 ist. Geh runter, 12 40 da drin. Ich werde das für meine Herrobox entwerfen. Ich werde das Navi wahrscheinlich bis zum Rand fliegen Aber meine Heldenkiste, mein Marketing-Kram wird da sein Ich werde sie löschen und ich werde sagen, dass bist. Und wie viele machen wir? Ich kann mich in unserem Y-Frame nicht erinnern. Was machen wir? Wir haben drei Feature-Boxen. Also werde ich hier rüber gehen und Befehl D oder Control D sagen, um es erneut zu duplizieren. Das werden meine Grundlagen sein. Die andere Sache, die ich tun muss, bevor ich mit dem Entwerfen der Boxen beginne , ist auf den übergeordneten Rahmen zu klicken. Schauen wir uns das Letzte an, das ist Dachrinne. Dachrinne ist der Raum zwischen den Spalten, und er wird sehr häufig verwendet Acht ist eine sehr wichtige Zahl bei der Gestaltung von Websites und Apps Mit acht wird viel Abstand und Schriftgröße erreicht. Acht allein ist also wahrscheinlich zu klein. Euter. Okay, aber lass uns 16 machen. Es wird richtig. Sie werden diese Zahlen wahrscheinlich sehen, wenn Sie im Web- und UI-Design arbeiten, Sie werden 16 sehen. Sie werden sehen, was die nächste Zahl ist, 24 und 32, oder einfach ein Vielfaches von Acht Ich werde 32 als Dachrinne verwenden. Es ist eine weitere sehr übliche Größe für Dachrinnen. Es ist groß genug, dass wir ein bisschen Platz zwischen diesen Boxen haben, ohne zu groß zu sein Und noch einmal, wenn ich das benutze, was es war, 32, wenn ich das nach unten ziehe, kannst du den Abstand zwischen diesen Typen sehen? Siehst du, dass es irgendwie springt, wenn man das hier nach oben bewegt , bis es knallt gegen die Spitze, und ich möchte es ein bisschen nach unten bewegen Was haben wir? Position. Das Y, das ist das Auf und Ab. Ich sage plus 32. Ich weiß, dass es genauso ist, wie es da unten ist. Du wirst feststellen, dass ich auf den Feldern Mathe gemacht habe. Ich mache das oft. Ich finde Zahlen schwierig. Am Ende mache ich, sagen wir, was ist noch ein gutes? Oh, als ich die Kolumne geschrieben habe, schauen wir uns das an. Ich mache das ziemlich oft. Ich weiß, es ist ein Vielfaches von Acht, aber manchmal bin ich verwirrt, ist es 32, 34? Es ist 36. Also ich mache solche Dinge acht mal vier Mal. Also vier Achtel. Du verwendest einfach viermal den Asterix und drückst die Eingabetaste, und schon sind es 32. Oder wenn du sagst, was ist der nächste unten, kannst du minus acht machen und die Eingabetaste drücken, und du erhältst 24. Ich mache das gerne für viele dieser Felder hier drin. Mach einfach auch diese ganze Gruppe. Wir könnten genauso gut alles in Ordnung bringen, ich schaffe das, ich werde es verschieben. X und Y sind gemischt. Ich sage einfach plus acht. Erinnerst du dich, was gemischt bedeutet? Erinnerst du dich? Stimmt. Das heißt nur, dass es es nicht wirklich weiß. Ich habe plus acht gemacht. Rückgängig machen. Das liegt daran, dass wir viele Dinge ausgewählt haben. Es ist so, oh, ich kenne das Y nicht wirklich . Ich kenne das Y von diesem und dem, aber zusammen ist es ein bisschen komisch. Also sage ich plus 32, nur um es nach unten zu verschieben. Also gut, wir haben einige Raster ein bisschen konsistent sind Nun, das Letzte ist, dass sie weder gedruckt noch angezeigt werden können. Schau dir das an. Wenn ich zur Vorschau gehe, wirst du das bemerken. Sie erscheinen nicht wirklich. Die Boxen tun es, aber nicht das eigentliche Raster. Du kannst sie ein - und ausschalten, indem du hier runtergehst und das I ein- und ausschaltest. Jetzt ist Shift G zum Ein- und Ausschalten als Kurzbefehl erforderlich. Auf einem PC sollte es Control G sein. Oh, ich bin mir nicht sicher. Sie funktionieren beide mit Shift G auf einem Mac und Control G auf einem Mac funktionieren. Eines davon funktioniert für den PC. Geben Sie sie ein, lassen Sie mich die Kommentare wissen , welcher das ist. Ich bin mir ziemlich sicher, dass es einer von denen ist. Sie sind wirklich gut für das Layout, aber dann sind sie hässlich. So oft schalte ich die ein und aus. Aber du kannst einfach den Augapfel benutzen, ein- und ausschalten. Oh. Ich weiß nur, dass dieser wirklich lang wird Ich möchte jetzt auch etwas vorstellen. Also nur ein kleiner interessanter Fakt, es ist seltsam. Wir werden es im Kurs verwenden Ich möchte es jetzt vorstellen. Lass uns zum Desktop gehen. Gehen wir zu diesem. Was du tun kannst ist, ich habe dieses Netz hier drüben. Muss ich es nochmal abtippen? Natürlich nicht, wenn du es dupliziert hast, sondern wenn du eine neue Seite hast und du denkst, warum erscheint das nicht auf dieser Was du tun kannst, ist, zu sagen. Eigentlich ist das die falsche Größe drin. Okay, ich kann es kopieren und einfügen. Schau dir das an. Es ist ein bisschen komisch in Figma, aber es ist sehr nützlich Wenn ich auf den Desktop von diesem hier drüben klicke , kann ich zu diesem gehen Ich habe das. Ich kann später einen Stil daraus machen. Aber was du tun kannst, ist dir das anzusehen. Ich kann auf Zeile klicken. Hier drüben ist Niemandsland. Pass auf, ich kann es nicht für alles tun. Was kann ich dafür tun? Jep. Ist dieses Gebiet im Niemandsland , in dem ich einige Dinge kopieren kann. Schau dir das an. Ich habe das ausgewählt, ich will dich. Ich habe einfach Command C auf einem Mac, Control C auf einem PC. Klicken Sie darauf, haben den Rahmen und fügen Sie ihn einfach ein und er wird mitgebracht. Das ist für viele Dinge interessant. Ich werde es jetzt vorstellen. Wir werden es im Kurs noch ein paar Mal machen. Weil es im Moment wahrscheinlich einfacher ist, es einfach zu duplizieren. Dann kommen die Kolumnen gleich. Heiliger Rauch, Dan, irgendwie bist du dazu geworden, 12 Zeilen zu zeichnen und daraus eine ganze epische Saga zu machen. Ich hoffe, du lernst etwas. Wenn Sie bereits Entwickler sind, wird Ihnen vieles davon gefallen , auch wenn Sie noch nie im Bereich Web oder UI gearbeitet Hoffentlich ist das nützlich. Es ist verwirrend. Du sagst, es gibt eine Menge zu verkraften. Das ist völlig okay. Ich wollte Ihnen einen kleinen Einblick hinter die Kulissen geben warum wir uns die Mühe machen, 12 auszuwählen. Aber wenn Sie nichts anderes daraus mitnehmen, wählen Sie einfach 12 und fahren Sie fort. Das ist es. Ich werde dich im nächsten Video sehen. 34. Tipps, Tricks und Einstellungen in Figma: Hallo, alle zusammen. Ich werde ein Video über die Art von Abkürzungen machen, wo man sie findet, einige der Tipps und Tricks von Figma Wir haben jetzt einige Erfahrungen hinter uns. Es ist an der Zeit, einige Workflow-Teile hinzuzufügen , um uns irgendwie zu beschleunigen. Eines der ersten Dinge, die ich Ihnen zeigen möchte, ist dieses kleine Fragezeichen. Wir haben alle irgendwie gelernt, dass die Hilfe in Software nie wirklich gut ist. Figma ist wirklich gut. Klicke auf das kleine Fragezeichen. Das, was ziemlich interessant ist, befindet sich unter den Tastenkombinationen. Und das sind all die Tastenkombinationen , die nicht offensichtlich sind. Natürlich kannst du über einigen Dingen schweben. Weißt du, ich weiß, dass das Stiftwerkzeug P ist, weil es dort steht Aber hier drin zeigen wir dir all die anderen. Also drück dich ein bisschen durch. Einige von ihnen sind blau. Blaue, die wir in diesem Kurs bereits verwendet haben. Ich habe sie wahrscheinlich alle benutzt. Dies ist ein neuer Login für diesen Kurs für mich, einige von ihnen sind immer noch nicht blau. Ich weiß nicht, es fühlt sich an wie eine Herausforderung. Benutze sie alle. Aber schauen Sie sich hier um und finden Sie solche , von denen Sie sagen, Oh, ich wünschte, es wäre eine Abkürzung für Strike Through. Shift Command X. Ich zeige dir auch die PC-Version, wenn du auf dem PC bist. Schauen wir uns einen meiner Favoriten an. Es ist da drin. Ich glaube, es ist Auswahl. Tiefe Auswahl. Ich werde das tun, wenn ich arbeite, lass uns hier zu dieser Feature-Box gehen. Ich bin also auf meinem Handy Lo Fi. Oh, eine andere Abkürzung ist, wenn du etwas auswählst, kannst du sehen, dass ich das Ausgewählte hier unten habe? Anstatt direkt in die Mitte des Bildschirms hineinzuzoomen , kannst du auf MacNPC Shift 2 drücken Was ich tun werde, ist, dass das, was du ausgewählt hast, vergrößert wird was du ausgewählt hast, Wir haben Schicht eins gemacht, das heißt, mir alles in meinem Dokument zeigen. Was macht ihr hier? Ich brauche euch nicht mehr. Es ist eine Schicht eins. Aber wenn ich etwas auswähle, sagen wir, ich klicke auf diesen Text hier unten und drücke Shift 2, dann wird das Objekt, das ich ausgewählt habe, direkt vergrößert Das ist praktisch. Zoomen Sie ein bisschen heraus. Was haben wir? Die andere Abkürzung ist Deep Select. Das hier habe ich gruppiert. Innerhalb dieser Gruppe gibt es eine weitere Gruppe. Innerhalb dieser Gruppe befindet sich eine weitere Gruppe. Es gibt viele Gruppen. Am Ende doppelklicken Sie also. Sagen wir, ich möchte hier auf dieses Symbol klicken. Ich wähle es einmal aus. Ich habe die Gruppe. Doppelklicken Sie darauf. Gehen Sie in diese Gruppe, doppelklicken Sie erneut darauf, gehen Sie in diese Gruppe, doppelklicken Sie erneut darauf, um hineinzukommen und das Symbol zu öffnen. Eine Menge Klicks. Deep Select bedeutet, dass Sie die Befehlstaste auf einem Mac und die Strg-Taste auf einem PC gedrückt halten und einfach auf einmal klicken, und schon werden all diese Gruppen, Frames oder Komponenten durchsucht . Alles schnappt sich einfach das, worüber Sie die Maus bewegt haben . Das ist also Deep Select Und ich möchte dir nur zum Beispiel zeigen, wie du hier durchgehst, die Tastenkombinationen durchgehst und einfach selbst ein bisschen nachsiehst und sagst : Oh, das ist gut. Ich werde das aufschreiben. Denken Sie daran, dass Sie in Ihren Übungsdateien eine Kurzbefehlstabelle mit den wichtigsten Dateien haben , aber es gibt nur einige, die Sie persönlich für Ihren Arbeitsablauf nützlich finden werden . Jetzt ist das andere Tastenkürzel das Kürzel, mit dem Sie alle Tastenkombinationen regeln können. Es heißt Quick Action? Wie heißt es? Es wird die Schaltfläche „Aktionen“ genannt. Sie können es dort sehen. Es ist Command K auf einem Mac, Control K auf einem PC. Das ist ein weiterer guter Punkt, wenn es manchmal Tastaturen gibt , die nicht die hochwertigen englischen Tastaturen sind, Wenn du meinst, dass es in meiner anderen Stilsprache nicht funktioniert , bewege den Mauszeiger hier rein, du wirst auch alle Tastenkombinationen an der Seite sehen alle Tastenkombinationen an der Diese Abkürzungen stehen nicht nur unten im Fragezeichen, sondern auch hier nebenan. Schau es dir an. Wenn ich diesen Kurs hinter mir habe und ich sage, benutze Befehl K und es ist nicht richtig für. Schauen Sie sich hier an , was hier aufgeführt ist. Gut, der, den ich will, ist der Aktions-Schlüssel. Befehl K. Das ist das wichtigste Tastenkürzel. Du kannst Figma grundsätzlich bitten , alles zu tun, was du willst. Ich liebe es. Schau dir das an. Nehmen wir an, ich möchte, dass das in Großbuchstaben geschrieben wird. Ich weiß, dass ich hier reingehen kann, ich kann scrollen, ich kann zu den Einstellungen gehen und ich kann hier finden, dass es dieser ist. Aber es gibt viele Dinge, die wir sagen, entweder ist es zu lang oder du kannst dich nicht erinnern, wo es ist. Ich kann darauf klicken, Command K drücken und einfach Upper eingeben. Ordnung. Also, der Grund, warum es eine Warnung gibt. Stoppen Sie meinen Befehl K. Wie dem auch sei, ich habe den ausgewählten Befehl ausgewählt, gehen wir Befehl K, und dann ist er erschienen. Deiner könnte das machen und ich kann Upper tippen. Siehst du, geht jedes Menü durch und fragt, meinst du das ernst? Du sagst, ja, das meine ich ernst. Co.. Nehmen wir an, ich habe diese Farbe hier und möchte alle anderen Farben auswählen. Ich weiß, was ich tun muss und ich weiß, dass es möglich ist. Also gehe ich zu Befehl K. Anstatt zu versuchen, es zu finden gehe ich zu Select und sage, da ist es da. Wählen Sie mit derselben Füllung aus. Es klickt auf alles, was dieselbe Füllfarbe hat wie diese Typen. Ich kann sagen, richtig, ich möchte, dass du dich jetzt änderst. Wenn du dich erinnern kannst, wie es vage heißt, kannst du einfach Befehl K eingeben und direkt zur Sache kommen Alles ist hier drin. Die andere nützliche Sache ist, wenn Sie kein Rechtsklicker sind, okay, hier gibt es so viele nützliche Dinge Okay? Wenn Sie mit der rechten Maustaste auf Dinge klicken, ist das kontextsensitiv Es wird Ihnen also die Liste der Dinge geben , die Sie damit machen können Wenn Sie mit der rechten Maustaste auf Text klicken , erhalten Sie verschiedene Dinge und Sie erhalten auch die Abkürzungen. Aber oft kann das wirklich nützlich sein. Wenn ich also darauf klicke und mit der rechten Maustaste darauf klicke, möchte ich die Ebene auswählen. Siehst du, dass es all die verschiedenen Dinge aussucht, die sich unter meiner Maus befanden? Will ich die Gruppe? Willst du, dass die Gruppe in der Gruppe ist? Möchten Sie , dass das Bild in der Gruppe, das sich auf der Registerkarte „Funktionen“ befindet , Ihnen eine Aufschlüsselung dessen gibt , wo Sie Ihr Ding ausgewählt haben. Vergessen Sie also nicht, mit der rechten Maustaste zu klicken. Da sind nützliche Dinge drin. Präferenzen. Es gibt nicht viele. Wenn ich zum kleinen F für Figma gehe und zu den Einstellungen gehe Da sind diese. Hast du es durchgelesen und alles gefunden, was du für nützlich hältst. Ein Teil der Dinge, die ich gerne ändere, ist, das Tool danach ausgewählt zu lassen. Ich nehme das Rechteckwerkzeug und zeichne es heraus. Standardmäßig geht es zurück zum Auswahlwerkzeug und du sagst, nein, jetzt bleibt es bei dem ausgewählten Werkzeug. Ein weiteres nützliches Tool, das mir gefällt ist das Scrollrad zum Zoomen. In dem Moment, in dem mein Scrollrad an meiner Maus, hast du vielleicht keins, geht auf der Seite hoch und runter . Das ist total cool. Aber du kommst vielleicht aus einem anderen Programm, wo du sagst, Mann, das normalerweise heranzoomt Ich werde das so ändern, dass mit dem Mausrad auf Zoom gesetzt wird. Eine letzte Sache, die ich mag okay, ist das alles persönliche Präferenz. Der, auf dem steht, dass die Tastatur in die Auswahl hineinzoomt. Das ist der. Okay? Ist das vorher, als ich herangezoomt habe, geht es einfach in die Mitte des Bildschirms Nun, wenn ich das ausgewählt habe und auf Zoom drücke, also verwende ich einfach Command Plus auf einem Mac, Control Plus auf einem PC, Control Plus auf einem PC, zoomt es irgendwie in das Objekt hinein, das Sie ausgewählt haben Ordnung, schauen Sie sich die Einstellungen an und ändern Sie, was Sie möchten Oh, ein letzter ist das Anstupsen. Schauen wir uns das an. Lass uns hier reingehen. Gehen wir zu den Einstellungen und dann zum Betrag. Zur Hölle ist das Beim Anstupsen ging ich, äh, mit meinen Harken nach links und rechts. Ich weiß noch, wie Shift es in größeren Stücken anstupst Wenn Sie an einem Acht-Punkt-Raster arbeiten, insbesondere für eine App, möchten Sie, dass es sich um mehr als acht Punkte bewegt Auch wenn Sie nicht an einer App arbeiten, bevorzuge ich es, wenn der Abstand zwischen acht Punkten liegt Gehen wir zu den Einstellungen und dann zur Anzahl der Punkte. Nudge für einen ist ein Pixel. Das ist in Ordnung. Aber ich will, dass der große Schubs, wenn du die Schicht gedrückt hältst, acht ist Wenn es sich jetzt bewegt, weiß ich, dass es sich um acht Pixel bewegt In Ordnung, das sind also einige meiner Tipps. Und der große ist Command K oder Control C oder PC und tippe einfach das, was du willst. Geben Sie einfach das Layout ein. Also zeig es Lou, Leute. Die Lügenführer sind versteckt. Könnten wir sie überhaupt schon einmal sehen? Wir sind auf dem falschen. Gehen wir zu diesem hier. Gehen wir zu Befehl K. Auch wenn Sie sich nicht an das Tastenkürzel erinnern können, können Sie sich an Befehl K erinnern und es dann einfach eingeben. Sie können sehen, dass ich sie ein- und ausschalten kann. Jede Tastenkombination unter Befehl K, Steuerung C auf dem PC. Ordnung, das ist es. Ich werde dich im nächsten Video sehen 35. Farbinspirationen und der Augentropfer in Figma: Hallo. Wir werden über Farbinspiration sprechen. Wir studieren unser High-Fidelity-Modell , also müssen wir Farben auswählen. Sie erhalten vielleicht Unternehmensfarben und Sie bleiben vielleicht bei Farben hängen, aber bei unserem Klassenprojekt können wir uns unsere eigenen aussuchen. Wo fangen wir an? Farbinspirationen können von vielen Orten kommen. Es gibt viele Orte online. Es gibt ein paar, die ich wirklich mag und denen ich vorschlagen möchte, dass Kühler wirklich nett sind, und Color Hunt ist eine weitere, die ich häufig verwende Das Gute an ihnen ist, dass sie dir nur Farben zeigen , die zusammenpassen Du denkst vielleicht, Oh, das ist es. Was will ich? Scrollen Sie nicht zu viel. Ich mag diese vier zusammen. Sie sind wirklich coole Farbkombination. Es ist wirklich einfach, sie in Figma zu integrieren. Ich kann sie einfach anklicken. Okay, und klicken Sie darauf. Er sagt, es ist kopiert oder du kannst es von hier unten kopieren und einfügen. Dann gehe ich in Figma zur HiFi-Version und zoome ein bisschen Ich werde ein paar Rechtecke erstellen. Ich gehe zu diesen Frames, nur weil ich die Umschalttaste gedrückt halte, damit es perfekt quadratisch wird, und wenn es ausgewählt ist werde ich FFF los und füge einfach den Code ein, drücke die Eingabetaste, und schon ist die Farbe Ich werde die Ansicht vergrößern. Ich mache ein Duplikat davon und gehe dann zurück zu den Kühlern und mache eine Farbsuche, kopiere auch das und arbeite mich dann einfach durch das Einfügen der Farben Eine weitere gute Option ist color.adobe.com, und hier finden Sie einige interessante Dinge unter Trends und unter Erkunden Sie können hier sehen, dass die Bilder die Farbschemata bestimmen, was wirklich cool ist Erkunden ist einfach, du kannst hier rübergehen und sagen, ich möchte alle Farbthemen sehen, die am häufigsten verwendeten Farbthemen sind und in diesem Monat beliebt sind. Das haben die Leute benutzt. Sie haben eine große Bibliothek von Menschen, die Farben verwenden Es ist sehr interessant zu sehen, was verwendet wird. Komm schon, lade. Im Moment funktioniert es nicht, aber zu anderen Zeiten funktioniert es. Andere großartige Orte , um Farbideen zu bekommen. Vor allem, wenn Sie mit Design im Allgemeinen noch nicht vertraut sind. Bedeutungen von Farben. Das ist figma.com Slash Colors und das Unternehmen möchte, sagen wir, diese Farbe verwenden, aber Sie müssen mit Ihrem Kunden darüber sprechen Ich mag Rot. Es ist nicht gut genug. Du musst sagen, was Chili ist gibt dir eine Sprache, um dem Kunden zu erklären, warum du es ausgewählt hast, und gibt dir einfach, ja, eine Sprache, die du benutzen kannst dem Kunden zu erklären, warum du es ausgewählt hast, und gibt dir einfach, . Ich finde das wirklich nützlich. Außerdem gibt es mir einige Farben , die dazu passen. Ein weiteres gutes Produkt von Figma ist figma.com Slash Okay? Und dann kannst du deine Farbe wählen und es wird eine passende Farbe dazu wählen. Eine, die zusammenarbeiten wird. Der gefällt mir . Das gefällt mir besser. Ein weiterer nützlicher ist ein Grabient. Es ist wirklich gut für Farbverläufe, und Sie können die Farbverläufe in einer Sekunde durchgehen, damit Sie eine gute Inspiration für Farbverläufe finden Das, das ich häufig verwende, stammt von meinem Moodboard. Nehmen wir an, du machst dein Moodboard und suchst nach Dingen und du machst Brieftaschen, aber du magst diese Farbe Also werde ich einen Screenshot machen, ich werde gehen. Ich mag diese Farbkombinationen. Auch wenn kein Portemonnaie drin ist, kann es trotzdem Teil meines Moodboards sein Ich werde zu Figma gehen . Ich gehe zu meinem Moodboard Wo ist mein Moodboard? Es ist über meinem Lo-Fi-Dokument. Es hängt einfach hier rum. Ich nehme meinen Screenshot und bringe ihn rein. Ziehe es einfach von meinem Finder auf die Seite. Das Coole daran ist, dass ich „Vergrößern “ sagen kann , dass ich mein Rechteckwerkzeug oder das Rahmenwerkzeug nehmen kann, kann das zeichnen, meinen Augentropfen nehmen, ein Werkzeug nehmen, das ist die Augentaste auf der Tastatur und das , das ist cool. Dieses hier, Augentropfen, ein Werkzeug, Sie können anfangen, sich durchzuarbeiten und Farben anzueignen Okay, ich finde das eigentlich einfacher als all die Higodezimalzahlen zu kopieren und einzufügen Ich mache es auch für diese. Sag mal, ob ich bei Kühlern bin und lass uns zum Generator gehen Dieser ist ein zufälliger. diesem kannst du die Leertaste drücken, nur um durch zufällige zu blättern. Ich weiß nicht, es ist cool. Nehmen wir an, ich mag diese Gruppe, ich kann einfach einen Screenshot von diesem großen Teil machen ihn in Figma werfen Da haben wir's. Ich benutze das, es ist zu groß. Massiv. Verkleinern, vergrößern und ich benutze wieder die Pipette Ich hole dich und mache eine Kopie von diesen Typen hier. Was will ich? Ich will eins, zwei, drei, vier, fünf, ich kann sie einfach mit meiner Pipette herausziehen, anstatt die Hexadezimalzahl zu kopieren und einzufügen Ich habe es verpasst. Mein letzter. Jetzt habe ich meine Farben. Jetzt kannst du auch sagen, ich mag die, aber das hier, ich brauche eine andere Version davon. Ich werde gehen. Hier kannst du anfangen, mit den Schiebereglern herumzuspielen, wie wir es vorhin getan haben Ich möchte einen, der ein bisschen gesättigter ist vielleicht hier rein, dann in Ich werde es auf Farbtonsättigungshelligkeit umstellen und ich möchte, dass es Farbtonsättigungshelligkeit ist. Sättigung ist das hier? Ich werde einfach meinen Aufwärtspfeil verwenden, um einen zu finden, der gesättigter ist. Siehst du hier? Sie können damit beginnen, diese in Alternativen für diese Primärfarbe aufzuteilen . Vielleicht eine entsättigtere. Da hast du's. Das ist viel zu entsättigt Ordnung. Auf diese Weise können Sie anfangen, Farbe zu verwenden, sich inspirieren zu lassen und einfach alles durchzugehen und Pipette die Farben herauszusuchen , die Sie in Ihrem Design verwenden könnten 36. So erstellen Sie eine Farbpalette in Figma: Hallo, alle zusammen. In diesem Video werden wir eine Farbpalette erstellen , mit der wir für unser Design arbeiten können. Wir werden eine Primär-, Sekundär- und Akzentfarbe haben. Wir werden einige Benutzeroberflächenfarben entwickeln und dann einige Variationen unserer Primär-, Sekundär- und Akzentfarben haben . Ordnung. Es ist nicht der offizielle einzige Weg, es zu tun. Es ist die Art, wie ich es mache. Ich dachte, ich würde es teilen. Ich finde es sehr praktisch, wenn ich anfange, ein Konzept zu entwickeln, um irgendwelche Farbmuster fertig zu haben . Ordnung, lass uns anfangen . Lassen Sie uns also eine brauchbarere Farbpalette erstellen Du hast halb damit angefangen. Lass uns ein bisschen mehr tun. Lassen Sie uns nach dem rechteckigen Ton ein Rechteck zeichnen. Ich fange mit einer Farbe an, die ich haben möchte. Mir hat dieses Lila hier gefallen, eigentlich hauptsächlich, weil, wenn ich mir das Braun des Leders für meine Brieftaschen ansehe, es sich einfach nach das Braun des Leders für meine Brieftaschen ansehe, einer guten Farbe anfühlt Lila scheint zu verschwinden. Es, ich mag es damit. Sie können es von Ihren Farbinspirationsseiten bekommen. Sie können es aus Ihrer Grafik ziehen. Möglicherweise erhalten Sie von der Firma eine Farbe. Okay, ich bin fertig mit so etwas. Jetzt brauche ich eine Farbe , die dazu passt. Entweder Sie haben sie ausgewählt oder es ist eine Firmenfarbe, mit der Sie arbeiten müssen Sie können sich diese Farbe schnappen und etwas anderes machen. Sie suchen nach einem Farbrad. Es ist viel online. Wir verwenden das Figma One, figma.com Slash Color Wheel, Slash Color Hyphen Wheel und du kannst Das ist das Violett, das ich möchte. Unten Es wurde eine passende Farbe gewählt. Mag ich es? Ich bin mir nicht sicher, ob ich das tue. Kostenlos, wie Sie hier sehen werden, ist es im Farbkreis genau umgekehrt Oft ist es ein guter Anfang. Ich suche zum Beispiel nach einem Violett, das ein bisschen mehr ist, weniger im lila Schräggrün, sondern eher in dem Ist das immer noch lila? einem Violett, das ein bisschen mehr ist, weniger im lila Schräggrün, sondern eher in dem Ist das immer noch lila Purpurroter, blauer Eitersenf. Grabe ich das aus? Ich kann das kopieren und mir vorstellen, dass das eine gute Sekundärfarbe für meine Primärfarbe sein könnte eine gute Sekundärfarbe für meine Primärfarbe Das ist die Hauptfarbe der Marke, und das wird auch eine Primärfarbe sein. Aber es ist nicht immer so , dass Sie es nicht benutzen müssen. Farbzeichen sind nicht so sehr eine Wissenschaft. Oft kann man es einfach abholen. Ich mag Split auch, weil es beim Teilen direkt quer verläuft, aber man kann beide Seiten von direkt gegenüber sehen. Geteilt. Das gefällt mir. Das ist eher mein Ding. Das ist definitiv grün unten. Ich mag das lila und braun. Werde ich das auch benutzen? Ich mag es nicht wirklich. Bin ich nicht. Aber wenn Sie sich das durcharbeiten, werden Sie vielleicht herausfinden, okay, dafür gibt es verschiedene Modelle. Oh, das hasse ich wirklich. Square ist ganz nett. Sie können diese sehen. Wenn Sie arbeiten, benötigen Sie oft mindestens zwei Farben, eine Primär- und eine Sekundärfarbe. Wenn ich arbeite, bevorzuge ich jedoch häufig eine Akzentfarbe wie eine Tertiärfarbe, drei davon Ist es das? Oder ist es das? Irgendwie hin und her arbeiten. Auf meinem Mac kann ich Command Tab drücken. Ich denke, Sie können auf einem PC die Registerkarte „Steuerung“ verwenden, um zwischen Anwendungen zu wechseln. Ich wechsle zwischen Chrome und Figma. Und was will ich? Hab keine Angst. Geh einfach, ich glaube, ich weiß, was ich will. Ich drehe hier einfach auf das Farbrad und gehe einfach zurück, Oh, und gehe einfach zurück, Oh, gefällt mir das? Ist das gut? Ich bin mir nicht sicher. Ich werde das für eine Weile im Zick-Zack hinter mir lassen und ich weiß nicht, ich glaube, ich möchte Ihnen zeigen, dass es keine vollständige Wissenschaft Ich möchte wahrscheinlich etwas Helleres für meine Akzentfarbe. Ich will, dass das fertig ist. Ich wollte ein bisschen vorspulen. Hier sind wir. Vielleicht nicht. Vielleicht auf dieser Seite des Roten, vielleicht Orange. Ordnung. Ich bin in einer Sekunde zurück, sobald ich eine Farbe ausgewählt habe. Ich habe ewig damit verbracht, alle Farben zu ändern. Ich bin mir immer noch nicht sicher, aber es ist ein guter Ort , um anzufangen. Was ich dann gerne mache, wir haben unsere Primär-, Sekundär- und entweder Tertiär- oder Akzentfarbe Verwenden Sie viel, verwenden Sie ein wenig, verwenden Sie sparsam, sehr aufregende Dinge Und was ich gerne mache, ist, dass man diese Farben nicht einfach verwenden kann. Du brauchst ein bisschen mehr. Am Ende schnappst du dir diese Kiste, ziehst sie so hoch und sagst, richtig, ich mag die, aber ich brauche eine dunklere Version Also werde ich hier reinklicken. Ich werde zu meiner HSB gehen. Ich gehe zu. Du könntest es einfach runterziehen. Ich nehme einfach meine Helligkeit, halte die Umschalttaste gedrückt und drücke ein paar Mal runter. Ich habe eine dunklere Version. Ich werde eine leichtere Version machen. Okay. Und ich werde ein bisschen steigen. Okay? Also ich will eine leichtere Version. Also, du musst nicht einfach im Dunkeln rauf und runter gehen. Manche Farben sind wirklich gut darin, sie nur ein bisschen dunkler und ein bisschen heller zu machen. Einige von ihnen werden eklig. Ich weiß nichts über diesen. Ich habe das Gefühl, dass das eklig werden wird. Ich gehe zur Helligkeit, gehe ein bisschen runter. Nein, das war in Ordnung. Was Sie auch tun könnten, ist es dunkler, aber auch weniger gesättigt zu machen . Es gibt keine festen Farbregeln. Hoffentlich helfen Ihnen einige dieser Tipps, wenn Sie neu sind, ein besseres Gespür dafür zu bekommen. Damit aus einer, die heller wird, diese ganz neue Farbe wird. Also ich möchte die Sättigung erreichen und auch da runterfahren. Ich könnte auch die Helligkeit etwas verringern. Ja, da haben wir's. Das Gleiche gilt für diesen. Lass uns das machen. Ich überspringe diesen. Ordnung. Also da hast du's. Das sind meine Farben. Ich werde diese hauptsächlich verwenden, aber es wird Zeiten geben, in denen ich ein bisschen Kontrast benötige , wo ich das oder vielleicht das verwenden kann, nur um einen klareren Kontrast zwischen den beiden zu haben und gleichzeitig die gleiche Art von Farbzone beizubehalten. Der nächste ist weiß und schwarz. Also weiß und schwarz, du kannst weiß und komplett schwarz verwenden. Es ist jedoch wirklich üblich, nicht nur Weiß zu verwenden, sondern etwas anderes zu verwenden. Kannst du die Rückseite von Figma sehen, sie haben dieses Cremeweiß für diese Schnittstellenfarbe verwendet Wir werden unsere eigene Schnittstellenfarbe erstellen? Und können wir den Hintergrund anpassen? Im Grunde oh, oh, ich bin ziemlich nah dran. Okay, es ist also wirklich üblich, nur ein bisschen Weiß, nur ein bisschen Grau drin zu haben . Warum wir eine Schnittstellenfarbe haben, die nicht ganz weiß ist, so dass wir Dinge tun können , wie ich das dabei belasse. Ich könnte mir das alles schnappen und auf diesen anderen Hintergrund verschieben. Ich werde es verkleinern, indem ich die Umschalttaste gedrückt halte, damit es gut skaliert, oder ich verwende Ihr Skalierungswerkzeug, nur damit es leicht zu erkennen ist, sonst wird es im Hintergrund durcheinander Der Grund, warum wir das haben, ist, sagen wir, ich habe einen Rahmen und er hat einen weißen Hintergrund Ich möchte ein Popup-Feld haben , das darüber erscheint, und ich habe nur ein wenig Kontrast um es vom Hintergrund zu trennen Ich könnte einen winzigen Strich hinzufügen. Das ist nur ein Pixel, das ist wirklich helle Farbe. Lassen Sie uns nur einen Schlagschatten hinzufügen, ex Schlagschatten. Wir haben sie noch nicht behandelt , aber Sie können am Ende diese Modelle haben , die in Ihrer App auftauchen , sodass ich den Schlaganfall jetzt wahrscheinlich loswerden kann. Der Schlagschatten macht den Job dafür und sehen Sie einfach, dass es einen schönen Kontrast zwischen den beiden Du könntest es andersherum machen und cremefarbenes Weiß im Hintergrund haben und all deine Popups weiß sein lassen, es liegt an dir Okay. Und wieder, was die Farben angeht, können Sie jedes Grau wählen, das Sie mögen, aber es ist üblich, nur Weiß und Schwarz zu haben , also fünf davon. Du bist cremefarben bis zu deinem dunkelsten Schwarz. Oft ist es auch bei Schwarz nicht so eindeutig. Ziehen Sie es hierher und verwenden Sie einfach alles Schwarz. könntest du tun. Daran ist nichts falsch. Was ich gerne mache, ist zu finden, ja, du kannst ein kühles oder ein warmes Schwarz wählen. Du könntest entscheiden, dass ich sie alle ein bisschen mit Zoom sehen muss . Warmes Schwarz ist hier unten, aber gehen Sie in Ihrem Farbtonregler zu einer gelblichen Farbe, einer goldenen Farbe und wählen Sie dann ein Schwarz aber da drin. Das ist nicht viel Vergleichen wir es mit dem normalen Schwarz. Normales Schwarz ist hier für sich allein, es ist nicht viel, aber wenn du es mit diesem Typen vergleichst, kannst du sehen, dass es hier einfach warm ist und wir vielleicht noch wärmer werden, aber dunkler, kannst du sehen, dass es hier einfach warm ist und wir vielleicht noch wärmer werden, aber dunkler, wenn du am Ende ein warmes Schwarz hast , anstatt ein kaltes Schwarz. Nun, das ist ein schlichtes schwarzes, warmes Schwarz. Schauen wir uns den Vergleich an. Ich mache es auf der Folie hier in einem coolen Schwarz. Du kannst hier reingehen und sagen: In Ordnung, ich möchte, dass es ein kühles Schwarz ist, also gehe ich zu den blauen Grüntönen und wähle ein Schwarz, das wirklich dunkel ist Aber kannst du hier drinnen den Unterschied zwischen den beiden erkennen? Alleine sehen sie ziemlich schwarz aus. Aber mit ihren Kumpels kannst du kalt und warm sehen , und es liegt an dir , welchen Weg du gehen willst Entscheide, ob du dieses warme oder dieses kühle Schwarz zu deinen Farben Ich werde mich für Schwarz entscheiden. Und du kannst ein bisschen blau haben. Du kannst auch eine grüne Farbe haben. Es liegt an dir. Es könnte sein, dass ich da ein bisschen lilafarben werde Okay. Ja, das funktioniert für mich. Also du da. Also schnapp ich mir das, schnapp mir den IBA-Dropal und los geht's, wir brauchen eine, zwei, drei, vier, fünf Stufen Ich brauche einen in der Mitte. Den hier, ich werde dieselbe Farbe stehlen. Ich werde sagen, nicht so dunkel, also müssen wir viel heller sein. Sie können sich einfach den Farbton, die Sättigung und die Helligkeit merken. Das ist dieser und nach oben gehen, die Umschalttaste gedrückt halten, und Sie können hier sehen, dass es nicht grau ist. Ich will hier drin sein. Ich möchte, dass es grau ist, aber es warm hat , indem ich ein bisschen von diesem Blau verwende. Kannst du es hier sehen? Es ist ein kühles Grau. Dieser hier wird irgendwo dazwischen sein. Also werde ich gehen, ich lasse überhaupt fallen und gehe, was immer noch in der blauen Zone ist, aber mehr hier oben. Oh nein, es muss dunkel sein, irgendwo da drin . Ich mag es. In Ordnung, wir machen unseren letzten. Es wird auf halbem Weg zwischen diesen beiden Typen sein, und es wird nie nur ein Luftwiderstand von 20 oder 50% Ja, ich werde es heller machen , aber es sieht zu blau aus, also werde ich herkommen und nur einen Hauch von Blau haben In Ordnung. Ich habe meine Farben, mit denen ich anfangen kann zu bauen. Ich habe eine Primär-, Sekundär Akzentfarbe, und dann sind das meine Benutzeroberflächenfarben. Text, Boxen, Schalter , solche Dinge. Jetzt sind wir in der Konzeptphase. Das kann im Handumdrehen angepasst werden weil du herausfinden wirst, dass du es benutzen wirst, und du wirst , Oh, das funktioniert nicht oder das sieht schrecklich aus, es gibt eine Kombination und du kannst sie aktualisieren. Aber es ist gut, einen Anfang zu haben, vor allem, wenn du aus Moodboards ziehst und sagst, oh, ich mag diese? Oh, wie mit dem Purpur. Gehen wir tauschen? Nein, Dan. Konzentrieren Sie sich. Ich will jetzt wirklich diese Farbe statt dieser Senffarbe. Ordnung. Komm runter. In Ordnung. So wähle ich Farben aus. Das ist nicht der einzige offizielle Weg. Es gibt viele Möglichkeiten, das zu tun. Sie können sich von Farb-Websites inspirieren lassen und von ihnen einige Ideen holen Aber machen Sie eine Runde mit dem Farbrad, falls Sie es noch nicht benutzt haben Farbrad, falls Sie es noch nicht benutzt um ein Gefühl dafür zu bekommen, was Sie laut Wissenschaft verwenden sollten, und machen Sie dann trotzdem Ihr eigenes Ding Das ist alles. Ich werde dich im nächsten Video sehen. 37. Wie man Gradienten in Figma erstellt: Du. Wir werden uns die Farbverläufe in Figma ansehen Hallo Farbverläufe. Wir werden diesen subtilen machen Wir machen eine mit drei Farben. Ich zeige Ihnen , wie Sie einen Farbverlauf erstellen transparent ist, dass so transparent ist, dass er wie eine Überblendung aussieht. All das und mehr, eigentlich nur das in Figma. Lass uns reinspringen Ordnung, Gradientenzeit. Lass uns gehen und ich bin ziemlich chaotisch. Das ist meine Inspiration. Ich schnappe mir diese, kopiere sie und verschiebe sie auf meinen Desktop Hi-Fi. Das ist eine, mit deren Bau wir beginnen werden. Ich brauche dich nicht mehr. Ich brauche euch nicht. Löscht es. Wer erinnert sich, wie man die Säulen ausschaltet? Oh, Sie können sich nicht erinnern, aber denken Sie an das Superkürzel Command oder Control K und geben Sie Layout ein. Legen Sie los und wir können Anleitungen zeigen. In Ordnung. Ich werde sie hier ganz oben platzieren. Das einzige Problem ist hier, mein Ebenen-Panel, ich habe meinen Desktop, aber ich habe all diese zufällig in meinem Ebenen-Panel. Lassen Sie uns all diese auswählen. Gehen wir zu Rechtsklick und wir können die Rahmenauswahl treffen. Sie befinden sich in ihrer eigenen kleinen Gruppe mit Schrägstrich. Ich nenne das eine Farbpalette. Geht es um die Farbpalette? Jedenfalls. Halte durch. Ich muss nur nachsehen. Warte dort. In Ordnung. Ich bin zurück, verdammt noch mal, wie zwei andere. Gut buchstabieren, Maus gut. Bilder zeichnen ist aber gut. Und schauen wir uns das an. Ich habe das hier drin. Eines der Probleme ist mit diesem weißen Hintergrund hier. Wir haben uns das schon einmal angesehen. Wenn ich nichts ausgewählt habe, kann ich das Dokument ändern, z. B. die Farbe des Arbeitsdokuments in etwas Dunkleres ändern. Das ist manchmal nützlich. Ich kann diese etwas kontrastreicher sehen. Also habe einfach nichts ausgewählt und du kannst die Seite ändern. Die Seite wird nicht gedruckt oder geht nicht auf die mobile Website. Es ist nur die Benutzeroberfläche für Figma. In Ordnung, also lass uns einen Farbverlauf machen. Ich werde einen dieser Typen kopieren. Und Farbverläufe verstecken sich unter dem Film und darunter haben wir den Festkörper. Wir haben Gradient Wir haben noch ein paar andere, Muster, Bilder, Videos. Gehen wir also zu Farbverläufen und es gibt uns einen Standardverlauf, und was Sie tun können, ist hier zu ändern Das ist wahrscheinlich der einfachste Weg. Nehmen wir an, ich möchte Farbverläufe von abrufen. Nun, lass uns einfach ein manuelles machen. Doppelklicken wir einfach darauf. Sie können den Schieberegler nehmen und eine beliebige alte Farbe auswählen. Klicken Sie dann am Ende auf diese Farbe, ziehen Sie sie hin und her und wählen Sie eine beliebige alte Farbe aus. Oh, das ist furchtbar. Nehmen wir an, ich möchte Farbverläufe aus meinen tatsächlichen Farben auswählen Farbverläufe aus meinen tatsächlichen Farben Ich nehme die Pipette und wir arbeiten gerade an dem letzten, also weiß ich es Ich werde das herausfinden und sehen, wie schlimm es wird. Das erste, ich will das Augentroptol aus meinem Violett nehmen . Ich grabe es Oft ist das, was ich anstelle dieses wirklich sehr vollständigen Farbverlaufs gerne mache , komisch. Siehst du die Biegung an meinem? Siehst du wahrscheinlich im Video durch. Ich bin mir nicht sicher, woher das kommt, das nicht durchkommen wird. Es ist einfach komisch. Nun, es ist ein gewisser Unterschied auf Zoom-Ebene. Vielleicht hast du das in deinem. Seltsam. Siehst du, ich bin zurückgegangen. Ignoriere die Zeile. Also zurück zum Gradienten ist das, was Sie tun können. Was ich an Farbverläufen etwas besser finde , ist, dass man den kleinen weißen Punkt sehen kann Man kann ihn quasi dahin ziehen, wo er hingehört. So oft mag ich Farbverläufe, die etwas subtiler sind wie dieser. Verkleinern. Ich finde das oft ein schöneres Gefälle. Mehr noch, du kannst noch weiter gehen und einfach sagen, okay, ich will, dass das hier drüben ist Und das ist standardmäßig ein linearer Farbverlauf. Du kannst ins Radio gehen. Die sind auch wirklich gut. Ich werde es umdrehen, ich will mir dieses Ende schnappen und da sein. weiß eigentlich, was ich will. Ich werde es zurückdrehen. Ich mache das gern, wo es eher eine Uhr gibt. Ich kann es größer machen. Da ist dieser abstraktere Farbverlauf. Es passiert etwas. Ich mag es für Knöpfe , wo es nicht wirklich klar ist, sieh mich an. Ich bin ein Gradient. Es ist ein subtiler Farbverlauf. Es hat mir besser gefallen, wie wir es hatten das Radio, also werde ich es rückgängig machen. Andere Dinge, die du hier machen kannst. Es gibt Funkgeräte, es gibt andere , die Sie niemals mit Angular benutzen werden. Sieht cool aus, schätze ich. Magst du es? Und der letzte, der Diamant ist. Und wieder keiner, den ich benutze. Ich werde Linear verwenden. Sie können sie auch transparent machen . Lassen Sie uns also ein Bild einbringen. Ich habe etwas in der Übungsdatei, also lass uns hier runter gehen. Nein, hier runter zu diesem und dann zum Imagevideo. Es ist Command Shift K, Control Shift K auf einem PC, gehe zu den Übungsdateien. Es sind ein paar Bilder drin. Wähle irgendwas aus. Wählen wir diesen hier aus. Okay, also Scott. Bringen Sie das rein, ich werde es anklicken und herausziehen. Was ich für Farbverläufe wirklich nützlich finde, ist, sagen wir, wir müssen hier einen Typ oben platzieren Nehmen wir das Textwerkzeug und klicken Sie einmal. Überschrift. Das Problem mit diesem Text hier ist, dass er vor dem Hintergrund schwer zu lesen ist. Okay? Stellen Sie also sicher, dass Sie das K für das Skalierungswerkzeug verwenden, um Text zu skalieren. Okay? Vor diesem Hintergrund ist es einfach sehr schwer zu lesen. Wir werden also einen Farbverlauf hinzufügen. Also lass uns einen neuen machen. Nehmen wir das Rechteckwerkzeug oder einen Rahmen. Okay? Und ich werde weitermachen , zu Gradient gehen. Ich werde linear wählen. Das obere wird komplett schwarz sein oder das Schwarz , das ich verwende, wo mein Schwarz ist. Das ist da, also werde ich mir ein Werkzeug per Augentropfen holen und mir das holen Okay. Und das untere hier, das zweite, anstatt vollfarbig zu sein, wie das hier, kannst du das nehmen und es auf Null setzen. Das ist die Transparenz wie bei diesem anderen. Du kannst solche Sachen machen , wo du sie nach unten ziehen kannst. Ich muss mit den Schichten spielen. Erinnerst du dich, wer sich an die Tastenkombination für Ebenen erinnert? Du kannst es einfach hierher unter die Überschrift ziehen oder es sind die eckigen Klammern, wodurch es ganz nach hinten verschoben wird. Das sind die eckigen Klammern neben dem Piki und dann muss ich vielleicht dasselbe für den Hintergrund tun So oder so, ich mache das gerne, wenn du diesen schönen Übergang zwischen Hintergrund und Vordergrund hast diesen schönen Übergang zwischen und wenn er ausgewählt ist, kannst du dich hier für linear entscheiden, sobald du darauf geklickt hast, und auch entscheiden, wie kurz er ist Kannst du dir vorstellen, dass ich dieses kleine Ausblenden lassen kann ? Ich mache es jetzt schrecklich. Die andere Sache, die man bei Farbverläufen beachten sollte, wenn man Transparenz macht, obwohl das völlig transparent ist, sagt es zu Null, es spielt eine Rolle, welche Farbe es hat Kannst du sehen, dass es dort hell wird , oder machst du es übertriebener? Lass uns Grün verwenden Obwohl Grün völlig transparent ist, erscheint es in diesem Übergang zwischen den beiden. Manchmal willst du einfach Schwarz und Schwarz und hast den Übergang bei Null, sodass es nur ein wirklich klarer, einfacher Farbverlauf ist. Es wurden keine anderen Farben beigemischt. Das Letzte, was ich Ihnen zeigen möchte, ist das Hinzufügen von drei Farben. Wir haben uns vorhin Grabient angesehen, es war Grabient. In Ordnung, sie haben viele interessante Farben. Auch einige schreckliche. Also schnappen wir uns einen, den wir mögen. Scrollen Sie, gehen Sie scrollen. Sag das hier. Darauf wurden drei Farben aufgetragen. In Ordnung, und die Seiten funktionieren nicht. Hoffentlich gibt es hier drei verschiedene Farben, wenn du darauf gehst gibt es hier drei verschiedene Farben, wenn du darauf . Sie haben diese Seite angepasst. Ich sah früher anders aus. Jetzt ist es kaputt. Lass uns einfach einen Screenshot machen und wir werden einen Workaround machen Wir werden das in die Realität umsetzen und die Farben daraus ziehen Da Sie sehen können, dass es hier oben eine Farbe gibt, lassen Sie uns sie etwas kleiner machen und vielleicht eine andere Farbe in der Mitte bis hin zu einer dritten Farbe, bis mehr Blau. Also lass uns das machen. Den lasse ich da liegen. Ich mag es als eine meiner Farben, und ich werde es mir schnappen. Und füge eine dritte Farbe hinzu. Im Moment ist es linear , es hat eins und zwei. Sie können einfach auf eine beliebige Stelle hier klicken, um eine dritte hinzuzufügen. Sie können es auch in dieser Zeile hier auf der Zeichenfläche tun. Es ist nicht wirklich wichtig Dann dieser hier, wir können sagen dieser dritte kann dieser Look sein, ich habe die mittlere Farbe. Das Oberteil wird hier diese lila, eher blaue Farbe haben, und dann wird das hier diese Farbe haben. Und vielleicht verschiebe ich es ein bisschen rein. Sie können Ihrem Farbverlauf so viele Farben hinzufügen, wie Sie möchten. Wir haben drei. Da hast du's. So macht man drei Farben, und so macht man Farbverläufe im Allgemeinen in Figma Ich mache entweder Farbverläufe oder so etwas, wo es transparent wird . Das ist es. Das sind Farbverläufe in Figma 38. Erstellen und Verwenden von Farbstilen in Figma: Hallo. Wir werden unsere Farbpaletten in Farbstile umwandeln Stile sind wiederverwendbar. Wir können sie benennen, damit wir einheitliche Farben haben. Wir können sie mit Menschen teilen. Wir können sie mit anderen Dokumenten teilen. Sie sind alle gleich. Das Besondere an ihnen ist, dass, sagen wir, ich möchte diese Farbe anpassen , die ich erstellt habe und die ich in meinem Dokument häufig verwende, ich kann sie alle durchgehen und sie sind alle miteinander verbunden. Schauen Sie, ich kann irgendwie Änderungen vornehmen, und alles in diesem Dokument wird die Leistungsfähigkeit der Farbstile auf den neuesten Stand bringen. Außerdem werden wir einige der Namenskonventionen behandeln , die bei der Benennung von Farben gelten. Lass uns reinspringen. In Ordnung, um ein paar Stile zu kreieren. Lass uns mit diesem hier beginnen. Und dafür sind diese kleinen Punkte da. Sie können Stile für jede dieser Funktionen verwenden. Können Sie Stile für Effekte und Stile für Striche sehen ? Sie sind einfach wiederverwendbar, oder? Also lass uns das erste machen. Gehen wir zu Styles. Es ist ziemlich verwirrend für alle Bibliotheken. Was Sie tun könnten, ist es in dieser Datei zu erstellen, nur um es zu mögen, das ist klar. Und was wir tun werden, ist eine neue hinzuzufügen . Also dieses kleine Plus. Ich habe meins ausgewählt, ich drücke Plus oder drücke auf die Punkte und dann auf Plus. Wir können ihm einen Namen geben. Nun zu den Namenskonventionen für Farben. Es gibt einige, ja. Ich gebe dir die gängigsten. Es gibt viele Möglichkeiten, das zu tun. Am gebräuchlichsten ist es, anstatt es lila zu nennen, es primär zu nennen. Falls Sie Ihre Primärfarbe in eine andere Farbe ändern, möchten Sie nicht eine ganze Reihe von Farben haben , die als Lila bezeichnet werden. Es ist also primär. Wenn Sie ein Freelancer sind und für viele Unternehmen arbeiten, können Sie den Markennamen eingeben Ich gebe oft nur die Initialen ein. Also das ist Scott Wallets primär. Denn wenn Sie für ein anderes Unternehmen arbeiten, werden Sie am Ende viele, viele Vorwahlen Also das ist klar, was das ist, denn wir haben eine, zwei, drei Versionen davon Am Ende haben Sie vielleicht fünf, zehn, eine gute Namenskonvention. Du könntest das einfach Nummer eins nennen, oder vielleicht diese Nummer eins, Nummer zwei, Nummer drei. Okay, manchmal haben die Leute das bei 100 und dann ist das, sagen wir, transparenter. Sie werden es auf 50 setzen. Es macht ungefähr 50% der Hauptfarbe aus. Das siehst du ziemlich oft. Wahrscheinlich verwendet man am häufigsten Hunderte. Es ist aus der Zeit der Schrift , der Schriftstärke. Wenn Sie Schriftstärken kennen, wissen Sie, dass 500 Schriftstärken normal sind. 700 ist fett, 900 ist extra fett. Wir machen etwas Ähnliches mit Farbe. Deine mittlere Farbe. Das ist der mittlere Verwendungszweck. Das ist eine Skala von eins bis 900. 100 wird die hellste Version Ihrer Farbe sein und 900 wird die dunkelste Version sein Das ist genau in der Mitte, also nennen wir es 1500 Ich weiß, dass es komisch ist. Er versucht, cool und luftig zu sein, aber es ist komisch Ich werde das kopieren, ich werde einen Stil kreieren. Wir haben jetzt einen Stil. Wenden wir den Stil an und kommen zurück zur Benennung. Ich gehe in den Zoom-Modus und füge meiner Seite ein paar verschiedene Elemente hinzu . In Ordnung. Gute Arbeit. All die Teile, die ich schon gemacht habe, habe ich wieder hinzugefügt. Nehmen wir nun an, wir möchten unsere Primärfarbe hinzufügen. Was wir tun können, ist alles auszuwählen. Anstatt zu versuchen, es zu kopieren und einzufügen, verwenden Sie das Augentropfen-Atol, was in Ordnung Du kannst jetzt auf Styles klicken und sagen: Schau, da Das Tolle daran ist, wenn man ein wirklich großes Dokument hat und die Kunden sagen : Oh, was ist falsch an dem Violett? Warum ist es nicht ein bisschen mehr, ich weiß nicht, lila. Was du tun kannst, ist, nichts auszuwählen, deinen Stil zu finden, zur Bearbeitung zu gehen und zu sagen, hier unten, das ist meine Änderung Kannst du sehen, dass alles mit der Fahrt zusammenkommt? Du kannst dir den Vorteil dafür schon vorstellen, oder? Es ist eine großartige Möglichkeit, es einfach anzupassen. Die andere coole Sache ist, dass du Stile teilen kannst. Wir werden uns das später ansehen, aber Sie können es unternehmensweit und dokumentübergreifend teilen , sodass wir alle dasselbe Violett verwenden. In Ordnung, lassen Sie uns noch ein paar mehr bauen. Gehen wir zu dieser hier , der dunkleren Version. Lass es uns zu meinen Stilen hinzufügen. Drücken wir Plus und wir nennen das , wie werden wir es nennen? Es ist immer noch eine Primärfarbe, aber statt 500 sollten Sie wahrscheinlich 900 als dunkelste Ich möchte mir Platz für eine dunklere Version lassen, also nenne ich sie 1700 Ich mache noch eins und mache es rückgängig. Ich habe ein Extra hinzugefügt. Lass uns den letzten machen. Ich mache das im Geschwindigkeitsmodus, du wartest dort. In Ordnung. Das Gute daran ist, dass ich 300, 700 habe und du sie ziehen kannst falls ich nichts ausgewählt habe , weil ich sie zu unterschiedlichen Zeiten erstellt habe, es ist nur ein Stapel , aber ich will , sagen wir, 700 unten, 300 oben. Hell, mittel, dunkel. Das ist praktisch , wenn du später sagst, oh Mann, ich muss dazwischen malen. Was Sie tun können, ist zu sagen, richtig, ich möchte dazwischen färben, und es muss ein bisschen heller sein , aber nicht so dunkel. Sie haben Platz, um einen zu nennen, schauen Sie, wir haben einen 300, einen 500 und einen 700. Es ist dazwischen. Äh, huh. Ja, wir könnten das 1600 nennen. Also haben wir einen gewissen Spielraum. Wenn du die Farben anderer Leute findest, haben sie für alles eine. Sie werden 100, 200, 300 haben , sie haben all das. Es ist ein bisschen übertrieben für das, was wir tun. Wir werden das zwar rückgängig machen, aber so funktioniert die Benennung Es ist seltsam, ich weiß. Ich sehe viel und deshalb ist es da. Wenn Sie noch nie darauf gestoßen sind, so funktionieren sie auch mit Schriften. Kühn, regelmäßig, das ist leicht. Nein, was auch immer das Licht ist. Der dünne, da ist Platz für einen dünneren und einen dunkleren. Ordnung. Das sind diese Farben. nichts ausgewählt ist, können Sie Ihre Stile hier sehen. Sie können mit der rechten Maustaste darauf klicken und sie löschen oder duplizieren , kopieren. Sie können sie bearbeiten. Sie können sie auch neu anordnen, indem Sie sie anklicken und ziehen Fügen wir auch unseren Farbverlauf hinzu. Das ist der, den ich hinzufügen möchte. Das Gleiche, füge diesen hinzu. Die Benennungskonvention für diesen wird etwas anders sein weil ich verschiedene Versionen von diesem haben werde ? Wahrscheinlich nicht. Ich werde Gradient sagen. Ich nenne das einfach Gradient One. Das Coole daran ist, es sich über das gesamte Dokument zieht. So können wir zu unserem mobilen Lo Fi zurückkehren und unser Dokument finden. Wir verwenden diese Farbe hier und doppelklicken sie, um hinein zu gelangen. Oh nein, ich werde meine Abkürzung verwenden. Erinnerst du dich an den Befehlsklick oder den Ctrl-Klick auf einem PC? Das ist diese Bildfarbe hier. Ich bin mir sowieso nicht sicher, warum es Bild heißt. Oh, es war ein Bild drin, oder? Oh, das haben wir und wir haben es gelöscht, ? Ich kann mich nicht erinnern. Das Gute daran ist allerdings, dass ich das ausgewählt habe. Ich kann alle Farben auswählen. Wir können den langen Weg gehen. Wo ist es? Unter Bearbeiten können wir alle auswählen. Oh, das ist seltsam. Okay. Normalerweise hat es alle mit derselben Füllung ausgewählt, aber weil ich etwas Seltsames gemacht habe und es jetzt Image heißt, funktioniert es nicht. Lass es uns mit diesem hier machen. Was würde ich jetzt tun? Ich würde das Feld wahrscheinlich einfach löschen. Es denkt, es ist ein Bild, ist es nicht. Aber dieser hier hat eine normale alte Füllung. Lass es uns mit diesem machen. Ich kann Figma sagen, bearbeiten, und du kannst alles auswählen sehen In Ordnung, ich habe mich verirrt. Da ist es, Dan. Da sagst du, klick auf den, Dan. Oh, da ist es da. Okay. Also nichts mit dem Bild zu tun. Wählen Sie alle mit derselben Füllung aus. Jetzt verwenden diese eine ähnliche Füllung. Diese hier aus irgendeinem Grund, ich glaube, ich habe mich geändert, als ich mit euch gesprochen habe. Ich werde das Gleiche versuchen. Ich verwende jedoch mein Tastenkürzel, Command K oder Control C oder PC, und ich wähle alle mit derselben Füllung aus, und es wird keine davon abgerufen. Seltsam. Ich habe das kaputt gemacht und möchte sie löschen und weitermachen. Aber machen wir es einfach mit diesem hier. Befehl K oder Steuerung C oder PC, er erinnert sich an die letzten Dinge, die Sie getan haben , sodass ich einfach darauf klicken kann. Ich habe das ausgewählt. Stellen Sie sich vor, es wählt das gesamte Dokument aus. Ich kann jetzt zum Ausfüllen gehen und sagen, ich werde meine Primärfarbe verwenden und das wird sie alle ändern. Gleiche gilt für den Schlaganfall. Ich kann hier reingehen und meine Farben sind da drin. Ich könnte entscheiden, dass ich diesen benutzen werde . Du kannst dir die Vorteile ansehen Manchmal willst du aber nicht, dass es sich ändert, sagst du, du willst, dass sie sich alle ändern, aber dieser muss trotzdem lila bleiben Was Sie tun können, ist dies auszuwählen, lassen Sie uns sofort klicken. Da ist es da. Sie können auch den Unterschied darin sehen, wie die Füllung aussieht. So etwas wie hier, es ist ein Rechteck, wohingegen dieses hier ein Punkt ist. Ein Punkt steht für Stile innerhalb einer Figur. Was du tun kannst, ist, es einfach kaputt zu machen. Es geht hier wieder um diese Farbe, das kleine Quadrat mit der Farbe, und es wird nichts mehr mit diesem Stil zu tun haben. Ich aktualisiere meinen Stil, das wird sich ändern. Das Letzte, was wir tun werden, ist du jetzt gehen und zum nächsten Video übergehen kannst , weil ich nur meine anderen Videos ausarbeiten werde. Eigentlich die Namenskonventionen. Es wird ein primärer, ein sekundärer Akzent sein. Ich werde es einfach durchgehen und das machen. Ich werde sagen. Es ist ziemlich mühsam Fügen Sie Stile hinzu, plus Schaltfläche. Das hier werden Scott-Wallets sein. Das wird meine Sekundarstufe sein. Das ist mein 500. Das muss ich eigentlich nicht verlassen. Ich werde den Rest machen. wirst auch ein Stil sein. Plus Ordnung. Und eine Sache, die ich nicht erwähnt habe, war, wie nennen wir diese? Wenn das ein primärer oder sekundärer Akzent ist, werde ich diese als neutral bezeichnen Okay? Also werde ich sagen, ich werde füllen. Außerdem wird das meine neutrale Nu sein . Habe keine neutrale Rückenmarkierung, bitte warte. Ordnung, jetzt ist es soweit. Also gehe ich zu dir und arbeite mich irgendwie durch 100 Das werden 300, 500, 709 hundert sein. Also werden wir das zusammen beschleunigen. Ordnung. Ich habe meine Farben drin. Als Nächstes möchte ich sie sortieren. 3057 Zutaten werden wahrscheinlich einfach am Boden landen Ich werde das am wenigsten verwenden. 57, 300 über 700 gehen egal wie Sie diese bestellen Achte nur darauf, dass du im Hintergrund nichts ausgewählt hast , um die Farbstile zu bekommen Da ist einer, all diese Typen. Fantastisch. Eine Sache, die Sie vielleicht getan haben, ist vorsichtig zu sein. Du gehst hierher und dann drückst du Plus. Manchmal willst du hier einfach Plus drücken und am Ende hast du zwei Füllungen. Um zwei Füllungen zu entfernen, können Sie sie schließen oder die kleine Minus-Taste drücken. Ordnung. Wir haben eine Farbpalette. Schauen Sie sich uns mit ausgefallenen UX-Designern an, und wir haben eine Farbpalette, mit der wir arbeiten können, und wir haben sie in Stile umgewandelt. Schau uns an. Ordnung. Lass uns anfangen diese Dinge in die Tat umzusetzen. Ich werde es im nächsten Video sehen. 39. Klassenprojekt 07 - Farben und Spalten: Hallo. Wir haben seit einiger Zeit kein Klassenprojekt mehr gemacht. Es ist Zeit. Ich habe nach Farben und Spalten gruppiert, weil das Klassenprojekt Spalten langweilig und das mit Farben aufregend ist. Ist der langweilige Teil. Ich möchte, dass du deine Kolumnen durchgehst und hinzufügst. Erstellen Sie zunächst ein Hi-Fi-Handy und einen Hi-Fi-Desktop. Wir haben die Wireframe-Version bereits erstellt Sie sollten insgesamt fünf sein. Stellen Sie sicher, dass Ihr Dokument in Ihrem Entwurf enthalten ist , damit Sie mehr als eine Seite oder mehr als drei Seiten hinzufügen können mehr als eine Seite oder mehr als drei Okay, das habe ich dir in den vorherigen Videos gezeigt. Und dann möchte ich, dass du auf diesen Seiten vier Frames hinzufügst, unsere vier Seiten. Okay? Also unsere Homepage, Produktdetails, Checkout-Seite und Bestätigung sowohl für den Desktop als auch für das Handy. Lass es mich dir kurz zeigen. Ich habe also diese beiden Seiten, Mobilgerät und Desktop, verschiebe eins, um sie alle zu sehen. Also nimm diese Seiten in die Wiege Auf jeder Seite sollten vier sein, und ich möchte, dass du die Spalten zu beiden hinzufügst. Okay, auf dem Handy und auf dem Desktop. Nummer sechs auf dem Handy, 12 auf dem Desktop. Und Sie können sich für die Dachrinne und den Rand entscheiden . Es liegt ganz bei dir Okay, dann sind es aufregende kleine Farben. Ich möchte, dass du eine Farbpalette wie diese hier durchgehst und entwirfst eine Farbpalette wie diese hier durchgehst und entwirfst . Ich wähle diese aus, drücke Shift 2 und bringe das Ding, das ich ausgewählt habe, nach vorne. Ich möchte, dass du das erstellst. Sie haben eine Primär -, Sekundär- und Tertiär- oder Akzentfarbe Es spielt eigentlich keine Rolle , wie Sie es nennen. Denk dran, wir wollen eine mittlere, dunkle und helle Version davon, und ich möchte, dass du sie in Styles umwandelst. Also hier. Sie können verschiedene Nummerierungen verwenden, vielleicht eins, zwei, drei, ich verwende die Hunderter-Skala Stellen Sie sicher, dass Sie sie, wenn Sie fertig sind, herumziehen , damit sie für Sie Sinn ergeben, gewisse Reihenfolge. Mach auch die Grautöne. Wir nennen sie Neutrale und mindestens einen Gradienten. Wenn du fertig bist, möchte ich, dass du einen Screenshot von all dem machst , weil ich deine Farben, aber auch deine Stile darin sehen möchte aber auch deine Stile darin Dann lade das hoch. Ich habe nicht alles mitgenommen. Ich will mir das alles schnappen. Schauen wir uns die Klassenprojekte an. Da ist es da. Da gibt es ein praktisches Beispiel, so etwas. Farben. Machen Sie sich aber keine Sorgen, wenn Sie sagen, Farben gehören zusammen. Ich weiß nicht, was ich tun werde. Wir können diese im Laufe des Kurses anpassen. Im Laufe der Zeit können Sie sie ganz einfach anpassen, Mitglied, denn wir haben Stile. Das ist okay. Sie können die Farben von Ihrem Move-Board oder von der Farbinspirationsseite abrufen . Mir ist egal, wo du deine Farben hernimmst. Mach dir keine Sorgen, mir einen Screenshot deiner Kolumnen zu schicken . Ich vertraue darauf, dass du es getan hast. Aber ich möchte das für dein Klassenprojekt sehen. In Ordnung, geh und mach ein paar Farben. Wenn du es noch nicht getan hast, mach sie alle schön sauber und achte darauf, dass da auch ein Gefälle drin ist Ich habe meins nicht da. Eigentlich muss ich diesen aktualisieren. Das ist eine alte Version meiner Farben. Da hast du's. Das ist der Richtige. Ordnung. Viel Spaß beim Malen von Farben und langweiligen alten Kolumnen. Ich werde es im nächsten Video sehen. 40. Fehlende Schriftarten im Browser von Figma: Dieses kurze Video richtet sich an alle, die Figma im Browser und nicht in der Desktop-App verwenden Figma im Browser und nicht in der Desktop-App Die Desktop-App benötigt dieses Video nicht. Wenn Sie die Browserversion verwenden, und das werden Sie wahrscheinlich irgendwann tun, können manchmal Schriftarten fehlen. Und alles was Sie tun müssen, es ist ganz einfach, Sie gehen zu figma.com slash Downloads und installieren das. Starten Sie den Browser neu Lassen Sie mich für Interessierte nur ein bisschen näher darauf eingehen . Spring rein. Es ist einfach. Gehe zu figma.com Slash Downloads Suchen Sie das Font-Installationsprogramm , das zu Ihrem Betriebssystem passt, installieren Sie es und schließen Sie dann Ihren Browser Öffnen Sie es erneut und es wird Etwas detaillierter zwei Versionen von Figma, die Sie verwenden können Es gibt diese Desktop-Version , die Sie herunterladen können. Hey, das ist dieser. Es ist etwas das auf meinem Desktop läuft. Es ist der Version hier im Browser sehr ähnlich der Version hier im , die ich in Chrome verwende. Okay? Und sie sehen genauso aus. Ein kleiner Unterschied ist, dass ich vergessen habe, dass diese Browserversion nicht über die kleine Home-Taste verfügt, die ich in den Kurswechseln einige Male erwähnt habe. Da ist sie also, die Home-Taste. Das hat sie nicht. Sie erinnern sich, dass Sie zu Dateien gehen und zurück zu Dateien gehen , um an denselben Ort zu gelangen. Aber auch die Desktop-Version, diese hier, hat. Seltsam und hat alle Schriften , die ich auf meinem Computer installiert habe. Dieser Browser tut das nicht. Es hat nur eine ausgewählte Anzahl von Schriftarten, nichts ist auf Ihrem Computer installiert. Alles was Sie tun müssen, ist dies zu installieren und dann Ihren Browser zu schließen, ihn erneut zu öffnen und alle Schriftarten, die Sie möglicherweise heruntergeladen oder gekauft haben , werden in Figma angezeigt Einfach, sei einfach. Das ist es. Mach weiter. 41. Welche Schriftarten kann ich verwenden? Plus-Schriftkopplung in Figma: In diesem Video werden wir uns ansehen , welche Schriftarten ich auf meiner Website und App verwenden kann Wir werden uns Google Fonts ansehen und uns auch mit der Kombination von Schriftarten befassen, einer Möglichkeit , zwei verschiedene Schriftarten zu kombinieren , die zusammen gut aussehen Herr Bin. In Ordnung. Wenn du in Sachen bist, ist das, was ich will. Wenn du in Figma tippst, bekommst du eine Menge Schriften vorinstalliert und du denkst, woher kommen die Im Grunde sind sie alle von Google Fonts. Google hat die Welt und das Internet mit einer Reihe kostenloser Schriftarten für den kommerziellen Gebrauch versorgt , und Sie werden dort wahrscheinlich etwas finden , das für Sie funktioniert. Wenn Sie Ihre eigene Schrift installieren möchten, müssen Sie nur vorsichtig sein. Nehmen wir an, Sie finden woanders eine Schrift und installieren sie auf Ihrem Computer. Sie müssen nur sicherstellen, dass Sie über eine kommerzielle Lizenz verfügen, um sie zu verwenden. keine Angst davor, Schriften zu kaufen , wie ich neulich eine gekauft habe, Clem, ich liebe diese Gießerei Wenn auch auf der Website. Es ist sehr cool. Nehmen wir an, American Grotesque ist das, was ich will. Es ist einfach perfekt für die Marke, etwas, das ich verwenden möchte, wenn es darum geht, es zu kaufen. Das ist eine, die ich gekauft habe. Ich habe Geograph gekauft und ich habe es ursprünglich nur für den Desktop gekauft Fünf Benutzer können es verwenden und ich kann es auf meinem Computer verwenden und es für alle Arten von Drucksachen Ich habe es für ein T-Shirt benutzt. Welche Schriften ich will, ich wähle die Schriften, die ich trage, ich will eine dünne und normale. Sie sehen, Sie zahlen tatsächlich pro Schrift. Sie können sie als Packung günstiger kaufen , aber wir kaufen diese. Scheuen Sie sich nicht zu kaufen, aber es gibt viele gute kostenlose Sachen online. Aber die Sache, die ich überprüfen muss, ist, dass ich es auf meiner Website nicht durchgehen konnte. Ich muss die Weblizenz verwenden, und ich muss dafür bezahlen. Ich muss sicherstellen, dass ich vorsichtig bin , welche Schrift ich an meinen Kunden verkaufe. Wenn sie sagen, Oh ja, das ist toll. Dann versuchst du es zu benutzen. Entweder wird es in Schwierigkeiten geraten oder es wird etwas kosten, vielleicht liegt es im Budget. Sie müssen sicherstellen, dass Sie die Rechte haben, es in Ihrem Web zu verwenden . Lassen Sie uns zu den kostenlosen Inhalten zurückkehren , die in Google integriert sind. Im Grunde genommen sind fonts.google.com der Ort, an dem sie alle herkommen. Sie sind alle in Figma vorinstalliert, und das ist alles, was Sie wirklich darüber wissen müssen Aber dann kommst du zu der Frage, welche Schriftarten ich wähle? Vielleicht haben Sie schon einen Firmenfonds und suchen nach einer passenden Schrift. Der Begriff, nach dem Sie suchen, ist Schriftpaarung. Wenn Sie mit Schriftarten noch nicht vertraut sind, kann dies ein sehr hilfreicher Begriff sein, und Sie können im Internet nach Google-Pings suchen Ich bin auf figma.com im Schrägstrich Google Hyphen Fonts und Figma habe einige Schriftarten kombiniert und es werden dir nur Schauen wir uns eine Schrift an, die ich ziemlich oft verwende . Eisenbahn. Schauen wir uns das an , finden wir die Paarung. Sie werden sagen , richtig, du magst Railway? Welche Schriften werden dazu passen? Willst du eine Serifenschrift, also die mit kleinen Füßen oder Sandserif? Hat nicht die mag diese Seite wirklich, weil sie mir keine sehr guten Beispiele gibt. Du kannst irgendwann dorthin gelangen. Schau dir das an. Wenn ich Railway Plus öffne, versuchen wir es mit Merryweather. Es ist in meinem Browser geöffnet. Im Grunde benutze ich jetzt Figma. Es wurde in meine Entwürfe kopiert und sie haben dir Beispiele für A gegeben, das ist ein Merywther, es sind nur ein paar Grundlagen drin Was ich gerne sehe, ist einfach im Internet nach interessanten Schriftpaaren zu suchen . Ich habe gerade auf eine Reihe von Google-Ergebnissen geklickt. Eine davon ist von Google selbst und zeigt dir nur, Schau, diese beiden Schriftarten, die zusammen passen, könnten für dich sein. Welche Schriften sind das? Es ist keine sehr gute Seite. Websites, die ich mag fontpa.co Das ist ziemlich gut. Du kannst anfangen zu sehen, richtig. Ordnung. Welche mag ich zusammen? Vielleicht befinden Sie sich in der Konzeptphase oder der Logo-Designphase und sagen, oh, ich mag die beiden zusammen. Ich mag es noch mehr, wenn es Beispiele gibt. Ich habe gerade diesen gefunden. Nur eine zufällige Blogseite. Das kann also hier sein oder auch nicht, wenn Sie zurückkommen. Aber es gibt mir noch mehr Beispiele. Du sagst, oh, ich mag Playfair. Welches sollte ich mit Playfair mit einer Schrift von Sands Here nehmen Playfair mit einer Schrift von Sands Here Was ist das? Das ist der Playfair Pass Was ist das? Quelle: Sands Pro. Text für Source Sands proro und vielleicht mache ich meine Titel Angst. Kannst du einfach rumgehen und gehen, das gefällt mir. Das gefällt mir. Auch hier arbeitest du dich einfach durch und versuchst, gute Paarungen zu finden Sie müssen sie nicht einmal installieren. Nehmen wir an, wir machen Oswald hier. Wenn ich zu FIGMA gehe, werden Sie feststellen dass, wenn ich hier reingehe und einfach Oz eintippe, da ist Oswald. Ich kann anfangen, es zu benutzen Du wirst alle Gewichte haben. Es gibt hier nur ein paar Gewichte, aber du verstehst schon, was ich meine. Ich bin nur aus der Zukunft zurück. Ich möchte das nur zum Video hinzufügen . Die Leute fragen nach fonts.adobe.com. Möglicherweise haben Sie bereits eine Adobe-Lizenz und verwenden Adobe-Schriften. Kannst du sie benutzen, Figma? Sie müssen sie herunterladen und so installieren , wie Sie es normalerweise mit Adobe-Schriften tun Wenn Sie die Creative Cloud-App haben, doppelklicken Sie einfach darauf, und sie wird zu Ihrem Computer hinzugefügt. Wenn Sie die Browserversion verwenden, wie im letzten Video, müssen Sie das Font-Installationsprogramm installiert haben, damit sie in der Browserversion von FIG angezeigt werden. Das ist es. Der einzige Haken bei FigMa, tut mir leid, Adobe-Schriften ist, dass Sie sie verwenden können, weil Sie eine kostenpflichtige Adobe-Lizenz haben Sie müssen also die Lizenz beibehalten, um ihre Schriften weiterhin verwenden Das ist der einzige Vorbehalt bei ihnen. Und wenn Sie es mit einem anderen Designer teilen, muss dieser auch über eine eigene Lizenz für die Schrift verfügen Du kannst ihnen nicht einfach die Schrift geben. Aber es ist wirklich üblich , Adobe-Schriften zu verwenden. Sie keine Angst vor ihnen, aber Sie müssen nur sicherstellen, dass Sie tatsächlich ein Adobe-Abonnent sind. Ordnung. Zurück mit dem Video. Das ist nur ein kleiner Hinweis, wie Sie sicherstellen, dass Sie die richtigen Schriftarten verwenden. Wenn Sie eine kostenpflichtige Schrift haben, stellen Sie sicher, dass Sie die Lizenz dafür erwerben, und wenn Sie Google-Schriftarten verwenden möchten, wie passen Sie sie an, damit sie cool aussehen? Ich mache Design seit über 20 Jahren und ich gehe immer noch los, wenn ich nach etwas suche. Vor allem, wenn ich eine Schrift von einer Firma bekomme, werde ich versuchen, eine Schriftart zu finden, die dazu werde ich versuchen, eine Schriftart zu finden damit ich ihre Schrift behalten kann, aber auch einige zusätzliche Schriften habe die ich im gesamten Design verwenden kann , um es ein wenig aufzupeppen Ich schaue mir die Schriftpaarung an. Ich mag Oswald Ich mag Oswald normalerweise nicht wirklich, weil es normalerweise fett gedruckt ist Ich meine, aber extra leicht ist echt lecker. Schau dir das an. All das ist es. Schmackhaftigkeit So. Wir sehen uns im nächsten Video 42. Welche gängigen Schriftgrößen sollte ich im Webdesign wählen?: Hallo. Willkommen. Hallo, wir werden über Schriftgrößen sprechen. Es gibt einige wirklich gebräuchliche Größen, die verwendet werden können. Sie können jede beliebige Größe verwenden. Aber im Web- und App-Design gibt es einige gängige Dinge, die ich mit Ihnen teilen werde. Dann werden wir ein wenig Zeit damit verbringen, tatsächlich etwas Text auf die ersten Teile unseres Designs anzuwenden. Wir machen unsere Art von Heldenbox und diese Karten unten mit etwas Text drin. In Ordnung, lassen Sie uns einsteigen und loslegen. Okay, also lass uns einfach ein paar Schriften starten. Ich klicke auf das Tiki, klicke hier und tippe auf eins und gebe einen Bindestrich und dann ein Beispiel ein Es ist nicht wirklich wichtig, was du hier hineinschreibst. Ich drücke Escape, um zum Verschieben-Tool zurückzukehren, damit ich es verschieben kann. es ausgewählt ist, werde ich sagen: In Ordnung, welche Schriftart verwende ich Ich habe mich für etwas namens Source Sans entschieden. Ich mag es. Source Sans Pro, und für meine Überschriften verwende ich eine fette Schrift Nun, welche Größe sollte Ihre Überschrift haben? Sie möchten also einen Bereich, mit dem Sie arbeiten können. Oft ist der größte Wert 72. Das ist ziemlich groß. Das liegt an dir. Oft ist das Überschrift Null , weil ich es nicht oft benutze. Die nächstbeste Größe und die größte Größe für viele Seiten wird 48 sein, das wird meine erste Überschrift sein. Warum benenne ich sie? Nur damit wir ein paar Regeln haben können und wir werden im nächsten Video einige Stile erstellen im nächsten Video Ich werde mich an meine Schriftgröße halten. Es ist wirklich üblich, dass 72, 48, 32 die nächste Größe für Überschrift zwei ist. Dann habe ich eine Überschrift drei. Welche Größe sollte das haben? Diese können jede beliebige Größe haben. Es ist einfach sehr üblich , diese Größen zu verwenden. Sobald Sie bei Überschrift vier angelangt , die 18 ist , gehen Sie oft nicht weiter . Sie könnten eine gute Fünf haben. Es liegt an dir und wir werden auf vier gehen. Dann ist die nächste eine Körperkopie. Dieser hier wird oft Absatz genannt. Man kann es Textkörper , Absatz nennen. Komm schon, Dan. Dieser hier ist normalerweise immer für eine Website, 16. Das ist eine wirklich gute Startgröße. Manche Schriften scheinen größer zu sein als andere, also kannst du das anpassen. Möglicherweise müssen Sie 17 oder 14 verwenden, was auch immer es ist, und mein Fließtext wird normal sein. Das werde ich verwenden. Oft ist es gut ein Beispiel wie dieses zu haben , damit Sie beim Entwerfen gewisse Konsistenz haben. Ich reihe meine gerade an, weil, aber wenn ich sie hier auf der Seite habe, nur damit du abziehen und einfach loslegen kannst , brauche ich eine Überschrift drei, und dann fange ich an, sie zu ändern. Ich werde das jetzt mit meinem Marketingtext machen. Aber du kannst jetzt weitermachen. Dies sind die gängigen Größen. Du kannst machen, was du willst. Eine letzte Sache ist, dass sie sie oft anrufen, ich werde diesen hier nicht benutzen. Zu groß. Ich werde sagen, eine H-Eins. Das ist die Abkürzung für eine Überschrift. Wenn Sie eine Zeit lang nicht im Internet sind, wissen Sie, welche das sind Wenn Sie nicht nur eine Abkürzung für eindeutig Überschrift drei haben. Und der Absatz heißt P. Das sind meine Größen. Vielleicht haben Sie noch einen für die Allgemeinen Geschäftsbedingungen , der klein ist auf 14 oder 12 reduziert wird. Die andere Sache, die Sie tun müssen , ist sicherzustellen, dass Sie bei der Suche nach Schriftarten für einen Browser zu 100% sind , da diese für den Bildschirm repräsentativ sein werden, wenn er tatsächlich veröffentlicht wird . Wenn ich zu weit herausgezoomt habe und sage: Oh ja, ich brauche auf jeden Fall Überschrift Null, weil sie nicht so groß erscheint, man bei 50% ziemlich weit herausgezoomt Einfach bei 100% sein, was Shift Null auf meiner Tastatur ist , geht auf Und wenn Sie ein Mobilgerät verwenden, denken Sie daran, dass Sie entweder auf ungefähr die gleiche Größe herauszoomen oder einige Tests auf Ihrem Handy durchführen müssen ungefähr die gleiche Größe herauszoomen oder einige Tests auf Ihrem Handy durchführen , bevor Sie zu spät kommen. Kommt in zwei Größen. Das ist es. Ich werde jetzt ein bisschen produzieren, also kannst du weitermachen , wenn du nur wegen der Schriftgröße gekommen bist und wir werden ein bisschen Seiten ausbauen , weil es viel Theorie gab. Wir müssen tatsächlich ein paar Sachen machen. Ich mache das auf meiner Homepage, ich hole mir mein Frame-Tool. Ich gebe ein einfaches NAV und wähle eine meiner Farben aus. Meine Füllung hier, ich gehe zu meinen Füllfarben. Ich gehe hier zu meinen kleinen Farbmustern. Machen wir das? Wie auch immer, klicken Sie auf die vier Punkte. Ich werde eines davon auswählen. Sie können es so oder so erreichen, entweder gehen Sie dorthin und drücken Plus und dann gehen Sie zu den Farben auf dieser Seite. Möglicherweise müssen Sie dies ändern, oder Sie können bei ausgewählter Option hier zu der kleinen Option gehen und sagen, dass ich tatsächlich diese Primärfarbe verwenden werde. Leg es in ein Navi. Ich werde meine Kolumnen einschalten. Wer erinnert sich, was die Abkürzung war? Du erinnerst dich nicht an Shift G. Das stimmt. Ich werde das für meine Heldenbox herbringen. Das ist der Hauptteil der Marketingbotschaft. Es wird ein Bild und ein bisschen Text enthalten. Ich schalte jetzt meine Spalten aus, Shift G. Ich füge hier meine erste Überschrift hinzu, ich gebe mein Marketing ein. Ich werde für meine haben, ich sage minimal. Ich werde in Großbuchstaben schreiben. Eigentlich ist meine Feststelltaste auf meiner Tastatur kaputt, aber wir wissen, wie man das repariert. Also setzen wir auf minimales Design, maximales Ziel. Sie müssen sich Ihre eigene Marketingbotschaft einfallen lassen , wenn wir ein Klassenprojekt dazu machen , aber das werde ich verwenden. Denken Sie daran, ich möchte alles in Großbuchstaben machen . Ich werde alles auswählen. Eigentlich in meiner Abkürzung, um sie alle zu beherrschen. Shift K funktioniert nicht, wenn ich in meinem Textwerkzeug bin. Also werde ich nur die Escape-Taste drücken, um wieder herauszukommen. Es ist immer noch ausgewählt, aber der Text ist nicht hervorgehoben. Jetzt kann ich Shift K machen. Es ist nicht Shift K. Mein Gehirn ist weg. Es ist Command K. Control K auf einem PC. Und ich sage Großbuchstaben und mache sie alle groß Was ich tun werde, du musst nicht ist, dass ich mich nicht für eine zweite Schrift Was ich tun werde, ist einfach fett für Titel und nicht fett für Absatztext. Sie könnten eine zweite Schrift haben, das ist völlig in Ordnung. Du könntest eine große, etwas übertriebene für den Schlagtext haben und etwas Einfacheres für den Haupttext oder umgekehrt. Ich werde mich einfach für eine Light-Version entscheiden. So werde ich es umgehen zwei Schriftarten zu haben. Ich werde einfach dieselbe Schrift mit unterschiedlichen Stärken verwenden. Ich habe meine Marketingbotschaft da drin, und ich werde meine kleinen Feature-Boxen hier unten machen. Ich werde ein Netz wieder einschalten. Ich werde das wahrscheinlich einfach kopieren und einfügen, und ich werde das Feature-Feld machen. Sie nennen sie Karten oder Feature-Boxen. Und hier werde ich das in eine andere Überschrift ändern. Ich werde sagen, du bist, was ist das? Das ist 24. Das scheint ungefähr richtig zu sein. 24, es ist gemischt. Ich werde einfach fett gedruckt und wir werden einige Feature-Box-Titel eingeben. Wir könnten hier Platzhaltertext verwenden, aber wir sind in der High-Fidelity-Version Ich habe meins gerade auf einer anderen Seite hier. Ich habe sie abgetippt. Ich werde dich dazu bringen, es ein bisschen zu machen, aber das wird meine Überschrift für diesen sein Überschrift. Es wird nach unten gehen Ich werde hier ein Bild oben platzieren. Jetzt werde ich das duplizieren. Ich mache einen, Befehl D, kontrolliere den NRPC und ich tippe sie einfach ab Ich gehe in den Schnellmodus. Ich werde alle meine auswählen. Ich halte einfach die Umschalttaste gedrückt und doppelklicke darauf, und ich werde sagen, dass Sie in Bezug auf die Ausrichtung des Textes zentriert sind. Wenn ich mehr Text hinzufüge, wird er nicht von links, sondern von der Mitte ausgehen. Du weißt, wie zentriert funktioniert hat, und ich werde sagen, dass du und du dieser hier sein werden, diese Ausrichtung. Du warst zusammen. Das hat nicht funktioniert. Das hat es hier irgendwo drunter gelegt. Es ist standardmäßig. Das ist eine gute, interessante Sache. Wenn beide ausgewählt sind, nein, wenn nur der Text innerhalb des Rahmens ausgewählt ist, sollte ich ihn zentrieren können. Da hast du's. Das ist gut zu wissen. Wenn sie übereinander liegen, können Sie sie zentrieren. Aber ich werde sagen, ich klicke einfach auf den Text, ich werde ihn zentrieren und er wird innerhalb des Rahmens zentriert. Ordnung. Gibt es noch etwas, das ich tun möchte, bevor wir weitermachen? Das wird es sein. So wählt man Schriftgrößen aus. Wir haben jetzt einen kleinen Teil unseres Designprojekts erstellt. Ich werde Shift G drücken , um die Spalten auszuschalten. Ich muss mit den Abständen herumspielen, aber das reicht für dieses Video. Wir sehen uns im nächsten. 43. So erstellst du Character Styles (Zeichenstile) in Figma: Ich hallo. Hallo, in diesem Video werden wir diese Schriftstile machen. Wir haben unsere Überschriften im letzten Video erstellt. Jetzt werden wir sie wie die Farben, die wir zuvor gemacht haben, in wiederverwendbare Stile umwandeln, sodass wir, wenn wir einen anpassen, es tun und die Schriftart ändern Sie werden sehen, dass sich alle Anwendungsfälle hier ändern. Pinselskript, oh. Rückgängig machen Lass uns loslegen und lernen, wie man Textstile in einer Figma In Ordnung, verwandle sie in Stile. Schnappen wir uns hier unseren ersten , KOH One, und wir gehen zur Typografie über und genau wie Farbe S, diese kleinen Punkte in der Ecke, das sind die Stile Ich werde darauf klicken und sagen, lass uns eins hinzufügen Was sind die anderen hier unten? Sie sind von Have a look. Material drei könnte Material vier oder fünf sein , je nachdem, wie weit es in der Zukunft liegt, und genau aus diesem Grund macht Google seine Schriften. Sie verwenden dieses Designsystem, das Material genannt wird. Anstatt es Android zu nennen, nennen sie es Material. Wenn Sie nach unten scrollen, finden Sie alle IOS-Dateien. Wenn Sie Apps entwerfen, können Sie diese einfach überspringen und mit der Verwendung beginnen. IOS, und das ist es wahrscheinlich. Hat sonst noch jemand Zeug da drin? Die werden wir ignorieren. Wir werden unsere eigenen kreieren. Fangen wir nochmal an. Wenn das ausgewählt ist, gehen wir zu den Stilen über. Wir werden Plus sagen, wie wir es bei der Farbe getan haben, und wir werden sagen, dass dieser hier meine erste Überschrift sein wird und Sie bei Bedarf eine Beschreibung hinzufügen können. Es ist klar, was wir haben und wo wir es verwenden sollen , weil es nur die Überschrift ist, aber ich werde den Stil erstellen. Ordnung. Warum ist das gut? Das heißt, du kannst vorbeikommen und gehen, richtig, das muss der erste Stil der Überschrift sein. Ich muss nicht erst herausfinden, was die Größen und das Gewicht sind. Ich kann einfach auf meine Stile eingehen und sagen, du bist auf dem ersten Platz. Da ist es da. Bum, zu groß. Okay, aber du verstehst die Idee. Sie können Stile erstellen. Wenn Sie nichts ausgewählt haben, werden alle Stile zusammen mit Ihren Farbstilen angezeigt. Hey, Leute, ich werde auch Überschrift zwei machen und euch einen der Vorteile zeigen Lassen Sie uns das erstellen und nennen wir das Ganze Überschrift zwei Okay, ich werde es hier unten anwenden, ich werde meine Befehlstaste und die Umschalttaste gedrückt halten. Denken Sie daran, wir haben uns das schon einmal angesehen. Wenn Sie die Befehlstaste oder die Strg-Taste auf einem PC gedrückt halten, taucht es in diesen Frame , in dem sich dieser Text befindet anstatt darauf zu doppelklicken. Wenn ich aber auch die Umschalttaste gedrückt halte, bedeutet das, dass mehr als ein Objekt gleichzeitig ausgewählt wird. Ich gehe einfach klicken, klicken, klicken. Das ist Command-Shift auf einem Mac, Control-Shift auf einem PC. Was ich tun werde, ist zu sagen, dass Sie jetzt der Stil von Überschrift Zwei sind . Oh. Der Stil ist nicht in Großbuchstaben geschrieben, los geht's Ich werde so tun, als wäre das Teil des Kurses gewesen. Was wir tun werden, ist Überschrift zwei zu sagen, tatsächlich sind alle meine Überschriften in Kleinbuchstaben geschrieben Nehmen wir an, das wird meine Regel sein, damit ich sie später nicht ändern muss Um einen Stil zu bearbeiten, kommt der Kunde zurück und sagt, er muss Großbuchstaben und eine andere Schriftart verwenden Das war mein ursprünglicher Plan. Was du tun kannst, ist zu deinem Stil überzugehen. Ich habe nichts ausgewählt. Nichts ausgewählt, ich kann meine Styles sehen. Ich bin im Design, nicht im Prototyp, und ich kann zu diesem hier in der zweiten Überschrift gehen und auf die kleine Schaltfläche „Stil bearbeiten“ klicken. Da ist nicht viel. Ich kann auf die kleinen Punkte klicken und sagen, richtig, ich möchte, dass sie alle in Großbuchstaben geschrieben werden. Kannst du diese Veränderung sehen , diese Veränderung, diese Veränderung. Der Kunde könnte zurückkommen und sagen, ich mag Sauce Sands Pro nicht oder vielleicht ist sie einfach nicht schwer genug. Wir wollen, dass es die schwarze Version und Sie können sehen, wie sie alle das Richtige suchen, oder der Kunde kommt zurück und sagt: In Ordnung, es ist Zeit für Comic Sans. Und du kündigst, weil du mit Comic Sands auf lila Hintergrund nicht leben kannst. Hast du die Idee bekommen? Schnell rückgängig machen. Ich gehe da hin . Ich werde sie nicht alle durchgehen. Nun, eine Sache, die ich tun möchte, bevor wir sie alle durchgehen und erstellen, ist, dass Sie möglicherweise zwei Schriftarten haben. Es wäre nicht üblich, aber Sie könnten am Ende zwei Überschriftenstile haben, einen, der vielleicht informativer ist , und einen , der mehr Marketing bietet Vielleicht haben Sie eine Schriftart gefunden, ein weiterer guter Tipp ist, wenn darauf eine Überschrift angewendet wurde, ein Stil. Es tut uns leid. Du kannst hier rüber gehen und sagen, diese erste Überschrift kann ich ändern. Aber ich kann es auch kaputt machen. Es hat immer noch die richtige Größe in derselben Schrift. Es hat jetzt einfach nichts mit diesem Stil zu tun. Wenn ich diesen Stil ändere, dann ändern wir ihn. Er sieht genauso aus, aber wenn ich es ändere, Stil drücke und es auf Licht umstelle, wirst du feststellen, dass sich das geändert hat, aber nicht dieses, weil ich die Verbindung unterbrochen habe. Ich mache das rückgängig, gehe zum Stil über. Ich habe die Verbindung unterbrochen und werde mich nicht erinnern können, was ich mache. Bitte oh, ja, das stimmt. Wir haben eine andere Schriftgröße erstellt. Ich werde hier alle Schriftarten eingeben . Hier oben werde ich beliebte Schriften sagen, Google-Schriften. Ich wünschte wirklich, es gäbe hier bessere Filter. Ist es nicht. Ich tippe einfach von Hand und finde hoffentlich eine handgezeichnete Schrift. Wenn ich von Hand tippen kann. Komm schon, Dan. Okay, also werde ich mich für diesen hier entscheiden, Figma-Hand, schnelle Hand Nehmen wir an, es ist schnell und ich mag es nicht. Bitte warte. Das gefällt mir, eine andere Hand. Das ist cool. Nehmen wir an, Sie möchten, dass Sie eine reguläre Informationsschriftüberschrift benötigen , und Sie benötigen eine aussagekräftigere Überschrift im Werbemarketing-Stil Was Sie tun können, ist, Sie können ein H haben, und Sie können H eins haben, Sie können es nennen, wie Sie wollen, aber wir werden als Alternative unser H one Alt nennen Alternative unser H one Alt Wenn du diesen Stil machst, kannst du dasselbe tun. Ich werde einen Style-Hit Plus machen, und ich werde diesen Stil Überschrift eins nennen, Alt. Nur damit ich zwei davon habe, damit ich hier raufgehen und sagen kann, dass dieser Mehrfachzweck oder Maximalzweck der Stil dieser ersten Überschrift Alt sein kann . Das hier wird die reguläre Überschrift eins sein, was ich brauche, um ein Argument zu finden. Also werde ich hier alles neu stylen , ich könnte es genauso gut Ich fange an, dieses Handding zu mögen. Ich mache das und arbeite mich durch, einfach alle Stile zu machen. Du solltest insgesamt fünf davon haben. Ich werde am Ende sechs davon haben weil ich diesen alternativen Überschriftenstil haben möchte. Bevor wir das tun, ist eine Sache, die mit dem Überschriftenstil nicht einhergeht, sich das anzusehen. Ich mache ein paar Dinge. Lass uns das durchgehen und sicherstellen, dass es Überschrift eins ist. Ich werde diese Überschrift bearbeiten . Eigentlich kann ich hier nicht. Das ist eine weitere interessante, allerlei interessante Sache, die auftaucht Hier, wenn ich diesen habe, der kein Stil ist, habe ich viele Typoptionen Wenn ich auf etwas klicke , das bereits ein Beispiel ist, kannst du sehen, ich nur Dinge wie Ausrichtung und einige Linienanpassungen habe . Das ist es, weil alles mit dem Stil zusammenhängt. Das schränkt es ein. Du kannst es kaputt machen und weitermachen. Was ich tun werde, ist zuerst diesen zu aktualisieren, nichts ausgewählt, ich gehe zur ersten Überschrift über, ich werde sagen, dass Sie alle bereit sein müssen. Nett. Also habe ich diesen. Nehmen wir an, ich nehme das und lege es auf eine andere Seite, aber ich brauche eine andere Farbe. Offensichtlich ist Weiß hier nicht gut. Ich werde es rot machen. Und wenn nichts ausgewählt ist, sehe ich zu, wenn ich jetzt meine Überschrift ändere. Ich muss die Schriftgröße ändern . Lass es uns richtig klein machen. Ich mache das, du wirst feststellen, dass sehr klein geworden ist, aber es hat die Farbe behalten. Die Farbe kommt also nicht mit. Es passt nur die tatsächliche Mechanik der Schriftgröße an, Scannen, den Zeilenabstand , solche Dinge Ich werde das jetzt im Schnellmodus durchgehen und alles erstellen. Ich werde das alles rückgängig machen Ich werde alle meine Stile kreieren und wir sehen uns in einer Sekunde. Warte dort. In Ordnung, also habe ich ein paar davon erstellt. Eines der Dinge, die ich mit euch teilen möchte, ist, dass diese Schrift bei 100% der Größe wirklich entspricht. Ich werde nicht einmal einen Stil dafür erstellen nur für den Fall, dass die nächste Person sagt, oh, ich darf Überschrift vier verwenden. darfst du nicht. Ich habe mich entschieden. Kannst du sehen, wie diese Schrift und hier? Sie haben die gleiche Größe. Sie sind beide 48 Jahre alt. Dieser hier ist bei dieser Größe schwieriger zu lesen. Er hat die gleiche Höhe. Es ist viel schmaler Ich habe beschlossen, es nicht zu klein zu machen , und ich möchte wirklich nicht, dass es als Absatz verwendet wird Meine Dinger. Wenn wir hier drüben nachschauen, habe ich die Überschrift für eins, zwei und drei, aber sonst nichts. Eine weitere Sache ist, dass diese Stile in der Reihenfolge erstellt werden , in der Sie sie erstellen, oder sie sind hier aufgeführt. Wir müssen sie herumschleppen. Ich will Überschrift eins, zwei, ich will drei da oben, vier da oben. Dann wahrscheinlich der Absatz ganz oben, weil ich ihn am häufigsten verwende. Eins, zwei, drei, vier und dann habe ich eins, zwei, drei für diese Alternativen. Sie müssen keine alternative Schriftart für Ihre Überschriften haben alternative Schriftart für Ihre Überschriften Möglicherweise haben Sie eine für Ihren Absatz oder eine kursiv gedruckte Aber jetzt haben wir einen Stil und das Tolle daran , wenn wir sie im gesamten Dokument verwenden Wenn wir Anpassungen vornehmen müssen, wir eine wirklich große Datei anpassen, und Sie werden später herausfinden, ist, dass wir das dokumentübergreifend machen und mit anderen Teamkollegen teilen können dokumentübergreifend machen und mit anderen Teamkollegen teilen Wir können diese Stile alle gemeinsam nutzen, was wirklich cool ist. Sie müssen sich vielleicht vergewissern , dass Sie sie tatsächlich angewendet haben. Manchmal machst du deinen Stil danach und er hat die gleiche Größe, aber er ist nicht miteinander verbunden. Ich muss sicherstellen, dass dieser Teil hier mit meiner ersten Überschrift verbunden ist, das heißt, dieser Teil hier ist mit meiner alten Überschrift verbunden. Dieser hier ist der richtige. Das sind alles Überschrift zwei, also bin ich startklar. Diese hier ist es wahrscheinlich auch, aber ich brauche dich nicht. Das ist es. Wir haben einige Schriftstile oder Charakterstile in Figma erstellt. Wir sind so professionell Ordnung. Wir sehen uns im nächsten Video. 44. Lorem Ipsum und Platzhaltertext in Figma: In diesem Video werden wir uns das Hinzufügen von Platzhaltertext ansehen . Es wird nur verwendet, um den Platz zu halten. Wenn wir die Kopie nicht haben, sind es nur verwechselte lateinische Wörter. Ich zeige dir gute Orte, wo du es bekommen kannst. Ich werde dir ein Plugin zeigen. Es ist wirklich cool, es heißt Content Real. Es macht diesen Platzhaltertext, aber es ermöglicht dir auch eine ganze Reihe falscher Namen oder Daten durchzugehen und hinzuzufügen oder was wir sonst noch haben E-Mail-Adressen? Wo ist das? Ich war hier. Wie dem auch sei, Währungen, das ist ein wirklich guter Zufallsgenerator für Inhalte. Lass uns reinspringen und herausfinden, wie es funktioniert. In Ordnung, also lass uns etwas Platzhaltertext einfügen. Ich nehme die T-Taste und klicke und ziehe heraus, weil ich möchte, dass meine Marketingbotschaft dann ein bisschen als Haupttext erscheint. Und je nachdem, welche Schriftart Sie zuletzt verwenden, ist sie möglicherweise auf die erste Überschrift eingestellt. Eine Sache, die ich dir nicht gezeigt habe, ist dass du einfach hier reinklicken und dann darauf klicken kannst , um es zu ändern. Ich werde meins auf einen Absatz umstellen. Wenn es nicht darauf steht und es kaputt ist, denken Sie daran, Sie können hier reingehen und sagen, ich möchte, dass das ein Absatztext ist. Meine Mütze blinkt da drin. Woher habe ich Laura Nipsm? Es ist der Ritus des Ganges auf dieser Seite, lipsum.com, voller Werbung Es ist hässlich. Aber dort bekommen viele Leute einfach Scheintexte Du kannst hier reingehen und sagen: In Ordnung, was will ich? Ich will fünf Absätze. Eigentlich will ich nur einen Absatz, generieren, ich gebe dir nur einen Haufen Texte, die du direkt aus dem Browser kopieren kannst , ohne die Werbung zu ignorieren. Und füge es hier ein. Es sind nur lateinische Wörter, die alle miteinander vermischt sind und nichts bedeuten. Das Problem dabei ist manchmal, dass, wenn man es an den Kunden schickt, weil man die Texte aus dem Copyright noch nicht hat, sie fragen: Was ist das? Es ist kaputt. Also musst du es vielleicht erklären. Aber es ist einfach sehr praktisch weil Sie an Dingen wie der Zeilenhöhe und dem Layout arbeiten und dem Texter einige Wörter geben müssen wie der Zeilenhöhe und dem Layout arbeiten und , auf die er treffen kann Wenn Sie Platz für 200 Zeichen eingeplant haben, dann können sie damit umgehen Wir verwenden Platzhaltertext nur, um die Lücke zu füllen , und nicht, ich weiß nicht, was haben wir vorhin gemacht? Ich denke aber, dass X eines der coolen Dinge ist, dass es ein Plug-In gibt Es gibt immer ein Plugin, es gibt ein wirklich gutes. Es gibt jede Menge davon für einen Bestelltext. Nehmen wir an, ich will das Gleiche hier unten, ich möchte ein bisschen Text. Ich werde mein Textwerkzeug drücken. Es wird hier runter gehen. Ich brauche nicht viel. Ich werde sicherstellen, dass ich nicht zwei pro Absatz esse, und ich werde ein Plugin einbauen. Plugins verstecken sich hier unten in deinem Aktionen-Menü Ich gehe zu Plug-ins und tippe dieses hier ein, das Content Real, Content Real heißt. Wenn du uropsm oder Place Auto Ticks eingibst, Lam eingibst, wirst du hier jede Menge davon bekommen Auch hier schaust du danach, wie viele Benutzer es benutzt haben und wie es dir gefallen hat Auf diese Weise können Sie auf einfache Weise herausfinden , welcher am beliebtesten ist. Aber echte Inhalte sind sehr verbreitet und wirklich großartig, weil sie eine Menge verschiedener Dinge machen. Nehmen wir an, ich kann zum Text gehen und sagen, wenn mein Cursor hier blinkt, werde ich ihn linksbündig ausrichten Ich sage, gib mir etwas Lornopsmus. Es ist da drin. alles brauche ich nicht. Ich brauche nur diesen Brocken, Ende einen Punkt zu setzen Und da hast du's. Da ist ein Stecker. Dieses Plug-In ist ziemlich cool, weil es auch andere Dinge macht. Ich mache einen Doppelklick auf ihn und mache eine Kopie, indem ich meine optionale Taste gedrückt halte. Ich werde nur das Wort „Beispiel“ eingeben. Ich werde die Größe der Schachtel bestimmen. Wir haben uns das vorhin so angesehen. Lassen Sie uns rekapitulieren In dem Moment, in dem es ein Feld mit fester Höhe ist, weil es ganz nach unten reicht, möchte ich es auf ein Auto umstellen, wo es nur die Höhe dessen ist , was ich da eingegeben habe , und das loswerden Machen Sie ein paar Kopien davon, Escape to Get Out, ziehen Sie eine heraus, halten Sie die Taste gedrückt, Command D DDDD oder Control DD DDD . Ich werde sie alle auswählen. Was macht er? Was zeigt er uns? Unter dem Text hier steht dieser eine vollständige Name. Wenn du ein paar zufällige Namen in deinen Mockups brauchst , kannst du sie einfach hier reinbekommen Oder vielleicht benötigen Sie US-Adressen oder E-Mail-Adressen oder Daten Es ist wirklich praktisch für viele andere Dinge als nur für Lauren Ibson Ich werde das alles rückgängig machen. Ich brauche keins davon, aber bitte. Platzhaltertext Gut während der Arbeit, füllt eine Lücke und ermöglicht es Ihnen, weiter zu entwerfen, auch wenn Sie den Text nicht haben Wirklich toll für deine Wireframes. Benutze sie einfach für die Mockups, weil du nicht anfangen willst, Text hinzuzufügen, weil es in der Wireframe-Phase nicht darum geht und Ich werde das schließen . Ordnung. Auf zum nächsten Video. 45. Erstellen von Text in Figma mithilfe von KI: Hier. Hey, ich werde dir zeigen, wie du Figmas KI benutzt, um Texte für uns zu erstellen Wir haben es dazu aufgefordert und es wurden einige interessante Texte für unsere Lederbrieftaschen erstellt Es ist einfach zu benutzen. Super nützlich. Lass mich zeigen, wie es funktioniert. Zuerst. Diese Funktionen sind derzeit Teil des kostenpflichtigen Figma-Programms, daher wechsle ich hier zu meinem kostenpflichtigen Konto. Wir werden wahrscheinlich für den Rest des Kurses auf dem kostenpflichtigen Konto bleiben für den Rest des Kurses auf dem kostenpflichtigen Konto Ich werde versuchen, auf alles hinzuweisen , was kostenpflichtig und nicht kostenlos ist, aber ich möchte nicht während des gesamten Kurses auf die kostenpflichtigen Funktionen verzichten . Wenn du ein kostenloses Konto hast und dabei bleibst, kannst du dir einige der Videos einfach ansehen, um ein Gefühl dafür zu bekommen, das ist gut. Das könnte sich lohnen oder es ist gut zu wissen, aber mir geht es nicht gut, also habe ich mein Bezahlkonto gewechselt. Der Unterschied ist wirklich, wenn du ein kostenloses Konto hast, siehst du, dass sich dieses Symbol hier ändert, du denkst, was macht das? Das ist deine Aktionsschaltfläche. Wir haben dort nach Plugins und Abkürzungen gesucht. Dieser hier ist dasselbe, aber er ist magisch. Das ist ein Screenshot, den ich von dem kostenlosen Konto gemacht habe. Nur zum Beispiel, also werden wir das jetzt mit der Magie verwenden. Oh, da ist etwas KI eingebaut. Was wir machen werden, ist Text und Copywriting. Ich werde das alles auswählen und löschen. Mein Fluch blinkt immer noch da drin, diesen magischen Knopf zu drücken und ich werde die Option „Diese umschreiben“ verwenden Es ist eine Beta. Das wird sich ändern. Sie werden es umbenennen*****. Aber schauen Sie nach der Schreiboption. Ich werde auf „Das umschreiben“ klicken und etwas hineinschreiben Eigentlich habe ich es vorher geschrieben. Du isst dort. Da haben wir's. Schreiben Sie einen Satz für die Heldenbox dem das minimale Brieftaschendesign aus Leder beschrieben wird. Daran arbeite ich gerade. Ich muss etwas Copywriting machen. Ich klicke auf Umschreiben und schon wird etwas daraus Oh. Nett. Okay? Sie können es für Copywriting verwenden, wie HGBT oder Gemini oder Claude oder welches KI-Tool Sie Das ist dein erster Kontakt mit KI. Ziemlich beeindruckend. Du kannst Dinge tun wie, Okay, ich möchte Änderungen vornehmen. In diesem Fall möchte ich es bitte lockerer machen . Klicken Sie auf Umschreiben Ja, es ist eher lässig. Du kannst Dinge wie Änderungen vornehmen und kürzer, länger. Also mach diese zwei Sätze. Buchstabiere ich es falsch? Nur zwei Sätze. Da hast du's. Ich mache es rückgängig. Ich mag den , den ich vorher hatte. Undo funktioniert. Cool. KI ist verschiedenen Stellen in Figma eingebaut Wir werden einige davon behandeln. Aber dieses Zeug zum Umschreiben eignet sich hervorragend zum Bestellen von Texten oder auch nur zum Verfassen von Texten, etwas, in dem ich nicht besonders gut bin, und ich muss Dinge hier reinstellen Ich mag es auch einfach zum Aufräumen. Ich kenne meine Absicht, kein Detail wurde unberücksichtigt gelassen. Ich weiß es nicht Ich habe mir das gerade ausgedacht und dachte, ich frage mich, was KI sagen wird, nur um es aufzuräumen Klicken Sie darauf und dann können Sie einfach rewrite und dann tidy not writy eingeben Und dann klicken Sie auf Rewrite. Es wird mir bei meiner Grammatik und Rechtschreibung helfen. Ich werde da wahrscheinlich ein paar Mdashs reinwerfen. Scheint seine Lieblingsbeschäftigung zu sein. Aber ja, ich finde das gut, um meine Arbeit zu verschärfen , während ich sie durcharbeite. Ich liebe es Diese Box hier muss automatisch höhenverstellbar sein. So nennen sie es tatsächlich. Ja, automatische Höhe. Die feste Größe. Cool. In Ordnung. Das ist KI in Figma Sie können es anstelle von Platzhaltertext verwenden. Wenn Sie tatsächlich Inhalte einfügen möchten , ist das hilfreich Aber wenn du hier ankommst, wird es anders sein. Es ist neu und schick und lass mich in den Kommentaren wissen , ob es ganz anders ist und ich werde zurückkommen und dieses neu schreiben Hoffentlich sollte es nicht zu schwer sein , es zu finden und loszulegen Aber jedes Mal, wenn ich mich bei Figma anmelde, haben sie die Art und Weise , wie sie funktioniert, geändert . Da hast du's. Ordnung. Wir sehen uns im nächsten Video. 46. Nützliche Informationen, die Sie über Text in Figma wissen sollten: Hallo. Es sind leicht fortgeschrittene Tipps und Tricks Sachen, die du für den Kurs benötigen wirst. Wir gehen das durch und zeigen Ihnen, wie Sie mit dem Buchstabenabstand, dem Zeilenabstand und dem Absatzabstand spielen . Wir werden ein kleines Modell von Logos, Listen und Links erstellen. Ich werde dir zeigen, wie sie funktionieren, indem ich sie anklicke. Ich arbeite dann. Ja, nur viele kleine Dinge, die wir für den Kurs brauchen werden und gerade jetzt, wo wir einige Fähigkeiten haben , in die wir uns einarbeiten können. Also lass uns einsteigen. In Ordnung. Um zu beginnen, bin ich auf meiner HyidelityHME-Seite. Ich werde diesen Text hier auswählen . Ich habe es gerade ein paar Mal kopiert und eingefügt. Wir haben also ein paar zusätzliche Zeilen, mit denen wir arbeiten können. Ich werde es auch auf dieses Feld mit automatischer Größe und automatischer Höhe umstellen, sodass es wie mein Text immer größer und kleiner wird . Schauen wir uns ein paar leicht fortgeschrittene Funktionen an. Eine Zeilenhöhe ist hier der Abstand zwischen meinen Zeilen. Wenn ich also bei Auto auf Auto klicke, ist das eine Zeilenhöhe von 20. Das basiert darauf, dass diese Schriftgröße 16 ist. Die Standardeinstellung ist ziemlich gut. Du kannst gehen und es ändern. Die Grundregeln entsprechen also etwa der Hälfte dessen, was die Schriftgrößen im Allgemeinen gut aussehen. Wenn du 16, acht Werke hast. Entschuldigung, die Hälfte plus die Schrift. 16 plus acht. Okay, gibt dir 24. Es ist keine vollständige Wissenschaft. Das Auto ist wirklich gut. Es ist ein bisschen enger, an dir, aber das sind einige Grundregeln Die andere Sache hier ist, du kannst Prozentsätze verwenden, also könnte ich 150% verwenden 150. Wenn ich nur 150 eintippe, wird davon ausgegangen, dass ich Pixel verwende. Ich muss Prozent eingeben, und das gibt mir das gleiche Maß. Es ist nicht wirklich wichtig. Das Coole daran ist jedoch, dass, wenn ich das auf 20 erhöhe , die Zeilenhöhe erhöht wird. Mach das rückgängig. Wenn Sie es loswerden und zu Auto zurückkehren möchten, löschen Sie es einfach hier, löschen Sie alles und drücken Sie die Eingabetaste, es geht zurück zu Auto. Schauen wir uns den Unterschied zwischen Zeilenhöhe und Absatzabstand an. Ich werde eine Rendite einreichen. Ich gebe danach eine Rendite ein, Sie könnten versucht sein eine zweite Rendite als schlecht einzustufen. Das ist unartig Du darfst nicht zwei Retouren machen. Der beste Weg, das zu tun, ist, einen Return zu starten und ich wähle meinen gesamten Text aus. Ich kann auf diese erweiterten Funktionen eingehen, und hier gibt es eine Option , die den Absatzabstand angibt. Das sind also die Leerzeichen, nicht zwischen den Zeilen, sondern zwischen Ihren Absätzen. Ein Absatz von Ihnen wurde wiedergegeben. Also nochmal, ich werde alles einbauen, was du willst. Die Regel für den Absatzabstand beträgt etwa die Hälfte der Schriftgrößen. Deshalb war ich verwirrt, dass 16/2 acht ist. Gute Arbeit, Dan Das sieht am Ende wie ein netter Absatzumbruch aus. Es liegt an Ihnen, ob Sie das für gut halten. Wenn du es in Vielfachen von acht hältst, kann es kleiner sein, also können es vier sein Alles, was durch acht oder mal durch acht teilbar ist, ist nützlich Das ist erst später, wenn wir die Dinge anordnen. Wenn wir sehr weit fortgeschritten sind, vielleicht im Fortgeschrittenen-Kurs, werden wir das Acht-Punkte-Raster durchgehen und die Dinge anordnen Es ist ein bisschen nerdig, aber in der Regel sollten Sie versuchen, Ihren Absatzabstand acht oder 8,5, also 12, beizubehalten Etwas, das funktioniert, auch hier können Sie es löschen und die Eingabetaste drücken und Sie können es auf Null setzen, um zurückzukehren. Du kannst hier keine Prozentsätze verwenden. Sie könnten etwas zusammenklappbares machen , schauen Sie sich diesen Film an, gehen Sie zu diesem hier, und ich gehe zur Fixhöhe und ich muss sie verkleinern Man kann sehen, dass es einfach von außen herauskommt. Es fließt einfach raus. Was ist überhaupt der Sinn? Es ist so, dass Sie hier in die Topographie einsteigen und sie abschneiden können. Wenn Sie dort den Punkt mit Punkt sehen, möchten Sie wahrscheinlich eine Schaltfläche hinzufügen, sagt Lesen Sie mehr, damit es geöffnet Sie können die Absätze kürzen. Andere Dinge, die nützlich sind, sind Aufzählungspunkte. Ich gehe zurück zur automatischen Größe, und ich gebe eine Rückgabe ein, ich gehe zu Grab. Liste. Listen sind auch hier versteckt . Sie waren nicht erfunden. Jetzt sind sie es. Du hast Kugeln und Zahlen Sie können einen Listenabstand anstelle eines Zeilenabstands verwenden. Es handelt sich speziell um vier Listen. Auch in diesem Fall kann ich acht oder vielleicht vier eingeben. Jetzt möchte ich, dass es einen Absatzabstand gibt und ich möchte, dass es heißt, was entscheiden wir für acht? Nett. Ich möchte dir den Buchstabenabstand zeigen, also nehme ich meine Schrift und tippe eine Art Platzhalter-Logo ein Du könntest dein Logo in Figma oder woanders entwerfen , vielleicht später, wenn du deine Fähigkeiten etwas besser Aber wenn du über Illustrator-Kenntnisse oder eine andere Software-Affinität, Canva, verfügst, kannst du ein Logo erstellen Es ist nicht typisch, Logos in Figma zu erstellen , aber es kann es tun Okay? Also, was ich tun werde, ist , dir das zu zeigen. Ich werde meine Schrift wählen. Mir gefällt das Zen-Ding für mein Logo hier, und ich werde noch ein bisschen tippen. Okay? Geben Sie zwei ein und ich gebe Watt ein. Walts wird der Saucensand sein, den wir vorhin benutzt haben Soße. Hier ist es Source Aspro Ordnung, entkomme, bring dich zurück zum Move-Tool und ich werde sie einfach hier aufstellen. Ich werde es aussuchen. Erinnerst du dich, wie ändere ich die Schriftgröße? Ich möchte es nur nach oben ziehen, weil ich nicht möchte, dass es eine bestimmte Größe hat. Es ist ein Logo. Ich versuche es einfach zu ziehen. Das ist richtig. Drücken Sie das Ketol einfach die K-Taste auf Ihrer Tastatur und Sie können es vergrößern Ich werde meins ungefähr so groß machen und mein Portemonnaie wird ein bisschen kleiner sein Nur nicht mit dem Ketol Dan. In Ordnung. Da haben wir's. In Ordnung, das ist also mein kleines Modelllogo Ich möchte damit herumspielen. Siehst du diese nervige Lücke dazwischen? Passiert oft mit meinem Namen, Scott. Am Ende werden die beiden Ts getrennt. Was ich tun kann, ist, diesen ersten auszuwählen, und er wirkt sich auf den Bereich direkt danach aus. Hier drüben habe ich einen Buchstabenabstand. Schau dir das an. Ich kann einfach auf Halten klicken und es für den Buchstabenabstand nach oben und unten ziehen . Siehst du, was ich hier mache? Oh, Magie. Sie könnten entscheiden, dass das C nur ein bisschen näher sein könnte , weil es sich dort irgendwie umschlingt Schriften sind also besser. Oh, mag ich nein, das ist, ich spiele nur mit dem Buchstabenabstand herum, der oft als Canning oder Tracking bezeichnet wird Tracking Eine andere Sache, die Sie tun können, wenn Sie Schriftarten anpassen, ist, dass ich eine Version davon behalten werde , also habe ich sie einfach kopiert Aber das hier, ich werde sagen, Rechtsklick, es gibt eine Möglichkeit, es zu skizzieren Wo ist es, es ist ein Umrissstrich. Was ich meine. Was hier passiert ist, ist, dass das jetzt keine Schrift mehr ist. Es sind Formen, die wie eine Schrift aussehen. Das Gute daran ist jedoch, dass ich den Text nicht ändern kann, aber ich kann ihn bearbeiten. Doppelklicken Sie ein paar Mal und ich kann tatsächlich beginnen, diese kleinen Punkte hier zu sehen. Ich zoome noch weiter hinein. Und sieh dir das an, ich kann Shift nehmen, diese beiden kleinen Punkte. Du musst ziemlich nah dran sein , um die Punkte durcheinander zu bringen. Schau, ich kann anfangen, damit rumzuspielen. Ich kann sagen, ich will, dass das dazugehört. Ich schwimme einfach mit dem Strom. Was mache ich? Ich bin mir nicht sicher. Bei gedrückter Umschalttaste auf beide klicken und sie rüber bewegen. Ich werde einfach meine Pfeiltasten benutzen, um sie zu antippen. Sie können sehen, dass Sie anfangen können , Schriften auseinanderzunehmen. Klicken Sie auf den Befehl des Mitglieds. Wir gehen direkt auf die Sache ein, an der Sie gerade arbeiten. Manchmal ist es einfacher. Das. Also ein bisschen mehr. In Ordnung. Das ist cool. Ordnung. Durch das Umreißen von Schriften wird daraus nur eine Form Ich benutze es auch ziemlich oft hier unten. Nehmen wir an, ich möchte ein kleines Plus, schauen wir uns das an. Manchmal benutzt man Schriften, die da waren als Schrift gedacht, Scott, ich wollte nur damit herumspielen. Nehmen wir das Kreiswerkzeug, klicken bei gedrückter Maustaste, nehmen das EllipstoL und halten die Umschalttaste gedrückt, um es herauszuziehen Ich will keine Füllung und ich will einen Strich. Lass uns Schatten werfen. Strich wird es weiß sein, und ich mache es zu einem Gewicht von Inside, ich füge das Textwerkzeug hinzu. Ich werde einfach hier oben einmal klicken , ich werde das Plus verwenden. Ich möchte, dass dieses Plus fett ist. Aber ich möchte nicht mehr, dass es eine Schrift ist, weil es wirklich schwer ist, sie in eine Reihe zu bringen. Kannst du hier sehen, ich werde mir mein Ktol schnappen, es vergrößern und es funktioniert Das Problem dabei ist jedoch, wenn ich meine Schriften ändere, nur einige, ich werde Comic Sans verwenden, ich werde diese ändern, weil es ein Hier ist, kann es etwas schwierig sein , sie auszurichten, weil sie in einem großen Textfeld ist , weil ich sie nicht als Schrift verwende, ich werde einfach mit der rechten Maustaste darauf klicken und sagen, Konturstrich erstellen. Jetzt ist es eher eine Form. Ich kann mich dafür entscheiden, ich werde darauf eingehen und entscheiden, dass ich nicht sicher bin warum, aber ich passe es an, aber mehr, dass ich es einfach als Form mag. Denn dann ist es einfach, dies und das zu nehmen und es in der Mitte auszurichten, anstatt in einer Schrift. Lass uns versuchen, es mit einer Schrift zu machen. Wird es funktionieren? Ich sollte es besser nicht tun. Okay, ich nehme das und das und ich gehe in diese Richtung, und da kannst du sehen, dass es ein bisschen unmittig ist. Also werde ich zu meiner schönen Schrift zurückkehren. War es unzentriert, Dan? Tun wir alle so, als wäre es so Okay? Manchmal möchte man einfach, dass die Schrift Form hat. Y parfümiert, zentriert. Und lass es uns gruppieren. Ich werde es einrahmen, in einen Rahmen gehen. In Ordnung, das werden wir später auch verwenden. Also, wenn die Leute darauf klicken, geht es quasi auf die nächste Seite Also gut, andere interessante Dinge über Schriften, solange wir Nerd raushören Schau mal, fünf haben diesen Text hier, und ich brauche einen Link. Ich werde ohne triftigen Grund einen Link mit den eckigen Klammern einfügen . Ich werde das auswählen , und hier gibt es eine Option. Kannst du sehen, dass neben dem Text etwas Besonderes steht, das besagt: Hey, du möchtest einen Link erstellen? Okay? Wo wird es hingehen? Wir werden unseren eigenen Laptop mitbringen, Head Enter. Ich werde es auch blau machen, nur weil ich finde, dass Schriften blau sein müssen. Links müssen blau sein. Mein Gehäuse muss etwas heller als das normale Blau sein , weil ich nicht sicher bin , ob ich es im Vergleich zum Violett sehen werde. Eigentlich funktioniert es nicht wirklich, aber ich werde es auch auswählen und loslegen. Oh, ich habe eine Füllung hinzugefügt. Hatte ich eine Füllung? Nein, ich habe nicht alles ausgewählt und ich kann auch fett schreiben, also ist das eine weitere Abkürzung. Anstatt nach der fett gedruckten Version zu suchen, ist das völlig in Ordnung. Aber die meisten Schriften, wenn sie fett gedruckt sind, können Sie sie auswählen und einfach Command oder Ctrl B drücken. Das Gleiche gilt für Kursivschrift. Wenn die Schrift kursiv ist, wenn nicht, dann nicht B, ich verwende Unterstrich, und ich denke, komm mit Shift X. Das war's. Command Shift X oder Strg Shift 6 auf einem PC, wir schlagen durch Das sind nerdige Dinge , die auf allem auf Ihrem Computer funktionieren auf allem auf Ihrem Computer Word, Google Docs, E-Mails, Befehl B, I, UX. Sie finden sie hier. Denken Sie daran, dass Sie Tastenkombinationen haben. Du kannst zum Text gehen und du wirst das Zeug finden, wo wir Underline haben Da ist der Link zum Erstellen, den wir gerade gemacht haben. Da ist die Abkürzung dafür. Aber fette und kursive Unterstreichungen setzen sich durch. Das Coole an ihnen ist jedoch, wenn man sie kennt, sie sind bei allen Desktop-Publishing-Programmen gleich Alles, was ich jetzt tun werde, weg von Unterstreichen , weg von Kursivschrift Lassen Sie uns eine Vorschau darauf geben nur um zu sehen, wie es funktioniert Ich werde gehen, oh ja, weil die Leute nicht wissen werden, wie Link funktioniert, Dan. Ich flippe ein bisschen aus, als ob, Hey, du verlässt Figma. Das ist okay. Da hast du's. Links funktionieren. Ich bin mir nicht sicher, wo ich das beweisen musste. Eine letzte, die meiner Meinung nach als Abkürzung sehr nützlich ist, besonders wenn Sie sich bei den Schriftarten nicht sicher sind. Ich habe dir einige Grenzen für Schriften gegeben , welche sollten das sein? Es gibt viele Zeiten, in denen du dir einfach nicht sicher bist. Sie können den Text auswählen lassen und auf einem Mac die Befehlstaste und auf einem PC die Umschalttastatur verwenden . Und wenn Sie auf Ihrer Tastatur nach unten sehen, haben Sie ein Größeres als und ein Kleineres als. Auf meiner Tastatur sind sie mit dem Punkt und dem Komma vermischt Punkt und dem Komma Halten Sie diese beiden Tasten gedrückt, Command-Shift oder Control-Shift auf einem PC Es macht nur die Schriftgröße aus. Ich liebe das. Weil ich bei 100% bin. Ich denke, es muss größer sein. Wie viel größer? Einfach Tipp, Tipp, Tipp, Tipp, Tipp, tun. Und das ist wiederum eines dieser Tools, das in so ziemlich jeder Desktop-Publishing-Software funktioniert . Du kannst es dir einfach schnappen und vergrößern . Der Typ muss größer sein. Dieser Typ, ich versuche, etwas Größeres zu verwenden, das funktioniert nur mit Schriften, oder? Das ist keine Schrift mehr , also muss ich mein Ketol benutzen und es vergrößern Du netter Koch, klick. Sollte das parfümiert sein? Ich bin mir nicht sicher Ich werde ein paar Harken benutzen, um es herumzuschubsen. Ich mag das dort. Wow. Geil. In Ordnung, meine Freunde. Das ist es. Das sind fortgeschrittene Schriften und Tricks und Tipps. Sachen, die wir für den Kurs benötigen werden. Lass uns mit dem nächsten Video weitermachen. Bevor er uns wieder zeigt , wie man Links benutzt. Schau, es klickt. Ich gehe auf unsere Website. Äh. Okay nächstes Video 47. Klassenprojekt 08 - Text: Ordnung, es ist Zeit, einiges von dem , was wir in den letzten Videos gelernt haben , in die Tat umzusetzen Klassenprojekt Nummer acht, der Text. Okay, also ich möchte, dass du ein kleines Logo kreierst. Es muss nicht schick sein, es sei denn, du willst es. Sie müssen es nicht in Figma entwerfen. Entwerfe Figma tatsächlich. Ich möchte, dass du mit all den verschiedenen Werkzeugen übst , die wir gelernt haben Vielleicht skizzieren Sie es, Sie müssen es nicht. Und wir wollen etwas in der oberen linken Ecke haben. Muss nicht schick sein. Ich habe ein paar andere einfache Lockups gemacht, bei denen Sie nur Schriften als Beispiele verwenden können Sie nur Schriften als Beispiele Du bist vielleicht ein großartiger Designer und du kannst etwas Schönes entwerfen Wenn Sie nur nach etwas Einfachem suchen, nur nach einem Text mit einem Gewichts- und einem Farbunterschied, etwas Einfaches. Es liegt an dir, aber ich will es auf deiner Homepage haben. , dass du diese Grundlagen auf deiner High-Fidelity-Homepage Ich möchte, dass du diese Grundlagen auf deiner High-Fidelity-Homepage machst. Sie benötigen Ihre Marketingbotschaft und etwas Platzhaltertext und ein paar Karten, was wir in einem Sex machen werden . Im Grunde so etwas Navong steht ganz oben in Ihrer Heldenbox, Ihrer wichtigsten Marketingbotschaft etwas einfallen. Es kann schwach sein, es kann sehr durchdacht sein Sie können KI verwenden. Es macht mir nichts aus. Okay, und dann etwas Platzhaltertext. Es kann wieder UrinopSumo sein, du kannst etwas eingeben, dir etwas einfallen lassen, KI verwenden Es macht mir nichts aus, aber ich möchte, dass du deinen Stil verwendest. Und ich möchte, dass du mit deinen Stilen und deinen Farbstilen machst , ist, dass du eine Styleguide-Seite erstellst. Figmaples können sehr chaotisch werden, wir werden eine Seite namens Styleguide erstellen Ich werde einfach eine Farbpalette darauf und unsere Schriften kopieren darauf und unsere Schriften Ich möchte, dass du sie dir ausdenkst, und ich möchte, dass du sicherstellst, dass es sich um Stile handelt. Du musst nicht zwei davon haben. Du könntest nur einen haben. Das ist völlig in Ordnung. Ich möchte, dass du einen Screenshot von dieser ganzen Sache und deiner Homepage machst. Ich möchte, dass du auf deiner Homepage auch eine Karte machst. Ich gehe zurück Ah, Do, Hi Fi. Diese Karte hier. Ich habe diese ziemlich generische gemacht. Ich möchte, dass Sie ein wenig darüber recherchieren, was Sie tun könnten. Ich will dich eigentlich da oben haben. Kopiere es, geh hinein und füge es wieder an die richtige Stelle ein. Okay? UI-Karten ist also ein Begriff, wenn Sie mit UI-Design noch nicht vertraut sind. Ich habe einige Beispiele in Ihren Übungsdateien, die UI-Karten-Beispiele genannt werden. Nur ein paar Beispiele, die ich ziemlich cool fand. Ich möchte, dass du losgehst und es dir selbst ansiehst. Okay? Also da ist dieser Webseitenmob, den ich dir in der letzten gezeigt habe Es ist ziemlich gut für die Suche nach UI-Karten. Gehen Sie zu Dribble, gehen Sie zu Pentrs, gehen Sie zu Instagram, gehen Sie dorthin, wo Sie normalerweise nach Dingen suchen, und geben Sie UICard-Beispiele oder einfach UICard Schau dir einfach an, was andere Leute gemacht haben. Wirklich fester Bestandteil von Webdesign und App-Design und finde etwas heraus. Du kannst kopieren, was ich gemacht habe. Das ist in Ordnung. Oder etwas, das in den Beispielen hier vorkommt, aber nur etwas Grundlegendes. Es braucht noch keine Bilder, und ich möchte, dass du sie auslegst und ich möchte drei davon. Ich bin mir nicht sicher, ob ich sie mag. Das sieht dort nicht gut aus, oder? Zurück zu dem, wo du warst. Da hast du's. Und hab drei davon. Möglicherweise müssen Sie Ihre Guides einschalten. Töte H nicht auf einem Mac. Es ist weg. Da hast du es, du zurück, und dann ist es Command G. Kein Shift G. Ich will hier drei Karten unten haben. Du könntest mit den Abständen herumspielen, damit alles gut aussieht. Brauche den gleichen oben. Lassen Sie uns auch hier unten drei Funktionen finden , die Ihr Produkt haben könnte. Auch hier gilt: Denken Sie nicht zu lange über die perfekten Funktionen nach. Ich habe Lauren Ipsum unten verwendet, und wir haben hier gerade ein Bild Markieren Sie kurz das Bildsymbol, bevor wir Bilder machen. A ist es das? Lass uns nachschauen. Stellen Sie Ihre Stile auf einen Stil um. GoodepagerSearch, UI-Karten, schauen Sie sich das mal Sie können entscheiden, ob Sie drei oder vier Feature-Karten haben möchten Feature-Karten Beispiele in den Übungsdateien, Lieferumfang. Machen Sie einen Screenshot sowohl von Ihrer Homepage Ihrer Styleguide-Seite oder zumindest von dem Teil, der sich darin befindet Dann möchte ich, dass du über Aufgaben, normale Projekte und Aufgaben teilst, aber ich möchte auch, dass du sie jetzt in den sozialen Medien teilst Wir sind jetzt an einem Punkt angelangt, an dem du denkst, es ist nicht alles dasselbe Zeug. Das sind langweilige Projekte, langweilig. Sie gelten nicht nur für Sie und Ihr Produkt. Jetzt sind wir an diesem Punkt. Ich möchte, dass du es auch in den sozialen Medien teilst. Ich liebe es zu sehen, was du getan hast, und es ist ein gutes Publikum, das sagt, hey, genau das mache ich. Ich mache diesen Figma Essentials-Kurs von diesem wirklich gutaussehenden Kiwi-Typ aus Neuseeland Und daran arbeiten wir gerade. Bitten Sie außerdem um Feedback und geben Sie Feedback. Das ist der Kompromiss. Ich habe Leute, die mir helfen, unsere Laptop-Experten hinzuziehen, um Antworten zu geben, aber es ist schwierig, das zu erreichen. Wir haben mehr als 1 Million Studierende kennengelernt, Sie können sich also vorstellen, dass es eine Menge von uns gibt. Also, was wir jetzt tun, ist dich zu fragen. Wir sorgen dafür, dass Sie, wenn Sie nach einer Meinung fragen, zwei abgeben müssen, das ist hilfreicher für Sie. Lage zu sein, sich anderen Designern gegenüber zu artikulieren, ist der Einstieg eine äußerst wichtige Fähigkeit, vor allem, wenn Sie anfangen müssen, Ihre Designentscheidungen zu verteidigen oder zu erklären , wenn Sie auf der anderen Seite Stellen Sie Ihre auf, fragen Sie um Rat und stellen Sie sicher, dass Sie den von ein paar anderen Leuten finden und ihnen Ratschläge geben Am Anfang könnte es wirklich schlimm sein. Du wirst besser werden. Die Farben sind gut. Aber schauen Sie sich an, was andere Leute tun. Also, ich mag den Kontrast. Ich mag den Kontrast nicht. Die Lesbarkeit ist nicht besonders gut. Achte nur darauf, dass du es mit ein bisschen Demut tust. Jeder hat gerade erst angefangen. Was ich gerne mache, ist, dass es das ****-Sandwich genannt wird . Ich bin mir nicht sicher, ob wir das gebrauchen können. Du fängst mit einem Positiven an. Mir gefällt , was du für diesen speziellen Teil getan hast. In der Mitte steht dann der S-Teil des Sandwichs , was ich als Nächstes tun würde, was Sie vielleicht weiter tun würden, oder ich denke, es wird ein Lesbarkeitsproblem geben, aber ich denke, das ist ein guter erster Schritt Kannst du das Stück mit dem Sandwich sehen? Äußerlich positiv und in der Mitte Kritik Du weißt, was du tust. Wie dem auch sei, das ist das Projekt. Wir werden unsere Homepage ausbauen , unsere Star Go-Seite veröffentlichen. Auch wenn du deine Schriften und Farben hasst, mach dir keine Sorgen. Wir können diese später ändern Wir lernen hier wirklich die Tools, also springen Sie ein, probieren Sie es aus und wir sehen uns im nächsten Video. 48. Text auf einem Pfad Gebogener Text in Figma: Hallo, alle zusammen. In diesem Video zeige ich Ihnen, wie Sie auf einem Pfad tippen. Schau, wir tippen auf einem Pfad in Figma. Lass mich dir zeigen , wie es geht. , lassen Sie uns damit beginnen, es hier am Rand zu zeichnen und nicht innerhalb der Rahmen. Es macht es nur ein bisschen einfacher, während wir arbeiten. Und es ist eine Art Übergangsvideo, in dem wir von der Schrift zu einem Teil der Zeichnung übergehen , was der nächste Abschnitt ist. Wir brauchen ein bisschen von beidem , weil wir eine Kurve brauchen. Der beste Weg, eine Kurve zu machen. Nun, der einfachste Weg ist, dass wir hier unten in diesen Zeichenmodus wechseln. Wir haben uns mit Design beschäftigt. Okay? Wir waren noch nicht bei Dev. Oh, was ist da drin? Klicke nicht darauf. Gehe in den Zeichenmodus, und das ist dieser hier. Können wir ein paar trocken aussehende Dinge besorgen. Jetzt fangen wir mit dem Stift an. Schnapp dir den Stift, wähle eine Farbe. Ich muss eine weiße Farbe wählen , weil ich sie dort im Hintergrund nicht sehen kann. Was die Größe angeht, liegt es an dir. Das ist die Breite. Woo, klick nochmal drauf. So dick ist die Linie. Es ist nicht wirklich wichtig für das, was wir tun. Was wir tun werden, ist auf Halten zu klicken und eine wackelige Linie zu ziehen Figma ist noch nicht gut darin, glatte Linien zu zeichnen. Ich möchte, dass es eine reibungslose Option gibt. Oh. Zeichne einfach etwas. Zeichne schnell. Bereit? Zeichne schnell. Nein. Zeichne schnell. Ich hatte einen, der gut war. Das wird reichen. Okay, jetzt holen wir uns das Textwerkzeug, wir müssen nur noch den Mauszeiger darüber bewegen Okay, kannst du sehen, wie sich das kleine Symbol in die kleine Kurve verwandelt, klicke einmal Und jetzt können wir auf einer Kurve tippen. Es sollte an der richtigen Stelle landen. Wenn nicht, gibt es hier die Option, die Ausrichtung umzukehren, sodass sie sich auf der anderen Seite befindet. Das ist nicht das, was ich will. Andere nützliche Dinge sind, wenn ich zu meinem Verschiebe-Tool zurückkehre, siehst du dort einen kleinen Punkt. Dieser kleine weiße Punkt hier ist sozusagen der Ort, an dem es anfängt. Du kannst damit herumspielen, wenn es zentriert ist, okay? Also die kleinen Punkte in der Mitte. Okay? Also, wenn du anfängst, mehr Text zu tippen, wird er von der Mitte weggehen. Was ich jetzt machen werde, ist, dass Sie eine beliebige Kurve machen können, also könnten wir eine Linie verwenden. Eigentlich ist eine Linie nicht sehr nützlich. Wir könnten Star gebrauchen. Klicke raus und zeichne einen Stern, nimm das Textwerkzeug. Sie benötigen das Bleistiftwerkzeug nicht, Sie müssen sich nicht wirklich im Zeichenmodus befinden. Wir werden uns wieder Design zuwenden und wir werden uns das Textwerkzeug schnappen. Solange du nur mit der Maus drüber fährst, werde ich daraus einen Pfad Drücke Escape, um wieder herauszukommen. Sie werden feststellen, dass der Stern verschwunden ist. Bevor Sie es tun, müssen Sie es vielleicht kopieren , damit ich es wieder einfügen kann, wenn Sie es in einen Pfad verwandeln , entkommen, um herauszukommen. Das Einfügen aus der Zwischenablage ist fehlgeschlagen. Rückgängig machen, rückgängig machen, rückgängig machen, kopieren. Ich wollte es zuerst einfügen. Oh, gescheitert. Okay, kopiert heute nicht gern Sterne. Das hier, kopieren/einfügen. Ja, ich habe zwei davon. Seltsam. Mag den Stern nicht. Das ist ein Bug für mich, wahrscheinlich erst heute. Ich lasse es da drin, weil solche Dinge passieren. Aber normalerweise kopiere es einfach und füge es ein, sodass du zwei Versionen davon hast. Lass uns etwas Netteres machen. Also werde ich, ich werde mit diesem Text hier anfangen. Ich mache diesen zweiten, kopiere ihn und doppelklicke darauf und füge ihn ein. Sie können sehen, dass da jetzt irgendwie zwei Textteile drin sind. Eigentlich habe ich es einfach kopiert und eingefügt , sodass ich zwei verschiedene Zeilen hatte Ich habe eine davon nicht wirklich ersetzt. Es waren nur zwei, die übereinander gestapelt waren. Was ich tun werde, ist , das zu tun und ich werde den größtmöglichen Zweck erfüllen, wo ich es haben möchte So etwas in der Art. In Ordnung, das will ich nicht. Aber das ist Typ auf einem Pfad. Ich werde ewig damit verbringen das zu zeichnen. Oh, das war gut. Kopieren Sie das, nehmen Sie mein Textwerkzeug und Sie sehen, es hat einen weißen Strich Dieser weiße Strich verschwindet wenn er auf einem Pfad zu Text wird. Ich werde es online auswählen, es ein bisschen größer machen. Das Tastenkürzel dafür ist Command Shift und eckige Klammer. Das haben wir getan, nicht wahr? Ja, wir haben die Kontrolltaste gedrückt, nicht die eckigen Klammern, die Größer-als-und-kleiner-als-Sünden. , ich werde das tun und war entkommen, und ich werde dich loswerden. Und ich werde das verschieben. In meinem Kopf war es besser. Ich werde es umdrehen. Alles drehen, wenn es ausgewählt ist. Sie können hier nicht an den Rändern schweben, sondern nur an der Außenseite. Kannst du diese kleinen Doppelpfeile sehen? Okay? Gefällt uns das? Oh, das mache ich. Oh, es ist furchtbar. Okay, lass uns einen Pfad eingeben. Wir werden in der Lage sein, eine glattere Linie zu zeichnen, sobald wir zum nächsten Zeichenabschnitt kommen wenn wir anfangen, das Pin-Tool zu verwenden Aber im Moment sieht es glatt genug aus. Und das ist es. Wir sehen uns im nächsten Video. 49. Text um ein Kreisabzeichen in Figma: Hallo, alle zusammen. Wir machen dieses Abzeichen mit dem Text oben und unten. Der hinterhältige Trick ist, dass es eigentlich nur zwei Kreise sind. Sie haben zwei Textteile auf demselben Pfad. Sie machen also einfach zwei davon, drehen sie um und richten sie so aus, dass sie so aussehen, wie sie aussehen. Es sind ein paar andere Dinge, die ich hier teilen möchte, wie den Gliederungsmodus und ein paar andere Dinge. Lassen Sie uns also einsteigen. Okay, für dieses Video ist es dieselbe Technik wie das Eingeben eines Pfads aus dem letzten Video, aber wir werden ein paar kleine Extras machen, um es zu machen. Wir beginnen damit, dass wir uns nicht im Zeichenmodus befinden müssen. Wir brauchen nur eine Ellipse, das ist das Oki, das wie eine Ellipse aussieht Da hast du's. Oh, Oki und ich halte die Umschalttaste gedrückt, sodass mein Kreis eine perfekte Rundung und kein Oval hat, und ich nehme das Textwerkzeug und klicke irgendwo oben, und es wird zu einem Pfad Keine Überraschung, Dan. Ich mache 30 Tage 30 Tage. Bei Badges ist es einfacher, alles in Großbuchstaben zu machen. Wenn du anfängst, Groß und Klein zu machen, sehen sie einfach komisch aus Und es liegt an dir. Ist Geld zurück ein Wort? Es ist heute. Ich werde eine geeignetere Schriftgröße wählen. Ich werde es von meiner Überschrift trennen und meine andere verwenden, nämlich Sourcens SurinSP Sie können sehen, dass ich mit Dingen wie dem Buchstabenabstand herumspielen kann , was wichtig ist, wenn Sie das umgehen wollen. Ich werde auch eine Schriftgröße verwenden, die meinem Buchstabenabstand besser entspricht. Wenn Sie alles, was Sie eingegeben haben, loswerden möchten, löschen Sie es einfach und drücken Sie die Eingabetaste. Oh, nein, tippen Sie einfach und Null Ein paar Dinge, die ich tun möchte, ist, zuzuschlagen oder entkommen oder zum Verschieben-Tool zurückzukehren. Du verstehst den Punkt. Ich möchte, dass es zentriert ist und ich möchte, dass es ungefähr da ist. Nochmals, Schriftgröße, ich werde es etwas kleiner machen. Nun, wie kriege ich es auf den Boden, okay? Die Sache, die Sie wissen müssen , ist, dass Sie nicht mehr als ein Bit Text auf einem Kreis haben können. Also brauche ich zwei Kreise. Also werde ich das kopieren und einfügen, also habe ich zwei davon. Ich werde sie trennen, und ich werde das Ganze umdrehen und dann werde ich es drehen. Ich habe also das Unterteil. Okay? Du kannst die Umschalttaste gedrückt halten, während du dich drehst. Okay? Du kannst es hier drehen. Sie können hier sehen, dass Rotation 180 steht , und ich werde sagen, ich brauche eine Garantie und meine Feststelltaste funktioniert nicht mehr, also habe ich die ganze Zeit eine ganze Schicht. Das einzige Problem dabei ist, dass Sie im Moment nicht mit Figma herumspielen können, wo es auf der Linie Zumindest habe ich nicht herausgefunden, wie das geht. Es ist eine neue Funktion dafür. Es sieht komisch aus, also muss ich die Ellipse nur ein bisschen vergrößern und du überlappst sie einfach Ich schnappt. Es ist etwas schwer zu erkennen, wo sie sich jetzt befinden, weil sie völlig durchsichtig sind Es gibt eine Abkürzung, okay? Oder Command Y oder Control Y auf einem PC. Whoa. Was ist passiert? Es heißt Umrissmodus und ist wie eine Unsichtbarkeit Nein, Röntgenbilder, die ich will. Du kannst anfangen, Dinge und ihre Grundzüge zu sehen . Du kannst den Text nicht sehen, leider kannst du ihn für einige von ihnen nicht sehen, aber nicht für diese Kreise hier. Was ich jetzt tun werde, ist, wenn ich absolut übertrieben sein wollte, können Sie hier sehen, dass es in diesem Modus nur ein bisschen einfacher ist, und Sie schalten einfach Command oder Ctrl Y um, und Sie schalten einfach Command oder um die Dinge in eine Reihe zu Dann werde ich damit herumspielen. Das war's für die Eingabe auf einem Pfad. Ich gehe und mache es mir einfach nett. Du kannst mitmachen, wenn du willst, ganz wie du willst. Ich werde mich für Fettdruck entscheiden. Der Buchstabenabstand hier muss vergrößert werden. Nur um ein bisschen besser hierher zu passen. da sieht in Ordnung aus. Ich hole mir noch ein paar Kreise, kam der Oki Ich kann eines von zwei Dingen tun. Ich werde Schicht halten. Ich kann entweder hier etwas in der Mitte machen, Shift-Taste wieder gedrückt halten und es in die Mitte legen. Es sollte knacken. Es kann ziemlich gut knipsen. Dann kann ich der Außenseite einen Strich hinzufügen. Ich wähle im Moment irgendwas aus und erhöhe dann einfach das Gewicht , damit die Linie da ist. Es geht in die innere Position außerhalb des Schlags, und ich werde immer größer und größer werden. Bis es da und ich dann mein Tastenkürzel benutze, das ist „Zurückschicken“. Sie können mit der rechten Maustaste klicken, merken, Absender zurück oder die eckigen Klammern hier. Du könntest das tun, um dein kleines Ding zum Laufen zu bringen , oder es liegen nur zwei Kreise vor dir. Lass uns hier runter gehen. Es ist nur ein bisschen komisch. Ein weiterer kleiner Bonus, wenn du rumgehangen hast , ist, wenn ich das größer ziehe, halte ich die Umschalttaste gedrückt, damit es ein Kreis bleibt , sonst wackelt es. Aber wenn ich auf einem PC die Shift-Taste plus den Optionszähler Mac gedrückt halte , zieht es von der Mitte aus, was praktisch sein kann, vor allem, wenn ich es ausrichte. Da hast du's. Ich werde ein paar Farben aus meinem Stil auswählen. Anstatt einfach die zufällige Strichfarbe auszuwählen, gehe ich zu meinen Stilen über. Ich werde sagen, dass die Mitte ein Farbverlauf sein wird. Oh. Das habe ich dem Strich hinzugefügt. Das habe ich nicht gewollt. Klicke da drauf. Ich möchte, dass es welches von außen ist? Warte da und denke an die dunkle Farbe. In der Mitte, der Füllung, wähle ich den Farbverlauf aus. Elegant. In Ordnung. So macht man es zu einem Abzeichen, wo die Texte oben und unten stehen. Das ist nur ein Trick. Sie überschneiden sich nur. Es sieht so aus, als ob sie auf demselben Weg sind, aber es sind nicht nur zwei überlappende Kreise Jetzt haben wir ein Abzeichen. Abzeichen sind großartig Ordnung. Das ist alles. Das werde ich im nächsten Video sehen. 50. Verwenden der Bleistift- und Pinselwerkzeuge in Figma: Hallo, alle zusammen. Wir werden viele Linien zeichnen, und wir werden sie alle bürstig und räderförmig machen . Hier ist meine Wackelschnur Es sind das Bleistiftwerkzeug und das Pinselwerkzeug und einige ihrer Einstellungen in einer Figur Lass uns reinspringen. Das Stift- und Pinselwerkzeug. Wir haben uns ein wenig mit dem Bleistiftwerkzeug befasst. Wir werden zu unseren Zeichenwerkzeugen wechseln, und das ändert sich hier unten. Das Bleistiftwerkzeug zeichnet mit dem Strich. Ich werde eine bessere Farbe wählen. Lass uns Weiß nehmen. Okay, und wenn wir klicken und ziehen, bekommen wir ein Bleistiftwerkzeug. Das Pinselwerkzeug hingegen zeichnet mit diesen eher stilistischen Strichen. Ich lasse es bei Heist und klicke und ziehe. Oh, ich muss mir eine Farbe aussuchen. Lass uns das machen. Sie können sie danach ändern. Aber beim Klicken und Ziehen warte ich noch einmal auf den Glättungsteil, der hier drin sein könnte Hoffentlich gibt es ein Update, das uns zeigt, ob wir flüssiger zeichnen können, oder vielleicht ist das Entfalten einfach glatter . Aber es ist ziemlich cool Ich mag die Pinsel. Die Pinsel verbergen irgendwie einige der Probleme mit der Glätte. Aber da ist dieser wirklich coole Effekt, und du kannst sie überkreuzen. Schau dir das an. Wir haben diese Zeichnung , die wir mit dem Bleistiftwerkzeug gemacht haben. wird dir besser gehen, wenn du ein Wacom oder ein anderes Zeichentablett hast ein Wacom oder ein anderes Zeichentablett Diese werden glatter sein. Aber was Sie tun können, ist, sie auszuwählen. Sie können hier rüber zum Strich gehen, und hier gibt es eine Option. diese kleine Einstellungsoption ansehen, können Sie sagen, ich möchte, dass sie dynamisch ist. Nein, ich möchte, dass es Pinsel ist. Du tauschst diesen gegen Pinsel aus. Sie können die Pinsel durchgehen und sie mit dem Pinselwerkzeug auswählen . Die da. Du kannst ihn nicht wirklich sehen. Kannst du sehen , dass ich die Dicke erhöhen muss Du kannst auch mit einer Richtung herumspielen. Die andere Sache, die du mit dem Bleistiftwerkzeug machen kannst, ist leider, dass du etwas herauszeichnen kannst. Ich werde es ein bisschen größer machen. Eigentlich muss ich mein Auswahlwerkzeug nehmen und es etwas vergrößern, und es etwas vergrößern weil ich Ihnen einige der anderen Funktionen hier zeigen möchte . Es ist unterdynamisch. Sie können es wackelig machen. Du kannst die Frequenz runterdrehen und sie richtig wackeln lassen Ein bisschen wackelig. Du musst auch mit dem Schlag herumspielen Also Frau vielleicht ein bisschen dick. Die Frequenz gibt an, wie stark die Wackeln wackeln, und wie groß sie sind Also, wie weit sie voneinander entfernt sind, wie groß sie sind. Wenn wir ein wenig hineinzoomen, sollten Sie sehen, wo „ Glatt“ oder „Glatt“ steht . Sie können sie scharf oder superglatt machen. Sie können Endpunkte wie unsere Pfeile hinzufügen, und ich bin mir nicht sicher, warum wir sie hier brauchen, aber sie sind da Ordnung. Was ich tun werde, ist, ich werde das wirklich hassen. Ich werde mir das schnappen und jetzt machen wir nur noch Produktionskram. Das war's für den Pinsel und das Bleistiftwerkzeug. Folgen Sie uns, wenn Sie sich das ansehen möchten. Ich werde das loswerden, leg das zurück. Ich kopiere es nur und füge es ein. Ich möchte ein Leerzeichen dazwischen setzen und ich bin mir nicht sicher, was ich will, ob es der Pinsel ist, also nehme ich das Pinselwerkzeug Mach so etwas, wie eine kleine Trennlinie. Das ist ziemlich gut. Das gefällt mir. Oder ich habe eine Option, wo ich dich da drüben hinüberbringen werde. Vielleicht mache ich einfach eine gerade Linie. Anstatt das Bleistiftwerkzeug oder das Stiftwerkzeug oder etwas anderes zu benutzen , gehe ich zu den Schafen, ich nehme eine Linie, und ich werde gehen und die Umschalttaste gedrückt halten. Es ist weiß Ich werde es etwas dicker machen und ich werde die ganzen Einstellungen machen , um eine wackelige Dynamik zu erzeugen. Ich kann meins hier unten nicht sehen Du kannst es dir schnappen, falls es aus dem Bildschirm verschwindet. Ich glaube, meiner macht das, weil ich hier unten einen zweiten Monitor habe , den man nicht sehen kann Das sieht cool aus, wackelig. Oh, ich mag es. Passt irgendwie zur handgezeichneten Schrift, okay? Ich glaube, das tut es sowieso. Okay, ich gehe zurück zu meinem Verschiebe-Tool und verwende es als Teiler Welches mögen wir? Der streichelige, der buschige oder der wackelige Oh, ich glaube, ich mag den wackeligen, aber aus irgendeinem Grund habe ich das Gefühl, dass er am Ende einen aber aus irgendeinem Grund habe ich das Gefühl, Punkt braucht Nun, eine Sache hat es, es hat ein wirklich scharfes Ende Können wir das ändern? Oh. Lass uns einen Blick darauf werfen. Abgerundete Endkappe. Einkaufswagen für diese. Diese Optionen funktionieren nicht, oder? Grundlegend? Nein. Okay, also kannst du hier ein Ende machen? Abgerundetes Ende? Oh, das kannst du. Ok, korck den Code. Was ich auch wollte, war das Oki und ich wollte am Ende einen kleinen Kreis zeichnen , das ist die weiße Farbe Warum? Ich weiß es nicht. Ist es cool mit dem Punkt? Ich glaube, das tut es. In Ordnung. Pinselwerkzeug, Bleistiftwerkzeug in Figma. 51. Verwenden des Stiftwerkzeugs in Figma: Erstens werden wir in diesem Video lernen, wie man das Pentl benutzt. Es ist knifflig Es geht wirklich nicht in den Rahmen dieses Kurses, aber ich möchte es Ihnen noch einmal geben, damit Sie loslegen können. Wenn du es bis zum Ende schaffst, bist du frustriert und sagst , ich hasse den Stift Okay, viele Leute hassen das Stiftwerkzeug. Entschuldigung, Stiftwerkzeug. Aber ich werde dir zeigen, wie es in Figment funktioniert, ein paar Tipps und Tricks, und wir werden einen Berg zeichnen Es ist ein Berg. Das sollen Wolken sein. Und dass ich mir nicht sicher bin. Es sollte eine Flamme sein, aber jetzt sieht es aus wie ein Blatt. Wie dem auch sei, lass uns einsteigen und das Pin-Tool in Figma lernen. In Ordnung, für das Stiftwerkzeug, lass uns etwas zeichnen. Wir zeichnen auf ein Bild, das ich habe. Wenn Sie also Dateien trainieren, gibt es einen Pentool 01. Sie können es einfach hineinziehen oder sich merken, Sie können es auch tun. Kannst du im Zeichenmodus sein? Wahrscheinlich. Ja, das kannst du. Bring ein Bild rein und finde es. Es steht in Ihren Übungsdateien und heißt Pentool 01. Bringen Sie es rein. Ich klicke einmal und zoome hinein. Wir werden es auch sperren. Sie können mit der rechten Maustaste auf etwas klicken und Sie können Sperren sagen. Es bedeutet nur, dass ich es nicht bewegen kann. Um es zu entsperren, kannst du es mit der rechten Maustaste anklicken und in deinem Ebenenbedienfeld „Entsperren“ oder „Entsperren“ sagen. Kannst du sehen, dass hier ein kleines Schlosssymbol zu sehen ist? Ich kann es entsperren, sperren. So oder so, ich brauche es verschlossen weil wir zu viel ziehen werden. Gehen wir zu unseren Zeichenwerkzeugen. Schnappen wir uns diesen Typen hier, das Stiftwerkzeug. Welche Farbe werde ich verwenden? Ich werde etwas sehr Helles verwenden, damit du es rückgängig machen kannst . Sehr hell, sodass du sehen kannst, wie es leuchtet, Dan. Er musste entkommen, um das zu schließen. Bleistift. Stellen Sie sicher, dass Sie Pentil Es ist das Piki und wir fangen mit den einfachen an. Wir fangen mit Square Pentol klicken Sie einmal, klicken Sie erneut und Sie können benutzerdefinierte Formen erstellen Ich werde meine Linienstärke erhöhen, damit du es sehen kannst. Ich klicke nur einmal, klicke einmal, klicke einmal. Was du suchst, ist, wenn du wieder zu mir kommst, es schnappt oder nicht, dass es zu meiner Zeichnung rastet, es schnappt zu Kannst du das sehen? Es geht, hey, schau, wir stehen in einer Reihe. Das ist cool für mich. Dann müssen wir zurück zum Anfang gehen. Den, den du suchst, sieh dir den Stift an, da erscheint dieser kleine Kreis Das heißt, ich habe eine vollständige Form. Das Coole daran ist , dass ich dann hierher gehen und sagen kann, du kannst dich satt machen. Ich werde tatsächlich einen von meinen benutzen, den ich benutzen werde. Einer von meinen, wie heißen sie? Sie werden Stile genannt. Das ist es. Ein Gehirn. Das werde ich benutzen Linien sind einfach. Um sie anschließend anzupassen. Nehmen wir an, Sie haben auf Aus geklickt, Sie klicken auf Doppelklicken, um hineinzukommen Es sollte standardmäßig dieses Tool verwendet Ist dies nicht der Fall, wechseln Sie zum Verschieben-Tool. Es ist wie ein zweites Move-Tool. Es ist wie das Verschieben-Werkzeug, aber bei diesen Vektoren, diesen Zeichenstift-Werkzeuglinien, können Sie sie anklicken und sie hin- und herbewegen und ausrichten, wenn Sie sie schlecht haben Das ist gut. Schauen wir uns das Zeichnen von Kurven an. Lasst sie an. Wir werden eine Cloud machen. Es ist übrigens eine Wolke. Stellen Sie sicher wir mit meinem Stift strichweise unentschieden sind, es wird gut sein Also machen wir Kurven und ein paar Ecken. Wir werden also nur einmal für eine Ecke klicken. Wenn Sie eine Kurve ziehen möchten, suchen Sie den Scheitelpunkt der Kurve und klicken Sie auf Halten und Ziehen Lass los. Und wenn Sie wieder in die Ecke gehen möchten, klicken Sie einmal. Klicken Sie auf Halten und ziehen Sie. Sie suchen nach dem Scheitelpunkt der Kurve, die Sie gerade machen Ungefähr dort, klicken Sie auf Halten und ziehen Sie es heraus. Klicken Sie darunter auf Halten und Ziehen. Wenn du es verlierst, fragst du dich, wie komme ich zurück zu Noscpescape, du sagst, wie komme ich zurück zu Du doppelklickst darauf, um reinzugehen. Sie können zu Ihrem Stift zurückkehren und darauf klicken und er wird neu gestartet In diesem Fall hat es sich in eine Ecke verwandelt. Ich werde auf Halten klicken und das herausziehen. Es ist kaputt, das ist alles. Ich zeige Ihnen in einer Sekunde , wie Sie das Problem beheben können. Wenn Sie es verlieren, klicken Sie einfach darauf, wo das Ende der Leitung ist, und wir machen weiter. Ich zeige Ihnen gleich, wie Sie das beheben können. Klicken Sie einmal für eine Ecke, klicken Sie und halten Sie und ziehen Sie, um eine Kurve zu erhalten. Klicken Sie einmal für eine Ecke und dann wieder hier unten, es ist ein weiterer Klick. Es ist eine schöne scharfe Ecke. Ich suche nach dem kleinen Kreis und wir haben eine ganze Form. Schau uns an. H. Wenn Sie Dinge haben, die etwas kaputt sind, aber Sie möchten, dass es eine Kurve ist, können Sie zu diesem Tool hier zurückkehren oder zu diesem Tool hier gehen, Biegen. Klicken Sie darauf und klicken Sie dann darauf und ziehen Sie es. Ich klicke darauf, halte es gedrückt und ziehe es. Es heißt Ankerpunkt und ich kann es herausziehen. So wandelt man Ecken in Kurven um. Wenn du willst, dass es in die andere Richtung geht, willst du, dass diese Kurve nicht ist, denn im Moment ist es eine Wippe Ich bin zurück zu meinem Verschiebewerkzeug gegangen und kann sie, so genannte Griffe, anpassen Das nennt man einen Ankerpunkt. Den Griff kann ich herausziehen. Aber nehmen wir an, ich möchte, dass es spitz ist. Wie mache ich das kaputt? Ich verwende dieses Tool hier. Ich halte meine Option Countermac Canopy C gedrückt und ziehe eine der Wippen, und sie macht sie kaputt Da hast du's. Jetzt habe ich einen komischen brennenden Pilz. Ich gehe zurück, drehe es in eine Kurve und gehe, du Wahnsinn Eines der anderen Dinge, die Ihnen hier auffallen werden , ist , dass ich einen ziemlich dicken Strich habe und er sehr ausgeprägt ist. Siehst du, dass dieser nicht ganz Unrecht hat? Warum hat das einen Sinn? Das liegt daran, dass es etwas gibt, das man Mitring nennt. Ist es Gehrung? Ich glaube schon Was passiert, ist ein subtilerer Punkt als dieser, er ermöglicht es ihm, das zu tun. Wenn sie wirklich akut sind, wie dieser hier, kann man sehen, dass es genau da drin steckt Sie weiß nicht, was sie tun soll, also schneidet sie es einfach ab. Wir können uns das ansehen und zu meinem Verschiebe-Tool zurückkehren und darauf klicken. Sie werden sehen, dass die kleinen Griffe hier drin erscheinen. Schau dir das an. Wenn ich es öffne, siehst du, manchmal sind sie da, manchmal nicht. Denn sonst, kannst du dir vorstellen, wie groß es werden würde? Am Ende bin ich von der Seite gerast, sie töten sie einfach. Aber du könntest sagen, ich mag diese Inkonsistenz nicht Was ich tun werde, ist, zu meinem Schlaganfall zu gehen , wo mein Schlaganfall ist Hier ist es, ich gehe hier zu den Einstellungen und welche Art von Verbindungen möchte ich haben? Mited ist das, worauf es gerade läuft. Sie können mit dem Mittenwinkel herumspielen, wie in Lass uns einfach herumspielen Nun, dreh es um 290 auf. Es wird die Kanten sprengen. Kannst du sehen, dass es da die Kanten abschneidet? Ich könnte zu diesem hier gehen und einfach sagen, sie abschrägen. Ich kann sehen, wie es die Kanten abschrägt oder ich könnte sagen, dass sie abgerundet sind. Wahrscheinlich ist es besser für diese spezielle Zeichnung, es macht es für diese Das Einzige, was dir auffallen sollte, ist , dass es das auch für diese gemacht hat, weil es das mit dem gesamten Vektor macht , den ich gezeichnet habe. Wenn ich möchte, dass das getrennt ist, kann ich darauf doppelklicken, um hineinzukommen, ein Kästchen um all das ziehen, zum Ausschneiden übergehen, ich habe es gelöscht. Ich werde aus diesem Vektor herauskommen wie bei einem Doppelklick auf den Hintergrund. Er ist jetzt auf sich allein gestellt, und ich kann diesen einfügen, und es gibt zwei separate Vektoren. Jetzt kann ich sagen, dass du, mein Freund , nicht mehr rund bist, du hast Mitten, also spitz zulaufende Kanten. Ich weiß, das ist ein bisschen kompliziert, denn ich weiß es nicht. Das ist Figma. Wir machen UI-Design, aber die Stifte sind wirklich praktisch Es ist ein eigenständiger Kurs, aber ich möchte Ihnen einen guten Überblick darüber geben Lass uns noch einen machen. Lassen Sie uns testen, PentilPiki klickt einmal für eine Ecke, klicken und ziehen Sie für Klicken Sie einmal für eine Ecke, klicken und ziehen für eine Kurve, klicken Sie einmal für eine Ecke, klicken und ziehen Sie für eine Kurve, einmal für eine Ecke und dann wieder zurück zum Anfang Wenn du es verpasst, kannst du einfach so lange hineinklicken, bis du es gefunden hast, oder ich mache es rückgängig und mache es erneut. Hier gibt es eine Option, wenn du näher dran bist. Ich glaube, du kannst Command J benutzen. Du kannst nicht. Du kannst. Sie können das Auswahlwerkzeug verwenden, all diese Typen auswählen und auf einem PC Command J oder Control J drücken . Das ist allerdings hässlich. Was ich tun möchte, ist wahrscheinlich einfach diesen Punkt zu löschen, um einen Punkt zu löschen. Das ist ein gutes Argument. Ich klicke darauf, sodass es blau wird, drücke auf Löschen und nehme mein Stiftwerkzeug. Mm, ich kann einfach mit der Maus hier drüber um wieder loszulegen, einmal klicken Nochmals, und wir machen es wieder. Ich werde die Farben davon stehlen. Ich möchte darauf doppelklicken , um den Zeichenmodus zu verlassen. Ich möchte das auswählen. Ich gehe zu. Ich kann mich nicht erinnern , wo es ist. Es befindet sich unter Eigenschaften bearbeiten und kopieren. Ich klicke darauf und gehe zu Template-Eigenschaften bearbeiten. Es gibt eine Abkürzung. Ich kann mich nicht erinnern, was es war. Was war es, Pace Properties da? Befehlsoption V auf einem Mac Steuerung O Old V auf einem PC. Geil. Aber ignorieren wir das. In Ordnung, lassen Sie uns hier etwas Komplizierteres machen. Ist es komplizierter? Freundlich. Ich möchte Ihnen noch ein Beispiel zeigen, bevor wir weitermachen. Ich nehme den Stift. Ich werde tatsächlich sicherstellen, dass ich auf den Hintergrund geklickt habe, damit ich nichts hinzufüge Ich mache meinen eigenen neuen. Pentil? Ist das eine Kurve oder eine Ecke? Das ist eine Ecke. Scharfe, also werde ich darauf klicken. Hier drüben, wo führt die Kurve hin? Weil es hier einfacher war , weil es genau in der Mitte war. Was wir suchen, ist, dass der Scheitelpunkt dort ist, wo er sich am meisten dreht, und das ist mehr hier drüben. Es ist nicht in der Mitte. Siehst du, das ist der biegsamste Teil. Also klicke ich auf Halten, Halten, Halten und Herausziehen. Okay, ich gehe hier hoch und ich werde gehen, oh, es passt nicht zusammen. Sie neigen dazu, zu klicken, zu halten und zu ziehen, und das funktioniert Das Problem ist, dass wir das haben. Hui. So oder so, wir müssen es reparieren Wir rauben es ein und reparieren es danach. Lass uns so weitermachen, und ich zeige dir, wie man es repariert, und dann zeichnen wir es neu und zeigen dir einen anderen Weg Jetzt habe ich zwei Kurven hier drüben. Was mache ich? Zuallererst kann ich damit nicht umgehen. Wir haben es uns schon einmal auf meinem Pentel angesehen. Wenn Sie die Optionstaste auf einem Mac gedrückt halten, alte Taste auf einem PC, wenn Sie den Mauszeiger über diesen Griff bewegen, können Sie sehen, dass er sich vom Stiftwerkzeug zu diesem kleinen Pfeil ändert , der sagt: Ich schnappe mir diesen Typen und weil ich die Lk-Taste auf einer PC-Optionstaste auf einem Mac gedrückt halte , kann ich ihn kaputt machen Wo geht es hin? Das ist der knifflige Teil, wenn Sie mit dem Stiftwerkzeug noch nicht vertraut sind . Einige von euch könnten gut damit umgehen. Manche Leute haben vielleicht Angst davor. Es ist schwer. Das würde den Rahmen dieses Kurses sprengen, aber ich möchte Ihnen die hier näher erläutern. Ich werde es nur hierher ziehen weil ich weiß, dass, wenn ich es loslasse, Sie sehen können, dass es die Schwerkraft ist, die es dorthin zieht Du kannst es wieder nehmen und sagen, tatsächlich hier drüben. Es geht nur darum, es einzuarbeiten und es danach zu reparieren. Wo geht meine nächste Kurve hin? Ich will einen dort und einen dort. Diese Kurve geht in zwei Richtungen. Sie geht rein und raus. Ich werde also auf Halten klicken und dorthin ziehen. Du sagst, es funktioniert nicht, Dan, ich werde dort auf Halten und Ziehen klicken. Und dann hier unten, klicken Sie einmal für eine Ecke. Dieser wackelt in beide Richtungen. Da ist eine Spitze und da eine kleine Spitze. Ich werde meinen übertreiben, klicken Sie auf Halten und Ziehen, Klicken Sie auf Halten und Ziehen . Klicken Sie dann einmal für eine Ecke Diese hat nur eine Biegung, klicken Sie auf Halten und ziehen Sie sie dorthin. Zurück zum Anfang, es ist eine Ecke. Ich werde einmal klicken. Wie bringen wir dieses Chaos wieder in Ordnung? Möglicherweise schweben Sie über einigen vorhandenen Punkten. Wenn Sie die Option Kona MacKenna PC gedrückt halten, können Sie sie entfernen und sie sind weg Wenn Sie zu viele dieser Handles haben, möchte ich zu diesem Tool wechseln und ich werde einige Dinge erledigen Ich werde sagen, du hattest dieses Ding, das meine kleine Linie ruiniert hat. Ich werde es zurück zu seinem Zuhause schleppen. Und du kannst es loswerden, indem du es schleppst oder komplett in sein Haus , weil dieser Typ die ganze Arbeit macht Es gab einfach zu viele kleine Griffe , die versuchten, die Leitung zu verformen Eigentlich sieht es jetzt gut aus. Sie können die Ankerpunkte verschieben , wenn sie an der falschen Stelle sind. Wenn du sagst, ich will dabei sein, zieh das nach oben. Wie kann ich das regeln? Es ist ein bisschen von beidem. Der Typ da, vielleicht dieser. Man merkt, wenn es näher kommt, ist es eher eine scharfe Kurve und je weiter es draußen ist, desto flüssiger ist die Kurve. Es ist also ein bisschen wie du und du gehst hin und her. Was möchte ich mit diesem machen? Das sieht gut aus. Das hier sieht komisch aus. Warum sieht es komisch aus? Scheuen Sie sich nicht, heranzuzoomen. Ich werde sagen, du musst wahrscheinlich nur ein bisschen mehr so sein. Sie außerdem daran, keine Angst davor zu haben, die Ankerpunkte zu verschieben. Ich übertreibe meins , weil es mir besser gefällt. Dieser hier muss sich so drehen. Diese Typen werden dir hier am Ende auffallen. Wenn sie für dich hilfreich sind, benutze sie. Sie werden automatisch für dich hinzugefügt. Benutze sie, wenn sie es nicht und du denkst, warte, es sind zu viele. Denk daran, sie zurück nach Hause zu schleppen . Will ich den haben? Ich mag den. Ich habe nicht den oberen benutzt, ich habe den unteren genommen und der ist meins, der nicht sehr glatt ist, oder? Wenn es nicht sehr glatt ist, müssen sie länger sein. Wie gefällt mir dieser? Ich habe immer noch meine Eigenschaften zum Kopieren und Einfügen, sodass ich jetzt meine Tastenkombination verwenden kann. Ich kann im Hintergrund aus klicken , sodass es sich nicht um einen Bearbeitungsmodus handelt. Ich habe ihn gerade ausgewählt und sollte Eigenschaften einfügen haben Das ist Befehlsoption V auf einem Mac und Alt V auf einem PC. Sie können sie einfach weiter kopieren und einfügen. Mag ich das? Ist es ein Blatt? Ist es eine Flamme? Ich will wirklich, dass der Punkt ganz unten ist, also gehe ich rein, doppelklicke und nehme, dass wir vorher herausgefunden haben, dass es weniger spitzen Winkel haben muss, damit es funktioniert. Da ist es da. Fügen Sie Ihre eigenen Soundeffekte hinzu. Ordnung. In meinem Kopf sah es besser aus. Doppelklicken Sie. Ist das Ding hier. Irgendwas stimmt hier nicht. Oh ja, das ist flüssiger. Ordnung. Das ist das letzte Mal für das Stiftwerkzeug. Das ist knifflig. Es sollte ein ganzer Abschnitt in einem Kurs sein, aber bei FIG geht es wirklich mehr um die Erstellung von Apps. Aber ich möchte das Pentl- und das Bleistiftwerkzeug einbeziehen , weil Figma immer mehr als allgemeines Design-Tool verwendet wird mehr als allgemeines Design-Tool Und wenn Sie Symbole erstellen müssen, auch wenn Sie ein Logo entwerfen, ist das hier kein Problem Es hat einige wirklich mächtige Zeichenwerkzeuge, aber die Stifte sind knifflig Ich hoffe, das war hilfreich. In Ordnung. Das ist es. Ich werde dich im nächsten Video sehen. Ich kann es für die Leute fühlen, die neu bei Pen sind, bis du sagst, ich werde nie wieder zu diesem Video zurückkehren. Ich importiere einfach Icons, Dan. Ja, das ist auch in Ordnung. In Ordnung. Nächstes Video. 52. Klassenprojekt 09 - Stiftwerkzeug: wird uns nicht dazu bringen, ein Klassenprojekt mit dem Pentl zu machen, oder ? Er wird uns nicht dazu bringen, ein Klassenprojekt mit dem Pentl zu machen, oder ? Ist er Hier bin ich. Ich möchte , dass du mit der Pentle-Übung übst, die ich im letzten Video gezeigt habe Sie heißt Pentlo One. Es steht in deiner Übungsdatei. Zeichne sie heraus, so wie wir es gemacht haben. Übe mit denen. Dann möchte ich, dass du auf eigene Faust versuchst, ein Herz zu zeichnen , das nicht wie meins aussehen muss. Benutze deine eigenen Farben. Ich möchte, dass Sie mit den Verbindungsoptionen aus dem Strich experimentieren. Vielleicht ist das Gehrung abgeschrägt und rund. Lass uns einen Blick darauf werfen Wir spielen hier mit denen herum. Egal, ob Sie abgerundete oder abgeschrägte Kanten haben, spielen Sie einfach herum Außerdem möchte ich, dass Sie mit dem Bleistiftwerkzeug und dem Pinselwerkzeug experimentieren , wo wir diese Einstellungen hier vorgenommen haben , und wir können tatsächlich, ohne das Bleistiftwerkzeug, das Pinselwerkzeug zu verwenden , einfach Dinge wie dynamisch oder Pinsel anwenden und einen Spielplatz mit solchen wie dem haben, den ich hatte Da ist es da. Das wird jetzt schwer. Ich habe sogar hier geschrieben. Das ist schwierig, besonders wenn Sie dem Stiftwerkzeug noch nicht vertraut sind, probieren Sie es aus. Wenn es schrecklich ist, ist das okay. Sie können immer noch ein UX-Designer sein , ohne das Stiftwerkzeug zu kennen Es ist ein schwierig zu erlernendes Werkzeug. Warum es als Übung hier ist. Wir werden damit herumspielen. Wenn Sie fertig sind, machen Sie einen Screenshot von allem zusammen und laden Sie ihn in die Projekte und Aufgaben hoch. Sie müssen diesen nicht in die sozialen Medien hochladen , hauptsächlich weil alle gleich aussehen werden. Wir werden anfangen, mehr von den einzigartigen Dingen, die wir uns ausgedacht haben, in den sozialen Medien zu veröffentlichen . Aber vorerst, nur in den Klassenprojekten oder im Aufgabenbereich, viel Glück mit dem Stiftwerkzeug. Jetzt können Sie mehr tun als ich hier. Je spannender das Stiftwerkzeug ist, wir in den Klassenprojekten sehen werden, desto besser. Wenn du gerade erst anfängst, einfach etwas Einfaches. In Ordnung, viel Spaß mit dem Pin-Tool. Wir sehen uns im nächsten Video. 53. Verwenden des Shapebuilders in Figma: Hallo, alle zusammen. Wir werden das Shape Builder-Tool verwenden. diese innerhalb von Figma zu erstellen, beginnen wir mit etwas, das sich leicht unterbringen lässt. Ich weiß nicht, was das ist, aber es sieht cool aus und das ist ein Schild mit einem Häkchen darin Success Shield, nennen wir es. Wir werden das Shape Builder-Tool lernen. Außerdem werden wir einige der anderen Techniken, die wir zu Beginn des Kurses gelernt haben, kombinieren anderen Techniken, die wir zu Beginn des Kurses gelernt haben Beginn des Kurses gelernt , sodass wir viele Dinge erstellen können. Es ist ein bisschen knifflig, aber ich möchte solche Dinge in Figma nicht überspringen , weil Figma immer mehr als Allzweck-Grafikdesign-Tool verwendet wird als Allzweck-Grafikdesign-Tool Lernen wir das Shape Builder-Tool kennen, das großartig ist. In Ordnung, fangen wir an. Lass uns ein sauberes Stück von unserer Pappe finden. Lass uns ein Haus zeichnen. Ich schnappe mir das Rechteckwerkzeug. Ich werde ein Rechteck zeichnen. Ich werde mir das Polygonwerkzeug schnappen. Ich werde ein Polygon oder ein Dreieck zeichnen . Wir haben dieses Tool nicht behandelt Kannst du hier sehen, ich kann das ändern , sodass ich so viele Größen habe, wie ich benötige. Ich brauche nur drei, aber los geht's. Du brauchst ein Pentagon oder ein Sechseck, ich werde es anordnen Es ist ziemlich gut darin, Dinge in Ordnung zu bringen. Da hast du's. Ihr könntet beide auswählen und sagen, ihr zwei, perfekt aufgereiht. In Ordnung, Frau sticht ein bisschen raus. Lass uns die Tür zeichnen, zurück zum Rechteckwerkzeug und dort eine Tür zeichnen Ich werde es danach ziehen , damit es in der Mitte eine Linie bildet. Sieht das aus wie ein Haus? Sieht nach einem Haus genug aus. Was wir tun müssen, ist der Zaubertrick, dafür zu sorgen, dass alles glatt ist sorgen, dass alles glatt Siehst du, es sind alles separate Schichten einfach übereinander liegen Was wir tun müssen, ist zu sagen, dass du, mein Freund, alle zusammen platt gemacht Das heißt, sie sind alle in den gleichen Vektor gequetscht. Es ist wie eine Gruppe, aber keine Gruppe. Das heißt, sie sind alle zusammen als Vektor. Geh runter. Ich habe es gerade ausgewählt und ich möchte hier auf diese Option eingehen, wenn es flach ist. Es heißt Objekt bearbeiten. Wir haben das schon einmal gemacht oder du doppelklickst es einfach. Und du bekommst all die gestreiften Linien. Jetzt wechseln wir zum Shape Builder-Tool, das der Schlüssel ist Klicken Sie darauf und Sie können Dinge zusammenfügen. In diesem Fall wollen wir Sachen entfernen. Halten Sie den Optionszähler Mac gedrückt. Co PC, siehst du, neben meinem Cursor ist ein kleines Minus und alles ist rot. Was ich tun kann, ist ein Klick, Halten und Ziehen über diese beiden , um es loszuwerden. Ich könnte sie jetzt ein bisschen durcheinander lassen. Sie haben alle unterschiedliche Farben, sodass ich klicken und ziehen kann, ohne etwas gedrückt zu halten, und wir fügen sie zusammen. Ich habe jetzt ein Haus. Wir haben es geschafft. Doppelklicken Sie auf den Hintergrund , um ihn anzuzeigen, und wir haben ein hübsches Symbol anstelle von vTorHuse Sie können es anschließend anpassen . Wenn du deine gezeichnet hast und sie ein bisschen zu spitz oder zu hoch ist , kannst du doppelklicken, um hineinzugehen Ich kann all diese Ankerpunkte unten auswählen, indem ich einfach das Standardwerkzeug verwende. Ich werde die Umschalttaste gedrückt halten und die Pfeiltaste benutzen, um sie nach oben zu bewegen, um zu versuchen, etwas zu bekommen, das sich proportionaler anfühlt. Vielleicht ist es oben zu bewegen, um zu versuchen, etwas zu bekommen , das sich proportionaler anfühlt genau dieser Punkt Deiner ist zu groß oder nicht groß genug. Das sind die Grundlagen des Shape Builders. Lass uns etwas Cooles machen wie du es am Anfang gesehen hast, und lass uns das Oh for the Circle-Werkzeug nehmen und ich werde eine Halteschicht ziehen , damit sie schön und perfekt rund ist. Ich werde meins so ändern , dass es keine Füllung hat und einen weißen Strich habe , damit wir es sehen können. Und das wird mein äußerer Kreis sein, kopieren und einfügen, ich habe noch einen, und ich werde ihn verkleinern Mitglied, wenn du sie kopierst und einfügst, landen sie übereinander Bilden Sie einen kleineren, nicht zu kleinen Kreis , etwa so. Dann geht es darum, sie einfach aneinanderzustellen, ich möchte, dass einer dorthin geht, kopieren/einfügen, ich möchte, dass ein anderer hierher geht, kopieren/einfügen, ich möchte, dass ein anderer dorthin geht und kopieren/einfügen, noch einer, der nach unten geht. Ordnung, das wird mir hoffentlich meinen kleinen Spirographen geben hoffentlich meinen kleinen Spirographen Erinnert sich noch jemand an die Hände hoch. Genau wie das Haus wähle ich sie alle aus. Ich habe eine ganze Reihe von Ellipsen, die nicht miteinander verbunden sind Ich muss sie glätten, sodass sie alle zusammen im gleichen Vektor sind alle zusammen im gleichen Vektor Dann kann ich sie doppelklicken oder auf Vektor bearbeiten klicken Dann können wir uns dieses hier schnappen, M, das Shape Builder-Tool, und sagen, naja, vorher könntest du das Füllwerkzeug benutzen hier reingehen und sagen, richtig, ich möchte, dass du mit welcher Farbe gefüllt wirst Geh rot. Okay, und arbeite dich einfach durch und fülle das auf. Sie sind nicht einheitlich, aber sie haben alle die gleiche Farbe, und vielleicht ist es das, was du tun musst. Das ist eine gute Methode , um Objekte zu glätten und dann zu bearbeiten Ich werde das rückgängig machen, weil ich sie alle zusammenfügen möchte Also für den Shape Builder, und ich werde ihn ausmalen und du wirst herausfinden, versuchen herauszufinden, welche blutigen ich abdecken muss. Ich mache gar nichts. Ich ziehe sie einfach mit dem Standardwerkzeug rüber. Oder ist es dieser? Ich glaube, es ist dieser. Und dann ist dieser hier genau das, wonach ich suche. Ich kann mich nicht erinnern. Stimmt das ungefähr? Nein, zu viele. Rückgängig machen, rückgängig machen. Vielleicht ist es dieser hier. Du, das ist es. Welche Taste halte ich dann gedrückt, um sie los zu werden? Das ist richtig, die Optionstaste, und ich werde all diese Tasten oder die OK-Taste auf einem PC durchziehen . Am Ende hatte ich diesen Streifen. Los geht's. Ich gehe zurück zu meinem Farbeimer-Tool und wähle eine Füllfarbe aus. Ich werde die Striche entfernen und eine Füllung hinzufügen und dann die in dieser Datei erstellten Farben auswählen. Es wird mir hier meine Farben geben. Das funktioniert. Das Verhalten dieses Fülleimers ist im Moment etwas seltsam. Es ist eine neue Funktion für Figma. Ich kann mir vorstellen, dass es im Moment einfacher wird. Ich klicke auf eines und ändere es dann Es ändert sich alles Okay, also klicke ich irgendwie darauf, klicke wieder ab oder klicke es einfach zweimal an. Wenn ich dann eine Farbe von hier unten aussuche, gilt sie. Gehen Sie also in Bearbeiten. Klicke nicht zu schnell darauf. Okay, es ist ein bisschen nass. Und wieder weiter. Und hoffentlich funktioniert es ein bisschen reibungsloser für dich, ein bisschen schrullig. Aber wir haben es geschafft Cool. Und das ist es. Ich möchte eigentlich Farbverläufe hinzufügen Machen wir es? Oder wir machen es ganz schnell. Dann fahren wir mit dem nächsten fort. Hier möchte ich einen Farbverlauf hinzufügen. Es ist ein zweiter in oder wenn ich ihn schon mag. Schau dir das an. Gut, ich werde alle vier machen. Du wartest dort. Ich gehe in den superschnellen Modus. Ordnung. Mag ich es mehr? Ich glaube schon. Es ist irgendwie cool. In Ordnung, machen wir den Schild Okay? Also der Schild wird reinkommen. Wir werden hier extrem weit fortgeschritten sein. Wir sind extrem weit fortgeschritten. Es wird so sein, ich weiß es nicht. In diesen werden wir eine Menge hineinwerfen. Denken Sie noch einmal daran, es ist kein Zeichenwerkzeug. Es ist ein Grafikdesign-Tool Figma. Wir verwenden es hier für UX, also gehen wir nicht zu tief in die Design- oder Zeichenwerkzeuge ein, aber sie sind sehr praktisch Fangen wir also mit dem Rechteck an. Ich werde ein Rechteck in Schildgröße zeichnen. Es wirft ein paar neue Sachen. Also ich möchte in „Objekt bearbeiten“ gehen, weil ich meinen Stift nehmen will und hier unten einen neuen Punkt haben will Okay, vorher gab es keinen. Jetzt gibt es ihn. Jetzt kann ich zu meinem Verschiebewerkzeug zurückkehren und es für den spitzen Teil nach unten ziehen Ich halte die Umschalttaste gedrückt, während ich es nach unten ziehe, sodass es gerade nach unten geht Jetzt möchte ich, dass es an diesen Kanten gekrümmt ist. Ich muss ein paar dieser Punkte umrechnen. Was ich auch tun werde, ist, mich nur auf eine Seite zu konzentrieren und sie dann am Ende umzudrehen. Ich nehme das, um daraus eine Kurve zu machen, klicke sofort und du sagst, ich werde jetzt zu diesem ersten Werkzeug hier zurückkehren, dem Verschieben-Tool. Und was ich tun werde, ist, diese Seite hier zu durchbrechen. Wer weiß noch, wie man es kaputt macht? Halten Sie die Optionstaste an einem Mickey auf einem PC und Sie können sagen, Sie haben ihn abgebrochen Ich will mit dem machen? Ich will ihn nicht wirklich, also schleppe ich ihn einfach zurück zu sich nach Hause und er geht weg. Das Gute daran ist aber, wenn ich immer noch draufklicke, habe ich immer noch diese Seite und genau das werde ich tun. Weil ich diese gebogene Seite auf dieser Seite haben will , aber auf dieser Seite spitz Ich werde mir den Kerl schnappen, ihn vielleicht noch ein bisschen runterbewegen Ich benutze nur meine Harke. Ich mache mir über diese Seite nicht allzu viele Gedanken, weil ich sie gleich umdrehen werde . könntest du aber. Als Nächstes hole ich mir die kleine Spitze meines Schildes. Ich nehme das Werkzeug für das Kreiswerkzeug zum Herausziehen und drücken erneut auf das Werkzeug . Es funktioniert nicht Ich gehe hier zum Ellipstol. Es hat den Objektbearbeitungsmodus verlassen. Okay. Also werde ich das in einer Sekunde zusammendrücken Zeichne eine Art Kreis. Ich werde die Farbe tatsächlich ändern , nur damit ich sie sehen kann. Und ich versuche, irgendeinen Punkt zu verstehen. Ich muss die Mittellinie ein bisschen überqueren . Das sieht gut aus Sie können das so anpassen, dass Sie wissen, wonach Sie suchen. Denken Sie daran, dass es dass Sie wissen, wonach Sie suchen. Denken Sie daran, nur das ist, was übrig bleibt , weil wir das She-Builder-Tool verwenden werden. Woher weiß ich, ob es auf halbem Weg vorbei ist? Ich treffe gerade eine Auswahl. Ja. Und was ich tun werde, ist, wie komme ich an den Shape Builder? Er ist nicht hier unten. Es gibt noch diese anderen Dinge wie Union und Minus Front. Die werden wir ignorieren. Wir werden den Shape Builder verwenden , der einfach einfacher ist als all diese. Wir werden den Flatten verwenden müssen. Dann können wir in den Object Edding-Modus wechseln und unsere M-Taste für unseren Shape Builder drücken, was nur dieses dritte Symbol ist Ich kann die Alt-Taste auf einer PC-Option auf einem Mac gedrückt halten und einfach darauf klicken Ich habe einen halben Schild. Ich habe jetzt wieder das Gleiche vor, ich verwende ein Rechteck, das die Archie darstellt, und das Ganze durchqueren. Ich will es nur bis zu diesem Punkt bringen. Ich werde das einfach wie eine Ausstechform benutzen. Wählen Sie erneut beide aus. Machen wir sie platt. Oh, ich habe etwas automatisches Abflachen platt. Oh, ich wusste nicht, dass es das getan hat. Es funktioniert. Tut es? Es verwendet automatisch eines davon, und ich glaube , es verwendet Exclude. In Figma steckt etwas Seltsames. Ich lasse das im Kurs stehen, weil es das noch nie gemacht hat, aber jetzt ist es so Ich habe es nicht darum gebeten. Also wenn wir es trotzdem machen können. Es hat ein Loch in dieses L geschnitten, ich kann es durchschauen. Was ich jetzt tun werde, ist reinzugehen, mein Shape Builder-Tool zu nehmen und hoffentlich einfach meine Optionstaste oder Taste auf einem Mac gedrückt zu halten . der Lage sein, die Hälfte davon abzuschneiden. Es hat immer noch funktioniert. Ich habe jetzt die Hälfte davon. Ich werde es jetzt duplizieren. Ich werde rüber gehen. Es gibt eine umgekehrte Horizontale und ich werde versuchen, sie so auszurichten, dass sie aneinander wachsen. Sie sollten es automatisch machen. Manchmal hatte ich Probleme, bei denen eine kleine Lücke dazwischen bleibt, also zoome ich heraus. Manchmal ist da eine Pixellücke drin. Sie können einfach darauf klicken und es Pfeiltaste über eine Position bewegen. Jetzt könnte ich es so belassen, aber ich werde beide auswählen. Ich werde den Wert glätten, weil ich daran denke, dass es in meinem Lays-Panel zwei separate Formen gibt Ich werde sie zusammenschlagen und du wirst sehen, dass es da ist Das wird mein Häkchensymbol sein. Das wird reichen. Das sieht. Ich gehe in den Objektbearbeitungsmodus. Ich gehe zu meinem Shape Builder und füge sie zusammen. Ich klicke einfach und ziehe mit der Maus über beide. Fügen wir das Häkchen hinzu. Ich kratze mein Stiftwerkzeug, dem wir den Dreh raus haben Ich werde einmal für eine Ecke klicken, noch einmal, ein drittes Ich nehme meinen Strich, ok, um einen Strich der passenden Größe zu bekommen, hat deine eigenen Soundeffekte, und ich mache diesen mit dem Namen Outline Stroke. Wir haben das früher benutzt , um den Text auseinanderzunehmen. Wir können das Gleiche für tun. Ich werde das auswählen. Ich werde schreiben, klicken Sie darauf. Eigentlich kann es kein Objektbearbeitungsmodus sein, damit das funktioniert. Ich werde den Objektbearbeitungsmodus schließen. Jetzt kann ich Click schreiben. Dieselbe Option hier, wo Outline Stroke steht. Das ist eher das, wofür es verwendet werden soll. Wir haben es früher verwendet , um den Typ zu skizzieren. Dieser hier, Umrissstrich, was bedeutet, dass es sich im Moment um einen Strich handelt. Wenn ich auf einem PC zu Command Y, Control Y gehe . Kannst du sehen, es ist eine Linie mit einem Effekt darüber, der sie dick macht? Wir wollen daraus ein großes, dickes Rechteck machen , in das wir ein Loch in den Hintergrund schneiden können. Control oder Command Y, ich werde jetzt eine Gliederung sagen. Beobachten Sie, was passiert. Kannst du sehen, ob ich jetzt wieder in den Konturmodus gehe, statt einer Linie mit einer Dicke darauf, es ist tatsächlich eine Form, diese große, dicke Form. Ich werde darauf klicken, es ein bisschen nach oben bewegen , ein bisschen. Tippen zum Tippen, Befehl oder Steuerung, warum? Und ich möchte ein Loch hineinschneiden . Weil es in dem Moment schwarz ist. Machen wir es zu einer Farbe, machen wir es sichtbarer. Ich möchte wirklich ein Loch darin sein. Du könntest es als Farbe belassen. Es ist völlig in Ordnung. Ich möchte ein Loch in meins schneiden. Also werde ich beide glatt , sie zusammen glätten, K für den Shape Builder, und ich werde das Loch in der Mitte schneiden Das ist mir auch schon einmal passiert. Du sagst, das Shape Builder-Tool hat derzeit in allen Zeichenwerkzeugen in Figma eine gewisse Eigenartigkeit Shape Builder-Tool hat derzeit in allen Zeichenwerkzeugen in Figma Aus irgendeinem Grund lässt es es da drin, d. h. es sollte einfach ein Loch hineinschneiden. Es will wirklich. Aber ein kleiner Workaround für den Moment. Ich ***** das wird in Zukunft funktionieren. Es sind nur ein paar Kinderprobleme mit dem Tool. Wenn du deinen Farbeimer greifst, wenn du über etwas schwebst, das schon Farbe hat, kannst du sehen, dass das ein Minus ist? Es ist nur ein Minus in demselben, kein Rückgängigmachen, du könntest auswählen. Kannst du diesen Teil auswählen? Nein, verwenden Sie einfach den Fülleimer, falls Ihrer nicht mit dem Shape Builder-Tool funktioniert da jetzt ein Loch darin ist. Wie kann ich es genehmigen? Nur um über etwas hinwegzukommen. Hallo, ich kann dich durchschauen. Das ist das Shape Builder-Tool. Wir haben hier ein paar Extras eingebaut, wie die Spiegelung. Wir haben uns auch die Verwendung unseres Stiftwerkzeugs angesehen , das wir uns zuvor angesehen haben Es gibt ein paar kleine Macken für meine Version von Figma. Deine könnte anders sein. Ich bin in den Einspruchsmodus gegangen. Ich habe das Gefühl, dass das niedriger sein muss. Oh, nett. Ordnung. Das ist das Shape Builder-Tool in Figma. Es ist super genial Zeichne Dinge heraus, überlagere sie und füge entweder Bits zusammen oder subtrahiere Dino fügt ein paar süße Farbverläufe hinzu. Ordnung. Das ist es. Ich werde dich im nächsten Video sehen. 54. Squirrel-Tasten mit abgerundeten Verläufen für iOS in Figma: Dort. Hey, wir werden lernen, was ein Squirkl in UX-Design und Figma ist Squirkl ist kein richtiges Quadrat, kein richtiger Kreis. Schau, was sie dort gemacht haben Okay? Es heißt auch Corner Smoothing , aber es hat einen viel besseren Lass mich dir zeigen, wie man das in Figma macht. In Ordnung, lass uns das auf unserem Homepage-Desktop machen Hi five. Also verschiebe eins S alles auf den Namen hier und geh Schicht zwei. Wir zoomen gleich rein. Wir brauchen hier also zwei Knöpfe. Ich werde noch mehr reingehen. Ich benutze mein Schädelrad. Oder du kannst dein Shift Plus benutzen. Lass uns zwei Rechtecke oder Rahmen erstellen , lass uns Rahmen verwenden Wir werden sagen, ich will einen Knopf. Es wird ungefähr diese Größe haben. Wir müssen es zu 100% testen , weil es groß ist? Ja, das scheint ungefähr richtig zu sein. Okay, wir werden also ein bisschen mehr zoomen. Geben wir dem eine Füllfarbe von einer unserer, das ist interessant. Setz dich hier unten hin. Auf dieser Seite zeigt mir Gate die , die benutzt werden und in der Datei erwähnt wurden. Hier sind alle meine Styles. Sie stellen fest, dass Gradienten aus irgendeinem Grund keinen Farbverlauf sehen wollen oder nur die Namen sehen wollen. Sie können zu diesem gehen, wo Bibliotheken steht Hier ist meine Farbbibliothek. Dies könnte eine einfachere Methode sein, Farben auszuwählen. Ich werde meine Sekundärfarbe wählen. Ich bin mir nicht sicher, ob mir die Sekundärfarbe gefällt. Wie dem auch sei, lass uns zwei davon machen. Wir werden die Schaltflächen „Bis jetzt “ und „Weitere Informationen“ haben, und wir werden beide auswählen. Shift, klicken Sie auf beide. Gehen wir und fügen ihnen einige hinzu. Ich tippe einfach meins ein, anstatt es zu ziehen, ich tippe zehn Pixel Okay, schauen wir uns den Unterschied zwischen unseren regelmäßigen abgerundeten Ecken und Quadrillen an. Ich habe diesen ausgewählt Wir müssen hier zu dieser Option gehen, einzelne Ecken, und dann zu den Einstellungen gehen. Wir wollen eigentlich keine einzelnen Ecken. Wir wollen dieses Ding namens Eckenglättung. Das ist der technische Name. Squirkle ist aber viel besser, oder? Quadratischer Kreis Schauen wir uns das mal an. Das ist also die große Veränderung. Du sagst , es sieht genauso aus. Ich lasse den Editor heranzoomen. Vorher, Nachher, Nachher, Vorher, Nachher. Kannst du es überhaupt sehen? In Ordnung, lassen Sie uns es für den Port-Editor vergrößern Okay? Vorher, nachher, davor oder nachher, es ist nur eine andere Art von abgerundeten Ecken. Also so mache ich das immer. Es hat einfach, ich weiß nicht, ein interessantes Gefühl, das ich wirklich liebe, und deshalb gibt es auch ein eigenes Video. Okay? Also, ja. Es liegt an dir, du brauchst keine Squirkles. Sie können normale abgerundete Ecken verwenden. Ich werde beide Squirkles machen. Klicken Sie mit der Befehlstaste hinein oder klicken Sie bei gedrückter Ctrl-Taste, um zu dieser Schaltfläche zu springen Andernfalls haben Sie den gesamten Rahmen ausgewählt, ich werde zwei davon haben. Ich werde dafür sorgen, dass dieser keine Füllung hat, sondern einen Strich einen schönen großen, dicken Strich meiner Sekundärfarbe, welche Größe? So etwas in der Art. Ich werde auch meinen Text hinzufügen. Das ist es. Das sind Squirkles Eine letzte Sache. Sie könnten Squirkles ganz aufgeben und einfach eine volle Runde machen. Schau dir das an. Wenn ich es umgreife und einfach weitergehe, wo es sein muss, weil Sie sehen können, dass es versucht, 146 abgerundete Ecken zu haben , kann es das nicht. Es nimmt einfach die Form einer Pille an. Das könnte dir auch gefallen. Wir haben uns das vorhin angesehen. Wenn ich runtergehe, runter auf Null und rekapituliere es einfach. Wenn ich nah genug heranzoome, kann ich die kleinen Punkte in den Ecken sehen C muss es in Gang bringen. Was Sie tun können, ist zu sagen, dass sie nicht erscheinen. Ich frage mich warum. Normalerweise gibt es in den Ecken einen kleinen Punkt, den man ziehen kann , der nicht ausreichend vergrößert Hmm. Erscheint nicht. Wie dem auch sei, Sie können verschiedene abgerundete Ecken haben, Sie könnten eins auf Null setzen. Da hast du's. Eichhörnchen in einer Figur. Ich sehe dich 55. Klassenprojekt 10 - Symbole: Ah, es ist mehr Hausaufgabenzeit. Nein, mach dir keine Sorgen. Es ist super lustig, Zeit für Klassenprojekte. Ganz anders. Bleib dran für diesen . Auch wenn du die Unterrichtsprojekte nicht machst, solltest du es tun. Aber wenn du es nicht bist, gibt es hier ein paar coole , interessante Dinge. Also möchte ich, dass du ein paar Dinge zeichnest , Knöpfe und Symbole. Also die Knöpfe sind einfach. Okay, du kannst entscheiden, ob du zwitschern willst oder nicht. Das sind diese Typen hier. Erfahren Sie jetzt mehr und bringen Sie es auf Ihre Homepage. Und dann möchte ich, dass du ein paar Icons zeichnest. , dass Sie mit den Werkzeugen, die wir bisher gelernt haben, Stiftwerkzeug , Shape Builder-Werkzeug, was auch immer Ihnen gefällt möchte, dass Sie mit den Werkzeugen, die wir bisher gelernt haben, Stiftwerkzeug, Shape Builder-Werkzeug, was auch immer Ihnen gefällt, einige Symbole zeichnen. Wie viele kannst du zeichnen? Du musst drei zeichnen. Okay, du kannst jeden dieser drei auswählen. Ich habe sie in der Reihenfolge von am wenigsten schwer vom Zeichnen bis zum schwersten angeordnet. Sie können also mit den ersten drei beginnen. Du könntest sie alle machen , um weiter zu üben. Ein kleiner Tipp, wenn Sie etwas entwerfen, ist, es in Rahmen zu platzieren , die 28 mal 28 groß sind. Okay, tut mir leid, 28. Ich kann nicht 48 mal 48 lesen, nur um damit anzufangen. Okay? Also, wenn ich mein Rahmenwerkzeug nehme, das auszeichne und ich sage, du hast Abmessungen von 48 mal 48 Pixeln. Der Grund, warum wir das tun, ist, dass wenn man sie am Ende miteinander kombiniert, okay, man sie irgendwie proportional haben muss. Oft kann man etwas entwerfen oder vielleicht die Icons anderer Leute zusammenstellen. Das ist nicht das, was ich von diesem Video will. Ich möchte, dass du deine eigenen zeichnest, aber es wird oft vorkommen, dass du einfach die Symbole anderer Leute zusammenschusterst und sie manipulieren musst Deshalb brauchst du Zeichenfähigkeiten. Okay? Vielleicht stammt dieser hier aus der Icon-Bibliothek eines anderen und er ist einfach zu groß im Vergleich zu seinen Kumpels können herausfinden, ob es zu groß ist, indem Sie sie in diese 48 x 48-Pixel-Frames stecken indem Sie sie in diese 48 x 48-Pixel-Frames und sie dann nebeneinander stapeln Es gibt dir auch eine Möglichkeit , sie zu platzieren, okay? Und finde heraus, wie viel von diesem kleinen Raum sie hier einnehmen. Sie müssen hier nicht diese große Lücke haben. Sie könnten darin größer sein. Ich halte meine Shift-Taste gedrückt und wähle Comac oder Shift und einen PC, um es hochzuziehen Wenn der so groß ist, sagst du, vielleicht muss dieser größer sein Ich werde den anderen Weg gehen und sie kleiner machen. mit einem Quadrat von 48 mal 48 Pixeln zu beginnen Es ist einfach üblich, mit einem Quadrat von 48 mal 48 Pixeln zu beginnen. Ich mache es rückgängig, bis es kleiner wurde. Geh. Sie scheinen alle eine gute Gruppe zu sein. Der andere Grund, warum wir 48 Pixel mögen , ist, dass wir das machen werden. Am Ende sagst du: In Ordnung, du. Ich habe gerade einen weißen Hintergrund , während ich sie entwerfe, aber oft machst du die Füllung aus, du benutzt sie einfach so du wirst sagen: Okay, dieser hier wird hier drüben stehen und du kannst die Art der Aufstellung sehen und es gibt einen hier wird hier drüben stehen und du kannst die Art der Aufstellung sehen und einheitlichen Abstand Also, was ich gemacht habe, ist, kannst du das hier sehen? Da ist dieser Rahmen namens Icon Account, und da ist der Vektor drin. Einige der Zeichnungen, die wir gemacht haben, sind einfach, sagen wir, dieses Herz hier unten, wo ist er? Da ist es, da ist nur ein Vektor auf meinem Panel. Wenn ich das innerhalb von 48 mal 48 platzieren müsste, zeichne entweder das Feld und ziehe es hinein, oder ich kann sagen, ich diese Auswahl einrahmen und ich möchte , dass der Rahmen um sie herum so groß ist, dass Ts viel größer sind als ich brauche, 48 mal 48. Wo ist mein kleiner Rahmen. Jetzt werde ich sagen, dass Sie innerhalb dieses Rahmens viel kleiner werden müssen. Einer dieser hilfreichen Tipps ist Befehl oder das Steuerelement Y zu verwenden, um in den Gliederungsmodus zu wechseln, vor allem, wenn Ihr Rahmen keine Farbe hat, also keine Füllung vorhanden ist. Jetzt kann ich sagen, dass ein Symbol angemessen wäre . Wahrscheinlich muss ich mein Symbol ein wenig umgestalten , damit es den Platz gut einnimmt Ich nenne das jetzt Icon Hart. Der Grund, warum ich sie Icons Heart nenne , ist, dass später, wenn ich nach Ikonen suche, der Strich darauf jetzt etwas zu dick ist. Ist hier in meinem Ebenen-Panel. Kannst du sehen, dass es hier oben eine Suche gibt? Ich kann das Wort „Symbol“ und „ Bindestrich“ eingeben . Dadurch wird mir alles angezeigt , was in meinem Dokument ein Symbol ist Wenn Sie es andersherum machen rufen Sie das Herzsymbol oder das Kontosymbol an, ich weiß es nicht Aus irgendeinem Grund sieht das schöner aus und ist leichter zu finden. Ordnung, komm Schicht eins. Verkleinern. Eine letzte Sache, die ich dir zeigen möchte, bevor wir gehen, ist, dass ich diese Icons habe, perfekt. Ich will sie eigentlich auf meiner Homepage haben. Ich möchte die Farben von ihnen ändern. Was Ihnen vielleicht aufgefallen ist, ist, sie wahrscheinlich zu groß sind und nicht wirklich eingeschaltet sind. Wenn Sie die Namen sehen können, denken Sie daran, dass sie sich nicht auf der richtigen Seite befinden. Ich werde meine Suche beenden. Stellen Sie sicher, dass Sie die Suche danach beenden. Andernfalls können Sie nichts sehen. Ich möchte, dass all dies auf meiner Homepage steht. Ich könnte sie einfach runterziehen. Sie sind einfach still da drin. Anstatt zu versuchen, sie im Ebenenbedienfeld zu bewegen. Gehen wir also zu 100%. Ich zoome ein bisschen heraus. Sie haben irgendwie die richtige Größe. Ich könnte für diese Jungs eine etwas kleinere Größe wählen 32. Oh. Das bringt einen weiteren guten Punkt zur Sprache. Einige von ihnen skalieren, andere nicht. Oh, in diesem Video steckt allerlei Gutes Bevor wir das tun, wollte ich dir zeigen, wenn ich die Füllung all dieser Dinge ändere, schau mal, was passiert Es ändert die Rahmenfüllung. Also werde ich das rückgängig machen. Was du tun kannst, ist hier unten zu sehen? Ich habe genug davon, aber da steht Farbauswahl. Wenn ich das alles auswähle, sollte ich Schwarz und Weiß bekommen und hier eine meiner Farben für den Hintergrund, meine Grundfarbe. Also werde ich mir all meine Icons schnappen, du und du. Eigentlich ist es egal. Ich kann mir all diese schnappen und du kannst sagen, richtig, alles, was ich ausgewählt habe , Auswahlfarben. Ich möchte, dass alles, was schwarz ist, sagen wir, weiß ist, oder du kannst in deine Büchereien gehen und sagen, ich möchte, dass es meine Sekundärfarbe ist. Hier können die Auswahlfarben nützlich sein. Sie haben Lose ausgewählt, ich sage: Hey, hier sind alle Farben, die Sie ausgewählt haben. Ändere sie, wenn du willst. Andernfalls können Sie einfach in jedes Symbol eintauchen, es auswählen und auch hier ändern. Ordnung, was die Größe angeht. Wir haben uns das vorhin angesehen. Ich glaube, wir haben es getan. Lass uns alle meine Icons holen. Du, ich halte Shift, packe dich, du. Was ist mein letzter dort Okay, ich habe meine drei Symbole und Sie werden feststellen, dass, als ich sie 32 geändert habe, nur einige davon so angepasst wurden, wie ich es wollte. Einer und dieser brauchen ein bisschen Arbeit. Ich nehme das Haus, das ich gezeichnet habe, und schauen wir uns den Unterschied an. Schau mal hier drüben zwischen dir und dir nach. Nichts ist anders. Wenn du da reingehst, klicke ich drauf. Dieser Typ hier ist maßstabsgetreu, und dieser Typ hier drinnen wird in der Mitte und ganz oben stehen. Ich will, dass er skaliert, du skalierst und du. Das Gleiche gilt für diesen und für dich Ich möchte skalieren. Oben und unten skalieren. Schauen wir uns den Kerl noch einmal an, er hat sich auf die Waage begeben. Innerhalb seines Rahmens, seines kleinen Elternrahmens, sie jetzt alle skalieren, anstatt nach links und oben rechts nach oben und links zu verharren. Anstatt oben und links zu hängen oder an was auch immer sie geklebt haben. Lass es uns versuchen. Lasst uns euch alle schnappen. Schnapp dir das, Schicht, Schicht, Schicht. kann schwierig sein, in einige dieser Frames zu gelangen , weil Sie sich in diesem übergeordneten Frame befinden. Doppelklicken Sie sofort , um sich diesen Kerl zu schnappen. Alte Schicht. Oder du schnappst ihn dir im Ebenenbedienfeld, falls das einfacher ist. Hoffentlich reden wir jetzt über ein gutes Spiel, Dan. Das haben sie getan. Nett. Okay, also 32, denken Sie daran, ein Vielfaches von Acht zu verwenden, was praktisch ist, 48, 32, das ergibt 100% Sie sehen aus wie Knöpfe in passender Größe. Ich weiß, das ist eher für ein Handy, dieses hier, aber im Moment ist es in Ordnung . Ich werde sie mit der Umschalttaste anklicken und meine Spalten verwenden, vielleicht Shift G, und ich werde meine tatsächlich dorthin bringen. Ran Keys, los geht's. In Ordnung. Das ist ein umfangreiches Projektvideo, aber wir sind auf einige interessante Teile gestoßen die Sie wahrscheinlich stoßen werden oder die Sie bereits kennen Das Hauptziel hier ist es, drei Symbole und einige Schaltflächen zu zeichnen und sicherzustellen, dass du sie in den Bereich Klassenprojekte auf der Website hochlädst sie in den Bereich Klassenprojekte auf der Website hochlädst und uns auch in den sozialen Medien markierst Ich würde gerne sehen, welche Marke. In Ordnung, das ist es Ich werde dich im nächsten Video sehen. In Ordnung, ich bin zurück. ich mit der Aufnahme fertig war, kam mir noch eine andere Sache in den Sinn Sie könnten es tun, anstatt sich so die Mühe zu machen . Sie skalieren also nicht Nun, dieser skaliert nicht. Ich sage, du wärst 48, sie machen nicht genau das, was ich will. Du kannst. Anstatt das Ganze durchzugehen und zu sagen: A, ich möchte, dass du dieses interne Ding hier bist, das Maßstab und Maßstab hat, kannst du einfach das Skalierungswerkzeug benutzen. Ich hätte mit dem anfangen sollen. Das ist einfacher, Dan. Du kannst einfach Scale verwenden, das Skalierungswerkzeug, das K ist, und du kannst es auf diese Weise machen. Du musst vielleicht rauskommen. Es ist hier unten versteckt, wenn du im Ziehmodus bist. Gehe zur Waage. Das geht einfach schnell und einfach und nicht so, wie ich es dir gezeigt habe. Aber ich glaube, ich lasse es andersherum weil es einfach oft vorkommt, dass Sie es skalieren müssen, damit es Ihnen nicht für immer Probleme bereitet, wenn Sie versuchen, die Größe von Dingen zu ändern Ordnung. Benutze das Skalierungswerkzeug. Haufenweise einfacher Aber wie dem auch sei, das ist jetzt das offizielle Ende, das richtige Ende. Tschüss. 56. Intelligente Auswahl und Aufräumen in Figma: Hallo. Willst du etwas wirklich Cooles sehen? Es heißt Intelligente Auswahl und Aufräumen im Inneren einer Figma. Bereit? Schau, ich kann sie einfach herumziehen mit dem Abstand zwischen ihnen allen gleichzeitig spielen. Es heißt Intelligente Auswahl. Wir werden auch etwas namens Tidyup in Figma verwenden . Lass uns gehen Spiel mit, zeichne Rechtecke und ich mache eins, zwei, drei, vier davon und färbe sie alle unterschiedlich. In Ordnung, Magic. Jetzt werde ich sie so verschieben, dass sie alle unterschiedliche Abstände Und wir werden uns den ersten ansehen, der Tidy-Up heißt. Ich werde sie einfach alle auswählen. Und was Ihnen auffallen wird, ist, Sie das vielleicht schon einmal bemerkt haben. Wenn ich mehrere Dinge ausgewählt habe, sehen Sie hier, habe ich diese kleine Stropie Das ist der Aufräumknopf, er räumt einfach auf. Du kannst den langen Weg gehen und hier drüben gibt es die Möglichkeit, aufräumen zu sagen Es ist noch cooler, wenn man ein paar verschiedene hat. Lass uns hierher gehen. Ich dupliziere nur ein paar verschiedene. Jetzt wählen wir sie alle aus, bewegen Sie den Mauszeiger darüber. Schau, es hat sie aufgeräumt. Sie werden das Aufräumen nicht sehen, wenn sie bereits einen guten Abstand haben. Lass uns die hier hinstellen Schon schön angeordnet, sodass es nicht erscheint, wenn es schon aufgeräumt ist Jetzt, wo sie aufgeräumt sind und gleichmäßig verteilt sind, wirst du sehen, was ist das für ein anderes Zeug? Es gibt eine rosafarbene Linie und einen rosafarbenen Kreis. Wofür sie verwendet werden, ist der Abstand dazwischen. Diese kleinen Linien dazwischen, klicken Sie auf Halten und ziehen Sie eine davon. Schau dir das an. Ich liebe es. Das nennt man intelligente Auswahl. Ich kann mit Auswahlen intelligente Dinge tun. Die andere wirklich coole Sache daran sind die Punkte. Ich kann auf Halten klicken und einen der Punkte ziehen. Beobachten Sie, was passiert. Sie können Plätze tauschen. Sie können einfach sagen, ja, es ist wirklich gut zum Auswechseln. Lass uns gleich Icons machen. Jetzt werden sie nicht mehr erscheinen. Wenn Sie nur eine Sache ausgewählt haben, müssen Sie mindestens zwei haben. Dann können Sie sogar zwei davon umschalten. Du kannst auch etwas richtig Cooles machen, wo du hingehst Ordnung, ich will das. Kannst du sagen, es ist ein Highlight? drauf geklickt. Sie können Command D oder Control D auf einem PC drücken, wie wir es getan haben Schau, ich habe noch einen gemacht. Lass es uns mit diesem Beispiel hier unten machen. Das Coole an diesen Typen, eins, zwei, drei, vier, ist, dass sie in den 48 mal 48 Pixeln sind, eigentlich haben wir unsere 32 gemacht, also waren sie nicht gleichmäßig verteilt Ich kann sagen, manche halten die Shift-Taste gedrückt, um sie alle zu schnappen. Da ist mein Aufräumen. Toll, und das Magische ist das Du kannst die Punkte ziehen und sagen, ich möchte, dass dieser so ist, dieser muss tatsächlich so sein, dieser wird hier drüben sein. Ich brauche noch einen. Ich brauche zwei von euch. Eigentlich brauche ich es dafür nicht. Du verstehst die Idee, super praktisch. Es ist auch sehr gut für Text. Hier sind einige Textfelder, die ich superschnell eingegeben habe und die sich in separaten Textfeldern befinden müssen Sie können nicht einfach nur Rücksendungen zwischen ihnen sein. Was du tun kannst, ist, wenn sie unterschiedlich verteilt sind, ich kann sagen, sie für mich aufräumen, wenn ich den Abstand zwischen ihnen anpassen will, sieh dir das an Schau dir das an. Praktisch. Das Gleiche. Du kannst sie bewegen. Möglicherweise müssen Sie etwas näher heranzoomen . Ich war zu weit draußen, das ist ein gutes Argument. Wenn ich zu weit draußen bin und aus irgendeinem Grund die Sache mit den Punkten nicht wirklich machen kann , muss man heranzoomen und die Punkte werden größer und ich kann sagen, ich möchte, dass Sie da sind, und ich brauche ein Duplikat davon und Member, das ist Command oder Control D. Spielen wir mit dem Abstand, super praktisch für Vielleicht möchtest du sie so anordnen. Wählen Sie sie alle aus, lassen Sie uns sie aufräumen. Es geht um den Abstand. Ich will auch die Höhe, also sage ich, lassen Sie uns diese Typen auf die Mitte ausrichten. Ich kann die Punkte sehen und ich kann sagen, ich brauche dich da drüben und ich brauche den Abstand zwischen ihnen, den ich nicht sehen kann. Warum kann ich den Abstand zwischen ihnen nicht sehen? Vergrößere die Ansicht. Verkleinern. Wenn du die Linien zwischen ihnen nicht erkennen kannst, versuche ich nur laut zu denken. Jetzt müssen wir sie horizontal verteilen. Nein, die Linien erscheinen nicht. Da hast du's. Du musst reinzoomen, Dan. Oh, sie sind da, sie sind da, sie sind da. Ab einem gewissen Level verschwinden auch diese kleinen Linien dazwischen. Das ist ein gutes Argument. Ich wusste nicht, dass das passiert ist. Ordnung. Da hast du's. Die andere Sache, für die du das verwenden könntest, ist, ich sage unsere Karten. Stellen Sie sicher, dass alles auf der Karte ist. Mitglied, ich habe meine zweite Karte und diese hier sollte Karte drei heißen. Ich habe sie alle ausgewählt, Sie werden feststellen, dass Sie dieselben Punkte erhalten. Das ist sehr hilfreich, da es natürlich sehr einfach ist, all dies neu anzuordnen , wenn sie sich in der Smart-Auswahl befinden Auch hier können Sie sich in den Zentren bewegen. Sie müssen nur sicherstellen, dass sie aufgeräumt oder horizontal oder vertikal angeordnet sind, je nachdem, wie Sie sie stapeln Oh, ich liebe es wirklich. Okay, das ist kluge Auswahl und Aufräumen in einer Figma Ich liebe es. Lass mich die Kommentare wissen. Ist das dein Lieblingsfeature? Was ist dein bisheriges Lieblingsfeature? Ich schaue mir gerne die Kommentare an, um zu sehen, was, du sagst, Oh, das ist einzigartig für Figma und großartig Ich persönlich mag Smart Selection, aber lass mich wissen, was du denkst Ordnung. Das wird es sein Oh, eine letzte Sache ist, wenn Sie Symbole zeichnen und sie nicht in einen Rahmen wie diesen gestellt haben, sagen wir, ich zeichne dieses Symbol. Kreiswerkzeug, das ist das Ok - und das Rechteckwerkzeug. Also entwirfst du das. Ich bin mir nicht sicher, was es ist. Es ist ein sehr stämmiger Mann für die Kontoseite. Ich mache das und ich habe dieses andere Ding hier drüben und du sagst, ich habe diese beiden Dinge Was am Ende passieren wird, ist, dass es das aufräumt , großartig, und du sagst, okay, ich möchte das ändern. Du sagst, was ist los? Das liegt daran, dass diese Typen nicht gruppiert sind. Ich muss sicherstellen , dass dieses Ding hier entweder in einem Frame oder in einer Gruppe ist. Wir sind nicht das, was ich wollte. Rahmenauswahl. Jetzt ist es eine Einheit. Jetzt kann ich sie so einstellen, wie ich es mir vorgestellt habe. Das ist es. Das ist kluge Auswahl und Ordnung in einer Figur. Tschüss. 57. Tipps und Tricks für die Verwendung von Bildern in Figma: In diesem Video werden wir über Bilder in Figma sprechen Bilder in Figma Wir haben schon ein bisschen gearbeitet, aber Bilder haben viele Nuancen, verschiedene Möglichkeiten, sie einzubringen, und wir werden uns einige Grundlagen der Bildbearbeitung ansehen und mit Sättigung, Kontrast und Temperatur spielen Lassen Sie uns einsteigen und alles lernen, was mit Bildern zu tun hat. Es gibt also viele Möglichkeiten, Bilder einzubringen. Wir können dazu gehen, zu Datei gehen und dann zu, äh, Bilder platzieren gehen. Ich benutze das ziemlich oft. Die Abkürzung können Sie je nach Arbeitsablauf lernen. In diesem Fall Shift Command K, das ist Shift Control K auf einem PC. Sie können diese Methode verwenden, um ein Bild einzufügen, oder Sie können hierher kommen und statt eines Rechtecks ein Bild einfügen. Oder Sie können es einfach von Ihrem Desktop ziehen, hineinziehen und schon kommt es rein. Das einzige Problem beim Einspielen von Ihrem Desktop ist, dass wenn es wirklich große Dateien sind, sie viel zu groß sind. Ich werde meine Befehlstaste K in Ihren Übungsdateien verwenden . Es gibt ein paar Bilder. Es sind alles Geldbörsen. Das Coole daran ist, dass Sie mehr als einen hineinziehen können. Ich möchte diese erste Gruppe hier haben und ich werde sie öffnen und Sie werden feststellen, dass sich Ihr Cursor aktualisiert, Sie sehen, ich habe sechs Bilder, und ich kann sagen, ich möchte, dass sie diese Größe haben, Größe, und Sie bekommen sie in einer passenderen Größe. Das kann hilfreich sein. Da hast du's. Wenn du die Größe eines Bilds änderst, wenn du die Ecke greifst und es herausziehst, wirst du feststellen, dass dadurch Höhe und Breite festgelegt werden, aber wenn du die Seiten greifst, nein, das ist eine neue Funktion. Die Größe wurde geändert Mir ist nur aufgefallen, dass das jetzt standardmäßig aktiviert ist. Seitenverhältnis sperren. Wenn ich es ausschalte, nehme ich jetzt die Seite, schau, was passiert. Was macht es? Es verändert den Rahmen, in dem es sich befindet, und das Bild füllt ihn gewissermaßen aus. Sie können also auch diesen Weg gehen, und es wird die Größe ändern, um zu versuchen, die Form, für die Sie sich entschieden haben, am besten auszufüllen , denn das ist es Form, für die Sie sich entschieden haben, am besten auszufüllen , was ich will Ich will dieses andere Bild hier haben. Ich verwende die Tastenkombination Mcmand Shift K. Sie können Control Shift K auf einem PC verwenden oder einfach die längeren Methoden verwenden Ich werde das reinbringen, und ich möchte es in einer zufälligen Größe herausziehen und ich werde es hier einfügen. Was ich tun möchte, ist in diesen Rahmen zu gehen. Ich möchte all diese Dinge auswählen und nach rechts verschieben, ohne das lila Feld. Du könntest hingehen und darauf klicken und sagen, ich möchte alles, was da drin ist, holen , dass wir es auswählen. Ich habe einfach auf den ersten geklickt, Shift gedrückt gehalten und ihn mir geschnappt Aber ich neige dazu, wenn Sie nicht schon viele Tastenkombinationen haben, denken Sie daran, dass Sie die Befehlstaste auf einer Steuerungstaste oder einem PC gedrückt halten können , um etwas darin auszuwählen Das macht man auch für eine Auswahl. Ich werde dieselbe Taste gedrückt halten, Command oder Control, Mac oder PC, und einfach ein Kästchen um all das ziehen und es erfasst alles, was sich darin befindet Ich sage du oder hier drüben. Es lässt sich ziemlich gut als gerade Linie nach rechts ziehen . Ich mag es, einfach die Umschalttaste gedrückt und es einfach dazu zu zwingen. Also werde ich sagen, dass du da bist und ich möchte, dass das hier in diese obere Ecke kommt . Möchte ich, dass es in den Ecken einrastet? Da hast du's. A Ich stelle nur sicher, dass es in diesem Rahmen ist. Ich werde das Ding in Hero Box umbenennen. Ich weiß, dass dieser ganze Teil meine Heldenbox ist, und das ist mein Heldenbild Der Held ist das Wort, das dieser Kiste allgemein gegeben wird. Das ist mein Heldenbild, mein großes Produktimage. Ich möchte den Link für das Seitenverhältnis trennen , sodass ich ihn ziehen kann er den gewünschten Bereich ausfüllt. Ich möchte 50, 50, und Sie werden feststellen, dass die Größe so angepasst wird, dass sie 50, und Sie werden feststellen, dass die Größe so angepasst wird, dass am besten zu dem Rahmen passt, den ich gezogen habe Denken Sie daran, ich kann es kleiner oder größer ziehen , es versucht sein Bestes, es zu füllen Ist in der Mitte meiner Seite. Haben Sie bemerkt, dass ich die Mitte gefunden habe, weil ich nichts getan habe, sondern sie einfach in die Nähe gezogen habe, wo die Mitte der Seite die Mitte der Seite ist Ist es nicht. Warum schnappt es nicht in die Mitte Was ich tun könnte, ist auf den äußeren Rahmen zu klicken und zu sagen: Was bist du Sie haben eine Breite von 12 40, also werde ich sicherstellen, dass das 1240/2 ist, und wir sind bestimmt halb so groß. Normalerweise schnappt es. Eine andere Möglichkeit, ein Bild einzufügen besteht darin, mit einer Form zu beginnen Wir könnten mit einer beliebigen alten Form beginnen, aber wir werden eine Ellipse wählen, weil Rechtecke zu einfach Was Sie tun können, ist nun, was mit dieser hier unten passiert , ist ein Drücken der Escape-Taste, um zu meinem Verschiebe-Tool zurückzukehren, die Befehlstaste gedrückt halten, um darauf zu klicken Dieses Bild, oder ist es in meinem Lays-Panel. Es ist da. Dieses Bild ist wirklich ein Rechteck mit einer Füllung innerhalb eines Bildes. Dieser Kreis ist eine Füllung , aber mit einer Farbe im Inneren. Was Sie sagen können ist, dass wir ihn nicht löschen müssen. Wir können es einfach ändern. Als ob wir es von durchgehend zu einem Gradienten ändern würden. Aber wir können es seltsamerweise in ein Bild umwandeln. Ich werde Ihnen all die verschiedenen Möglichkeiten zeigen diese Bilder anzupassen Warum? Hauptsächlich, weil du dir Vorlagen besorgst und sagst, wie zum Teufel haben sie das gemacht Nun, jetzt weißt du es. Nun, nach diesem Video wirst du es wissen. Ich werde darauf klicken und sagen, statt eines festen Farbverlaufs oder nicht eines Farbverlaufs. Ah. Ein Bild. Du klickst auf ein Bild und sagst, ich lade es von meinem Computer hoch und ich wähle dieses aus und füge es ein. cool, dasselbe zu tun , anstatt es einfach herauszuziehen, du füllst es Du kannst auch etwas anderes tun. Nehmen wir eine andere zufällige Form, denselben Prozess, nur eine andere Art, es zu tun. Ich habe einen Stern. Ich habe die Schicht gedrückt, damit es kein matschiger Stern wird Wie viele Seiten werde ich auf acht setzen? Ich werde mir den Kerl schnappen und ihn reinziehen. Kann ich das machen? Ich weiß nicht, ob ich könnte. Ich weiß, dass ich es importieren und einbringen kann . Lass es uns anders machen. Was ich tun werde, ist mein Oh nein, es gibt zwei Möglichkeiten. Lassen Sie uns ein Bild mit der Tastenkombination Command Shift K, Control Shift K, einen PC einfügen. Ich werde ein Bild suchen. Dieser hier ist gut. Ich klicke auf Öffnen. Anstatt einfach zu klicken und zu ziehen, wie wir es getan haben, mache ich es rückgängig und muss das Ganze noch einmal machen, ich kann einfach in einen Rahmen klicken Kannst du dir vorstellen, was das ist? Es hat meinen Stern gepackt und ihm eine Füllung mit diesem Bild hinzugefügt Das ist eine andere Art, Bilder einzubringen. Warum einen Weg haben, wenn man 72 haben kann. Aber jetzt wissen Sie, dass Sie es archivieren und portieren können. Sie können die Option hier unten verwenden , um ein Bild einzufügen, Sie können eine Verknüpfung verwenden. Sie können es von Ihrem Desktop hineinziehen. Wenn Sie es hineinziehen, können Sie es direkt in eine bestehende Form stopfen oder eine bestehende Form annehmen und die Füllung von einfarbig in ein Bild ändern . Hilfreich. Nein, ich möchte einige Grundlagen von Fotos behandeln. Dreht es. Wenn Sie darauf klicken, können Sie es drehen, indem Sie nur die Außenseite gedrückt halten. Da ist dieser Schnappschuss , nicht das, was ich will. Wenn man da draußen schwebt, kriegt man die Art der traditionellen Rotation Wenn du die Umschalttaste gedrückt hältst, wird es gesperrt in was ist es? Ein Vielfaches von 15 Grad? Ja, genau das macht es. Oder du entscheidest vielleicht, ich tippe einfach ein. Es muss 180 Grad sein, kopfüber. liegt an dir, du kannst es umdrehen. Dreh es. Boop. Fügen Sie Ihre eigenen Soundeffekte Tun Sie einfach eine letzte Sache und ich möchte Ihnen einige grundlegende Bildbearbeitungen zeigen. Es ist kein vollständiges Bildbearbeitungsprogramm, aber es macht die Grundlagen ziemlich gut. Nehmen wir an, ich möchte ein Bild auf unserem Hintergrund haben. Eigentlich, mach es einfach zuerst auf Basic One. Schauen wir uns das an. Ich benutze diesen hier. Es ist eines der Bilder aus den Dateien und ich möchte, dass Sie hierher gehen und auf das Bild klicken können. Hier drüben hast du die Grundlagen. Sie haben Belichtung, Kontrast, Sättigungstemperatur, Farbton, Lichter und Schatten, nur für den Fall , dass Sie nicht lesen können, und Sie können sie einfach ziehen Wenn Sie die Belichtung verringern möchten, ziehen Sie sie nach links. Erhöhen Sie es. Da hast du's. Ich weiß nicht, wirklich einfaches Photoshop-Zeug, also ist da nicht viel drin. Schwarz und weiß, ziehe die Sättigung nach unten. Wenn Sie es wärmer machen möchten, ziehen Sie es nach rechts. Wenn Sie es kühler machen möchten, ziehen Sie es nach links. Ändern Sie die Temperatur des gesamten Bildes. Wenn Sie mit Bildern aus der Archivbibliothek arbeiten, sind sie völlig in Ordnung und Sie müssen nicht viel mit ihnen machen. Wenn Sie es mit Bildern zu tun , die Sie vielleicht aufgenommen haben oder die von einem Fotografen stammen und die noch nicht retuschiert wurden, müssen Sie möglicherweise etwas mehr damit herumspielen . Ich ziehe das zurück Ich lasse dich mit den Farbtönen, der Temperatur und den Lichtern experimentieren den Farbtönen, der Temperatur und den Lichtern Eine Sache, die ich Ihnen zeigen möchte, ist, dass ich für, sagen wir, oft Grafiken eine Grafik auswähle , die ich verwenden möchte. Nehmen wir an, es ist diese hier. Ich mag es. Ich möchte, dass es ein Hintergrundbild ist. Das Problem dabei ist jedoch, wenn ich diesen Text nehme und ihn darauf klebe und ihn mithilfe meiner eckigen Klammern nach vorne verschiebe. Kannst du sehen, dass es dort im Hintergrund ein bisschen verloren geht? Siehst du, dass es etwas schwer zu lesen ist? Dieser ist ziemlich dunkel. Hier unten ist es sogar besser. Es wird schwierig, Kontakt zu lesen. Was du tun kannst, ist, dass ich das da haben werde. Sie können auf den Hintergrund klicken, auf Füllen und dann auf Bild klicken. Es gibt zwei Dinge. Die Belichtung wird es nur verdunkeln Ich finde, wenn ich etwas in den Hintergrund rücken will , dann sollte es reich sein, aber nur dunkel, damit ich etwas lesen kann. Ich lasse das ein bisschen runter, um es besser sichtbar zu machen, und spiele dann mit Dingen wie den Highlights. Wenn Sie die Glanzlichter nach unten ziehen, werden die wirklich scharfen Stellen entfernt, die beim Text oft verloren gehen Sie können auf Schatten stoßen. Ich finde nur die beiden Bei etwas niedrigerer Belichtung so viel hervorgehoben, wie das Bild aufnehmen kann. Dieser kann ganz nach unten gehen und ich glaube nicht, dass das vom Bild ablenkt Sie könnten die Schatten erhöhen wieder etwas mehr Kontrast hineinbekommen Das macht sie vielleicht etwas wärmer und reicher, weil ihre Brieftaschen und ihr warmes Lederzeug haben Die Sättigung könnte auch etwas ansteigen. Sie können damit herumspielen. Ich finde Belichtung und Highlights nur , um sie in den Hintergrund zu drängen. Mir gefällt nicht, was ich getan habe. Es wird wieder dahin gehen, Sättigung wird zurückkehren. Jetzt ist der Text viel besser lesbar. Nun, eine letzte Sache ist, sagen wir, ich habe dieses Bild hier und ich möchte es vielleicht hier zum Hintergrund hinzufügen Ich könnte es einfach ziehen und los, ich werde gehen, ziehen. Es ist da drüben. Ist es auf meiner Homepage, oder? Ich werde es mit meinen eckigen Klammern neben meiner PK auf meiner Tastatur nach hinten schicken meinen eckigen Klammern neben meiner PK auf meiner Tastatur nach , und das kannst du tun. Perfekt. Daran ist nichts falsch , aber ich möchte Ihnen einen anderen Weg zeigen, nur weil Sie andere Dokumente erhalten, bei denen Sie verblüfft sein werden , wenn Sie das Bild finden. Wir haben es schon gemacht In dem Moment, in dem das ganz klar ist, habe ich meine Homepage und in ist ein Bild ganz hinten . Das ergibt Sinn. Aber wenn ich das lösche, kann ich das Bild tatsächlich zum Homepage-Frame hinzufügen. Wir haben es auch gemacht. Welchem haben wir es angetan? Dieser hier. Wir hatten einen Kreis, weißt du noch, und wir haben die Füllung in ein Bild geändert. Wir machen das Gleiche, aber es fühlt sich komisch an , es mit der Homepage zu machen, obwohl es nur ein Frame ist, aber wir können es tun. Wir werden auf die Homepage klicken. Vergrößern, zweite Schicht, meine Auswahl. Ich würde sagen, ich möchte nicht Vollton füllen, ich möchte mit Bild füllen. Ich werde es von meinem Computer hochladen und das Bild suchen, das für einen Hintergrund ziemlich cool war. Auf einem Mac, wenn du so denkst, wie sieht er sich die Bilder in der Vorschau an Auf einem Mac kannst du die Leertaste drücken. Ich glaube nicht, dass du das auf einem PC machen kannst, vielleicht schon, aber du kannst Leertaste verwenden, um sie in der Vorschau anzuzeigen , oder du hast vielleicht größere Vorschaubilder als Ich benutze diesen hier, diesen Julius Trost öffnen und du wirst feststellen, dass er im Hintergrund ist Jetzt kann ich ein bisschen mit der Belichtung herumspielen. Kannst du sehen, dass es vielleicht ein bisschen seltsamer ist, es ist nicht so schlimm. Aber ich möchte es subtiler machen Ich werde die Belichtung etwas verringern und sie ein wenig nach oben ziehen, meine Highlights finden und sie nach unten ziehen. Sie nehmen ihnen einfach die Schärfe weg und entscheiden vielleicht, dass die Sättigung verringert werden muss. Vielleicht ein bisschen mehr Belichtung. Sie möchten, dass es im Hintergrund ziemlich subtil ist. Ich habe nur eine letzte Sache gesagt. Eine letzte, letzte, letzte Sache ist, du könntest entscheiden, dass mir dieses Bild tatsächlich gefällt. Vielleicht hast du Duplikate davon und sagst, A, ich habe zwei davon Ich will den gleichen Kreis, aber ich brauche ein anderes Bild. Du kannst einfach hier reingehen, auf das Bild klicken und vom Computer hochladen sagen und einfach ein anderes auswählen, dann um 1:00 Uhr ich, um dieses hier zu bekommen und es zu ersetzen. In Ordnung. Das ist eine Menge über Bilder in einem Video. Ich hoffe , das war hilfreich. Ich mache das hauptsächlich, weil es in Figma so viele verschiedene Möglichkeiten gibt , mit Bildern umzugehen, und ich erinnere mich, als ich gelernt habe, dachte ich, Bilder sind komisch, manchmal, manchmal sind sie okay Das liegt daran, dass sie manchmal einfach als Bild hereingezogen werden, was Sinn macht Manchmal handelt es sich dann um Bilder innerhalb einer Füllung in einem Rahmen. In Ordnung. Ich werde aufhören, über Bilder zu reden. Nun, weiter zum nächsten Video. Wir werden mehr Bilder machen. Aber das werden wir im nächsten Video machen, ich werde dich dort sehen. 58. Maskieren und Zuschneiden von Bildern in Figma: A In Ordnung. Dies sollte heißen Wie man aus Ihrer Figma-Designdatei ein wirklich großes Chaos Aber in Wirklichkeit dreht sich alles um Maskierung. Wir werden Formen verwenden, um Bilder zu maskieren , und es gibt drei verschiedene Möglichkeiten Ich möchte Ihnen alle zeigen, nur für den Fall, dass Sie mit den Dateien anderer Leute auf sie stoßen Es gibt Vor- und Nachteile für alle drei. Außerdem werden wir auch Text schreiben. Wir werden Text bekommen. Sie können ein besseres Bild für Ihren Text auswählen. Das sieht furchtbar aus. Aber da sind wir gelandet. Also lass uns reinspringen. Fangen Sie an, es zu tun. Schauen wir uns die drei verschiedenen Maskierungstechniken an. Wir beginnen mit der Vanille-Maske. Ich habe diese benannt. Niemand sonst hat sie benannt, nur ich. Nur um ihnen eine Differenzierung zu geben, damit wir lernen können. Wir beginnen mit Vanilla und importieren dann ein Bild. Nehmen wir an, wir haben dieses importiert. Der Vanille-Crop-Effekt besteht im Grunde nur darin, das Bild einzufügen und es dann hier vom Bild umzuschalten. Es ist standardmäßig nur Füllen, du kannst es auf Zuschneiden umschalten und du denkst, es passiert nichts Was Sie dann tun können, ist den Rahmen zu nehmen und ihn herumzuziehen Wir haben auf den Hintergrund doppelgeklickt und ihn zugeschnitten. Bitteschön Ich verwende die Wörter Crop und Mask synonym, Figma nennt es Maskierung. Um wieder hinein zu kommen, klicken Sie darauf und Sie können auf das Bild hier klicken und es erwacht wieder zum Leben. Standardmäßig ausfüllen. Klicken wir auf Füllen. Das wird es, wenn ich die Größe ändere, solange die Seitenverhältnisse ausgeschaltet sind. Ich kann die Größe ändern und es wird immer versuchen Form zu füllen, die ich gezeichnet oder mit der ich hinterlassen habe Ich werde es auf Crop umstellen, das ist die Vanillefrucht. Sie können entscheiden, dass das Seltsame daran ist, hier den Rand zu sehen. Der Rahmen ist wirklich leicht zu greifen, da er sehr klare Griffe hat. Du kannst ihn herumziehen. Sie können den Rahmen drehen. Das Bild scheint jedoch keine blauen Linien an der Außenseite zu haben. Es hat das Äquivalent. Man kann sie einfach nicht sehen. Also sieh dir das an, ich kann den Rand hierher ziehen und die Shift-Taste gedrückt halten, das skaliert proportional Ich kann das Gleiche mit dem Rotieren machen. Ich erinnere mich, dass ich nur ein bisschen weiter draußen schwebte. Es gibt diesen magischen Drehbereich, und Sie können ihn auch drehen . Klicken Sie darauf und ziehen Sie es, um es zu verschieben. Ich muss meins vergrößern, damit es hineinpasst, damit du das Bild anpassen und es vom Rahmen abheben kannst. Ich frage. Das ist die Vanille-Maske. Bringen Sie das Bild, schalten Sie es auf Zuschneiden um, spielen Sie damit herum. Es gibt die Methode mit zwei Formen. Schauen Sie sich zunächst die Vanille-Version an Schauen Sie sich hier das Ebenenbedienfeld an. Kannst du das sehen? Es ist wirklich einfach. Es ist nur ein Bild mit dem Bildnamen. Im Ebenenbedienfeld ist nichts dran. Ganz klar. Du musst nur daran denken, hier reinzugehen , um es anzupassen. Das ist cool. Die Methode mit zwei Objekten ist also , wenn Sie ein Bild oder Entschuldigung, eine Form und ein Bild haben . Ich werde meins auf die Vorderseite stellen. Wenn ich diese beiden maskieren möchte, muss ich sie nur übereinander haben und beide auswählen. Sie müssen beide ausgewählt haben und hier erscheint ein kleines Symbol mit der Aufschrift „Als Maske verwenden“. Du sagst, das hat nicht funktioniert. Das Seltsame an dieser Maske ist, dass die Form auf der Unterseite sein muss. Ich habe nur die Form ausgewählt. Ich benutze meine eckigen Klammern neben meinem PKey, um ihn nach hinten zu schieben, oder Sie können mit der rechten Maustaste klicken und „Senden an zurück“ sagen Ich muss immer noch beide auswählen, also muss ich jetzt versuchen, sie mir beide zu schnappen, was ziemlich einfach ist, und jetzt muss ich zur Maske gehen Es ist das hintere Objekt , das das Bild auf der Oberseite maskiert. Aber so funktioniert es. Sie können sehen, wie Sie es bearbeiten können, Sie können es auswählen und entweder darauf doppelklicken, um es zu öffnen, oder wahrscheinlich einfacher, besonders wenn Sie lernen, besteht darin, einmal darauf zu klicken. Hier drüben siehst du den Unterschied. Dieses andere Objekt, das war dieses, welches wird an dem da arbeiten. Ich verschiebe es in meinem Lays-Panel nach oben damit es leichter zu vergleichen ist. Das war die Vanilla-Methode, bei der wir einfach ein Bild hinzugefügt und es zugeschnitten Diese hier funktioniert anders. Am Ende haben wir den gleichen Teil, wir haben immer noch eine Maske, aber in diesem Fall ist es eine Maskengruppe mit zwei Dingen darin, meinem Vektor, der unten ist , und meinem Bild oben. Das macht es ein bisschen einfacher, wenn du sagst, ich möchte den Bildschwung ein wenig anpassen. Okay? Ich kann auf dem Bild auswählen und dann erscheinen diese netten kleinen Griffe , und ich kann die Umschalttaste gedrückt halten und sie neu anordnen, herumziehen Wenn ich an dem Rahmen arbeiten möchte, kann ich auf den Rahmen klicken und sagen, ich möchte dich ein bisschen vergrößern und dich vielleicht drehen Du kannst etwas pragmatischer an ihnen arbeiten . Ich weiß es nicht Es ist einfacher, daran zu arbeiten, aber hier im Ebenenbedienfeld ist es etwas verwirrender . Sieht einfach aus, sieht gut aus, aber wahrscheinlich ist es einfacher , damit zu arbeiten. Er sagte, es gäbe drei Maskierungsmöglichkeiten. Es gibt Der dritte Weg ist die Shape First-Maske. Das heißt, du zeichnest einfach eine Form, eine beliebige Form. Ich werde eine Ellipse zeichnen. Es könnte das sein, du hättest eine Flamme zeichnen können, ist nicht wirklich wichtig Aber anstatt das Bild oben zu haben und eine Maske zu erstellen, hast du es ausgewählt und sagst, ich möchte das in ein Bild umwandeln. Was für ein Bild bist du? Ich werde sagen, ich suche mir hier einen aus und ich mache es. Es ist nur eine etwas andere Art als die erste, die Vanille, wo man mit dem Bild beginnt und dann die Kanten abschneidet. In diesem Fall fängst du mit der Form und füllst sie mit einem Bild. Wenn ich es von Füllen auf Zuschneiden umstelle, kann ich im Grunde dasselbe tun. Ich kann mit dem Hintergrund herumspielen. Du kriegst es nicht hin, aber du kannst das Gleiche tun. Wie bei Vanilla, verschiedene Herangehensweisen. Sie werden andere Tutorials finden, in denen Sie sagen, ich dachte, Sie müssten das Bild einfügen und es dann zuschneiden oder bringen Sie eine Form hinzu und fügen es hinzu und schneiden es dann zu? Oder hast du zwei Formen, klebst sie übereinander und maskierst sie dann? Sie sind alle gleich. Weil sieh dir das an. Habe ich noch eine Kopie davon? Hab ich. Ich nehme das und ich kann genau das Gleiche machen wie die Ellipse, ich kann dir sagen Du bist nicht mehr satt. Eigentlich wirst du eine Füllung haben, aber es wird eine feste sein. Nein, ich werde zum Bild wechseln. Ich werde ein Bild auswählen. Ich werde das Scott-Bild wählen. Ich werde den Schlaganfall loswerden und wir landen genau am selben Ort. Ich kann es immer noch anpassen, aber ich habe es hier in den Ebenen, kannst du sehen, dass es anders aussieht. Ich möchte dir zeigen , dass ich daran arbeiten würde. Ich würde sagen, was zur Hölle ist das? Oder du schaust dir das an, wie ist das Bild? Wie komme ich dazu? Nur eine andere Art zu arbeiten. Ich klicke darauf, gehe zu Crop und jetzt kann ich daran arbeiten. Auf die gleiche Art und Weise. gleiche Endergebnis, nur ein paar verschiedene Arten, es zu tun. Vanilla, fang mit dem Bild an. Die Methode mit zwei Formen , bei der wir einfach zwei Dinge überlagern und daraus eine Maske machen Dann die letzte, bei der Sie mit einer Form beginnen und eine Füllung hinzufügen , die ein Bild ist, und es dann zuzuschneiden War es hilfreich? Gehen wir weiter. Lass uns tippen. Wenn ich Tool eintippe, gebe ich meinen Namen ein. Ich werde auf Escape klicken. Ich werde mein Ktol benutzen , um die Größe zu ändern, damit die Schrift schön groß wird Ich nehme mein Textwerkzeug, lasse es auswählen, finde eine schöne schwarze Schrift, schön dick, und ich kann das Gleiche tun. Schau dir das an. Es ist voller Weiß. Schau, stell dir vor, was ich tun könnte. Hmm, ich klicke darauf und gehe einfach, Bild. Du bist schon da Du sagst, das ist nicht schwer. Ist es nicht. Los geht's. Wir haben ein Bild im Hintergrund. Vorher, wenn wir es anpassen wollten , weil in dem Moment, in dem es hieß, füllen zu wollen, was bedeutet, wenn ich ändere gehe zum Textwerkzeug, ändere den Text. Der Text ist immer noch editierbar, was cool ist. Ich werde meinen ganzen Namen eintippen. Du kannst mich Dan nennen und kannst du sehen, dass es anhand der verfügbaren Buchstaben erweitert wird? Es ist also sättigend. Sie können es auf Zuschneiden umstellen und dann sagen, Okay, das kann nicht in meinem Textwerkzeug sein Ich muss in Bewegung sein . Oh, das hat nicht funktioniert. Lass uns hierher gehen. Oh, der Typ. Wie warte ich? Du wartest dort. Ich bin mir nicht sicher. Oh, es geht immer noch um Phil. Habe eine Ernte. Da haben wir's. Ich bin mir nicht sicher , was ich dort gemacht habe. Ich schwöre, ich hatte schon einmal Getreide, aber ich hatte eindeutig keine. Okay, also ich kann mein Bild herausziehen, Shift gedrückt halten, okay, positionieren, wo ich will, okay? Und wenn ich den Typ danach ändern möchte, okay, ich muss das Textwerkzeug benutzen. Und weil wir Freunde sind, kannst du mich Dan nennen. Es gibt ein schreckliches Bild von dem, was wir tun, weil du meinen Text nicht wirklich sehen kannst. Das ist okay. Ich möchte wieder darauf eingehen. Klicke wie zuvor auf die Füllung, und ich kann diese anpassen , um mehr zu finden. Möglicherweise muss ich das Gegenteil von dem tun, was ich zuvor getan habe, indem ich die Shift-Taste gedrückt halte und versuche all die ledrigen Teile in den Vielleicht muss ich mit dem Kontrast herumspielen und ihn ein wenig erhöhen Keine Belichtung, erhöhen Sie es ein bisschen. Okay? Sind die Höhepunkte, bring sie runter, ich muss sie vielleicht raufholen. Oder in diesem Fall die Schatten. Ich möchte, dass sie leichter sind. Okay? Es funktioniert immer noch nicht so hässlich. Du verstehst die Idee. Das sind also vier Arten des Zuschneidens, wenn wir den Text dort am Ende einfügen Ja, ich will das wirklich hier weil ich mich erinnere, dass es wirklich verwirrend Wenn Sie nichts anderes tun, ist es wahrscheinlich am einfachsten, die Methode mit zwei Formen zu verwenden, bei der Sie das Bild und die Form zusammenfügen, sicherstellen, dass das Bild oben ist, wählen Sie beide aus und klicken Sie auf die Masken-Taste. Aber Sie werden auf sie stoßen und sagen, tun Sie das? Wie ändere ich es Du musst nur daran denken, auf das Bild zu klicken, um den Zuschnitt zu ändern . Wenn du mit der Maus darüber fährst, wie wir es im letzten Video gemacht haben, können wir ein neues Bild hochladen, um es zu ersetzen Das ist es. Schrägstrich maskieren Zuschneiden Fertig. Wir sehen uns im nächsten Video 59. Kostenlose Bilder und Plugins für Figma: Dort werden wir uns in diesem Video ansehen, wie Sie kostenlose Bilder erhalten, die Sie Ihren Figma-Projekten kommerziell verwenden können. Ich zeige Ihnen, auf welche Websites Sie gehen müssen , und zeige Ihnen, wie Sie einige der Plugins verwenden Sie sind wirklich einfach. Lass uns reinspringen und es tun. Ich warte darauf, dass dieser geladen wird. Da hast du's. Es ist geladen. Lass mich dir zeigen, wo ich sie herhabe. In Ordnung. Wenn es also darum geht, nach Bildern zu suchen , die Sie in Ihren Dokumenten verwenden können, suchen Sie wahrscheinlich nach , die Sie kommerziell verwenden können. Also, wenn der Kunde sagt, ja, ich liebe es, und du dich dann nach einem anderen umsehen musst , macht das keinen Spaß. Wenn Sie nach solchen suchen, die kommerziell lizenzierbar sind, gibt es zwei wirklich gute Orte für kostenlose. Unsplash.com. Und ein anderes sind Pixel Vielleicht hast du deinen eigenen. Lass mich die Kommentare wissen. Wenn Sie eine andere haben , die Sie verwenden könnten und die Ihnen gefällt und die auch anderen gefallen könnte. Das Coole an ihnen ist, dass, sagen wir, Unsplash, das ich am häufigsten benutze, sie haben eine Menge kostenloser Apps. Diejenigen, die im Moment wenig Plus haben , sind ihre Premium-Produkte. Sie nennen sie Unsplash Plus. Ich vermeide diese, und sagen wir, ich möchte, lassen Sie uns eine Suche durchführen Lass uns gehen, was machen wir, was? Okay? Und du wirst eine Menge Sachen finden, und sagen wir, ich will das, du lädst sie einfach herunter und du kannst sie benutzen. Sie können einen Blick hinein werfen und nachschauen, welche kommerziellen Rechte sie haben , aber Sie werden feststellen, dass alles auf dieser Website unter der Unsplash-Lizenz kostenlos genutzt werden kann. Es ist ziemlich klar Sie können es kostenlos herunterladen. Sie können es kommerziell nutzen und benötigen keine Genehmigung. Eine Quellenangabe ist jedoch willkommen. Du könntest einen Link hinterlassen oder wer auch immer der Fotograf ist, gib ihm einen Gruß. Du kannst nicht gehen und sie dann verkaufen. Überprüfe noch einmal, ob du sie für etwas Seltsames verwendest , aber für den normalen Gebrauch sind Pixel Unsplash großartig Herunterladen von der Website ist eine Sache, die Sie tatsächlich auf den Punkt bringen und einen Stecker installieren Okay, also hier unten wird deins anders aussehen, wenn du das kostenlose Konto benutzt, aber dieses kleine Aktionen-Menü. Du kannst zu Plugins gehen und ich werde kostenlose Bilder eingeben. Auch hier suchst du nach denen, die viele Downloads hatten , viele davon. Ich werde einfach Unsplash eingeben , weil ich weiß, dass es ein Plugin gibt Und du kannst einfach hier drüben klicken, ich werde rennen. Warten Sie eine Sekunde, bis es geladen ist, und los geht's. Ich kann sie einfach anklicken und sie erscheinen einfach . Ich werde das rückgängig machen. Du kannst schon auf eine Form klicken und sie anklicken und es wird sie einfach hineinkleben. Jetzt, wo wir wissen, wie man das Zuschneiden benutzt, wissen wir, wie man hier reingeht und sagt, zum Zuschneiden wechseln , und wir können die Kanten sehen, wir können anfangen, sie anzupassen. Ja, das ist es Das sind kostenlose Bilder in Canva. Sie können entweder die Websites oder das Plugin verwenden Super einfach. In Ordnung. Wir sehen uns im nächsten Video. 60. Erstellen von KI-Bildern in Figma: Dort werden wir künstliche Intelligenz einsetzen, um Bilder von Grund auf kommerziell nutzbar zu machen Diese gab es nicht. Wir haben sie einfach eingetippt und die Maschinen haben sie hergestellt. Danke, Maschinen. Lassen Sie mich Ihnen die Tipps und Tricks zeigen, um sie herzustellen, die richtige Beleuchtung und die richtige Komposition zu finden. Ordnung. Lass uns reinspringen. In Ordnung. Ich wähle die Startseite aus und verschiebe die zweite Taste, um sie zu vergrößern. Ich werde dieses Bild hier ersetzen. Wenn du dieses Bild nicht behalten willst, werde ich sie dort drüben platzieren und ich werde ein Rechteck zeichnen und ich werde tatsächlich einen Rahmen zeichnen. Sie müssen nicht mit einem Rahmen beginnen. Ich will schon. Weil ich möchte, dass es eine bestimmte Größe hat. Welche Größe Sie auch zeichnen, es wird das sein, mit dem die KI es füllt. Okay, jetzt hier unten, das ist eine dieser Funktionen, für die Sie das kostenpflichtige Konto benötigen. Ich bin mir ziemlich sicher, ob du das kostenlose Konto hast, ich bin mir ziemlich sicher, dass du es brauchst, und du wirst dieses verwenden, auf dem steht, mach ein Bild Es ist nicht besser als uns. Deins wird anders aussehen und wahrscheinlich auch anders funktionieren. Jedes Mal, wenn ich Figma starte, ist das ein bisschen anders. Das ist eines der frustrierenden Dinge einem UX-Design-Tool, dass es die UX ständig anpasst Jedenfalls. Ich werde eine Lederbrieftasche auf einem teuren Holztisch eintippen. Sie müssen herausfinden, welche Art von Aufforderung Sie verwenden möchten Das habe ich in meinem Kopf. Ich werde auf Make klicken. Wir werden warten , bis alles passiert. Es passiert in der Cloud und lädt es einfach herunter, sodass es einige Zeit dauern kann. Ich zögere. Ich mag diese Animation wirklich nicht Ordnung. Ich werde sofort damit beginnen, es zu erledigen. Es funktioniert. Ordnung, also haben sie wahrscheinlich noch eine Minute gebraucht , um fertig zu werden. Oh, ich mag es. Dann ist es so, okay , welche Änderungen möchtest du vornehmen? Lass uns hier Änderungen vornehmen. Nehmen wir an, ich möchte eine Vogelperspektive oder eine Ansicht von oben nach unten. Sie können Anpassungen an diesem Ding vornehmen, ich möchte nur, dass es kein Schreibtisch aus Holz ist, sondern vielleicht ein Schreibtisch aus Birke oder ich weiß nicht. Ich kenne nicht viele Holzarten. Aber Sie können nach und nach Anpassungen vornehmen. Ich spiele hier mit den Kamerawinkeln, lassen Sie uns gleich zur Fertigstellung übergehen. In Ordnung, was lässt sich am besten beschreiben? Das ist der, den ich will. Das war das Original. Das ist der neue. Sie können zwischen ihnen klicken und behalten, welche Sie möchten, Sie könnten entscheiden, hell. Worauf habe ich geklickt? Ich gehe zurück. Das ist ein gutes Argument. Ich werde mein Verschiebe-Tool verwenden, auf dieses Bild klicken und erneut auf eine Seite davon klicken. Ich habe es hier ausgewählt. Ich gehe zurück zu meinem Make-an-Image. Okay. Okay, ich habe gerade herausgefunden, dass, wenn du diesen Flow einmal verlassen hast, glaube ich nicht, dass du ihn wieder hineinbekommen kannst. Also werde ich wieder von vorne anfangen müssen. Ich glaube. Wenn du es herausfindest, kannst du es tun. Lass es mich wissen. Es könnte etwas sein, das sie aktualisieren. Es ist eine KI-Beta. Also muss ich das alles noch einmal machen? Also ich mache das aus der Vogelperspektive und ich sage helle Beleuchtung. Du machst es vielleicht anders. Du könntest sagen, du weißt schon, launisch oder du bist vielleicht besser in Film und Fernsehen als ich oder Fotografie und denkst verschiedene Beleuchtungswinkel aus, vielleicht draußen, natürliches Licht, Beleuchtung oben links Du kannst ihm sagen, was du willst. Ordnung. Das ist vielleicht besser. Okay? Also ja, KI, sie ist ziemlich mächtig, die es auf der Welt nicht gab. Okay? Es ist ein bisschen schwierig, Scott Wallets , wir werden tatsächlich physische Produkte haben Aber für Platzhalter oder unterstützende Bilder, oh, genial. Nun, ich könnte das durchgehen und eine Serie davon machen und sagen, mach es mit Nahaufnahme der Nähte und mit verschiedenen Winkeln, unterschiedlicher Beleuchtung, aber du verstehst schon, was ich Das wird diese Oberfläche ändern. Aber ich weiß nicht, LA wird richtig gut. Also die Welt liegt dir zu Füßen. Aber eines der interessanten Dinge daran ist, sieh dir das an Wenn ich einen Rahmen mache , der wie ein geformter Briefkasten aussieht, und ich mache genau das Gleiche, aber ich füge noch ein bisschen mehr hinzu. Mit einer Schreibtischlampe hinzugefügt. Ich werde noch eins zeichnen und wir werden sofort damit beginnen, dass es fertig ist. Ordnung. Ich habe meine Schreibtischlampe. Oh, ich mag es. Würdest du sagen, es ist hier abgeschnitten. Wenn wir hier rüber gehen und sagen wir , wir wollen es zuschneiden, wissen wir, dass wir diese weiße Füllung eigentlich nicht brauchen Es ist nur zum Spaß da. Das hier, dieses Bild. Wenn ich reingehe und sage, ich will, dass es zurechtgeschnitten wird, kannst du das sehen? Es hat ein größeres Bild gemacht, es wurde nicht wirklich abgeschnitten Es hat einfach dieses Standard-Seitenverhältnis hergestellt und es einfach auf das zugeschnitten, was Sie gemacht haben Möglicherweise gibt es noch mehr , die Sie nicht sehen können. Das ist nur etwas, dessen Sie sich im Moment bewusst sein sollten. Geh und ändere diese KI-Schnittstelle. Ich*****. Aber da hast du es Das heißt, Bilder zu erstellen, die mit KI kommerziell nutzbar sind , und die Ergebnisse In Ordnung, deins wird es in Zukunft sein. Die Ergebnisse werden noch besser sein. Ich ***** das Interface und weitere Bedienelemente werden da sein. Wenn es sich stark ändert, werde ich kommen und es wiederholen. Aber hoffentlich ist es nicht zu anders und viel Glück mit der KI Wir sehen uns im nächsten Video. 61. Klassenprojekt 11 - Bilder: In Ordnung, Zeit für das Klassenprojekt. Ich möchte, dass du deine Bilder in dein Design einarbeitest. Okay, also geh zurück zu deinem Briefing und achte darauf, dass du keine Brieftaschen machst Finde deine Bilder heraus. Sie können sie entweder von Unsplash beziehen oder Sie können das KI-Tool verwenden, wenn Sie Zugriff darauf haben, wenn Sie in der Pro-Version sind, und dann damit beginnen, Ihre Startseite auf Ihrem Desktop-Hi-Fi auszufüllen Ihre Startseite auf Ihrem Desktop-Hi-Fi Jetzt werden deine Karten anders aussehen als ich. Okay, also wo ist deins? Vielleicht hast du andere Beispiele gemacht. Vielleicht hast du Kreise anstelle von Rechtecken verwendet , wie ich, oder wie dieses hier, wo die Bilder einen interessanteren Ausschnitt Es liegt an dir, aber ich möchte, dass du es durchgehst und dir die Bilder holst. Ich möchte, dass du damit experimentierst, das Plug-In auch für Pixel oder Unsplash oder irgendetwas anderes Ich habe nichts dagegen. Ich möchte, dass du damit experimentierst. Auch hier gilt: KI, wenn Sie Zugriff darauf haben, vergessen Sie nicht Ihre Persona und Ihr Briefing. Achten Sie darauf, dass Sie Bilder auswählen, die zeigen, wer Ihre Persona ist, und machen Sie einen Screenshot Laden Sie es in den Projekt-Slash Assignments und nehmen Sie uns auch in den sozialen Medien mit, denn es ist jetzt interessant zu sehen, wie denn es ist jetzt interessant zu sehen Projekte aller zu füllen beginnen, mit echten Bildern, Schriften und Es ist die aufregende Zeit. In Ordnung, also geh und füge ein paar Bilder und wir sehen uns im nächsten Video. 62. Was ist Autolayout und Erweiterungsschaltflächen in Figma?: Hallo, alle zusammen. In diesem Video erfahren wir, was ein Autoausgang ist. Und wir werden uns umarmen. Oh ja, das sind wir Schau, er wird alle möglichen Umarmungen machen. Warum ist Umarmen gut mit Auto Outs? Das liegt daran, dass es großartig ist. Ich kann nicht tippen. Komm schon, tippe. Das wird reichen. Okay, Sie werden feststellen, dass die Schaltfläche die Größe des Textes geändert hat, und ich kann coole, kleine Dinge tun. Schau, Squidgy Squidgy und der Text bleibt in der Mitte. Es ist alles gut und ansprechend. Das ist Autouts und deshalb lieben wir es, uns zu umarmen. Ordnung, lassen Sie uns einsteigen. In Ordnung. Bevor wir anfangen, nur keine Warnung. Schlechte Warnungen. Am Abschlussball. Es ist so, dass Aouts die kniffligsten Dinge sind, die du bisher tun wirst Und sie sind knifflig. Aber mach dir keine Sorgen. Ich habe dieses Video oft neu gemacht , um es immer verständlicher zu machen es immer verständlicher zu Das wird also einfach sein, das verspreche ich. Was wir tun werden, ist sicherzugehen , falls Sie es nicht schon sind. Ich bin von vorhin unentschieden. Ich gehe zum Design. In Ordnung. Lassen Sie uns zuerst die leere Seite vergrößern , oder Sie können es in der Zeichenfläche tun Beschreiben Sie die Frame-Tools, den FK. Zeichne ein knopfgroßes Ding und lass uns es füllen. Ich werde einen meiner Stile verwenden, damit du ihn sehen kannst. Okay? Also haben wir einen Rahmen. Nichts passiert wirklich. Ich werde es BTN nennen, und das wird mein kleiner Button sein . In Ordnung, was machen wir jetzt? Was haben wir in der Vergangenheit getan? Das funktioniert nicht für das Rechteckwerkzeug. Weißt du, vorhin sagte ich: Hey, Frames haben besondere Fähigkeiten. Das ist einer von ihnen. Das ist das automatische Layout. Machen Sie das also nicht mit einem Rechteckwerkzeug. Stellen Sie sicher, dass Sie es mit einem Rahmenwerkzeug tun. Schnappen Sie sich mein Textwerkzeug, klicken Sie hier und ich werde jetzt tippen. Nun, das passiert standardmäßig, oder? Ich nehme mein Verschiebewerkzeug, klicke auf die Außenseite und es sitzt einfach da drin, oder? Ich meine, das macht Spaß. Ich wollte die Größe ändern Also muss ich nur den Rahmen auswählen, nicht den Text auf der Innenseite, sondern den übergeordneten Das Elternteil ist das Ding an der Außenseite. Das ist das Kind. Schnapp dir das Elternteil und hier drüben ist ein Button mit der Aufschrift Autout Es ist wirklich üblich , die Schicht A zu benutzen. Und bam, ich arbeite irgendwie Ändern wir jetzt den Text von B Oh , sieh mal, er wird erweitert Meine Capsoc-Taste ist kaputt, also muss ich die Umschalttaste gedrückt halten und die Taste gedrückt Verdiene mehr. Oh, es dehnt sich aus. Schauen wir uns das genauer an , weil es nicht ganz die Größe ist, die ich mir wünsche. Ich werde auf das übergeordnete Element klicken und es uns ansehen. Siehst du dieses Symbol hier? Wenn ich das O herausnehme, siehst du, das ist es, was wir normalerweise sehen. Das ist das Rahmensymbol. Rückgängig machen, wiederholen, rückgängig machen Sie können das Symbol, den Hash und dann dieses neue Symbol sehen , das auf eine automatische Übertragung hinweist Es macht das magische automatische Zeug. Wir haben auch ein paar Umarmungen im Gange. Wenn Sie die Wörter Umarmung nicht sehen können, müssen Sie die Ansicht möglicherweise ein wenig vergrößern Aber was passiert, ist, dass der Elternteil alles innerlich umarmt Das ist es, was sein Ding macht. Was wir tun wollen, ist, wenn du mit der Maus darüber fährst, siehst du diese kleinen Hashes erscheinen Das ist die Polsterung, sie ist ungefähr in der Mitte und sie wurde vom Elternteil umarmt und durch die Polsterung von den Kanten ferngehalten . Die Standardeinstellung ist genau die Größe, in der Sie die Größe gezeichnet haben. Also, was wir machen werden, ist hier drüben, da steht Polsterung. Sie werden auch das Layout-Panel bemerken. Das automatische Layout-Panel war hier auf Ihrer Eigenschaftenseite neu , es war vorher nicht da. Es gibt Ihnen einige Optionen. Was wir tun werden, ist die Polsterung für links und rechts zu sagen . Das ist der erste Ich mache 24 und 18, oben und unten. Das ist eine wirklich übliche Größe. Vielleicht ist es gut, ein Vielfaches von Acht zu verwenden. Da hast du's. Wir können es ändern. Gehen wir zurück, um jetzt zu kaufen. Inzwischen wird die Größe der Schaltfläche geändert. Das Beste daran ist, dass es einfach in der Mitte schwebt. Das ist eine Schaltfläche , deren Größe an den Text auf der Innenseite angepasst wird an den Text auf der Innenseite Wenn Sie die Größe der Schaltfläche ändern müssen, wenn ich auf „Halten“ klicke und sie ziehe, wird das Umarmen unterbrochen Es gibt eine Umarmung für links und rechts und für oben und unten Wenn ich es so ziehe, wirst du feststellen, dass es eine feste Größe hat und sich immer noch oben und unten umarmt, aber die linke und rechte Seite haben jetzt Ich habe beschlossen, dass alle meine Schaltflächen dieselbe Größe haben werden, weil sie einen Stapel benötigen Könnte entscheiden, dass sie 200 Pixel groß sein werden. So könntest du es machen. Das Gute daran ist, dass man auf der Schaltfläche den Text sehen kann, der sich nach innen erstreckt. Wenn Sie möchten, dass es zurückgeht, können Sie hier sehen, dass dort die Größenänderung steht. Sie werden feststellen, dass dieser dort eine Umarmung hat. Schau, ich kann das fallen lassen und sagen, geh zurück, nicht repariere, womit es automatisch umgeschaltet wurde Lass uns nochmal Inhalt umarmen. Es wird versuchen, sich rundum so fest wie möglich an den Text zu drücken rundum so fest wie möglich an den Text zu Wenn ich die Polsterung entferne, wird es etwas klarer. Ich werde versuchen, es komplett zu umgehen. Aber wenn wir ein bisschen Polsterung hinzufügen, wie 24 und 8, wird es versuchen, sich zu umarmen, aber es wird die Polsterung respektieren Andere Dinge, die Sie vielleicht abschrecken sind dieser Text und das Innere Weil ich einmal geklickt habe, habe ich automatisch eine Größenänderung der automatischen Breite vorgenommen Wenn ich, sagen wir, feste Größe sage, wenn ich es zeichne und das mache, dann funktioniert es, Sie werden sich das fragen Warum ist der Text so hoch Ich habe gesagt, dass es dieser Elternteil hier sein soll. Schau, es ist so eingestellt, dass es sich umarmt, umarmt, aber es umarmt nicht Ich habe nur einen Abstand von 24 Pixeln , aber er ist größer Das liegt an dem Textfeld. Wenn ich doppelklicke, wird es auf diese feste Breite oder automatische Höhe eingestellt . Gehen wir hier zu der ersten Option über, die Autowidth ist. Das Textfeld selbst hat automatisch die richtige Größe und der Elternteil umarmt sich, weil er seine Kinder mag Das ist automatische Ausgabe. Es macht viele andere Dinge. Aber im Moment denke ich, dass das eine gute kleine Einführung in Audi-Outs Und wenn Sie es auf eine bestimmte Größe umstellen müssen , ziehen Sie es einfach Okay, und wenn du zurückgehen müsstest, stelle es wieder auf Umarmen um. Okay. Hoffentlich war das nicht so schlimm. Autolauts sind in Figma sehr mächtig. Ich werde jetzt meinen Eckenradius auf acht einstellen, und ich möchte zuhören, zur Eckenglättung übergehen, nur um, ich weiß nicht, mehr IOS daraus zu machen Das ist alles. Das ist eine Schaltfläche für das automatische Layout in Figma Noch eine Sache: Wenn Sie das Rechteckwerkzeug verwenden, haben Sie nicht einmal die Möglichkeit es in ein automatisches Layout umzuwandeln Möchte es nicht tun, also musst du mit einem Frame beginnen. In Ordnung, das ist es wieder. Das letzte Finale. Wir sehen uns im nächsten Video. 63. Klassenprojekt 12 - Schaltflächen: In Ordnung, es ist Zeit für das Klassenprojekt. Ich möchte, dass Sie die Schaltflächen, die Sie zuvor erstellt haben, zusammenbinden, Sie vielleicht mit dem Rahmen oder dem Rechteck gemacht haben, und neu beginnen und die Schaltfläche für das automatische Layout erstellen. Ich möchte, dass du drei davon machst. Es werden zwei auf der Homepage sein. Ich möchte, dass das die Knöpfe sind, die sich umarmen. Die, die sich beim Tippen ausdehnen. Und dann möchte ich, dass du auf der Checkout-Seite eine Kaufschaltfläche erstellst. Und ich möchte, dass dies eine Schaltfläche mit fester Breite ist. Okay? Das bedeutet, dass es sich nicht umarmt oder ausdehnt Es ist speziell 250 mal 50 Pixel groß. Ich zeige es dir. Also diese beiden Buttons hier, okay, die tippen und erweitern und dieser hier auf unserer Bestätigungsseite eine bestimmte Höhe und Breite. Wir werden das später im Kurs verwenden. Jetzt wurde Figma so geändert, dass es standardmäßig viel einfacher ist. Dinge, auf die Sie in Bezug auf Probleme stoßen könnten , sind zuallererst, denken Sie daran, dass Sie kein Rechteck verwenden können, Sie können keinen Weg finden, es in ein automatisches Layout umzuwandeln Okay. Wenn ich einen Frame mache, ist es einfacher, ein Autout zu erstellen Es hat eine Farbe, aber das ist okay. Ich kann das automatische Bild sehen. Die Dinge, die dir Probleme bereiten könnten, sind hier drüben. Möglicherweise haben Sie den Inhalt so angepasst, dass er den Inhalt umarmen muss, sowohl oben als auch unten für die Schaltfläche zum Umarmen, die erweitert wird, und die andere ist Möglicherweise haben Sie jetzt in meinem Textwerkzeug eine Ausrichtung oben links Lassen Sie uns es tatsächlich einfärben. Lass uns voller Farbe gehen. Lass uns mein Textwerkzeug für den Tiki nehmen. Ich werde es eintippen, eintippen. Die andere Sache ist , dass Sie die Autout-Optionen nicht finden werden, wenn Sie mit dem Typ arbeiten Nicht das Kind, Sie müssen mit einem übergeordneten Frame arbeiten Wenn es nicht auch da ist, schau mal hier drüben nach. Ist es in dieses Autu-Symbol konvertiert oder ist es immer noch ein Frame? Wenn es sich immer noch um einen Frame handelt, klicken Sie darauf, um ihn automatisch zu Dann sollten Sie diese Optionen erhalten Umarme, umarme dich, was die Ausrichtung angeht, besonders bei deinem Modell mit fester Breite, könntest du am Ende etwas haben, das vielleicht oben links ist Sie können diese Ausrichtung hier sehen. Die Standardeinstellung ist jetzt zentriert, das war nie der Fall. Das ist eine Sache, die dich verwirren könnte. Das andere ist die Polsterung links und rechts. Für einen gedehnten Knopf wie diesen hier, den ich hier machen möchte, ist das nicht wirklich wichtig, aber es spielt eine Rolle, wann Sie möchten, dass er sich umarmt Wenn ich ihn umarme und ich ihn umarme und die Polsterung auf Null und Null gesetzt ist, dann die Polsterung auf Null und Null gesetzt ist und Null Wenn ich das für diesen Button mache, ist das eine Denken Sie daran, dass sie einfach auf „ Fest“ eingestellt ist. Ich habe es auf 250 gesetzt. Wenn ich die Polsterung links und rechts auf acht reduziere, merkst du, dass sich das nicht wirklich ändert? Die Polsterung ändert sich, aber weil ich eine feste Breite habe, ist das nicht wirklich wichtig Wenn ich 120 draus mache, Oh, machen wir 250 draus Es macht gar nichts. Pang spielt keine Rolle Auf einer festen Box. Da hast du's. Also mach deine Knöpfe und ich möchte, dass du mir einen Screenshot von nur dieser Gruppe hier schickst. Also steht es in deinen Übungsdateien. Schicken Sie mir die Gruppe hierher. Ich werde nicht überprüfen können, ob deine Knöpfe funktionieren oder nicht. Lass uns in den Kommentaren wissen, ob du Probleme stößt und ob du sie behebst, und schau, ob du die Fragen anderer beantworten kannst. Wir werden uns über alle Probleme informieren, auf die du gestoßen bist. Sie ändern die Funktionsweise von automatischen Layouts , um sie einfacher zu machen. Das war früher ein wirklich kompliziertes Video, um das zu lernen. Ich bin mir sicher, dass es immer noch einige Macken und ich werde die Kommentare überprüfen Ordnung. Mach ein paar Knöpfe. Wir sehen uns im nächsten Video. Oh, eine letzte Sache. Du musst das nicht in den sozialen Medien sehen, weil jeder die gleichen Buttons haben wird. Ich wollte nur sagen, inzwischen und mehr in verschiedenen Farben. Nicht sehr aufregend. Laden Sie sie auf jeden Fall in den Projektbereich hoch, und wir werden Ihre Buttons etwas später in einem vollständigeren, vollständigeren und fantastischeren Design sehen etwas später in einem vollständigeren, vollständigeren und fantastischeren Design Das ist es. Wir sehen uns im nächsten Video. 64. Automatisches Layout für die Navigation mit Abstand in Figma: Eins. In diesem Video werden wir Auts verwenden Gleiche Funktionen wie im letzten Video, aber wir werden mehrere Dinge innerhalb eines Louts verwenden , weil es so cool genug Ich kann Dinge bewegen. Es hat eine Polsterung an der Außenseite , die ich wie unseren Knopf anpassen kann Sie können sehen, dass die Oberseite und die Unterseite jetzt 50 sind. Es ist riesig. Alles passt sich an. Ich kann mit einer Polsterung spielen Ich kann mit einer Lücke dazwischen spielen. Ich kann zwei Pixel draus machen, richtig eng. Ich kann sagen: Okay, ich brauche diesen Stapel nicht. Ich möchte, dass es stimmt, und ich werde den Abstand wieder vergrößern Wir werden es auch mit dieser Schaltfläche machen , wo wir sagen: In Ordnung, es ist eine Schaltfläche, die erweitert wird, aber sie hat auch ein Symbol. Das Symbol kann auf beiden Seiten sein und es dehnt sich aus und macht coole Arooudy-Sachen Ich liebe Auto Outs. Sie sind kompliziert, wenn Sie mit allem noch nicht vertraut sind. Keine Sorge, wir werden es in diesem Kurs ein paar Mal machen , aber sie sind zu praktisch. Ordnung, lassen Sie uns einsteigen und automatische Abstände in unserer Navigation einstellen. Infigm Oh. In Ordnung. Um zu beginnen, habe ich ein paar Textfelder mit Texten darin gezeichnet. Das ist nur eine Linie mit dem Linienwerkzeug, und ich habe diese. Es ist nicht wirklich wichtig, wo sie sind. Ich werde sie nur zum Spaß hin und her bewegen. Es müssen separate Boxen sein damit all die körpereigene Wirkung entfalten kann. In der Vergangenheit haben wir zuerst einen Rahmen eingefügt, dann Text eingefügt und ihn dann in ein Autout umgewandelt Sie können direkt zur Sache kommen und all das auswählen Und wenn ich sage, sei ein Autolout, musst du vielleicht auf und ab scrollen, das wird im Moment ziemlich umfangreich Halten Sie Ausschau nach dem Layout-Panel. Also habe ich sie alle ausgewählt. Wenn ich hier auf diese Schaltfläche klicke, wird es automatisch in einen Frame für uns zusammengefasst und dieser Frame wird in Auto umgewandelt. Achten Sie hier im Ebenen-Panel darauf. Ich werde auf die Schaltfläche klicken. Ich weiß nicht, warum ich diese Geräusche mache Es hat es in einen Rahmen gesteckt. Es heißt Frame 19. Ich nenne es Nav und diesen Frame in ein Auto Loud umgewandelt. Du kannst es immer noch andersherum machen. Sie könnten einen Rahmen zeichnen und diesen Text darin einfügen und ihn dann in eine automatische Ausgabe umwandeln. Es spielt keine Rolle. Es versucht zu erreichen dass ihr alle mittendrin seid. Meins ist auf der linken Seite, versucht es einfach automatisch. Mach dir darüber im Moment keine Sorgen. Schauen wir uns einige der Vorteile für den Autoout an. Eines der Dinge, weil es ein Rahmen ist, kann ich das übergeordnete Element auswählen und sagen, ich möchte, dass das übergeordnete Element, Scrollen, Scrollen, Scrollen die Füllfarbe einer meiner Sekundärfarben hat Füllfarbe einer meiner Sekundärfarben Es ist genau wie der Button. Der Button hier, wir haben das Gleiche gemacht, außer dass wir eine Menge Dinge darin haben. Einer der Vorteile dieses Buttons ist, dass wir Polsterung hinzufügen können Suchen wir nach der Polsterung: Scrollen, Scrollen, Scrollen. Da ist es, ich werde 16 und acht setzen. Nun, du hast mich vielleicht in einem anderen Video gesehen. Ich habe vergessen zu erwähnen. Ich habe einfach getippt. Kannst du sehen, ob ich nur mit Tabs durch das Menü gehe? Ich mache das sehr oft 24 Tab 16, um Zeit zu sparen. Du sagst, was ist damit passiert? Es hat funktioniert. Jetzt ist es nicht mehr. Es gibt ein paar Dinge, die wir tun müssen. Lassen Sie uns die Dinge überprüfen , die uns Probleme bereiten könnten. Zuallererst, der Elternteil, der Nav, ist er bereit, sich zu umarmen? Umarmt es alles in sich? Es ist nicht auf eine feste Breite eingestellt. Siehst du, dieser umarmt sich, dieser nicht. Ich würde sagen, du umarmst bitte alles in dir, und das könnte Normalerweise tut es das. Könnte ein anderes Problem damit haben, wie Sie die Textfelder erstellt Wenn ich ein Textfeld erstelle und es ziehe und in Home eintippe, haben Sie vielleicht die Angewohnheit, das von anderen Programmen aus zu tun, und Sie duplizieren Es hat eine feste Breite oder es könnte eine automatische Höhe sein. Damit das alles ansprechend und gut ist, musst du es auf diese erste Einstellung einstellen, das ist automatische Breite, los geht's. Das bedeutet nur, dass es keine feste Breite ist. Ich werde auch expandieren und mich zusammenziehen. Das müssen Sie vielleicht durchgehen und das überprüfen. Hier ist auf feste Höhe eingestellt. Gehen wir zu diesem. Dieser Typ hier, ich möchte auch die automatische Breite haben. Dieser Typ hier und dieser Typ hier. Das ist kein Text, also müssen wir uns darüber keine Gedanken machen. Es ist nur eine Zeile. Wir haben eine Schachtel mit Polsterung gemacht. Hervorragend. Einige der anderen Vorteile eines automatischen Layouts sind die Neuanordnung Zum Beispiel intelligente Auswahlen und Aufräumen. Was wir tun können, ist zu sagen, ich will, dass du da oben Ich musste überhaupt nicht auswählen , um eine Gruppe wie Smart Selection zu erstellen . Ich kann es einfach verschieben. Ich kann meine Harke benutzen , um runter, runter zu fahren. Ich kann es duplizieren, wie ich es zuvor getan habe . Befehl oder Steuerung D. Okay? Ich füge noch einen hinzu und der automatische Ausgang wird erweitert und zusammengezogen. Also toll für Menüs und Listen. Sie können den Abstand ändern, indem Sie entweder den Mauszeiger darüber bewegen. Sie können es einfach ziehen oder hierher ziehen, Sie können etwas spezifischer sein. Das ist die Lücke hier. Die Lücke trat auf, als wir den Knopf gedrückt haben, aber nichts, es gab keine Lücken. Also mache ich mein Vielfaches von acht und ich werde 24 machen Nett. Lass es uns umdrehen, um es zu tun. Ein weiterer Vorteil für den Auto-Out. Nehmen wir an, wir haben dieses für unser mobiles Design, aber wir wollen dieses, ich werde ein Duplikat davon für unsere Homepage machen ein Duplikat davon für unsere Homepage Kannst du hier oben den Fluss sehen? Es wurde standardmäßig eine Vertikale gewählt, weil es neu ist. Ich wollte horizontal gehen . Ah. Und zwar. Und was ich hier tun könnte, ist diesen zu löschen und eine Leiste hinzuzufügen , die irgendwie rauf und runter ist. Nehmen wir also das Linienwerkzeug. Ich werde diesen zeichnen. Ich werde sichergehen, dass es ein Pixel ist. Es ist wahrscheinlich ein bisschen groß. Also werde ich meine 24 machen. Es geht zurück zum Move-Tool. Und was ich tun kann, ist es einfach da rein zu werfen. Schau, großartig eh. Ich liebe das wirklich. Wirf es einfach in den automatischen Ausgang und es wird sich irgendwie anpassen. Ich habe eine bestimmte Breite minus gemacht. Ich werde entscheiden, dass ich eigentlich nicht möchte, dass es eine feste Breite hat. Entschuldigung, ich möchte, dass es eine Umarmung ist. Jetzt umarmt es sich und es gibt mir die Flexibilität den Text zu ändern und alles Wenn Sie anfangen, die Vorteile von Auto Outs zu erkennen, könnten Sie das einfach oben anordnen Sie müssen keinen Auto-Out verwenden. Ich könnte einfach ein Rechteck mit Text auf der Oberseite sein und du bekommst die Links zum Laufen, es wird immer noch perfekt für ein Portfolio funktionieren, aber du wirst viele Vorlagen anderer Leute bekommen und sie werden geordnet und du wirst nach einer Weile ausflippen, du wirst auch anfangen, automatische Outs zu verwenden, weil du denkst, es ist einfach einfacher, schnell zu einem Eine Bestellung aufgeben. Das Tolle daran ist genau das gleiche Prinzip gilt, wenn ich sage, ich werde das rauskopieren, also gehe ich hier hin, ich habe es kopiert und eingefügt und bin wieder hier gelandet Ich werde es herausziehen. Ich will mir das schnappen. Ich werde eine Ikone reinbringen. Lass uns hierher gehen. Gehen wir zu den Icons, Confify, holen wir uns einen Home-Button Jemand ist zu Hause. Ich habe gewonnen. Welcher? Nimm einen runter, nimm einen , den einen, runden. Mir machen all diese Größen nichts aus. Ist es gerade erschienen? Ich wollte es nicht in die Länge ziehen. Hier ist es da. Wie groß ist es 24 mal 24? Klingt gut. Ich werde sie anordnen. Eigentlich muss ich das nicht. Schließen wir es. Lasst uns die beiden schnappen. Ich werde es in einen Auto-Out umwandeln , der es in einen Frame wirft und daraus auch ein Auto macht Du sagst, oh, es macht das Huggy-Ding. Nochmal, ich kann jetzt runtergehen , damit Sie sehen können, was ich mache Gehen wir zu meinen aktuellen Farbmustern. Gehen wir Das ist praktisch. Kannst du sehen, dass ich die Füllung auf das Elternteil geändert habe? Nennen wir diesen einen Home-Button. Okay, nennen wir es BTN Home. Wir geraten hier ein bisschen in eine Tangente. Ich hatte das nicht geplant, aber ich denke, das ist ein weiteres gutes Beispiel Okay? Ich habe das ausgewählt, das Elternteil. Es ist draußen. Es sind ein paar Dinge drin. Die Dinge, die ich ausgewählt habe eine Grundfarbe und da ist etwas Schwarz drin. Ich werde sagen, dass alles, was in meiner Auswahl schwarz ist , jetzt weiß sein wird. Cool. Langsam merkst du, dass du sagst , oh, wir machen einen Knopf. Gehen wir und fügen unserer Taste etwas Polsterung hinzu, also ein bisschen Polsterung, 16 und 8. Fügen wir abgerundete Ecken hinzu , weil ich in sie verliebt bin. Du sagst, oh, das gefällt mir. Die Lücke dazwischen. wir auch acht. Kannst du sehen, wie es schrumpft Das. Das ist eine Home-Taste mit einem Symbol. Schau dir das an. Wenn ich hier auf das Home-Symbol klicke, kann ich sagen, ok. Es bewegt sich. Das werde ich rückgängig machen. Und wenn ich das in etwas anderes ändere. Die Schaltfläche wird erweitert, das Symbol spielt mit. Wir haben hier im Grunde genau das Gleiche gemacht. Dies ist ein automatischer Ausgang, den wir für ein Menü verwenden. Der Button ist derselbe, den wir beim letzten gemacht haben. Aber weil wir mehrere Dinge da drin haben, haben wir diese nette Art , Dinge zu verschieben Es ist ein bisschen flexibler. Es dehnt sich aus und schrumpft. Wir können gut mit den Abständen herumspielen. Wir müssen ihn nicht anordnen und über ein paar Pixel ziehen und ihn dann messen. Alles wird über das Autolayu erledigt. Brechen Sie ein Audit aus, klicken Sie einfach erneut auf die Schaltfläche und jetzt ist es wieder ein Rahmen, der zufällig ein Symbol mit Text enthält, und ich kann Dinge tun, aber er hat einfach all seine Vorteile beim automatischen Layout verloren. Ich kann es jetzt einstellen, ein automatisches Ergebnis erstellen. Ich möchte meine Polsterung wieder auf acht ändern und wir sind wieder im Geschäft Ich hoffe, Sie beginnen, die Vorteile von Autolouts zu erkennen. Eine Sache, die einigen Leuten Probleme bereitet hat, als ich dieses Video das letzte Mal gemacht habe , ist, dass sie es kopiert und eingefügt haben und es dann draußen gelandet Weißt du, es geht nicht rein. Es ist ziemlich einfach, es hineinzuziehen. Aber manchmal sind da drüben, QC, meine Funktionen und da ist das Navi, an dem ich gerade arbeite Du kannst es einfach hineinziehen. Sie können dies auch zum Nachbestellen tun. Wenn Sie möchten, dass die Funktionen unter dem Preis liegen, ändern Sie sie hier und sie werden im Menü hier aktualisiert So oder so. In Ordnung. Ich hoffe, das war hilfreich. Was nützt Abstands- und Navigationskram zu machen. Ordnung. Wir sehen uns im nächsten Video. 65. So verwenden Sie Einschränkungen in Figma: Hallo zusammen. In diesem Video werden wir uns etwas ansehen, das als Einschränkungen bezeichnet wird. Im Grunde werden wir das am Ende schaffen. Sie sehen, die Navigation bleibt oben rechts, das Logo bleibt dort, kann Sie bewegen. Alles ist das, was wir Responsive nennen. Sie werden innerhalb von Figma als Einschränkungen bezeichnet. Ich werde ein paar verschiedene Levels machen. Es wird der einfache Modus sein. Das ist alles, was ich wirklich möchte, dass du tust. Das ist das Wesentliche. Mittelschwer und gegen Ende superschwer , nur für die Leute, die dazu in der Lage sind und damit wir es früh machen können und wir werden es später im Kurs noch ein paar Mal machen später im Kurs noch ein paar Mal wenn Sie einige der komplizierteren Teile nicht verstehen. Aber lass uns jetzt alles machen. Lass uns reinspringen. In Ordnung. Stellen wir es zunächst auf den einfachen Modus. Ich habe gerade alles nach unten verschoben. Ich habe eine Ellipse gezeichnet und das Logo von der anderen Seite eingefügt Einschränkungen wurden bereits angewendet. Du musstest nicht einmal fragen. Dies steht für unsere Navigation oben rechts. Ist ein kleiner Punkt, damit du die kleinen Punkte hier siehst? Diese Punkte sind die Einschränkungen. Es ist auf die Spitze und auf dieses magische Land hier links beschränkt auf dieses magische Land hier links Nicht überall, nur zufällige Größe. Eigentlich ist es die Obergröße hier drüben. Kannst du links und oben sehen? Wenn ich die Größe ändere, versuche ich einfach, die linke Seite zu benutzen. Was ich sagen will ist, Hey, Kumpel, ich möchte, dass du auf der rechten Seite bleibst Sie können entweder das Drop-down-Menü oder dieses Menü hier verwenden . Kannst du sehen, dass es beides ändert? Ich möchte, dass Sie oben und rechts als Bezugspunkt verwenden . Auf diese Weise kann ich sagen, dass es ein Kästchen gibt, was mit dem Punkt passiert. Schau, er bleibt. Er ist klebrig und er wird die gleiche Entfernung haben. Es ist wirklich nützlich. Das rückgängig machen. Toll für Top-Navis. Schauen wir uns auch den Typen hier an. Sie haben Ihren vielleicht nicht genauso gemacht, aber das ist nur ein gutes Beispiel, das ich Ihnen zeigen möchte. Wenn ich die Größe dieses übergeordneten Rahmens, dieser Karte, ändere, beobachte, was passiert Zuk, aber wenn ich dich sage, kleiner Plus-Knopf. Ihr Zwang ist nicht links , weil das bei mir nicht funktioniert, sondern rechts Dann schnappe ich mir wieder den übergeordneten Frame. Es heißt Karte eins und ich wiederhole es. Juju. Aha. Du sagst, wer? Eigentlich ist das ziemlich cool. In Ordnung, das ist Level eins. Wir sind bereit, zu Level zwei zu gehen. Es ist nicht viel schwieriger. Es ist wie Medium. Deiner macht es vielleicht nicht, aber schau mal. Ich möchte dir zum Beispiel eine kaputte geben, weil es passieren wird. Kannst du sehen, wie meine Logos komische Sachen machen? Dieses Portemonnaie hier hat eigenes Oberteil und es ist links und es geht hierher. Das Wort Scott geht hier ein bisschen weiter. Du siehst, dieser Typ hat seine eigene Linke. Das Gleiche gilt für diesen Typen, es geht noch ein bisschen weiter. Deshalb machen sie alle unterschiedliche Dinge. Der einfache Weg, das zu umgehen, ist zu sagen: Hey, Leute, ich möchte euch zu einer Einheit machen und euch alle dazu bringen, dasselbe zu tun. Der Moment, in dem es sich um separate Teile handelt. Ich kann dich sagen, mein Freund. Ich klicke mit der rechten Maustaste. Ich werde sagen, du könntest es gruppieren oder rahmen, es ist nicht wirklich wichtig, aber Rahmen haben mehr Magie. Gehen wir davon aus, dass die Magie standardmäßig oben und links ist. Im Moment geht es bis hierher. Wenn du es näher an den Rand bringst, geht es, meinst du die linke Seite? Das wollen wir für unser Logo. Ich werde sagen, schauen wir uns das an. Da, du bist bereit, Juuchu, wenn ich auf diese Seite gehe, sieh mal, Uji Ich bin mir nicht sicher, woher das Geräusch kommt. Krug. Jedenfalls sind das Einschränkungen Sie können es nach unten einschränken Lassen Sie uns das für diese Schaltfläche hier tun. Ich werde das kopieren. Ich gehe hier rüber und ich nehme ein Rahmenwerkzeug, ich nehme ein iPhone 16, richte es auf, füge diesen Typen ein und ich sage, sieh zu, dass die Standardeinstellung für ihn oben und unten ist. Aber nehmen wir an, Sie möchten, dass das hier immer an der richtigen Stelle ist. Es wird nicht funktionieren. Handy in einer anderen Größe, weg. Was ich sagen kann, ist, dass du, mein Freund, unten und links bist. Also, sieh dir das an? Chuk Chuk. Er steckt am Boden fest Andy? Schau dir das an. Links und rechts. Es ist immer noch nicht in der Mitte. Es bleibt links hängen. Stellen Sie sich vor, es gäbe hier einen, der nicht nur links oder rechts, sondern links und rechts wäre. Schau dir das an. Du bist jetzt da unten fixiert. Schau uns an. Wir machen es. Das sind Einschränkungen, und das ist die mittlere Version. Bereit für die schwierige Phase? Wir werden diesem ganzen Chaos einen Autoausgang hinzufügen. Schalten Sie aus, wenn Sie schon voll sind. Was ich machen werde, ist, ich habe noch ein paar Knöpfe hier unten, dich hier oben platzieren. Ich habe hier oben mehrere Objekte für meine Navigation. Und lassen Sie uns standardmäßig einen Blick darauf werfen, Jug Jug. Die lila funktionieren . Die anderen Typen machen allerlei Wahnsinn. Genau wie das Logo kann ich dich sagen . Ich werde sie zuerst aufräumen Vielleicht richten Sie sie aus. Ich werde sie zu einem Rahmen hinzufügen. Ich werde sagen, diese Auswahl einrahmen. Standardmäßig geht es nach oben und links, aber ich sage, ich will, dass du der Richtige bist, Kumpel. Jetzt haben wir diese Navigation , die viele Dinge enthält , die sich bewegen und eine Verbindung nach oben herstellen. Wir führen gerade die Navigation durch, aber Sie werden viele Beispiele wie diese Plus-Schaltfläche finden , bei denen Sie manchmal Gruppen benötigen um sich an einen Bereich zu halten. In Ordnung. Maximaler Schwierigkeitsgrad. Bist du bereit? Ich nehme mein Frame-Tool und wir machen oben eine Navigation. Das wird schwierig. Sollte es wahrscheinlich nicht enthalten. Ich werde es für die wenigen von Ihnen hinzufügen, die es mögen. Das tut gut. Wenn der Geist geschmolzen ist, ist das gut. Einschränkungen werden dir Probleme bereiten , wenn du nicht weißt, dass sie da sind, vor allem, wenn du neu bist, die Arbeit anderer Leute zu benutzen . Vielleicht musst du sie einfach durchgehen und fragen: Okay, was ist los Einschränkungen, auch wenn Sie nicht wissen, in welche Richtung sie gehen, fangen Sie einfach an, sie zu überwinden, und ich versuche es Ich versuche es rechts. Ich versuche es mit einer Waage. Sie geben Ihnen vielleicht das gewünschte Ergebnis weil der Designer vor Ihnen und der Vorlage vielleicht ein Durcheinander mit ihnen gemacht hat , um hilfreich zu sein, aber es hilft Ihnen nicht. Ich habe standardmäßig eine Navigation gezeichnet, weil ich sie über meinem Logo gezeichnet habe. Ich werde den Dingen Namen geben, meinem Logo und meinen Kreisen. Hier ist ein Rahmen, sie sind alle drin. musst du vielleicht deinen reinziehen, wenn du nicht arbeitest, ich werde ihn auffüllen. Ich werde gehen. Eigentlich gehe ich zu meinen Farben. Ich werde den benutzen. Nein, das ist hässlich. Ich gehe zu dem. Mein Logo ist nicht zu sehen, also werde ich auf das Logo klicken. Das ist nicht der schwierige Teil. Das ist Herumspielen. Lila kann nicht rot sein Also mit seiner Auswahl. Alles in diesem Rahmen, da sind all die ausgewählten Farben, die ich habe. Ich möchte das Violett bitte auf Weiß umstellen. Ich werde es verschieben, damit es besser passt. Ich möchte, dass ihr ein bisschen vorbei seid. Lass uns einen Blick darauf werfen. ist diese Navigation wirklich cool. Wenn ich es mir schnappe und was mache, haben wir ein Telefon, machen wir eine Tablet-Version. Sagen wir UR iPad Mini. Wenn ich das einfüge und es jetzt für diesen anderen Job kleiner machen muss , kannst du sehen, sieh uns an. Wir haben Sachen gemacht. Wir haben eine Navigation erstellt , die auf verschiedenen Seiten ausgeführt und skaliert werden kann. Alles kommt in die richtige Position, super praktisch. Das ist der maximale Schwierigkeitsgrad. Nein, ist es nicht. Es gibt ein extra schwieriges Level. Wenn wir Autoouts lernen. Werden sie funktionieren? Oh nein, es gibt zwei extra harte Level. Erstens könnte das genauso gut ein Autoout sein. Es wird nicht viel daran ändern , außer dass ich coole Sachen machen kann , bei denen ich hineingehen und sie bewegen kann. Okay, so sind Ordnungslayouts praktisch. Ich kann viel einfacher mit der Polsterung herumspielen , aus klicken, zweimal wieder darauf klicken, um nur diese Gruppe von diesen Typen zu bekommen und ich kann sagen, ihr seid ein Abstand von acht Sie räumen auf. Das höchste Level ist das Was passiert, wenn ich das von außen nehme? Kannst du Juke sehen? Du sagst, haben wir das nicht gerade responsiv gemacht? Wir haben das und alles, was darin enthalten ist, responsiv gemacht haben wir die richtigen Einschränkungen gesetzt , damit das Ding funktioniert. Aber mit dem Äußeren haben wir uns nicht angelegt. Aber wir werden es zusammenbinden. Bist du bereit? Zeit zum Schmelzen des Gehirns. Wir haben gelernt, was wir gelernt haben , richtig, wir haben es super gelernt. Wir haben hier gelernt, wir haben links und rechts gelernt. Okay? Wo das für beide Seiten anstrengend ist. Da ist der letzte, das ist dieser Typ. Anstatt oben links zu sein, was standardmäßig ist und nicht funktioniert, ist oben in Ordnung. Ich möchte, dass links und rechts skalierbar sind. Das bedeutet, dass diese Navigation auf das übergeordnete Element skaliert wird , das ist meine Feature-Seite. Schauen wir uns das an, Chuck. Das ist wie bei Inception, wo meine Kreise oben und rechts vom übergeordneten Frame, dem NAV, haften bleiben und rechts vom übergeordneten Frame, dem NAV, Das Navi zu seinem Paraframe skaliert. Wir haben hier ein paar verschiedene Dinge gemacht. Ich weiß, es ist verwirrend, Mann. Ich versuche es. Uh, es wird ein bisschen Übung sein. Wir werden es im Kurs nochmal machen. Ich möchte alle Einschränkungen in einem Video zusammenfassen. Wenn das Einzige, was Sie wegnehmen, ist, dass Einschränkungen existieren und dass Sie mit ihnen herumspielen können. Manchmal ist das alles, was man braucht. Das mache ich manchmal. Ich habe das Dokument von jemandem geöffnet dachte: Oh, was stimmt nicht mit dem Ding? Ich klicke einfach auf Dinge, finde es heraus, fange an, die Einschränkungen zu ändern und versuche, ein Gefühl dafür zu bekommen , in Ordnung, das macht Sinn Ordnung. Es war falsch und jetzt habe ich es repariert. War das hilfreich? Ich hoffe es. Ich sehe dich im nächsten Video. Lass uns die Dinge einfacher machen. Eigentlich wäre vielleicht ein anderes Beispiel nützlich. Ja. Lass uns ein anderes Beispiel machen. 66. Kombinieren von verschachtelten Rahmen und automatischen Layoutbeschränkungen in Figma: Hallo. Hallo, wir werden ein weiteres Beispiel für Einschränkungen machen, nur um es irgendwie zu verstehen und ich zeige Ihnen einen anderen Anwendungsfall. Außerdem werden wir ein automatisches Layout einbauen , damit wir das auch üben können. Wir mit denen. Das Coole an diesen ist, sieh mal, sie mischen und bewegen sich Ich kann mir einen von diesen Typen schnappen, auf mein Mobilgerät gehen, ihn einfügen und entscheiden: Okay, er muss hier eine andere Größe und der Text kann geändert werden Bitteschön. So wie wir es im letzten Beispiel gemacht haben. Aber jetzt nur ein weiteres Beispiel. Lass uns üben gehen. Lass uns reinspringen. In Ordnung. Lassen Sie uns eine einfache Version davon neu erstellen. Es ist etwas komplizierter responsiv zu machen. Lassen Sie uns also etwas Einfaches machen, nur als gutes Beispiel. Ich werde Shift G drücken, um meine Grids einzuschalten. Du kannst nach unten scrollen und du solltest herausfinden, wenn ich auf Funktionen klicke, du solltest deine Raster dort unten finden Du kannst den Augapfel ein- und ausschalten. Ich nehme mein Rahmenwerkzeug statt eines Rechtecks weil diese Typen ursprünglich waren, was sie waren? Oh. Waren Rahmen. Es ist immer besser, wenn Sie etwas gezielt mit automatischen Layouts und Verschachtelungsbeschränkungen erstellen, Sie es einfach von Grund auf neu erstellen Der Versuch, etwas wiederzuverwenden beißt mir immer Ich werde einen Rahmen erstellen. Er wird einen Durchmesser von vier Spalten haben. Ich werde ihm eine Füllfarbe aus meinen Farbfeldern geben. Lass uns diesen auswählen. Nein, lass uns etwas Leichteres wählen. Ich schalte meine Raster aus Shift G. Okay, also ich möchte meinen Text unten rechts hinzufügen meinen Text unten , so wie Sie es am Anfang gesehen haben Ich nehme mein Rahmenwerkzeug. Ich werde einen Rahmen in einen Rahmen stecken. Sie nennen es Verschachtelung. Sie müssen sich nicht daran erinnern, aber dieser Rahmen ist innerhalb dieses Ich gebe ihm eine schwarze Füllfarbe. Ich werde. Ich will mich unten hinlegen. Da. Wir wissen, dass Größe für unser Mobilgerät ändern, es nicht wirklich funktioniert, wenn wir die Größe für unser Mobilgerät ändern, denn wenn ich in diesem Rahmen auswähle, heißt es oben und links Ich möchte nicht, dass es oben und links steht. Ich möchte, dass es rechts ist und es wird funktionieren. Nimm das übergeordnete Bild und es funktioniert, aber es funktioniert nicht im unteren. Oh, ich klicke auf den Kerl. Ich kann unten und rechts sagen. Da hast du's. Jetzt kann ich die Größe dieses Dings ändern. Ich habe hier mein kleines Textfeld oder eine kleine Leiste, in die ich meinen Text einfügen werde Lass uns das machen. Lass uns den Text hineinlegen. Schnappen wir uns den Typ Zwei und klicken wir in diesen Typen rein und los geht's. Ich kann mich nicht erinnern, was die Worte waren, welche Wörter ich benutze. Das wird es RFID kopieren und ich werde es in mein Textfeld legen , das wahrscheinlich verschwunden ist Wenn Sie Ihr Textfeld nicht verwenden, verschwindet es, was praktisch ist Geben Sie zwei ein und klicken Sie auf Einfügen Ich werde meine Schrift verkleinern Meine 16, und ich nehme mein Verschiebewerkzeug und verschiebe es. Nein, klicken Sie ab, nehmen Sie die ganze Kiste und ich werde sie in einen Stichpunkt setzen. Es gibt eine Abkürzung, um Aufzählungspunkte zu setzen. Wenn Sie es in einen Bindestrich in einem Leerzeichen setzen, automatisch ein Aufzählungszeichen, oder Sie können es auswählen und in Ihren zusätzlichen Typografieoptionen sagen: Ich möchte, dass es ein Das habe ich. Ich möchte, dass es so weit von dieser Seite entfernt ist, ich werde meinen Pfeil benutzen. Hier sagst du, in Ordnung, sollten wir es so aufstellen? Kann ich es einfach in die Mitte springen lassen? Da ist ein Autoausgang sehr nützlich. Das Mitglied der Button-Übung hat die Box drum herum gemacht. Der Knopf dehnt sich aus und zieht sich zusammen und wir können mit der Polsterung spielen. Lass uns das machen Geben wir dem Elternteil dieses Textfeldes einen Namen. Nennen wir diesen einen Textblock. Okay. Da ist mein Text drin. Das Ding hier ist schwarz und ich möchte es einfach auf einen automatischen Rahmen umstellen. Es umschließt meinen Text. Es ist gepolstert. Achte nur darauf, dass es weiter funktioniert Schau einfach weiter, während du gehst. Funktioniert es immer noch? Falls es das nicht gibt, überprüfe es einfach noch einmal. Ich habe den Rahmen ausgewählt, nicht den Text. Ich möchte, dass der Rahmen ausgewählt wird. Ich möchte sichergehen, dass es in diesem Fall richtig und unten ist. Das ist perfekt. Das Coole daran ist, dass es sich um einen automatischen Rahmen handelt, Umarmung umgestellt wird Okay, wenn ich das auf mein anderes ändere, lass uns rauszoomen. Schnappen wir uns noch eins, Shift G aus meinen Bildern, schnappen wir uns dich. Ich hab noch einen zweiten. Ich will diesen auch nicht ändern. Was ist unser anderer Text? Ich kann mich nicht erinnern. Ich repariere das gleich. Mein Caflock ist immer noch kaputt. , es passt seine Größe an, weil es ein Autoframe ist und man sagt, dass es sich umarmt weil es ein Autoframe ist und man sagt, dass es sich umarmt Falls es das nicht tut. Wenn es sich nur ändert und man sagen könnte, dass es repariert, sodass es sich nicht ändert, wenn ich es ändere. Das ist vielleicht das, was du willst. Du wirst repariert. Du weißt, dass du eine bestimmte Zeichengröße hast und möchtest , dass sie alle gleich aussehen. Das ist es, was du willst. Das bringt ein gutes Argument zur Sprache. Das steht jetzt im Mittelpunkt. Das Zentrum. Ich möchte hier ein Aligns finden , was ich wollte. Was ich sagen möchte, ist dieses übergeordnete Element hier, alles darin, erinnere dich an die Ausrichtung, es ist standardmäßig zentriert. Ich kann nach rechts gehen Manchmal ist es standardmäßig rechts wie beim richtigen, weil es zur Seite geneigt rechts wie beim richtigen ist Ich versuche automatische Sachen zu machen. Ich werde sagen, dieser Elternteil, alles in ihnen ist auf diese Seite hier abgestimmt. Es spielt keine Rolle, ob du es gesagt hast, um dich zu umarmen. Wenn ich umarmen gehe, ist es auf der rechten Seite, aber das ist nicht wirklich wichtig, weil es Umarmen heißt, kein Abstand darum Umarmen heißt, kein Also sage ich Mitte und ich möchte, dass es eine feste Breite hat. Wie witzig ist der? Dieser ist 215. Also werde ich sagen: Oh nein, das war es nicht. Ich bin manchmal verwirrt mit der Positionierung und der Breite. Passiert das jedem? Da ist die Breite, 177. Also werde ich sagen, es sind 177. Ist es 177? Ich werde es aufstellen. Und wir sollten startklar sein, außer ich möchte, dass es aufeinander abgestimmt ist. Eine Sache, die Sie vielleicht knifflig finden , ist, dass, wenn Sie eine Schrift haben, versucht wird, sie genau in der Mitte zu platzieren. Wenn Sie eine seltsame Schrift oder einen seltsamen Aufzählungspunkt haben, können die Aufzählungspunkte manchmal etwas seltsam sein. Manche Schriften haben am Ende eine wirklich große Lücke unter dieser X-Höhe und über diesen Oberlängen, diesen Großbuchstaben, müssen Sie möglicherweise mit dem Abstand der übergeordneten Schrift herumspielen. Man muss vielleicht sagen, dass es momentan tatsächlich die oberen und unteren 11 Punkte gibt Vielleicht müssen Sie hier reingehen und sagen, richtig, das teilt es auf und sagen, richtig, oben sind nur zehn und unten 15 weil Sie etwas ausgefallenes Padding machen müssen , damit die Schrift aussieht, als wäre sie in der Das ist mir in einigen der Klassenprojekte aufgefallen. Die Leute machten sich darüber Sorgen. In Ordnung. Das Letzte, was ich tun werde, ist dich zu sehen, ich werde noch eins machen. Ich werde mir das ganze Zeug superschnell schnappen. Oh, ich werde es dort pausieren, weil das Abkürzung für Fortgeschrittene ist, einfach eine coole Abkürzung. Ich kopiere das hier drüben und wenn ich das alles kopiere, was passiert dann? Fügen Sie es als den Stil des Originals ein. Du musst die Größe ändern, es ist ein bisschen wie Farbe. Anstatt einfach wie gewohnt einzufügen, funktioniert es in jedem Programm, nicht nur in Figma, Word Docs, Google Docs Wenn Sie bei gedrückter Umschalttaste oder bei gedrückter Umschalttaste einfügen, wird es nur als Rohmaterial eingefügt und entspricht dem Stil, den Sie haben Ich habe auch herausgefunden, dass mir eine feste Breite hier Probleme bereitet. Ich sage einfach rückverfolgbar. Da haben wir's. Behoben. Das Letzte, was ich tun werde, ist ein paar Bilder zu diesen Frames hinzuzufügen. Ich klicke hier auf die Farbe und gehe zu Benutzerdefiniert. Wenn es hier einen, wie du es nennst, Stil hat, will es nicht, dass du etwas tust. ich darauf klicke, sagst du, wo ist mein Wechsel zum Bild? Ich kann einfach zu Benutzerdefiniert und dann zu Bild gehen. Also werde ich das tun. Ich werde für den Computer hochladen. Ich werde mir einen dieser Typen aussuchen. Das ist der, den ich will. Ich werde sie hinzufügen. Da hast du's. Bilder hinzufügen. Lassen Sie uns den Geschwindigkeitsmodus für diese beiden machen. Also habe ich meine Bilder reingebracht und das wird super toll, wenn ich sie schnappe auf mein Mobilgerät gehe und sage, ich werde sie hier einfügen, sie in den Rahmen bringen und ich sage: Okay, los geht's Ich habe sie drin. Ich kann sie für dieses andere Gerät skalieren, alles ändert sich Die Bilder sind standardmäßig so eingestellt , dass sie gefüllt sind. Diese Typen haben ihre Einschränkungen unten rechts, und ich habe ein paar ausgefallene Sachen gemacht, bei denen ich gesagt habe: Okay, dieser ganze Rahmen hier ist auf automatisches Layout eingestellt Ich weiß, das kann ein bisschen verwirrend sein. Das Coole am automatischen Layout ist, dass ich die Schriftgröße anpassen kann. Lassen Sie uns die Schriftgröße für das Handy verringern oder vergrößern, und den übergeordneten Rahmen um mich herum werde ich versuchen ihn zu umarmen, weil das automatische Layout sich gerne umarmt Es ist eine Umarmung. Ich hoffe, das war nützlich, um einige andere Anwendungsfälle für die Verwendung von Einschränkungen zu sehen , und wir haben dort ein automatisches Layout kombiniert , nur damit wir den Text erstellen können Auch wenn das ein automatisches Out-Zeug ist, ist das Kombinieren vielleicht zu viel, benutze einfach die Einschränkungen. Sie haben nur eine Box mit fester Breite. Wir werden uns nicht ausdehnen und größer werden. Benutze einfach die automatischen Layouts für vielleicht die Buttons , wo es vielleicht etwas sinnvoller und separater ist. Aber wie dem auch sei, ich hoffe , das war hilfreich. Lass uns zum nächsten Video übergehen. 67. Klassenprojekt 13 - Responsives Design: Klassenprojekt Nummer 131010. Dumm, dumm. Das ist eine knifflige Frage. Autolaustrits sind ziemlich Es gibt also ein Klassenprojekt, damit du üben kannst. Im Grunde genommen haben wir in dem Kurs bereits die Desktop-Navigation und einige Funktionskarten behandelt Desktop-Navigation und , die Sie erstellen sollen. Für die Desktop-Navigation möchte ich, dass Sie ein neues Navi erstellen , das diese Funktionen enthält. Lass uns einen Blick darauf werfen. Lass uns auf Desktop-Hi-Fi umsteigen. Ich habe die ursprüngliche Homepage dupliziert und sie einfach als alt bezeichnet Dann habe ich oben einen neuen Navel und ein paar neue Feature-Karten gebaut oben einen neuen Navel und ein paar neue Feature-Karten Ich weiß nur nicht, da haben wir etwas Arbeit reingesteckt. Ich werde das dort lassen. Ich will deine Top-Navigation. Die Hauptsache ist, dafür zu sorgen, dass es das tut, dass es zusammenbiegt und sich anpasst Sei auch großartig. Ich habe das nicht definiert und kann es sowieso nicht wirklich überprüfen, ob das eine Werbung ist, also kannst du diese schönen Dinge tun Sie werden auch sehen, dass eines der Symbole oder einer der Texte tatsächlich ein Symbol ist. Das ist die Karte. Ich habe das in den Klassenprojekten geschrieben, eine Textliste für unser Navi erstellt, Startseite bietet Karte und Konto und einfach sicher, dass die Karte ein Symbol ist. Du kannst es zeichnen. Sie können es von einer kostenlosen Icon-Site herunterladen. Du kannst es von einem Plugin bekommen, es macht mir nichts aus. Ich möchte, dass du Nav auch für das Handy erstellst. Das wird ein bisschen anders und ziemlich einfach sein , weil wir auf mobiles Hi-Fi umsteigen und ein Navi nachbauen werden, das ganz anders ist Wirf einfach die Stropie-Linien, das Burger-Menü, das Nav-Sandwich hinein, weil wir nicht alle Texte hineinpassen können Deshalb haben wir diese kleinen Kerle. Lege einfach das Logo und das gestreifte Navi oben in eine Schachtel Es muss auch responsiv sein. Meins nicht. Aber deins muss es sein. Die kleine Strobylinie muss oben und rechts Dann die Feature-Karten. Sie werden einfach voneinander kopiert und eingefügt , sodass Sie ihre Größe ändern können Ich möchte, dass die mobilen das tun. Dort kannst du ihre Größe ändern, sie verschieben und sie passen sich auch hier auf dem Desktop an. Erstelle neue. Sie müssen nicht genau wie meine aussehen. Ich möchte etwas unten genau hier haben, damit es dieses schöne matschige Zeug macht Eine Sache, mit der du vielleicht Probleme haben könntest, ist , wenn ich das kopiere, weil ich es zuerst auf dem Handy oder Desktop designe mir nichts aus, es zu kopieren und wenn ich zu Wi Fi Hi Fi gehe und ich gehe tatsächlich zu mobilem Hi Fi und füge es einfach hier auf dieser Seite Du sagst, A, ich werde das in Bewegung bringen. Es bewegt sich nicht. Warum nicht? Ich sehe den Namen , der ein Werbegeschenk ist. Es ist nicht wirklich an der Kasse. Ich kann versuchen, es reinzuziehen. Hat das funktioniert? Ging rein. Manchmal tut es das nicht. Was du tun kannst, ist es ausschneiden, auf Checkout klicken und es dann einfügen und es gibt Figma einen Hinweis darauf , dass er es hier haben will Dann kannst du anfangen, damit herumzuspielen. Manchmal kann dich das beim Versuch erwischen , an den richtigen Ort zu gelangen Es auszuschneiden und einzufügen ist wahrscheinlich der einfachste Weg, es zu tun. Sie können es in die Ebenen ziehen, aber diese Ebenen werden jetzt ziemlich groß, also ist es ein bisschen schwieriger Das ist es also, und wenn Sie fertig sind, machen Sie einen Screenshot, laden Sie ihn sowohl von Ihrer Homepage auf Ihren Desktop als auch von Ihrem Handy hoch und laden Sie ihn den Projektbereich hoch und teilen Sie ihn auch in den sozialen Medien. Wir befinden uns in einer Phase , in der jeder anfängt, ein bisschen anders auszusehen. Mich würde interessieren, was du gemacht hast. Sie können Feedback von anderen erhalten. Ich kann Feedback geben. Da hast du's. Erstelle eine Navigation und eine Feature-Karte. Machen Sie alles reaktionsschnell und gut. Alles klar. Es ist eine knifflige Frage. Das ist okay. Möglicherweise müssen Sie zurückgehen und sich die Videos erneut ansehen und sich die Kommentare ansehen Wenn es andere Schüler gibt, können sie dir vielleicht weiterhelfen oder stoßen möglicherweise auf dasselbe Problem und haben Antworten Also ja, viel Spaß beim Üben. Das ist Class Project 13. Wir sehen uns im nächsten Video. Nachdem du deine Hausaufgaben gemacht hast, keine Hausaufgaben, 68. Schöne Tropfenschatten und innere Tropfenschatteneffekte in Figma: Hallo. Es ist Schlagschattenzeit. Wir werden den Schaltflächen Schlagschatten hinzufügen, und ich werde Ihnen zeigen, wie Sie Doppelschatten hinzufügen können. Ich werde dir zeigen, wie man daraus Stile macht, und ich zeige dir die supertolle, meine Lieblingsart , Schatten zu machen. Es ist eine Art persönliche Präferenz. Sie können es natürlich tun, um A zu tippen, um es abzuschalten, wenn Sie zu viele Bilder haben. Wir werden auch innere Schatten für diese Art von Optionen vom Typ Interface erstellen, um ihnen ein wenig Tiefe zu verleihen. Ordnung. Lass uns über Schlagschatten sprechen. In Ordnung. Also mein Handy Hi-Fi. Falls Sie es noch nicht getan haben, habe ich den Kauf-Button vom Desktop hierher verschoben . Falls Sie es nicht kopiert haben, haben wir es schon früher gemacht. Ich mache die zweite Schicht, um das ausgewählte Objekt zu vergrößern, und gehe dann ein bisschen zurück. Und ich gehe runter zu Effekte sind einfach, scrolle, scrolle, scrolle, lasse die Dinge auswählen und suche das Effektfenster. Lassen Sie uns das Plus verwenden und Schlagschatten ist die Standardeinstellung. Es gibt noch eine Menge anderer. Wir beginnen mit Schlagschatten und einem wirklich gut aussehenden Schlagschatten. Das ist meine persönliche Präferenz, aber ich habe schon viele Schlagschatten gemacht . Ich mag X bei Null. X ist, wie weit es nach links geht und Y ist, wie weit es nach unten geht. Ich gehe auf X Null und zwei sehen am Ende gut aus und dann spiele ich mit einer Unschärfe herum, oft sind zwei auch nett Man muss sich auch eine vergrößerte Ansicht ansehen. Wenn die Leute deinen Schlagschatten bemerken, hast du zu viel Schlagschatten Wenn du willst, dass es subtil ist, finde ich die ganz nett. Das Coole an Schlagschatten oder irgendwelchen Effekten ist allerdings, dass ich bei den ausgewählten Effekten ein bisschen zoome. Ist es möglich, mehr als einen hinzuzufügen. Die Effekte hier kann ich wieder auf Plus drücken, oft mag ich einen, der ziemlich eng ist , wie der erste, den wir gemacht haben, und dann diesen anderen weiter draußen und verschwommener Erhöhen Sie die Unschärfe. Kannst du sehen, es ist wie eine Kombination, bei der es Lass uns einen von ihnen ausschalten. Kannst du die Füllunschärfe sehen? Es hängt auch wirklich von der Größe des Objekts ab, das ist keine feste Regel, aber beginnen Sie mit 02 und fügen Sie dann eine verschwommene hinzu. Das ist mein Lieblings-Dropsh Andere Einstellungen in Drop Shadows, falls es dich interessiert Unschärfe ist offensichtlich, wie verschwommen sie ist. Spread ist interessant . Ziehen wir es einfach hoch. Sie können das Symbol nehmen und es nach oben ziehen. Es ist immer noch eine Unschärfe von zwei, aber es beginnt weiter draußen Das kann cool werden, wenn Sie das haben und eine ziemlich große Entfernung darauf haben. Es sieht so aus, als ob es weiter von der Seite entfernt ist, und wir müssen es viel verschwommener machen und wahrscheinlich die Farben bei Sie können den Prozentsatz auch ziehen, damit er sich anfühlt, als würde er schweben Ich mag es wirklich. Ich verwende Spread nicht oft. Da hast du's. Eine weitere coole Sache an Effekten ist, dass man sie kopieren kann. Da ist diese seltsame Gegend hier. Kannst du sehen, ob Hova gerade in dieser seltsamen Gegend ist, siehst du, es gibt kleine Linien Ich kann das einmal anklicken, Shift gedrückt halten und ihn nehmen, es kopieren und los geht's, ich werde es für diese andere Taste auf meinem Desktop verwenden , Hi-Fi, und ich werde es auch für diesen Typen hier verwenden Ich wähle auf dieser Schaltfläche aus, doppelklicke, gehe hinein und drücke einfach auf meiner Tastatur auf Einfügen. Siehst du, ich kann es mitbringen. Du kannst es auch auf einen Stil einstellen, nämlich Lick, dieser Typ. Hier sind meine Effekte. Ich kann Stil sagen. Ich kann Plus sagen, und es wird den Effekt, den ich erzielt habe, durchsetzen, und ich werde meinem Stil einen Namen geben. Jetzt ist es ein Stil. Wenn ich nichts ausgewählt habe, klicken Sie in den Hintergrund. Kannst du sehen, ich habe meine Schriften, ich habe meine Farben und schau hier unten nach unten, super toller Stil. Du kannst es anpassen. Das Coole daran ist, dass alles, worauf es angewendet wird, du kannst es hier ändern. Lass es uns anwenden auf. Mit diesem wird es nicht funktionieren, er hat keine Füllung. Aber lass es uns trotzdem anwenden. Ich werde hier zu meinen Stilen übergehen. Ich werde sagen, super toller Stil. Uh, es wird gut funktionieren. Los geht's. Offensichtlich sind australische Schlagschatten toll, wenn man Text hat Ich kopiere das über ein Bild. Okay? Das funktioniert eigentlich richtig, aber ich ***** mit einem Effekt würde es besser aussehen Ich gehe zu. Nein, ich werde zu meinen Styles gehen und meinen supergeilen Stil wählen. Auch hier minimal, aber dadurch hebt es sich wirklich vom Hintergrund ab. Schauen wir uns die inneren Schatten an. Innere Schatten können wirklich toll sein, besonders bei UI-Objekten, okay? Lass uns einen kleinen Wechsel vornehmen. Also schnappe ich mir mein Rahmenwerkzeug. Ich werde eine kleine Pille machen. Ich mache meins ein bisschen groß, damit es jeder sehen kann. Ich werde es mit meinen Farbmustern füllen. Ich gebe, ich nenne sie Swatches, aber unsere Styles. nehme meinen Akzent 300 nehme Marken von Ecken und von Ecken Das hier, wenn du es schnappst und ziehst und wegziehst, dann brauchst du es. Machen wir das früh? Ich glaube, das haben wir getan. Mach einfach weiter, bis es ausgeschöpft Du kannst bis 1.000 gehen und irgendwann wird es um die Ecke komplett rund Das ist einer. Ich möchte kreisen. Ich werde das O-Werkzeug für die Ellipse verwenden. Zeichne hier eine kleine Option, wie einen kleinen Kippschalter. Wähle eine bessere Farbe Hervorragend. Und hier diese Pille, die ich ausgewählt habe. Ich kann sagen, du hast eine Wirkung darauf, wo der innere Schatten ist. Innere Schatten sind cool, um diesen Dingen etwas Tiefe zu verleihen , und wie zuvor ist die Standardeinstellung hier in Ordnung. Die Unschärfe ist wahrscheinlich etwas hoch. Sie können Ihre Pfeiltasten benutzen, denken Sie daran, in diesen Feldern nach unten, nach oben Dieser hier, wahrscheinlich nicht so weit, und du kannst ihn verdoppeln, einen weiteren hinzufügen, und wir werden dasselbe im Schatten machen. Aber wir werden gehen. Es ist interessant zu wissen, dass man negativ sein kann. Plus vier, wir können negativ werden, damit es auf den Grund geht. Ich habe da unten vielleicht einen etwas kleineren . Sieht es cool aus? Ich weiß nicht, Dan. Bei diesem hier werde ich auch meinen supertollen Stil anwenden . Kannst du sehen, dass du diesen Dingen etwas Tiefe verleihen kannst? Riesiger Knopf. Du kommst auf die Idee im Schatten. Nicht schwer, aber jetzt kannst du negativ werden und du kannst mehr als einen hinzufügen und du kannst sie in Stile umwandeln. Oder Sie können sie kopieren und einfügen. Denken Sie daran, es ist irgendwie komisch, sie zu kopieren und einzufügen. Da ist so etwas wie Niemandsland, da kannst du auswählen und einfach Befehl C, Befehl B drücken. In Ordnung, das ist also Dans supermega geiles Schlagschatten-Tutorial Lass uns zum nächsten Video übergehen. 69. Unschärfeebene, Hintergrundunschärfe und Bildunschärfe in Figma: Hallo, alle zusammen. In diesem Video werden wir Dinge verwischen Wir werden diesen Glaseffekt machen, bei dem die Dinge hinter diesem Pop-up-Modell verschwommen sind. Kannst du verschwommen sehen? Wir machen das auch für Ebenen, wo das Bild hier am Anfang ziemlich scharf und möglicherweise ablenkend Ich werde es verwischen, es in den Hintergrund rücken, es abdunkeln, sodass ich Dinge darüber legen kann und es nicht ablenkt. Blaues Zeug. Schauen wir uns zunächst den blauen Hintergrund an. Das ist der lustigste, der beste. Ich bin auf meiner Bestätigungsseite auf meinem mobilen Hi-Fi. Ich habe den Rahmen ausgewählt, ich werde ein Bild hinzufügen, also werde ich die Füllung entfernen, und ich füge die Füllung hinzu und ich füge wieder hinzu und ändere sie in Bild. Ich lade ein Bild von meinem Computer und habe eines namens Map. Also wird es auf der Bestätigungsseite angezeigt, nur Hallo, das ist deine Adresse, und hier liefern wir oder hier sind wir ansässig. Das ist meine Gegend, und ich werde es eintragen. Perfekt. Wir werden Teile davon verwischen und wir machen es mit dem Objekt darüber Ich hole mir mein Rahmenwerkzeug. Das wird unser Pop-Up-Modell sein, das oben erscheint Darauf wird Schrift stehen, also wollen wir den Hintergrund aufblasen, damit wir es lesen können. Ich werde es auffüllen. Und wir werden den Effekt hinzufügen. Es heißt Hintergrundunschärfe, und es wird alles, was dahinter steckt, verwischen Das Problem ist, dass Sie noch nicht wirklich sehen können, was dahinter steckt Sie werden also die Opazität verringern. ist schwierig, sich daran zu erinnern , dass es zwei Möglichkeiten gibt, die Opazität zu verringern Sie können die Deckkraft in diesem Erscheinungsbild für das Ganze verringern , es funktioniert. Schau dir das an Wenn ich es runterziehe, kann ich es durchschauen. Aber das Seltsame daran ist, dass dadurch die Deckkraft der Füllung und der Kontur und allem, was darin enthalten ist, einschließlich des Effekts, verringert wird Füllung und der Kontur und allem, was darin enthalten ist, einschließlich des Effekts, verringert Das ist nicht das, was ich will. Was ich tun möchte, ist einfach die Deckkraft der Füllfarbe zu verringern Ich habe Weiß gewählt, aber wenn ich das abnehme, können Sie, dass es unscharf ist. Du musst entscheiden, wie undurchsichtig oder transparent das sein soll Okay? Im Grunde wollen wir, dass es nur cooler Effekt ein Glaseffekt, durch den man hindurchschauen kann. Wir können oben Text hinzufügen. Lassen Sie mich überspringen und meinen Text hinzufügen. Da hast du's. Damit es eher wie ein Pop-Up-Modell aussieht, braucht es wahrscheinlich abgerundete Ecken, man braucht keine abgerundeten Ecken, ich werde acht hinzufügen, und es kann nett sein mit ein wenig Schlagschatten, damit wir unseren Effekt kombinieren können. Wir haben also einen Effekthintergrund. Lassen Sie uns auch einen kleinen Schlagschatten hinzufügen. Denken Sie an die Super-Sonderregel „Zwei Zwei“ und fügen Sie vielleicht noch eine hinzu , wenn es um die etwas wackeligere Version geht Gehen wir zu acht. Gefällt es uns? ist es wahrscheinlich ein bisschen stark Im Moment ist es wahrscheinlich ein bisschen stark, aber du hast die Idee, du kannst Dinge dahinter verwischen, es ist ein cooler Glaseffekt Lass uns die Show ausschalten. In Ordnung, mein erster. Das funktioniert. Als Nächstes möchte ich Layer Blue zeigen . Du kannst alles verwischen Du kannst dieses Bild nehmen und Effekt sagen und einfach sagen, ich möchte, dass die Ebene, die ich ausgewählt habe, verschwommen ist Ich finde das nicht besonders nützlich, und ich finde es nützlich, es zu verwenden ist, dass ich ein Hintergrundbild verwischen möchte , das vielleicht ein bisschen Wir haben es vorhin gemacht, indem wir die Schwarzen oder die Lichter ausgeschaltet haben, tut uns leid Jetzt wird es für diesen Hintergrund sein. Ich könnte dieses Bild einbauen und sagen, Al ist mein Film. Ich möchte es in ein Bild umwandeln. Ich werde dir zuerst zeigen , wie man es falsch macht. Das ist die natürliche Art, es zu tun. Du sagst, okay, ich habe ein Bild. Ich will es verschwommen machen. Weißt du, ich möchte, dass es abstrakter ist. Es ist ziemlich geometrisch und ich möchte etwas von der Schärfe entfernen Also werde ich es in Kraft setzen . Ich gehe ins Labor und du sagst, oh, cool. Ich werde das holen, okay? Und das einzige Problem dabei ist, wenn ich sage: Okay, ich rufe jetzt mein Menü auf, es wird in diesen Rahmen eingefügt, in dem ein Bild auf das ein Effekt angewendet wurde Gummi. Okay? Es macht alles im Rahmen. Also werden wir es vielleicht anders machen , nicht falsch, nicht richtig, nur anders. Ich werde ein Bild reinbringen. Also Command Shift K, ich benutze ein kleines Drop-down-Menü hier unten im Formen-Panel und ich sage, du kommst rein. Ich werde es anklicken und ziehen, also möchte ich nicht auf den Hintergrund klicken weil es dann auf diesen Rahmen angewendet wird. Ich werde es nur richtig groß machen. Es wird von der Seite springen, ich würde wahrscheinlich nicht für dich von der Seite springen. Sie müssen lediglich sicherstellen, dass es sich auf der richtigen Seite befindet . Ich habe dort meine Feature-Seite. Ich möchte, dass du da drin bist, was schwierig sein kann. Ich werde nicht lügen. Wir sind voll besetzt. Ich gehe zur Ernte, weil ich möchte, dass sie an einem bestimmten Ort ist. Ich will das so, ich will das. Da haben wir's. Nun, das ist ein Bild innerhalb des Rahmens, ich kann es auf dem Bild auswählen und sagen, ich möchte, dass der Effekt einfach darauf angewendet wird. Du wirst ein Label sein und ich kann es so weit aufdrehen, wie ich will Wenn ich jetzt auf mein Menü zugreife, kopiere, füge ich es von hier ab und erinnere mich, dass ich auf den Namen des Frames klicke , um zu gelangen, damit es weiß, wo es platziert werden muss. Schau uns an. Andere Dinge, die ich gerne mit dieser Ebenenunschärfe mache, sind Dinge, die ich nicht mache und die ich dir zeigen sollte Wenn das Bild ausgewählt ist, ist da das Bild. Manchmal finde ich es einfacher , einfach Dinge in den Ebenen auszuwählen. Ja, doppelklicken. Vielleicht findest du das Gleiche. Es kann ein bisschen seltsam sein , die Befehls- oder Steuertaste gedrückt zu halten, um auf das Bild zu klicken. Das funktioniert auch. Okay, in meiner Ebenenunschärfe gibt es eine progressive Es bedeutet nur, dass der Progressive wo ist? Weil mein Image so groß ist, ist die Progression hier aus irgendeinem Grund vorbei. Ich kann es hierher ziehen, um es visuell etwas nützlicher zu machen . Sie werden feststellen, dass, wenn Sie sehen können, dass die Unterseite hier lassen Sie uns nach oben kurbeln, verschwommen ist und die Oberseite auf Zwei, Null gesetzt ist , sodass Sie entscheiden können , wie stark sie verschwommen sein soll Das ist ein cooler Effekt. Ich habe keine wirklich gute Verwendung dafür gefunden. Ich bin mir sicher, dass es viele davon gibt und Sie können es umdrehen. Kannst du sehen, was ich mache? Möge ich es? Vielleicht. Geh zurück zur Uniform. Ich werde es etwas leiser machen. Es ist ein bisschen stark. Was ich auch gerne mache, wir haben das in einem früheren Video gemacht, nur eine kleine Bonus-Zusammenfassung Ist dieses Bild hier? Ich möchte es etwas abdunkeln Meins ist ziemlich dunkel, Text wird darüber erscheinen. Es wird nicht zu ablenkend sein. Aber denken Sie daran, Sie können auf diesem Bild auswählen. Ich werde darauf eingehen und du könntest die Belichtung verringern. Von diesem Bild, nur um es wieder abzudunkeln. Und denken Sie daran, mit den Glanzlichtern herumgespielt und sie rausgezogen haben. Meine hat nicht viele oder gar keine Glanzlichter , also mache ich mir darüber keine Sorgen Aber du wirst sehen, wie du es anders machen kannst. Ich benutze es oft. Ich setze das wieder auf Null und das wieder auf Null und dann komme ich wieder raus. Was Sie tun können, ist, dass Sie mehr als eine Füllung auf einer Ebene haben können . Wir haben mehr als einen Effekt erzielt. Sie können mehr als eine Füllung machen. Ich habe mein Bild und ich würde sagen, standardmäßig habe ich zwei Füllungen, es macht tatsächlich, was ich will. Es fügt eine schwarze Füllung hinzu, senkt aber auch die Transparenz oder Opazität auf 20% Ich kann es natürlich erhöhen, wenn es 100% ist, ist es komplett schwarz, aber du kannst das einfach machen Es ist fast genauso, als würde man die Belichtung verwenden. Der Grund, warum ich manchmal so vorgehen möchte , ist, dass ich bei mehreren Bildern konsistent sein kann, während das Spielen mit der Belichtung darin besteht, sie mit ausgestreckter Zunge, Kopf, **** zur Seite zu betrachten ausgestreckter Zunge, Kopf, **** zur Seite Das mache ich sowieso. Ich frage mich, ja, was war drin? Ja. Okay, wo ist das, ich kann das einfach kopieren und 30% draufsetzen, damit sie alle konsistent sind. Aber das ist nicht wirklich wichtig. Ich mag das für Hintergründe. Blas sie ein bisschen aus. Wenn wir jetzt anfangen, unsere Objekte hinzuzufügen, ist es ein cooler Hintergrund, aber das nimmt nichts von der Vorderseite oder meinen Inhalten weg. Okay, das sind ein paar Unschärfen. Haben wir, was waren sie? Sie waren schichtblau, dieses hier, und dann hatten wir das wahrscheinlich kühlere Hintergrundblau, die Art von Glaseffekt. Richtig. Das ist es. Oh, das ist es fast. Es gibt ein neues Feature hier. Ich wollte nicht darüber berichten, aber ich denke, oh, das wäre cool dafür. Es gibt noch andere Effekte hier drin. Ich habe dir die Grundlagen gegeben, du kannst sie erforschen. Gibt es noch andere, die auftauchen? Der, der gerade aufgetaucht ist, ist dieser hier, Noise. Standardmäßig ist es ein bisschen schwer, aber können Sie sehen, wie, wenn ich das runterkriege, die Dichte, die Dichte erhöhen und vielleicht nicht so schwarz, heller. Ich entscheide mich für den Glaseffekt, diese Art von mattiertem Toilettenfenstereffekt Es wird also ein bisschen herumgespielt. Ich habe noch keine magische Zahl dafür. Es ist nur schleppend, Zunge rausgestreckt, Kopf angemacht und entscheiden, ob das irgendwie dazu beiträgt Ist es nicht? Sieht es eher aus wie Glas? Das tut es nicht. Aber jetzt weißt du, wie man Lärm benutzt. Sie können das natürlich auch für Bilder tun. Aber für den Moment ist es das. Unschärfe ist fertig. Wir sehen uns im nächsten Video 70. Klassenprojekt 14 - Effekte: Team, Klasse, Projektzeit. Einfach, lustig. Ich möchte nur, dass du die Effekte übst , die wir in den letzten Videos gelernt haben. Schlagschatten in einer Schattenebene, Unschärfe und Hintergrundunschärfe. Mir ist egal, wie du sie umsetzt. Was ich gemacht habe, sind die, die wir im Tutorial gemacht haben, das ist die Hintergrundunschärfe. Ich habe meins mit meiner Homepage auf meinem Hi-Fi gemacht. Ich habe es durchgesehen und abstrakte Ding eine Art unscharfe Hintergrundebenenunschärfe gemacht Ich wollte es trotzdem ziemlich leicht haben. Das habe ich gemacht, und ich habe meine Schlagschatten gemacht. Und hier habe ich einfach mein Interface in ein Schatten-Ding geworfen . Es liegt an dir, wohin es geht. Ich habe es auch mit dem Text gemacht, und ich möchte, dass du einen Screenshot machst, der alles beinhaltet. Am Ende habe ich zwei Screenshots für mich. Sie könnten alle Ihre in einem kombinieren. Also da ist meins und da ist meins. Ich würde es auch gerne in den sozialen Medien sehen. Laden Sie es natürlich in die Projekte hoch, aber teilen Sie es auch und markieren Sie Mass sozialen Medien oder in unserer Facebook-Gruppe, LinkedIn-Gruppe. Ich liebe es zu sehen, was du machst. In Ordnung. Viel Spaß beim Erstellen von Effekten in Figma. Wir sehen uns im nächsten Video. 71. Was sind Komponenten und Instanzen in Figma?: Eins. Lassen Sie uns über Komponenten und Instanzen sprechen. Im Grunde ermöglichen sie es Ihnen, eine Master-Komponente zu erstellen , viele andere steuert. Schau dir das an. Ich kann sagen, ich will mehr Polsterung oben und unten oder weniger, und sie ändern sich alle Das Schöne an ihnen ist , dass Sie sehen können, dass Sie Ihre Instanzen dieser Hauptkomponente einzigartig machen können Ihre Instanzen dieser Hauptkomponente einzigartig Dieser hat seine eigene Farbe, hat seinen eigenen Text, aber ich kann Dinge kontrollieren, wie zum Beispiel die Schriftstärke ändern und diese Änderungen vornehmen. Diese werden aktualisiert, behalten aber ihre Einzigartigkeit. Wirklich cool. Lass uns reinspringen. Lassen Sie uns über Komponenten und Instanzen sprechen. In Ordnung. Lassen Sie uns zuerst eine Hauptkomponente erstellen. Wir beginnen mit unserem Button. Du kannst alles verwenden. Ich werde es einfach kopieren und hier einfügen. Halte es einfach getrennt. Okay, also wir wollen diesen Knopf machen, den wir ewig damit verbringen ihn so zu bekommen, wie wir wollen, wir wollen ihn wiederverwenden. Aber wir wollen die Kontrolle haben, wie Sie in der Einführung gesehen haben, um diese Hauptkomponente und alles andere anpassen zu können diese Hauptkomponente und alles andere anpassen Zuallererst müssen wir es also in eine Komponente umwandeln. Sie tun dies, indem Sie hier oben in Ihrem Eigenschaftenbereich vorgehen. Kannst du diese kleinen vier Diamanten hier sehen oder die Tastenkombination, das ist Command Option K auf einem Mac. Steuere Holt K auf einem PC. Das war schwer herauszubekommen. Aber wenn du darauf klickst, passiert nichts. Du sagst, es ist passiert. Eine Sache, die in Ihrem Laos-Panel passiert ist, ich werde hier sehen, wie rückgängig gemacht wird, als es noch ein automatisches Layout oder ein Frame war, was auch immer es ist Sobald du es geändert hast, bekommt es dieses kleine Diamanten-Feature Du sagst, in Ordnung, was machst du jetzt? Nun, wir können ein Duplikat davon machen. Ich kann sagen, ich will noch einen. Was passiert ist, kannst du das Symbol auf diesem sehen? Es ist eine Kopie davon, aber es hat einen einzigen Diamanten. Das ist die Hauptkomponente, das ist die Instanz dieser Hauptkomponente, das Eltern-Kind. Nun, warum ist das hilfreich? Ich werde eine, zwei, drei Versionen haben. Lassen Sie uns eigentlich drei Versionen haben. Min und drei Exemplare davon. Das Coole daran ist, sieh dir das an. Wenn ich den Hauptteil ändere, ändern sie sich alle. Das ist super hilfreich. Ich könnte entscheiden, dass die Polsterung 32 und 16 sein muss Sie werden feststellen, dass die 32 nicht viel , denn wer erinnert sich daran? Stimmt. Das ist kein Umarmen Ich werde das ändern, um das Coole daran zu umarmen , weil ich das geändert habe, was ich vielleicht vergessen habe , so wie ich es dort getan habe Alle Kinder oder die Instanzen dieser Hauptkomponente ändern sich ebenfalls Was wirklich cool ist, ist, dass diese Instanzen einzigartig sein können Angenommen, dieser möchte eine andere Farbe haben. Also werde ich sagen, dass du es nicht mehr bist. Oh, da steckt eine Fülle dahinter. Nein, das sind ausgewählte Farben. Da ist die Füllung. Zeigt mir den weißen Text. Hier ist meine Füllung. Ich kann sagen, ich möchte, dass dieser Typ meine Hauptfarbe ist, dieser hier meine Akzentfarbe, und das lasse ich normal. Ich lasse das meine Sekundärfarbe. Das Coole an ihnen ist, dass sie einzigartig sind, aber sieh mal, sie haben alle immer noch die Hauptkontrolle. Sie können ziemlich einzigartig sein. Gleiche gilt für den Text. Wir müssen jetzt kaufen. Wir kriegen unseren Kaufknopf. Das Schloss dummer Katzen ist immer noch kaputt. Diese sind einzigartig, haben aber immer noch diese Hauptsteuerung. Sie können hier reingehen und sagen, richtig, dieser Typ hier aus irgendeinem Grund, weil er auf einer anderen Seite ist und anders aussehen soll. Er kann keinen Eckradius haben. Auch hier können wir es immer noch mit dem Elternteil kontrollieren. Ihr könntet entscheiden, dass dieser hier tatsächlich eher eine Art von globalem Wandel bewirken soll. Deshalb möchte ich das von der ersten Überschrift abändern. Ich werde es kaputt machen, weil ich eine Light-Version verwenden möchte , und sie werden alle leicht. Das ist das Potenzial, eine Hauptkomponente zu verwenden und Instanzen zu haben. Ein weiterer Vorteil ist, dass das ziemlich chaotisch ist, oder? Alles ist hier drin Okay? Ich kann in mein Assets-Menü gehen, das wir uns noch nicht angesehen haben, und dort sollte meine Schaltfläche in der Bibliothek sein. Es ist nicht hier. Wo ist es? Komponenten werden der Bibliothek hinzugefügt. Manchmal gibt es einen Bug. Hoffentlich geht das weg. Ich muss das Ding schließen und wieder öffnen Du wartest dort. Ist es nicht. Sie haben gerade die Benutzeroberfläche geändert. Was da steht, steht in dieser Bibliothek hier, da ist es da. Da ist mein Knopf. Mir gefällt diese neue Arbeitsweise nicht. Mir gefallen nur die mehr, die hier aufgeführt sind. Wenn Sie wirklich große Projekte haben, müssen Sie in meiner Bibliothek für diese Datei sagen: Okay, das ist die erste Seite dieses Dokuments, wo ist sie hier? Das ist meine erste Seite , deshalb zeigt sie das. Auf dieser Seite oder in diesem Designdokument finden Sie alle meine Ressourcen. Sie können es herausziehen. Ich gehe zurück zu der Seite , an der wir gerade arbeiten, und gehe zurück zu meinem Vermögen. Ich kann eine Instanz auf diese Weise herausziehen. Es spielt keine Rolle, ob Sie es kopieren und einfügen oder von hier herausziehen , Sie erstellen eine Instanz dieser Hauptkomponente. Das ist praktisch, wenn Sie anfangen Bibliotheken zu erstellen und mit anderen zu teilen. Sie können gehen, in Ordnung, ich will alle Assets aus diesem Dock und sie werden hier aufgelistet. Was sollte eine Komponente sein? Ihrer Entwurfsphase, in der alles ein bisschen konzeptionell ist, benötigen Sie im Grunde der alles ein bisschen konzeptionell ist, keine Komponenten in Einzelteilen. Sobald du etwas eingesperrt hast, ja. Es sollten Komponenten sein. Wie dieses Logo hier, wir sind zufrieden damit. Ich werde sagen, dass du, mein Freund, eine Komponente sein wirst und es endet hier als Logo. Es hat einen weißen Hintergrund, sodass man es nicht wirklich sehen kann. Aber es bedeutet nur, wenn ich jetzt auf eine andere Seite gehe und , ich bin auf meinem Hi-Fi-Handy, anstatt zum Dokument zurückzukehren, es zu kopieren und einzufügen und jetzt keine Verbindung herzustellen, kann ich zu meiner Bestätigungsseite gehen, zu meinen Assets gehen und einfach das Logo nehmen und es herausziehen. Es ist konsistent. Ich werde einen Effekt hinzufügen. Ich werde tatsächlich meinen Stil hinzufügen, den ich zuvor gemacht habe. Super geil. Funktioniert immer noch nicht ganz. Ich kann die Farbe dieses hier in meine Bibliotheksfarbe ändern . Wir haben einige Änderungen an meiner Hauptkomponente vorgenommen. Aber wenn ich zu dieser Hauptkomponente zurückkehre, ist das ein guter Trick. Wie kehre ich zur Hauptversion zurück? Ich weiß in meinem Ebenen-Panel, dass ich an dieser Instanz arbeite. Es ist der kleine Diamant. Wie finde ich es? Sie können mit der rechten Maustaste darauf klicken und sagen, Hauptkomponente, gehe zur Hauptkomponente. Ich springe zurück zu meiner Seite, auf der es steht, und ich kann sagen, dass mir die Größe der Bilder tatsächlich fehlt. Ich muss das K-Tool benutzen. Ich mache es größer. Das wirst du wahrscheinlich nicht sagen können, lass uns etwas anderes tun. Lass es uns zerstören. Nein, ich habe es Shift gesagt. Lass es uns größer machen, viel größer. Was wir tun, wenn wir zu mobilem Hi-Fi zurückkehren , weißt du, ich bin richtig groß geworden. Fantastisch. Ein weiterer Trick für diese ist, sagen wir, Sie haben einige Anpassungen vorgenommen und möchten zum Original zurückkehren , ich möchte das wieder verwenden, aber ich möchte nicht, dass all die Dinge, die ich gemacht habe, das Lila und das Drop können zur Reset-Instanz gehen, es geht zurück zu dem, was auch immer die Hauptkomponente ist. Du könntest auch entscheiden, dass du wirklich auf dieser Seite hier ewig damit verbracht hast, es richtig zu machen, und dass es dir so gefällt. Es hat die richtige Größe. Du kannst den anderen Weg gehen. Sie können sagen, ich möchte, dass dies jetzt die Hauptkomponente ist, nicht die Hauptkomponente, aber ich möchte alle Änderungen an diese Hauptkomponente senden. Kannst du hier sehen, dass es heißt, die Änderungen an die Hauptkomponente zu übertragen? Wenn ich zu Desktop-Hi-Fi zurückkehre, hat es diese neuen Einstellungen. Ich habe eine neue Farbe, sie hat die neue Größe, immer noch zu groß, immer noch die falsche Farbe, aber du verstehst schon, was ich meine. Ich werde das rückgängig machen, bevor ich mein Logo ändere. Lass es dort. Lass es uns sagen Es hat immer noch seine Überschreibungen. Also werde ich sagen, gehen wir zurück zu der Stelle, an der sich die Reset-Instanz befindet ? In Ordnung, Komponenten. Du fängst mit einem oder zwei an und dann wirst du feststellen, dass du viele davon hast. Und du wirst die Vorlagen anderer Leute finden , mit denen du arbeitest. Sie werden sie aufrufen, sie für ihr Dokument kopieren und einfügen oder anhand ihrer Vorlage arbeiten, und sie werden viele Instanzen im gesamten Dokument verwenden Instanzen im gesamten Und wenn Sie sie alle ändern möchten, brauchen Sie nur zu tun, weil Sie keine Ahnung haben , wo sich die Hauptkomponente Du sagst, das ist definitiv eine Instanz, oder diese hier, definitiv eine Instanz. Wo ist die Hauptkomponente? Ich könnte sagen, Rechtsklick und los geht's und mich dorthin bringen. Geh bitte dorthin. Jetzt ist es einfach da. Oh, und das Letzte ist, dass wir das schon früher gemacht haben, als wir aus einem anderen Dokument kopierten und einfügen, man kann es tatsächlich kaputt machen Am Ende haben Sie Instanzen, die Sie kopiert und eingefügt haben, und Sie sagen, ich möchte nicht, dass es mit der Hauptkomponente verbunden ist, weil das so ist Es kann Dokumente miteinander verknüpfen. Nehmen wir an, Sie wollen das nicht, ich kann nur sagen, ich diese Instanz eigentlich trennen möchte Wir haben das früher gemacht, ohne zu wissen warum, jetzt wissen wir warum, weil wir diese Hauptkomponente , die damit verbunden ist, nicht wollen diese Hauptkomponente , die damit verbunden ist, Wir könnten es kaputt machen und unser eigenes machen. Wir können mit der rechten Maustaste darauf klicken oder bis hierher gehen und „Komponente erstellen“ oder „Komponente erstellen“ sagen . Jetzt haben wir diese Hauptkomponente , die jetzt Ls ist, die wir verwenden können, und sie ist nicht mit einem Dokument von jemand anderem von vor langer Zeit verbunden . Stimmt, das ist es. Das sind Komponenten und Instanzen, Hauptkomponenten und Instanzen dieser Hauptkomponente. Erkläre ich das gut? Es ist kompliziert. Hoffentlich macht es jetzt Sinn oder zumindest ein bisschen mehr Sinn. Wir werden mehr davon üben. In Ordnung. Das ist es. Wir sehen uns im nächsten Video. 72. Wo sollten Sie Ihre Hauptkomponenten in Figma aufbewahren?: Hallo, da. Wir werden unsere Hauptkomponenten organisieren, weil wir sehr gut organisiert sind. Viele Designer haben dieses OCD-Problem, bei dem alles nett wäre und auf einer anderen Seite organisiert werden könnte. Das werden wir tun Das ist eine gute UX-Etikette und für die chaotischen Leute da draußen, du Ich zeige Ihnen einige Tricks, wie es irgendwie chaotisch und Ihre Hauptkomponenten überall lassen und Ihre Hauptkomponenten überall Sie es irgendwie chaotisch und Ihre Hauptkomponenten überall lassen und sie tatsächlich finden können. Richtig, lass uns reinspringen Organisieren wir uns. Lass uns anfangen, es aufzuräumen Wir haben hier unsere Hauptkomponente. Denken Sie daran, wenn Sie Ihre Hauptkomponente nicht finden können, können Sie mit der rechten Maustaste klicken und sagen, wo sie ist. Hauptkomponente, gehe zur Hauptkomponente, damit du weißt, wo sie sich befindet. Ich schneide ihn ab und ich werde dahin gehen, wo ich hingehen werde. Ich werde eine neue Seite erstellen. Dieser wird C po Let's heißen. Ich werde es so ziehen, dass es hier oben ist und ich werde auf der Seite sein, die ich sehe. Ich werde es einfach einfügen. Sehr groß. Am besten speichern Sie Ihre Hauptkomponenten einfach auf einer Komponentenseite, damit sie leicht zu finden sind. Wir machen diesen Kurs erst seit einer Weile, HiFi. Schau ihn dir an. Es ist Methias Inzwischen ist es einfach eine gute Angewohnheit, sie auf einer Komponentenseite zu haben oder sie getrennt zu halten , damit man weiß, wo sie sind, besonders wenn man mit jemand anderem zusammenarbeitet, man möchte nicht, dass sie durchgehen und versuchen müssen , herauszufinden, wo diese mysteriöse Hauptkomponente ist Ich werde eine weitere Komponente erstellen. Ich werde dir einen anderen Weg zeigen, es dorthin zu bringen. Ich habe die ganze Sache. Es wird mein Haupt-Navi sein. Ich werde zu den Momenten nur ein Bild machen. Ich werde daraus eine Komponente machen. Klicken Sie auf die Schaltfläche oder verwenden Sie die Tastenkombination Command Option K oder Sie können mit der rechten Maustaste klicken. Ordnung. Es wird es nicht zu einem Hauptbestandteil machen. Machen wir das, klicken wir mit der rechten Maustaste und gehen wir zur Erstellung der Komponente. Und ich will das nicht wirklich dabei , denn wenn ich am Ende damit herumspiele, habe ich Auswirkungen auf alle anderen Seiten Also ist es am besten, jetzt zu gehen, richtig, du, mein Freund, wirst zur Seite wechseln, oder du kannst es kopieren und einfügen und ich werde es auf meine Komponentenseite verschieben Ich gehe jetzt zu meinen Vermögenswerten und ich gehe zurück und ich gehe wieder zurück. Diese Datei hier unter meinem Komponenten-Panel, ich werde einfach alles hier haben und dann ist es einfach alles an einem Ort, anstatt es zu verteilen. Was sie hier tut, ist auf dieser Seite, und wenn ich eine andere Komponente habe, möchte ich Ihnen zeigen, wo sie unordentlich ist Wenn ich das hier mache und erstelle, wird das meine Karte sein, also verwende ich die Tastenkombination Command Option K oder Control Alt K auf einem PC Ich habe meine Komponente, ich werde ihr einen besseren Namen geben. Karte A, ich bin mir sicher, dass ich noch eine erstellen werde. Sie können sehen, dass es definitiv eine Komponente ist, weil es die vier Diamanten hat. Wenn ich jetzt zum Assets-Bedienfeld zurückkehre, können Sie sehen, dass ich am Ende Komponenten auf jeder einzelnen Seite habe. Aber wenn ich sie alle entferne, schau dir Mobile's here an. Wenn ich zu diesem hier gehe und A sage, wirst du jetzt auf meine Komponentenseite weitergeleitet. Kannst du sehen, dass es aufräumt? Das Gleiche gilt für mein Hi-Fi Ich habe das Logo hier irgendwo. Ich kann mit der rechten Maustaste darauf klicken und sagen, gehe zur Hauptkomponente. Da ist es da und ich werde es sagen und jetzt weitermachen. Komm schon, gehe zu den Seitenkomponenten. Sie werden einfach in diesem Dokument sehen, ich habe nur diese Komponenten. Macht sie sauber. Ihnen alle Seiten angezeigt, auf denen sie sich befinden Sie verstehen es, Dan, das tun sie. Das füge ich in Perfekt hinzu. Jetzt könntest du einfach alles chaotisch und herumliegen lassen. Du machst es am Anfang und dann schnell, du wirst sie einfach auf eine andere Seite verschieben Wenn Sie sich dafür entscheiden, die unordentliche Person zu sein und sie einfach in Ihrem Dokument herumliegen zu lassen , ist das völlig in Ordnung Wenn es wirklich schwierig ist, es herauszufinden, können Sie im Bedienfeld „Elemente“ einfach suchen Wenn ich die Karte benötige, die ich gerade erstellt habe, kann ich Karte eingeben und schon wird mir die Karte angezeigt. Das ist sehr praktisch, wenn Sie beispielsweise mit einem größeren Dokument arbeiten , wenn es einfach viele und viele verschiedene Dinge gibt. Viele verschiedene Schaltflächen sind mit allem anderen vermischt und Sie möchten nur nach Schaltflächen suchen. Guter Punkt, lassen Sie uns zu meiner Komponentenseite zurückkehren und einige Benennungen vornehmen. Taste klein, den habe ich schon gemacht. Jetzt bin ich gut. Ich habe diese Dinge bereits benannt, Karte eins. Ich bin ein Genie und ein Logo. Da hast du's. Ich muss nichts umbenennen. Aber du bist hier, ich zeige dir einen coolen Weg, all das durchzugehen und umzubenennen. Nehmen wir an, es hieß nicht Logo, ich kann die Tabulatortaste drücken, um nach unten zu gehen und diesem Namen einen Namen zu geben, weil Sie am Ende oft nur Bild 47, Bild 52 Hände hoch, falls du das schon bist. Ja, ich wusste, dass du es sein würdest. Ja, einfach mit der Tabulatortaste runter, sie umbenennen, mit der Tabulatortaste runter. Ist das nützlich? Ich finde es nützlich. Suchen, sicherstellen, dass sie auf unserer eigenen Seite sind und ein weiterer Trick, um die Hauptkomponente zu finden. Sie können mit der rechten Maustaste darauf klicken. Ich habe diese Instanz jetzt hier. Siehst du hier drüben, ich kann sagen, gehe zur Hauptkomponente, macht das. Sie werden auch sehen, wenn sie sich nicht in einem Rahmen befinden, Sie können den Namen sehen, aber Sie können auch das Symbol sehen. Sie sehen, wenn es sich auf einem Rahmen befindet, werden Sie weder den Namen noch das kleine Symbol sehen. Jetzt geht es nur noch darum , sie aneinander zu reihen. Vielleicht habe ich hier unten einen Bereich mit Schaltflächen für die OCD-Leute im Kurs, du kannst anfangen, Dinge aufzustellen, sie zu beschriften, sie zu gruppieren und sie an bestimmten Stellen zu platzieren Sie haben einen zweiten Knopf, Sie gruppieren sie, machen sie leicht auffindbar, bringen Ihren Feng Das ist es. So räumen Sie Ihre Komponenten auf Das müssen Sie nicht. Ihre Projekte größer werden und wenn Sie sie an andere weitergeben , werden Sie es wahrscheinlich tun Zumindest für die Illusion, organisiert zu sein. Das ist es. Wir sehen uns im nächsten Video. 73. Klassenprojekt 15 - Komponenten: Es ist Zeit für Klassenprojekte, und wenn Sie Unterrichtsprojekte überspringen, tun Sie das nicht Da steckt ein bisschen mehr dahinter. Ich möchte ein paar interessante Dinge hinzufügen , bevor wir das Klassenprojekt machen. Okay, lass uns darüber reden, was wir tun müssen, und dann zeige ich dir das Zeug. Ich möchte, dass Sie eine Komponentenseite erstellen, und ich möchte, dass Sie zwei Logo-Versionen erstellen, eine Schaltfläche, ein Navi. Lass es mich dir zeigen. Ich habe mein Navi mit den beiden Logos. Ich habe eines auf dunklem Hintergrund und eines auf hellem Hintergrund. Also kann man es dort nicht wirklich sehen. Es ist eine dunklere Version des Logos. Wenn man es also benennt, ist es schwer zu wissen. Das ist das eigentliche helle Logo und das ist das dunkle Logo, aber dieses hier heißt Hellmodus, Dunkelmodus. In UX ist es wirklich üblich, ihm dem Hintergrund, wohin es geht, den Namen zu geben, wohin es geht. Hellmodus, Dunkelmodus, auf den Sie wahrscheinlich schon einmal gestoßen sind Dies wird im hellen Modus verwendet , da es einen weißen Hintergrund gibt Dies wäre besser geeignet Auf einem dunklen Hintergrund ist das besser geeignet. Verwenden Sie den hellen Modus und den dunklen Modus. Also die beiden separaten Hauptkomponenten und nicht eine Instanz , die Sie geändert haben. Wenn Sie Probleme haben, einige Ihrer Elemente zu sehen, können Sie dies mit einem Rahmen versehen. Es ist kein Problem, dass ein Rahmen das etwas chaotischer macht, es sei denn, Sie können Ihren Dunkelmodus sehen oder Sie ändern einfach den Hintergrund Haben Sie hier also nichts ausgewählt, vielleicht finden Sie auf dieser speziellen Seite einen Hintergrund , der wie ein glücklicher Mittelweg aussieht, sodass jeder die verschiedenen Elemente sehen kann Die andere Sache, die ich mit dir teilen möchte , wenn du nicht an den Klassenprojekten arbeitest, die du machen solltest, ist diese hier verschachtelte Instanz eines Logos Also haben wir unser Navi hier oben. Darin haben wir unsere Navigation, das ist dieses Ding hier rechts. Okay. Und ich nenne den wahrscheinlich nie wirklich. Nennen wir das Nav Hyphen Buttons. Ich habe auch dieses Logo hier drin. Es ist kein Beispiel dafür. Das ist nur das Logo , das wir zuvor gemacht haben. Sie können sehen, es ist immer noch ein Rahmen. Was sollte ich tun? Weil das Problem jetzt ist, wenn ich das ändere, können Sie sehen, wenn ich es größer mache, kommt das nicht von ungefähr. Das wird als verschachtelte Instanz bezeichnet, was bedeutet, dass ich meine Hauptkomponente habe und eine Instanz darin haben möchte Es zu erklären hat nicht geholfen, oder? Also Hauptbestandteil. Ich habe eine Instanz davon erstellt, die ich in dieser Navigation verwenden werde. Ich werde diesen Kerl loswerden und ihn reinbringen. Es ist nicht die Hauptkomponente. Es ist nur die Instanz , damit ich separat daran arbeiten kann , die muss heruntergefahren werden. Aber das Coole ist, wenn ich damit herumspiele, weil das ein Hauptteil ist und das ist die Instanz davon, das kommt mit. Ich habe mehr Kontrolle. Ich habe diesen ganzen Nav-Bit drin, es ist eine Instanz. Es gibt keinen Grund, warum du nicht auch den Hauptteil hier drin haben könntest , also wäre das vielleicht einfacher, aber das ist es nicht. Es ist einfach schön, das Logo ganz für sich alleine zu haben , anstatt es darin zu integrieren weil Sie ein Logo an vielen verschiedenen Stellen verwenden werden, nicht nur im Navi. Lassen Sie uns einfach eine Instanz da drin haben. In Ordnung. Wenn du nicht die Klassenprojekte machst, was du tun solltest, kannst du jetzt gehen. Für den Rest von uns erstellen wir eine Seite, zwei Logos, ein dunkles, ein helles, eine Button-Komponente und das Navi, das das verschachtelte Logo enthält Ergebnisse: Mach einen Screenshot wie von allem auf deiner Seite und lade ihn in die Projekte hoch Wir müssen das nicht in den sozialen Netzwerken teilen , es ist nicht besonders interessant Wir werden später mehr teilen, aber stellen Sie sicher, dass Sie es in die Projekte hochladen, Aufgaben als Schrägstrich markieren und fertig . Wir sehen uns im nächsten Video 74. Wie man Komponentenvarianten in Figma erstellt: Hallo. Willkommen. Wir werden uns ansehen, was eine Komponentenvariante ist. Wir haben im letzten Video Komponenten gemacht, einfach etwas Wiederverwendbares, das sich in unserer Asset-Bibliothek befindet, aber wir werden noch einen Schritt weiter gehen und zwei Komponenten kombinieren, sodass wir später sagen können: A, Sie, Sie können tatsächlich zwei verschiedene Varianten derselben Sache haben. Es ist nett. Es hält die Dinge nett und einfach. Ich habe eine Schaltfläche , die viele Dinge sein kann , anstatt zu versuchen, viele, viele verschiedene herauszuziehen . Das Gleiche gilt für diesen hier, wir haben diese Variante gemacht. Zieh sie in dieses Ding. Ich kann sagen, ich will den Hova-Status oder den Behindertenstatus Ich habe Variance angerufen und werden wir jetzt tun . Lass uns reinspringen Richtig. Varianz der Tasten Ich werde meins auf meiner Komponentenseite erstellen. Sie können auf jeder beliebigen Seite angezeigt werden, und ich habe das gezeichnet. Es ist nur ein einfacher Rahmen mit etwas Text darin. Sonst nichts. Ich habe es in ein Auto Lout umgewandelt, damit ich den coolen Abstand habe, aber das war's Was ich tun werde, ist , es zu duplizieren. Ich werde zwei Versionen davon haben, und diese hier nenne ich zweitrangig. Ich möchte einen Button, den ich wiederverwenden kann und der sofort zu meiner Sekundärfarbe passt. Das ist die Sekundärfarbe. In Ordnung. Dieser wird der Erste sein. Ich habe meine primären und sekundären Tasten. Ich werde sie zu Komponenten machen. Also werde ich sagen, dass du, mein Freund, die primäre Schaltfläche eine Komponente sein wirst, scrolle nach oben, drücke diese Taste, du auch, beide Komponenten, so wie wir es getan haben. Das ist im Grunde alles, was wir aus dem letzten Video gemacht haben. Sehen Sie sich mein Asset-Panel an, es gibt zwei davon, zwei davon sind in Ordnung. Aber wenn Sie drei davon mit Ihrer dritten Farbe haben und dann eine weitere mit Konturen und unterschiedlichen Schriftgrößen und größeren Schaltflächen, kleineren Schaltflächen haben eine weitere mit Konturen und unterschiedlichen Schriftgrößen und , können Sie sich vorstellen, dieses Asset-Panel wirklich groß wird. Was wir tun können, ist, dass ich meine beiden Komponenten habe . Ich kann sie beide auswählen. Was passiert, wenn du zwei Komponenten gleichzeitig auswählst siehe oben) und sagst: Hey, möchtest du diese als Varianz kombinieren Du sagst, ja, das wäre großartig. Was ist passiert? Nicht viel. Es gibt eine gepunktete Linie auf der Außenseite. Was mit meinem Assets-Menü passiert ist, können Sie sehen, wurde von zwei zu eins wiederholt Dieser enthält jetzt eine Menge Zeug. Wow, viele Sachen. Mehr als eine Sache. es ausgewählt ist, kann ich hier rübergehen und sagen, schau, ich kann sagen, dass du der sekundäre Button bist. Ah. Oh, Sie können verschiedene Versionen oder Varianten in einer Komponente zusammenfassen Das sind Varianten. Lass uns noch eins machen. Lassen Sie uns nochmal einen Blick auf den Rahmen werfen. Es ist nur Auto Lot mit etwas Text drin. Keine Komponente, nichts. Aber hier möchte ich einen Button machen, der eher typisch für Websites ist, wo ich sagen kann, ich habe eins, zwei, drei. Das wird nicht meine Gliederung sein, das wird mein primärer Button sein. Dieser hier wird mein Mauszeiger sein, wenn Sie mit der Maus darüber fahren, und dann haben wir eine Option für diese Schaltfläche, die deaktiviert ist Lassen Sie uns sie ändern, wenn Sie mit der Maus darüber Ich werde die Farbe des Strichs so ändern , dass er dunkler wird, genauso wie der Der Text nimmt eine dunklere Farbe an, wenn Sie den Mauszeiger darüber bewegen und die Option deaktiviert ist. Ich werde nur die Opazität von allem, was darin enthalten ist, verringern was , damit er Kannst du sehen, was ich hier mache ? So wie du schon einmal deaktivierte Tasten gesehen hast. Jetzt müssen wir sie alle in Komponenten umwandeln. Es gibt einen Trick , um das etwas schneller zu machen . Du kannst sie alle auswählen. Anstatt nur eins nach dem anderen zu machen, kannst du sagen, sieh dir dieses kleine Drop-down-Menü hier unten an. Wenn Sie mehrere Frames ausgewählt haben, heißt es: Hey, möchten Sie eine Komponente erstellen? Nein, ich möchte mehrere Komponenten erstellen. Kannst du sehen, ich habe sie alle auf einmal gemacht. Glückliche Tage. Aber wenn ich sie auswähle, kann ich sie zu einer Variante kombinieren. Auch hier habe ich eine Variante, und wenn ich zu meinem Assets-Bedienfeld gehe, werde ich das Rückgängigmachen von einem, zwei, drei Dingen rückgängig machen, die mein Assets-Bedienfeld durcheinander gebracht haben, zu einem Da ist er da. Ziehe ihn raus und ich kann sagen, AT one muss die Hover-Option sein Nein, das wird die deaktivierte Option sein. Das ist eine Komponentenvariante, genau wie eine Komponente, aber mit einigen Abweichungen Lassen Sie uns diese ein wenig aufräumen. Anstatt Komponente zwei aufzurufen, ist das ein schlechter Name Das wird meine BTN-Gliederung heißen, nur damit ich weiß, was das in meinem Assets-Bedienfeld ist Sie können es hier oder oben benennen. Die andere Sache, die wir tun könnten, ist die Hauptkomponente ausgewählt ist, nicht die Instanz, die wir herausgezogen haben. Der Typ hier. Wir können dazu übergehen und sagen, gehen wir zu den Einstellungen hier und sagen, welche Immobilie wähle ich eigentlich aus? Weil das ist, was wir tun. Wir gehen hierher und sagen, welche Immobilie wollen Sie? Hat er eine Grundschule? Ich möchte hier drüben sagen, etwas beschreibender sein und sagen, nicht die Immobilie Ich möchte den Button auf Status setzen. Dann können Sie zwischen deaktiviertem Hover und primär wählen. Sie können diese verschieben, je nachdem, wie die Reihenfolge der Drop-down-Liste angezeigt werden soll Also jetzt hier drüben, dieser hier, welchen Button-Status möchtest du haben? Du kannst sagen, ich will primär, den ersten. Da hast du's. Sie haben eine extrem komplizierte Komponentenvariante entwickelt , um es noch komplizierter zu machen Geben Sie Ihnen einfach die Sprache, während wir weitermachen. Das wurde jetzt als Hauptkomponente bezeichnet, und das ist es immer noch, sie nennen es jetzt Komponentensatz. Das bedeuten die kleinen gepunkteten Linien am Rand. Das ist nur die Art zu sagen, dass dieser Typ hier besondere Fähigkeiten hat, alle in einer Variante zusammengefasst Ziehen Sie also eine Instanz davon heraus, oder Sie können es wie zuvor direkt aus der Hauptkomponente ziehen wie zuvor direkt aus der Hauptkomponente Sie können eine Kopie davon herausziehen. Es spielt keine Rolle. Dieser Typ hier, ich möchte den Status der Tasten ändern. Name. Sie können es nicht mit der Hauptkomponente machen müssen. Dann kann ich hier reingehen und den Schaltflächenstatus sagen , der geändert werden kann. Auch hier drüben kannst du sagen, in Ordnung, ich möchte das Wort Hover hier ändern Sie können das nicht auf der Instanz tun, aber Sie können zur Hauptkomponente oder zum Komponentensatz zurückkehren und zu den Einstellungen gehen und hier reingehen und sagen, das ist nicht primär, das ist etwas anderes Nehmen Sie also Ihre Bearbeitung am Komponentensatz oder an der Hauptkomponente vor. Sie verwenden diese beiden Wörter für diese Dinge und die Instanzen, die Sie einfach durchgehen und die Änderungen vornehmen , die Sie sehen möchten. Ich möchte diese Variante wählen. War das hilfreich? Hoffentlich war es das. Nochmals, das ist Teil des Grundlagen-Kurses, es ist ziemlich fortgeschritten, hauptsächlich, weil du den Button von jemandem findest du denkst: Fantastisch. Ich habe diesen Button kopiert. Ah, ich wünschte, es gäbe andere Versionen davon, und du müsstest vielleicht einfach hier rüber gehen und es überprüfen und gehen, jemand hat die ganze Arbeit für mich erledigt, und du kommst an einen Punkt, an dem du denkst, Mann, ich muss nur ein paar dieser Typen kombinieren, und du kannst deine eigenen Varianten erstellen. Ordnung, sieh uns an. Hardcore-Figma-Nutzer In Ordnung, das wird es sein. Wir sehen uns im nächsten Video. 75. Eine andere Möglichkeit, Varianten in Figma zu erstellen: Hallo, wir werden noch einmal üben, Varianten zu erstellen. Ich werde dir eine andere Art zeigen, sie zu erstellen. Im Grunde können Sie sie einfach innerhalb des Komponentensatzes erstellen innerhalb des Komponentensatzes anstatt sie alle zuerst zu erstellen, und ich zeige Ihnen einen coolen Trick, mit dem Sie diese in kleine Kippschalter verwandeln können diese in kleine Kippschalter verwandeln Oh, ich liebe Kippschalter. Okay, gute Praxis. Lass uns eine andere Variante machen. Ich zeige dir noch ein paar andere coole Tricks. Und natürlich die Umschalttaste. Wie macht er das? Richtig, lass uns reinspringen. Okay. Um zu beginnen, habe ich das gemacht, eigentlich habe ich es gerade aus einem früheren Tutorial gestohlen in dem wir Schlagschatten gelernt haben Das ist also nichts anderes als ein abgerundeter Eckrahmen mit einem kleinen Kreis darin Nichts ist los. Ich werde es in eine Komponente umwandeln, genau wie wir es zuvor getan haben. Es ist ein Tastenkürzel: Befehl, Option K, Strg, Alt K auf einem PC. Okay, ich habe eins davon. Und wenn du hier nach oben scrollst, okay, ich habe es selbst Toggle Switch genannt Okay? Und siehst du diese kleine Option? Okay? Anstatt nur zwei davon zu unterschreiben, klicken Sie einfach darauf. Und schau, ich werde eine Variante hinzufügen. Und das alles funktioniert einfach irgendwie für uns, anstatt zwei verschiedene Komponenten zu erstellen und beide auszuwählen und daraus eine Variante zu machen. Erstellen Sie eine Komponente und sagen Sie, ich möchte eine Variante dieser Komponente. Funktioniert es für dich. Den zweiten, der jetzt hier ist, werde ich doppelt einsammeln, um reinzugehen. Ich möchte, dass der Schalter hier drüben ist, vielleicht die Hintergrundfarbe in eine meiner neutralen Farben wechselt , also die Schalter aus Wie zuvor in unserem Assets-Menü können wir ihn einfach herausziehen. Wir landen am selben Ort. Es spielt keine Rolle, ob es so oder so aussieht, wir haben am Ende eine Instanz mit verschiedenen Varianten. Unsere Benennung ist alles sehr schlecht, aber es ist dasselbe. Sie können noch einen hinzufügen. Siehst du, ich habe es ausgewählt. Kannst du sehen, dass dieses kleine Plus unten erscheint, kannst du ein weiteres hinzufügen. Ich bin mir nicht sicher, welche Taste das bewirken wird . Ich stecke in der mittleren Taste fest. Ich kann es mir auch schnappen, und ich kann vielleicht Command D oder Control D auf einem PC drücken vielleicht Command D oder Control D , um Sachen zu duplizieren. Es spielt keine Rolle, wie Sie Ihre Varianz gestalten. Sie können sie kopieren und einfügen, duplizieren und auf die kleine Plus-Schaltfläche klicken Es spielt keine Rolle. Was auch immer für dich funktioniert Was ich tun werde, ist dir ein paar andere Dinge zu zeigen Ich lösche diese Knöpfe, können Sie feststellen, dass die kleine gepunktete Linie nicht abreißt, wenn sie sich umschlingt? Du kannst das Äußere nehmen und es in beliebiger Größe machen. Das ist nur ein visueller Hinweis , damit du weißt, dass , hey, das Wichtigste ist. Komponentensatz, die Hauptkomponente, und Sie können ihn nach Bedarf anpassen. Das Interessante ist, das ist einfach mehr ein lustiger Trick, ist unsere Benennung, oder? Wenn ich auf die Hauptkomponente klicke. Hier drüben werden Sie feststellen , dass es zwei Einstellungen gibt. Dieses kleine Symbol für universelle Eigenschaften ist überall. Dieses hier oben ist ein generisches. Was ich tun möchte, ist hier unten, es gibt diese andere Option hier damit ich einsteigen und meine Benennung vornehmen kann. Dieser wird sein, ich kann nicht denken. Ich werde es nennen. Der Herausgeber hätte das herausgeschnitten, aber ich saß da und kniff die Augen zusammen und überlegte, wie es heißen sollte Ich nenne es die Position für diesen Knopf, weil wir nichts benannt In Variante zwei heißt es Standard. Sie werden am Ende viele davon haben. Okay? Wir könnten ihnen andere Namen geben, aber wenn wir ihm den geheimen Namen geben, ist das ein geheimer Name? Auf. Und wenn die anderen abgesagt haben, sieh mal, was passiert. Okay? Wenn ich jetzt Enter drücke, werde das los. Wenn ich auf meine Instanz klicke , wird sie entweder aus der Bibliothek gezogen oder von hier kopiert Ich halte meine Wahltaste auf einem Mac gedrückt. Oh, Gegen-PC, egal, sie sind alle gleich. Alle Instanzen dieser Hauptkomponente. Schau, was passiert. Da ist ein Kippschalter. Um zu klicken, fügen Sie Ihre eigenen Soundeffekte Ich weiß nicht, warum das toll ist, aber wenn du das Wort verwendest, wenn du deine Varianz ein- und ausschaltest , wird das möglich Man kann sie wahr und falsch nennen, ja und nein. Ich weiß nicht, warum mich das glücklich macht. Okay? Ich liebe Kippschalter In Ordnung, es ist also ziemlich kompliziert. Lass uns noch einen machen, einen supereinfachen. Wenn ich für das Rahmenwerkzeug ein einfaches Rechteck zeichnen werde und ich sage, dass du, mein Freund, eine Komponente sein werden, und ich werde eine Variante von dir machen. Diese andere Variante wird eine andere Farbe haben. Es wird eine andere Größe haben. Und jetzt hier in meinem Eigenschaften-Panel, da ist es. Und er hat zwei Varianten. Warum machst du das nicht am Anfang, Dan? Ich hätte es wahrscheinlich tun sollen. Aber du kriegst den Dreh raus. Wir haben zuerst das Komplizierte gemacht und dann später dieses supereinfache. Sie können es sehr schnell und einfach verwenden und es hält Ihre Bibliothek einfach übersichtlich . Stellen Sie sicher, dass Sie Ihren Sachen einen Namen geben. Andernfalls müssen Sie einen Rahmen erstellen , von dem schwer zu verstehen ist, wofür er gedacht ist. Was wirklich gut daran ist, ist später, wenn Sie die Arbeit anderer Leute, anderer Designer in Ihrem Büro kopieren und einfügen oder vielleicht eine Bibliothek von jemand anderem verwenden Im Internet können Sie auf Dinge klicken und vielleicht finden Sie , dass dort einige andere Optionen versteckt sind Ordnung, ich bin zurück. Du wusstest nicht, dass ich gegangen bin. Ich war fertig und dachte mir, oh, wir sollten noch einen machen, denn ein weiterer wirklich guter Anwendungsfall uns beim Üben hilft, ist das helle und dunkle Logo. Die haben wir schon. Wir haben sie schon gemacht. Wir haben es schon abgekürzt, oder? Wir haben diese beiden Versionen. Sie müssen nicht übereinander liegen. Ich weiß nicht, warum ich sie stapele, aber ich kann jetzt beide auswählen Oh, werde direkt zu einer Variante. Und jetzt hat es unsere Bibliothek aufgeräumt. Anstatt dieser beiden Dinge haben wir nur eine Sache. Wir können es herausziehen und sagen: Okay, ich möchte den Logo-Hellmodus oder den Dunkelmodus Geh. Vielleicht ändere ich jetzt die Benennung. Ich könnte sagen, anstatt Komponente zwei zu nennen, könnte ich dieses eine Logo nennen, und darin gehe ich auf diese Eigenschaften ein, und ich werde sagen, dass die Eigenschaft Mode ist, und anstatt Logo Dark Mode zu heißen, oh, wo gehen wir hin? Ich habe mich verirrt. Zurück zu dir. Statt des Logo-Dunkelmodus setze ich einfach Can't Type ein. Dunkelmodus, Hellmodus mit Tabulatortaste. Da hast du's. Noch ein wirklich guter Anwendungsfall, viel besser als der Kippschalter oder dieser Typ So herrlich er auch ist. In Ordnung, das ist das Ende. Wir sehen uns im nächsten Video. 76. Klassenprojekt 16 - Varianten: Hallo, es ist Zeit, das zu üben , was wir geübt haben. Ich möchte, dass du einige deiner eigenen Varianten machst. Okay, wir werden also vier davon machen. Drei davon haben wir bereits in der Klasse gemacht. Die kannst du einfach machen, falls du es noch nicht getan hast. Und dann möchte der letzte, dass du hier unten ein Kontrollkästchen hinzufügst. Auch wenn du das Klassenprojekt nicht machst, solltest du es tun. Ich gebe dir einen kleinen Tipp was du falsch machen könntest. Also schau mal, was du machen wirst. Ich möchte einen Button machen , der zwei Varianten hat. Einer ist der sekundäre und einer ist der primäre. Ich möchte, dass du einen Kippschalter mit einer kleinen Kippoption Das Gleiche gilt für das Logo, es wird einen hellen und einen dunklen Modus von diesen Typen geben, zwischen denen du wechseln kannst, dann möchte ich, dass du diese Checkbox machst, worauf du stoßen könntest, und das ist etwas, auf das ich sehr selten stoße, aber es ist passiert, während ich Ich dachte, oh, hier. Was am Ende passiert ist, sieh dir das an, ich habe meine Checkbox. Es sieht richtig aus. Ich habe einen ohne die Technik, einen mit der Technik hier drüben. Ich denke, A, ich werde es einfach umschalten auf Ich kann es auf nichts umstellen. Ich habe es eingeschaltet, aber dann lässt es sich nicht ausschalten. Es ist komisch. Das liegt daran, dass dieser Komponentensatz hier zwei Varianten enthält. Seite an Seite statt übereinander, das spielt keine Rolle. Was wichtig ist, ist die Benennung. Dieser Typ hier heißt Standard und dieser Typ hier heißt Standard. Ich kann hier in meinem Ebenen-Panel Standard und Standard sehen . Dieser Typ weiß nicht, was er zeigen soll, weil sie beide als Standard bezeichnet werden. Wir können es umbenennen, wir können das Kontrollkästchen nehmen. Wir können uns die Grundstücke hier ansehen. Wir können dort eigentlich nicht nur einen von ihnen haben. Ich muss es hier machen. Ich hab einen. Das ist das Leere. Es gibt einen besseren Namen dafür. Ich kann mir das nicht vorstellen. Inaktiv, das ist es wahrscheinlich. Dieser wird überprüft. Weil sie anders sind, weiß dieses Ding jetzt, was zu tun ist. Es kann sagen, richtig, ich habe zwei Optionen, nicht nur Standard, du kannst sie ein- und ausschalten. Wenn ich anrufe, machen wir es auch mit diesem, um es kaputt zu machen. Ich gehe hier rein und nenne beide Dunkelmodus, Dunkelmodus. Beseitigt einen, aber beide heißen Dunkelmodus. Also dieses Ding hier, ich weiß nicht, was ich tun soll. Dunkler Modus, dunkler Modus. Stellen Sie also sicher, dass beide Varianten ihren eigenen eindeutigen Namen haben. Das passiert oft standardmäßig. Komponente eins, Komponente zwei, Komponente drei, Komponente vier. Ich weiß nicht, wie ich meine dazu gebracht habe, beide als Standard zu bezeichnen, aber ich habe es getan und du vielleicht auch. Da hast du's. Ich möchte, dass du diese vier erstellst und ich möchte, dass du einen Screenshot von ihnen machst, auf dem ich das Set und das Beispiel davon sehen kann , und es in den Projektbereich hochlädst. Viel Spaß beim Variieren. Wir sehen uns im nächsten Video. 77. Hinzufügen eines Popup-Overlay-Modals in Figma: Hallo zusammen. Bist du bereit? Wir werden das machen. Drei, zwei, eins, eins, los. Ich liebe das. Es ist ein Prototyp, bei dem dieses Modal hier über allem auftaucht Ich kann es schließen, es erscheint automatisch über einem vorhandenen Frame Lassen Sie mich Ihnen zeigen , wie das in Figma geht. Damit das funktioniert, müssen Sie das Objekt, das Sie öffnen möchten , in einem eigenen Rahmen im Hintergrund Es darf sich hier nicht in anderen Frames auf dieser Seite befinden, Sie haben es einfach nebenan. Ich habe nur einen kleinen Rahmen mit einigen Symbolen und einer Schaltfläche darin gezeichnet . Ich kann einfach ein normaler Rahmen sein. Es spielt keine Rolle. Ich habe meins so gestylt, dass es wie ein Newsletter-Popup aussieht Wir wechseln in den Prototypmodus, Shifty ist , oder Sie können hier oben auf Prototyp klicken Was wir sagen, ist Homepage hier, ich möchte, dass du dorthin gehst Wir wollen nicht, dass es einen Navigate Two gibt. Wir möchten, dass die Aktion sagt, dass ein Overlay geöffnet werden soll. Das ist es im Grunde. Schauen wir uns an, was das bewirkt. Lassen Sie uns einen Prototyp der Homepage erstellen. Gehen wir zu Prototype. Warte auf eine Ladung. Und es ist auf „Ein Klick“ eingestellt, also klicke ich sofort. Der Newsletter erscheint. Ich weiß es nicht. Irgendwas Tolles daran. Schließt nicht, aber ich weiß nicht, SMS, also was wir tun müssen, ist auf das Y hier zu klicken oder auf die Nudel, sagen wir, nicht auf Klick, wir wollen, dass es nach einer Verzögerung Ich sage nach etwa 4 Sekunden, 4.000 Millisekunden. Lassen Sie uns das versuchen Nochmals, ich werde mir eine Vorschau des Typen ansehen, sagen wir spielen. Okay. Und nach 4 Sekunden, 4 Sekunden. Da ist es. Hallo. Es ist erschienen. Es geht nicht weg. Wir lassen die Vorschau offen. Schauen wir uns ein paar andere Dinge an. es hier ausgewählt ist, möchte ich, dass es nach einer Verzögerung von 4 Sekunden zentriert ist. Ich möchte, dass es geschlossen wird, wenn ich auf die Außenseite klicke. Das ist ziemlich üblich und ich möchte , dass der Hintergrund nur überblendet wird. Ich mag 50%. Sieht ganz richtig aus. Und die Animation, lassen wir sie sich darin auflösen. Und lassen Sie uns jetzt eine Vorschau darauf geben. H hier. Drücken wir Reset. Denken Sie daran, es ist wichtig, 4 Sekunden. Geh. Geh. Oh, es hat fast funktioniert. Verblasst, was gut ist. Wenn ich jetzt auf die Außenseite klicke, geht es weg. Warum ist der schwarze Hintergrund nicht erschienen? Lass uns einen Blick darauf werfen. Hintergrund. Also schalte ich das aus. Hast du das gesehen? Wie dem auch sei, ich fasse Figma Wahrscheinlich bin ich es. Nach einem Reset drei, zwei, eins. Geh. Blendet aus dem Hintergrund heraus Ich kann mich anmelden, um zu meiner Abonnementseite zu gelangen. Ich habe diese Schaltfläche noch nicht eingerichtet, aber wenn ich im Hintergrund auf Aus klicke, verschwindet sie. In Ordnung, wir haben einen E-Mail-Newsletter erstellt. Sie können das, sagen wir, für eine Warnung anstelle einer Schaltfläche verwenden. Also werde ich sagen, wenn ich auf diese Schaltfläche „Bis jetzt“ geklickt habe, bin ich auf dem Prototyp. Inzwischen geht es zu diesem anderen Frame Habe ich hier noch einen Rahmen? Rahmen. Das sind alles Bilder. Das ist ein Rahmen. Ich will nicht, dass es dorthin geht. Lass uns einfach ein Rechteck zeichnen und es wird rot sein. Sagen wir, es ist eine Fehlermeldung. Das müssten wir entwerfen. Aber im Moment klicke ich auf die Schaltfläche und gehe zu Prototype Shifty und ich werde sagen, geh dorthin, aber ich möchte auf Click sein Ich möchte nicht auch navigieren. Denken Sie daran, ich wollte das Overlay öffnen und ich möchte, dass es zu Frame 29 Ich habe dieses Pop-up-Modell genannt. Genau so habe ich es genannt. Modal ist der Oberbegriff für eine Einheit, die, wie ich finde, keine weitere Seite ist , wie eine kleine Gruppe. Es ist ein Modell. Mittig, nah beim Klicken , Hintergrund, alles erledigt. Das ist alles gut. Alles klar, probieren wir es aus. Startseite. Und lassen Sie uns eine Vorschau anzeigen. Eigentlich gehen wir einfach zurück und klicken auf Reset. Wenn ich jetzt auf die Schaltfläche B klicke, mein kleines Warndialogfeld angezeigt, oder es könnte so sein, sind Sie sicher? Bist du dir sicher? Oder vielleicht haben Sie dieses Feld nicht ausgefüllt oder was auch immer das Popup-Modell sein mag. Eine andere Sache, die Sie vielleicht recherchieren ist nur ein Teil der Terminologie. Ich habe Model benutzt. Falls du das vielleicht schon einmal gehört hast, meine Akzente sind vielleicht etwas hart. Nicht Modell, Modell mit einem A. Es gibt auch Dinge wie Popups, Dialogfelder. Sie werden sie auch anrufen. Warnungen, dass sie sie Snackbar nennen werden, sind interessant. Google-Snackbar. Das ist interessant. Das passiert auf Mobiltelefonen. Es ist ganz unten. Es ist ein kleines Pop-up. Sie nennen sie Snackbar. Da hast du's. Es ist eine coole kleine Prototyping-Technik für Pop-Ups und das war's. Ich werde es im nächsten Video sehen 78. Erstellen und Prototypen einer Tooltip in Figma erstellen: Hallo, wir werden ein weiteres Overlay erstellen, im Grunde die gleichen Funktionen mit einer weiteren Änderung, und es ist dieser Tooltip, bei dem das Overlay nicht genau in der Mitte der Seite landet, wie wir es für den E-Mail-Newsletter getan haben Schau dir das an. Wenn ich darauf klicke. Es erscheint direkt über dem Ding , an dem wir gerade arbeiten. Nun, das ist ein ziemlich langes Video nur weil ich es einfach mache, wir machen es zusammen. Wenn Sie nur wegen diesem Tooltip hergekommen sind und wissen wollen, wie Sie ihn an der gewünschten Stelle platzieren können, komme ich gleich zur Sache. Im Grunde genommen ist alles, was Sie tun müssen , wie wir es zuvor getan haben, wir werden es mit einem Klick tun. Wir werden das Overlay öffnen. Das einzige, was wir ändern, ist die Positionierung. Es ist standardmäßig auf die Mitte eingestellt, die sich genau in der Mitte des Bildschirms befindet, was wir nicht tun. Okay, wir möchten manuell sagen Dann manuell, Sie können es an eine beliebige Stelle verschieben. muss immer noch das Leben außerhalb des Bildschirms starten und Sie können es auf manuell ändern und es dann einfach an die gewünschte Stelle verschieben. Dieselbe Technik beim Klicken, Olay, es geht zu diesem Frame namens Olay CC hier oben, und ich schalte es auf manuell um, dann kann ich es verschieben Aber für den Rest von uns, der alles zusammen bauen will, heißt es einfach abhängen und machen Wir werden dieses Ich und dieses Pop-Up-To hier oben bauen . Das werde ich nicht tun. Ich habe meine Checkout-Seite voller gemacht, ein Bild in den Hintergrund gestellt und dann einige Rechtecke in Text gezeichnet Du weißt, wie das geht, du kannst das selbst machen. Ich habe nur ein weißes Rechteck mit etwas Text, mit einigen Rechtecken mit abgerundeten Ecken, die wie Felder aussehen Sie Ihre Kreditkarte eingeben könnten Also überspringen wir diesen Teil und fangen diese einzigartigeren Teile zu bauen Lass uns reinspringen. In Ordnung, also die langwierige Art, es zu tun, ist, dass wir uns zusammensetzen. Ich gehe, oh , mein Circatol, zeichne einen Ich gehe zum Design. Ich werde ihm eine Füllfarbe mit meiner Akzentfarbe geben. Möglicherweise haben wir eine eher informative Farbe Oft sind Informationen grün. Erfolg ist grün Tatsächlich sind Informationen blau. Sie müssen herausfinden, welche Informationsfarben Sie für Ihre Website verwenden möchten. Er ist immer rot. Die Konformation ist normalerweise immer grün. Die Information ist blau oder grau. Lassen Sie uns unser Ich mittendrin platzieren . Lass uns das I-Tool verwenden. Eigentlich möchte ich es mit dem Buchstaben I versehen, ich benutze das Textwerkzeug, das ist T, tippe ein I. ein. Und aus irgendeinem Grund muss ich es sein. Ich werde den Link zum Stil unterbrechen. Es muss ein Serapont sein. Ich weiß nicht warum, tut es. Fühlt sich so an. Ich werde mein Nein verschieben. Ich benutze meine Harken anal. Okay, halten Sie eine Shift-Taste gedrückt, um sie umzudrehen Das sieht für mich gut aus. Wenn die Dinge nicht stimmen, ist es manchmal schwierig, sie in Ordnung zu bringen. Wenn du es vorhin unter Einstellungen übersprungen hast, hier oben in den F-Einstellungen gibt es hier oben in den F-Einstellungen ein eingerastetes Pixelraster Du kannst es ausschalten, sodass es etwas einfacher ist , es in der Mitte auszurichten Sie können auch auf dieses I klicken, Umschalttaste gedrückt halten, den Kreis auswählen, und Sie können es horizontal verwenden. Die Tastenkombination ist Option H oder Alt H auf einem PC. Vertikal ist dieselbe Option oder Alt, aber V. Ich benutze diese Option ziemlich oft. Ich werde das weiß machen, und das wird meine kleine Gruppe hier sein. Sind beide anklickbar. Ich werde bei gedrückter Umschalttaste auf beide klicken. Sie können sie hier sehen. Sie sind da. Ich werde sie in einen Rahmen verwandeln. Ich sage Rechtsklick, ich werde sagen, diese Auswahl in eine kleine Einheit einrahmen, um die ich bewegen kann. Es ist wie Gruppieren. Das ist dieser Teil Jetzt brauchen wir den Teil, den wir überlagern können. Das Wichtigste ist, dass Sie es hier unten entwerfen können, aber es muss aus dem Rahmen herauskommen , sonst funktioniert es nicht Vielleicht kriege ich hier die Grundlagen. Ich gruppiere das Frame-Tool und gehe, ich möchte, dass es ungefähr so groß ist. Fantastisch. Jetzt schnapp ich es mir und ziehe es hierher und aus irgendeinem Grund hatte ich es nicht satt. Ich bin mir nicht sicher warum. Ich werde mir diesen Rahmen schnappen. Und mir wird klar, dass ich für das, was ich tue, keinen Rahmen verwenden kann. Rahmen müssen rechteckig sein. Sie werden feststellen, dass selbst aus dem Kreis, um den wir einen Rahmen gelegt haben , eine Schachtel entstand. Dies ist einer der Bereiche, in denen sie immer noch das Rechteckwerkzeug benötigen. Die Hälfte des Rechteckwerkzeugs hat ungefähr diese Größe. Das Coole am Rechteckwerkzeug ist, dass man es mit dem Stiftwerkzeug auseinandernehmen und auseinandernehmen kann, was ich auch tun möchte. Ich möchte zuerst zu einigen abgerundeten Ecken gehen. Gehen wir acht. Nein, es ist zu viel, vier, ich mache es weiß. Ich nehme mein Stiftwerkzeug. Eigentlich werden wir zuerst in den Zeichenmodus wechseln. Lass uns das machen. Lass uns in den Zeichenmodus gehen. Gehen wir in den Zeichenmodus, der Objekt bearbeiten heißt. Ich bin hier in den Zeichenmodus gegangen. Ich habe das Auserwählte, ich gehe hinein. Sie können entweder darauf doppelklicken oder dort auf die Schaltfläche klicken, die aufgerufen wurde. Komm schon, Dan, du schaffst das. Das hier, Objekt bearbeiten. Ich gewinne. Jetzt kann ich mein Stiftwerkzeug nehmen und sagen, ich will da noch einen. Ich will einen da haben, ich will einen in der Mitte, und dann nehme ich mein Verschiebewerkzeug. Und ziehe das einfach nach unten, damit ich ein paar Extrapunkte habe. Oh, es ist sogar abgerundet. Ich mag es. Nett. Du könntest einfach ein Dreieck verwenden und sie mit dem Shape Builder-Tool zusammenfügen, aber das wird für mich funktionieren Ich möchte meins wahrscheinlich rüberbewegen. Ich werde Schichtkiesel halten, sie auf diese Seite ziehen, das wird mein kleiner Modor sein Ich werde mir meinen Typ-Zeh schnappen und ihn hier reinlegen. Ich werde HeiPTO holen. Ich bin mir nicht sicher, was sie als Backbone verwenden, um das umzuschreiben Ich werde eine E-Mail wie eine E-Mail an meinen Chef schicken. Ich will CVP x. Irre ich mich? Da hast du's. Oh. Nehmen Sie Änderungen vor. Mach es nicht mehr als wie viele Wörter? Eins, zwei, drei, vier, fünf, ungefähr acht. Oh, lass uns sieben machen. Wahnsinn, was man ihm sagen kann. C. Es ist weißer Text, was nicht gut ist. Ich glaube nicht, dass du es dafür tun kannst. Sie können KI im Moment nicht verwenden, um Farben zu ändern, aber los geht's. Es ist auch nicht sehr gut. Ich brauche es wahrscheinlich, um Dinge zu sagen wie, es ist auf der Rückseite der Karte. Aber wie dem auch sei, das reicht. Also werde ich die zusammenkleben. Ich werde sichergehen, dass sie in einem Rahmen sind. Das ist eine der Regeln. Das Overlay kann kein Rechteck darauf laden, aber es kann einen Rahmen laden Also kann ich einfach all das auswählen und dir sagen, mein Freund, die Rahmenauswahl Ich gebe ihm einen besseren Namen als Frame 30. Das wird ein Overlay sein, CVB. Ich stelle gerne das generische Wort an erste Stelle, dass, wenn Sie viele davon in Ihrem Assets-Menü haben , was wir derzeit nicht tun, alle Überlagerungen gruppiert sind Wie auch immer. Ich glaube, wir sind fast bereit zu gehen. Lass es uns ausprobieren. Shift E, gehe in den Prototypmodus. Shift E. Shift E funktioniert nicht , wenn Sie sich gerade im Zeichenmodus befinden. Ist es aber nicht. Ich war im Zeichenmodus, Shift E funktioniert nicht. Ich muss zurück zum Design. Und dann geh zu Schicht D. Gates, ich werde sagen, du, mein Freund, wirst dort hingehen. Ich will da nicht navigieren. Ich möchte zu OnClick gehen. Ich möchte, dass das Overlay wie zuvor geöffnet wird und standardmäßig in der Mitte geladen wird Lassen Sie uns das kurz zusammenfassen , um es Ihnen zu zeigen. Ich möchte es bei allen Schritten in der Vorschau ansehen , denn wenn Sie es kaputt machen, wissen Sie nicht, wo Sie die letzten 20 Schritte gemacht haben, also schauen Sie es sich einfach weiter an, während Sie weitermachen, und das funktioniert Es ist genau in der Mitte. Es ist nicht was ich. Okay, zuerst möchte ich unter dem Design hinzufügen, Shifty Ich möchte Schlagschatten hinzufügen , weil das ein bisschen komisch aussah Ich habe meinen Stil von früher, super toller Stil. Können Sie sehen, wie Stile anfangen nützlich zu werden, wenn Sie sich erst einmal mit dem Fleisch und den Kartoffeln des Designs beschäftigt haben, brauchen Sie Konsistenz. Ich möchte, dass das genauso ist wie Schlagschatten, der dort aufgetragen wurde. In Ordnung, also lass uns jetzt dazu gehen. Geh zurück zu Shifty. Prototyp-Modus. Ich klicke auf die Nudel oder den Draht, und ich sage, bei Klick öffne die Overlay-Position, nicht zentriert oder oben links Es gibt einige Standardwerte. Sie können auf Manuell klicken. Ein Handbuch ist cool. Gehen wir in die andere Richtung. Du kannst es einfach verschieben, wohin du willst. Es muss sein Leben beginnen und dort oben leben. Aber sobald du auf Manuell geklickt hast, kannst du es ziehen und sagen, ich möchte, dass es dort erscheint, wenn die Überlagerungsinteraktion stattfindet Sofort, lass uns eine Auflösung machen. Lass uns schließen, wenn wir auf die Außenseite klicken. Das ergibt Sinn. Nochmals Vorschau, klicken Sie auf Reset, das ist das Archiv, auf das ich klicke. Oh. Schau uns an. Pop-Up-Overlay Jetzt ist das Klicken nützlich, besonders wenn Sie auf Mobilgeräten arbeiten Wenn Sie eine Desktop-Version verwenden, kann es schöner sein, einfach zu ihr zu gehen Wenn Sie auf die Nudel klicken, kann ich sagen: Statt Onclick könnte ich sagen, beim Schweben mit der Maus über den Mauszeiger fahren Der Grund, warum das auf Mobiltelefonen nicht funktioniert , ist, Sie wissen warum, weil Sie den Mauszeiger nicht bewegen können, aber Sie können den Mauszeiger aber Sie können Das ist ganz nett für einen Desktop. Stellen Sie nur sicher, dass, wenn Sie dies für Mobilgeräte tun, es auf „Vielleicht beim Klicken“ eingestellt ist. Wir. Es ist ein weiteres Pop-Up-Overlay Wir haben es hier eher als Tooltip gemacht, aber der Begriff ist Overlay und die Regeln lauten nur, dass der Frame, den Sie für das Overlay oder das Popup oder in diesem Fall eine QuickInfo bekommen , außerhalb des übergeordneten Frames liegt Eines der Dinge, die die Leute bei der Arbeit auffallen , ist, dass sie vielleicht eines tun und sagen, sie haben das falsch verstanden, und was sie tun, ist , ich möchte zu dieser anderen Sache gehen. Sie haben zwei beantragt. Was am Ende passiert ist, können Sie sehen dass es hier ausflippt. Es ist so, du kannst nicht zwei haben haben ein On-Hover und ein On-Click und vielleicht finden Sie heraus lassen Sie uns versuchen, dieses in On-Click zu ändern . Kannst du sehen, dass es abgeklungen ist Ist es so, äh, ich mache es? Ich habe ewig versucht herauszufinden, warum ich das nicht per Klick schaffe. Und ich wusste einfach nicht , dass es dafür tatsächlich zwei gibt. Weil du manchmal hier arbeitest. Wenn du darauf klickst, denkst du: In Ordnung. Es wird beim Klicken darauf umgestellt. Ich kann nicht mögen, Oh, warum nicht? Weil du hier nicht wirklich hinschaust. Sei einfach vorsichtig. Wenn es besser ist, heißt das wahrscheinlich, dass du zwei davon hast. Okay? Ich möchte es loswerden. Ich werde meinen On-Click behalten. Du minus sie einfach. Jetzt ist alles in Ordnung in der Overlay-Welt Richtig. Das ist ein kleines modales Popup-Popup-Overlay mit Tooltip Wirf die ganze Terminologie weg. Sie haben wahrscheinlich schon von allen gehört. Aber wie dem auch sei, das ist es. Ich werde dich im nächsten Video sehen. 79. Was sind Strömungen in Figma?: Ordnung. In diesem Video werden wir über Ströme sprechen. Das sind diese Dinge. Du hast sie überall gesehen. Was machen sie? Lass es mich dir zeigen. In Ordnung. Also, was bewirken Ströme? Im Grunde sind sie nur der Ort, an dem Prototypen beginnen. Du kannst sie nicht sehen, erinnere dich an B auf Prototyp, Schicht E. Wir kennen Dan, wir wissen es, und du wirst sie vielleicht sehen. Du könntest nicht. Wenn Sie keins sehen, liegt das daran, dass Sie kein Prototyping-Setup haben . Dieser hat keinen Flow Schau zu. Nichts hier, aber wenn ich es mit etwas verbinde, beobachte, was passiert. Wenn ich es damit verbinde, erscheint Flow Three. Deshalb haben Sie am Ende mehrere, weil das keine Möglichkeit hat, zu diesem Thema zu gelangen. Das ist ein neuer Flow. Das geht nur bis da hoch. Dieser hier, geht nach da oben. Schauen wir uns unseren früheren an. Lass uns zum Mobile Info Lo Fi Event gehen. Wir haben einen Fluss , weil der dorthin geht, dorthin geht, dorthin geht. Das ist kontinuierlicher Fluss. Wenn ich hier unten noch eine Seite habe, einen Frame und einen Frame, bin ich im Prototyp-Modus, also werde ich mir einen weiteren Frame holen? Hab ich nicht. Du gehst hierher. Ich komme zu, weil diese nicht zusammenpassen. Der Grund, warum du zwei haben würdest, ist, dass du sie mit anderen teilen und sagen kannst: Hey, auf derselben Seite möchte ich, dass du dir die Startseite ansiehst, aber auch diesen anderen Flow, den ich erstellt habe. Lassen Sie uns ein interessanteres Beispiel machen. Ich habe das aus der Vorlagenbibliothek. Es heißt Onboarding Logging and Signup. Wo habe ich es gefunden? Ist der hier? Ich weiß es nicht. Ich suche nur nach Anmeldedaten. Ich habe diesen gefunden. Es ist ein gutes Beispiel. Es gibt eine Registrierung, Sie haben eine E-Mail-Bestätigung, haben das Passwort vergessen. Es gibt all diese verschiedenen Aufgabenabläufe , die nicht miteinander verbunden sind. Es gibt keine Möglichkeit, von der Registrierungsseite zur Seite „Passwort vergessen“ zu gelangen. Wir haben unseren ersten. Ich habe sie miteinander verbunden. Das ist nur ein echter Grundablauf für das Register. Ich gehe hier runter und sage, Passwort vergessen wird von hier aus gelöscht. Sobald ich das mache, startet Flow Two, weil es so läuft, alles klar, das ist ein ganz anderer Flow. Und das Tolle daran ist, dass ich direkt von hier aus eine Vorschau anzeigen kann , also kann ich gehen, in Ordnung, Flow eins, auf Play klicken und ich kann eine Vorschau dieses Register-Flows Dann kann ich hier zu diesem gehen und mir eine Vorschau davon ansehen. Schritt zwei, Passwort vergessen. Welches wird nicht geladen. Komm schon. Es funktioniert nicht. Warum arbeitest du? Hm. Ich weiß nicht, warum es nicht funktioniert. Lass mich darüber nachdenken. Schauen wir uns einen anderen Weg an, um in den Flow zu kommen. Wenn Sie einfach auf Präsentieren klicken oder zu diesem anderen Tab gehen, werden Sie sehen. Es ist eine praktische Art, mit Menschen zu teilen. Du kannst sagen: Schau, du kannst zu Flow One oder Flow Two gehen. Dieser oder jener funktioniert hier. Ich weiß nicht warum. Es gibt also keine Möglichkeit, von diesem ersten wegzukommen. Zum zweiten. Also kannst du die Navigation hier benutzen. Wenn es nicht aktiv ist, kannst du darauf klicken. Das kleine Seitenleistensymbol hier, und dafür sind Flows Lass uns unseren Flows einen Namen geben. Möglicherweise haben Sie versehentlich Flows bekommen. Du meinst vielleicht, ich möchte eigentlich nicht, dass das ein Flow ist. Was Sie tun können, ist, darauf zu klicken, oder Sie können im Hintergrund klicken, ohne dass etwas ausgewählt ist Siehst du, da sind meine Flows? Ich brauche dich nicht. Ich werde sagen, dass du tot bist. Ich will nicht, dass irgendjemand Zugang zu diesem anderen Bild bekommt. Es ist kein Ausgangspunkt, es ist nur etwas, woran ich gerade arbeite. Was Sie auch tun können, ist , wenn nichts ausgewählt ist. Hier drüben steht Flow One. Sie können darauf doppelklicken und sagen, das ist mein Einkaufsablauf, Kauffluss. Wenn ich mir hier eine Vorschau davon ansehe, habe ich eigentlich nur einen Flow, nicht wahr? Wenn Sie nur einen Flow haben, wird dieser standardmäßig nicht angezeigt. Sie können ihn einschalten. Kaufablauf. Schauen wir uns das an. Eigentlich verstehst du die Idee. Du kannst sie benennen. Eine Beschreibung kann auch nützlich sein. Kaufablauf hier. Ich habe nichts ausgewählt. Kaufablauf, ich kann hier reingehen und ich habe eine Weile auf den Bildschirm gestarrt, wo zum Teufel ist die Beschreibung? wo zum Teufel ist die Beschreibung Ich hab's rausgefunden. Du klickst hier darauf, das eigentliche Etikett, das an dem ersten Bild hängt. Dann ist da noch dieses kleine Symbol, das wie Papier aussieht, und Sie können eine Beschreibung hinzufügen. Das könnte die Änderungen von D beinhalten. Okay? Also, wenn ich eine Vorschau davon sehe, hast du's. Beinhaltet die Änderungen für Doug. Sie können ändern, wo der Flow beginnt, indem Sie ihn ziehen. Angenommen, Sie möchten, dass es hier beginnt und das sind vielleicht Rückseiten Sie können sie herumschleppen. Mach das rückgängig. Eine weitere nützliche Sache ist, dass Sie, wenn hier nichts ausgewählt ist, feststellen werden, dass wir neben diesem Flow einen weiteren Flow erstellen. Das haben wir nicht getan, oder? Wenn es zunächst keinen Flow gibt, können Sie einen Flow, einen Flow-Startpunkt, hinzufügen. Bop wird das meinen Testablauf nennen. Okay. Jetzt, wo nichts ausgewählt ist, klicke ich einfach auf den Hintergrund und wir bekommen unsere beiden Flows. Hier gibt es diese Optionen. Dieser hier ist wirklich hilfreich. Nehmen wir an, unser Dokument enthält viele Textflüsse, und wir möchten direkt auf dieses Dokument verlinken. Es wurde in die Zwischenablage kopiert. Ich kann in meine E-Mails gehen und sagen, dieser Link hier, Doug, bringt dich zu meinem Dann könnten Sie diese einfach trennen, weil es manchmal , die Vorschau an jemanden zu senden, den Sie erklären müssen, Sie müssen auf dieses kleine Symbol klicken und sich diese Wenn du sie einfach in der Dokumentation haben oder sie jemandem per E-Mail schicken möchtest , es manchmal besser, sie einfach in separate Links einzufügen Und wir öffnen in einem Browser. Es wird in Chrome geladen und geht dort direkt zu diesem Flow über. Wenn Sie zum Testablauf wechseln möchten , kopieren Sie einfach den anderen Link. Sie wissen, wie man Links kopiert. Lass es uns trotzdem machen. Ich habe also nichts ausgewählt, ich gehe zu meinen Flows über. Oh, es funktioniert nicht. Ich benutze mein Schreibgerät. Gehen Sie zurück zu Ihrem Verschieben-Tool und wählen Sie dann nichts aus. Dann kann ich sagen, dass ich auf dieses Tool verlinken möchte. Und wenn sie den Link öffnen, beginnt er standardmäßig hier. Mach es, Dan. Okay? Okay, klicken Sie auf den Link und los geht's. Es springt direkt zu meinem seltsamen Aufgabenablauf mit weißen Seiten. Dafür sind Flows da. Genau dort, wo alles anfängt, wirst du anfangen, sie auftauchen zu sehen. Du hättest dich schon gefragt, was sie tun. Jetzt weißt du es. In Ordnung. Auf zum nächsten Video. 80. Slide In Mobile Nav-Menüüberlagerung in Figma: Hallo, alle zusammen. Wir werden das machen. Es ist ein Navigationsmenü für Mobilgeräte , das eingeblendet wird. Okay? Lass uns eine Vorschau darauf geben. Ich klicke auf mein kleines Burger-Menü. Das Menü wird eingeblendet, dann kann ich es schließen und es wird herausgezogen. Etwas sehr Lustiges und Taktiles an diesem. Es nutzt Fähigkeiten, die wir bereits gelernt haben, was cool ist, wenn man sie auf eine andere Art zusammenfügt In Ordnung, lassen Sie uns einsteigen und ein mobiles Navi in Figma erstellen. Ordnung, ich fange mit diesem bereits erstellten mobilen Navi an Wenn du sehen willst, wie ich es gemacht habe, werde ich es am Ende dieses Videos machen, aber vorerst nur ein Rechteck mit Text darin. Lass es uns zum Laufen bringen. Ich möchte also sichergehen, dass dieser Rahmen noch nicht überragend ist. Wir werden diese Overlay-Funktion verwenden. Okay, also Shift E, um zu Potter zu wechseln. Ich will die Startseite. Eigentlich nein, ich will, dass das Burger-Menü hier auf das Navi geht . Offensichtlich sind wir auf der mobilen HiFi-Seite. Okay? Also, wenn das angetippt wird, möchte ich nicht, dass es zu navigiert Ich möchte, dass es ein Overlay öffnet, und ich möchte, dass es nicht zentriert, sondern oben links positioniert wird nicht zentriert, sondern oben Lass uns das versuchen. Lass uns eine Vorschau davon sehen. Lass uns eine Vorschau dieses Typen sehen. Nun, manchmal ist es schwierig, den Fluss zu kontrollieren , weil das Kabel im Weg war. Da haben wir's. Lass uns auf das Navi klicken. Es ist erschienen. Irgendwie. Und dann wird es nicht verschwinden. Dann schauen wir uns das mal an. Ich werde auf das Kabel klicken. Ich werde sagen , vom Fass, das ist gut. Overlay oben links öffnen. Ich will nicht, dass es sich auflöst. Ich möchte einziehen. Aus welcher Richtung werden wir es von rechts einziehen lassen. Und lassen Sie uns die Lockerung nett gestalten. Ich mag die Leichtigkeit rein und zurück. Okay? Also, eigentlich nein, ich mag rein und raus, aber mal sehen, wie das aussieht. Lass uns spielen, schau es dir an. Zuko. Es ist ein bisschen schnell Es ist im Briefkasten oben durcheinander geraten , für den Fall, dass wir ein paar Dinge tun werden. Ich muss mein Navi anpassen, weil ich will, dass du und du darunter gehst. Das heißt, du und du werden runterkommen. Und ich möchte hier auf dieses Kabel klicken und lockern. Ich will einfach nur ein- und aussteigen. Und lass es uns ein bisschen länger machen. 0,4 Sekunden. Möchtest du sonst noch etwas ändern? Ja, das ist es. Gehen wir also nochmal zur Vorschau. Ja, ja, netter. Ich muss das immer noch nach unten verschieben. Wir könnten gehen und all die anderen Teile zur Navigation hinzufügen , mit der Batterie und dem WLAN und so. Ich will das jetzt nicht tun. Jetzt funktioniert es, ich muss es schließen, weil es sich nicht schließen lässt. Es gibt ein paar einfache Dinge, die wir tun können. Klicken wir noch einmal auf dieses Kabel. Wir können sagen, dass wir nach draußen klicken, es schließen und eine Hintergrundunschärfe hinzufügen Aber meins bis zu 50 und das ist ein Teil davon. Der andere Teil, den ich tun möchte , ist, dass das funktioniert. Ich will dir sagen, was ich will, mein Freund . Das ist seltsam. Ich schleppe es nirgendwohin. Was ich tun kann, ist, dieser Schaltfläche eine Interaktion hinzuzufügen , die nicht irgendwohin führt. Wenn sie ausgewählt ist, kann ich sagen, einfach eine Interaktion hinzufügen. Das ist dasselbe wie Ziehen. Wenn ich hier ziehe, habe ich Interaktion hinzugefügt und diese Dinge werden einfach vorausgefüllt Aber wenn ich sage, werde ich das loswerden. es ausgewählt ist, kann ich sagen, dass ich eine Interaktion möchte, aber ich möchte, dass sie nicht vom Tippen aus, sondern direkt vom Tippen aus erfolgt. Die Aktion wird sich fast überlagern. Sie können sehen, es geht nirgendwohin, hat dieses kleine Jetzt geben wir eine Vorschau, Lass uns gehen Zouk und dann gehen wir Krug hat dieses kleine Jetzt geben wir eine Vorschau, Lass uns gehen Zouk und dann gehen wir Krug Schau uns an. Ich bin mir nicht sicher, warum ich es mag Etwas sehr Taktiles an einem Menü, das reinkommt und es schließt Nett. Außerdem muss ich meine Knöpfe verkabeln. Wenn Sie auf Home klicken, gelangen Sie zu dieser Seite hier. Wenn es um Funktionen geht, wird es hier auf diese Seite gehen, und Cart wird hier auf diese Seite weitergeleitet. Die Sache ist, es erinnert sich an die letzte Interaktion, die ich gemacht habe, es wird wahrscheinlich komische Dinge tun. wir und gehen wir zu den Funktionen und es ist von rechts reingerutscht Ich habe mich gerade daran erinnert. Ich werde wahrscheinlich all diese Dinge durchgehen und anstatt mich zu bewegen, werde ich einfach zu Instant wechseln oder mich auflösen. Sofortiges Umziehen und Tippen ist gut. Es bewegt sich nach unten. Komm schon. Sofortig. In Ordnung. Geben Sie eine Vorschau, und ich denke, wir müssen noch eine letzte Sache tun, und ich kann zu den Funktionen gehen , und dann klicke ich auf das Menü, dann auf das Menü. Also das funktioniert nicht. Also, was ich tun kann, ist diesen einfach aufzurüsten. Okay? Ich kann sagen, wenn du geklickt hast, geh zu dem, lass es überlagern, lass es hineingleiten, mach all das Zeug Aber es ist wahrscheinlich, naja, ich weiß, dass es einfacher ist Ich werde das rückgängig machen, das heißt , ich nehme dieses Menü hier, das ich bereits erstellt habe, kopiere es, lösche dieses hier und gehe zum Einfügen und gehe zu diesem und gehe zu Einfügen und gehe zu diesem und gehe vorbei. Das Logo unter diesem werde ich entfernen. Okay? Und ich hole mir diesen, geh da hin. Und das ist es. Hoffentlich wird das funktionieren. Überprüfe es einfach. Ich werde einen dieser Typen überprüfen. Jep. Also kamen alle Interaktionen zusammen Lassen Sie uns noch einmal eine Vorschau darauf werfen. Ja, lass uns zur Seite mit den Funktionen gehen. Gehen Sie zurück zum Menü, holen Sie sich einen Einkaufswagen und gehen Sie zurück hierher. Nichts auf meinem Einkaufswagen. Schau uns an. Ich habe ein mobiles Navi, das funktioniert. Im Grunde verwenden wir dafür Overlay. Wir haben es für unser Popup-Menü verwendet. Wir verwenden es für unseren Tooltip, eine praktische kleine Funktion, und Sie können jetzt loslegen. Du bist entlassen. Wenn du ein bisschen rumhängen willst, zeige ich dir, wie ich ein Feld mit Text erstellt habe. Das kann praktisch sein, weil ich sie ein bisschen anders gemacht habe , mit etwas Abstand um sie herum, oder mit Tools, die du bereits kennst. Bleiben Sie also hier, wenn Sie es sehen möchten. Ansonsten sehe ich dich im nächsten Video. Mach weiter. Mal sehen, wie es dann gemacht wurde. Gut, lass uns anfangen zu bauen. In Ordnung, also der funktionierende Teil davon ist, lasst uns es einfach bauen. Ich werde etwas zeichnen , das wie eine Navigation aussieht. Ich werde es nur schnell auf meine Seite stellen , nur um es irgendwie in die richtige Größe zu bekommen. Ich möchte hier ein bisschen Fläche auf der rechten Seite haben, weil ich Platz habe und ich möchte die Leute wissen lassen, dass wir nicht auf eine neue Seite gegangen sind , damit sie auf den Hintergrund klicken können, um sie zu schließen. Sobald ich fertig bin, werde ich es einfach entfernen, wir bauen es hier drüben. Geben wir ihm einen guten Namen. Nennen wir das Handy. Okay. Und lassen Sie uns das Logo aus unserem Assets-Menü hinzufügen. Also Logo, da ist es, J ****** und wir gehen in den Lichtmodus oder schauen uns mit Varianz an. Okay? Und ich möchte mir das Textwerkzeug schnappen. Ich werde einen Home-Button haben. Ich möchte die Home-Taste etwas einfach anklickbar machen , im Moment ist sie ziemlich klein Ich werde also eine Art Polsterung an der Außenseite anbringen eine Art Polsterung an der Außenseite Ich mache das so, dass ich es zu einem Autoframe hinzufügen muss , weil es einfach ist, Polsterung hinzuzufügen, oder Aber Sie können ein automatisches Layout nicht nur zu Text hinzufügen. Dies muss sich innerhalb eines Rahmens befinden. Frame-Auswahl, und ich werde sagen, jetzt ist die automatische Ausgabe nur aktiviert, weil ich das will. Sie müssen es nicht auf diese Weise machen. Sie können den Rahmen einfach herausziehen und den Text wie eine Schaltfläche darin verschieben, aber ich mache es einfach anders. Ich zeige dir verschiedene Möglichkeiten. Ich gehe acht mal acht, so dass es eine schöne, große, einfache Sache ist, mit dem Finger zu klicken. Ordnung, weil ich möchte, dass es sich um separate Schaltflächen handelt, werde ich sie in separaten Textfeldern haben Also, wie viele will ich? Ich kann mich nicht erinnern. Lass uns gehen. Oh, wir sollten das machen. Lass es uns richtig machen, Dan. Machen wir das jetzt zu einer Komponente. Okay? Also entscheiden wir uns für die Option Komm schon. Okay, jetzt ist es eine Komponente. Ich möchte, behalte ich diese Hauptkomponente hier? Oft nicht. Ich habe es gerne einfach auf meiner anderen Seite. Eigentlich ist das nur auf dem Nein, das ist alles gut. Es sollte ausgeschnitten und auf meiner Seite für Komponenten eingefügt werden. Okay? Und lass uns zur mobilen Nav-Taste gehen. Okay, lass uns zu derselben Seite zurückkehren. Wo sind wir Mobile Hi Fi, und wir werden einen Vorteil daraus ziehen. Du gehst. In Ordnung. Jetzt ziehe ich eine Instanz heraus, eins, zwei, drei, vier Ordnung, wir sind also nach Hause gekommen. Denken Sie daran, dass wir diese Instanzen so ändern können, dass sie einzigartig sind Wir haben Funktionen für zu Hause. Ich nenne diesen einen Einkaufswagen jetzt Karren. Eigentlich brauche ich also drei davon, Ihre Website würde am Ende mehr haben, oder? Du bist weg. Du hast sie alle ausgewählt, wenn ich weit genug hineinzoome, kann ich diese kleinen Linien hier sehen. Du kannst es hier manuell unter Leerzeichen machen. Wir verwenden hier nur die intelligenten Anleitungen. Ordnung. Jetzt brauchen wir ein kleines Kreuz in der Ecke. Ich schummele oft und verwende einfach dieselbe Schrift, die ich verwende, und drücke ein Plus Aus irgendeinem Grund sind Xs nicht gut. Sie sehen nie aus wie ein Kreuz, und ich werde es größer machen. Nein, ich werde mein CatOfEscale verwenden, es vergrößern und ich werde es skizzieren, sodass es keine Schrift ist Es wird Striche skizzieren. Jetzt in Sissa-Form, und ich werde es drehen. Und jetzt haben wir unser Kreuz. Ist es groß genug zum Klicken? Auch hier muss ich es vielleicht in einen Rahmen stecken. Nur um ihm mehr anklickbaren Bereich zu geben , reicht das wahrscheinlich aus Aber auch hier könnte ich beim Padding einen automatischen Frame daraus machen, oder ich könnte es einfach durchgehen und den Frame etwas größer ziehen Du rasterst das Ding darin und bewegst es weiter. Da haben wir's. Meist in der Mitte. Gut genug. Da hast du's. Und da haben wir quasi mit dem Video angefangen. Ich möchte, dass das ein bisschen zusammenpasst. Und nur weil ich gerne Schlagschatten hinzufüge, füge ich meine Art hinzu, wo wir wirken. Ich werde meinen supertollen Stil hinzufügen. Ich werde es kaputt machen, okay? Weil ich es wahrscheinlich brauche, um es zu drücken, weil es momentan nach unten drückt. Okay? Da unten passt alles Ich nehme Vier und Null, was das Ganze um vier Pixel auf die X-Achse bringt, die richtig ist, und das Gleiche gilt für diese hier Oh, ich wusste nicht, dass es dir das gezeigt hat. Kannst du das sehen? Zeigt es dir, in welche Richtung es tatsächlich zeigt? Oh, es ist schick. Zwei und Null. Nett. In Ordnung. Und dort haben wir unser Tutorial begonnen Das war wahrscheinlich nicht so hilfreich. Wir haben etwas Text hinzugefügt, aber manchmal ist es gut, ihn zu sehen. Gut, eine Variante zu verwenden, was cool ist. In Ordnung, weiter und aufwärts. Wir sehen uns im nächsten Video. 81. Klassenprojekt 17 - Prototyping: In Ordnung, Zeit, deinen eigenen Prototyp zu bauen. Okay, ich möchte, dass du drei Dinge machst. Also das Pop-up-Modell, wir haben den E-Mail-Newsletter in den Tutorials, den Tooltip für den CVV und die mobile Navigation gemacht, was wir gerade gemacht haben Also haben wir sie alle schon einmal gemacht. Ich möchte, dass du sicherstellst, dass du deine gemacht hast. Mach einen Screenshot und zeig sie mir. Wenn du Screenshots von ihnen machst, begib dich im Prototypmodus, damit du alle Linien sehen kannst, okay, die sie alle miteinander verbinden. Okay? Also mach einen Screenshot von der ganzen Sache. Deiner muss kein Newsletter sein. Okay? Ich habe dir ein paar andere Optionen gegeben, aber du kannst dir alles aussuchen, was du willst, es erscheint eine Art Zeitverzögerung, okay? E-Mail-Zeichen bei der Bestätigung des Einkaufswagens. Ich habe dir dort noch ein paar andere gegeben. Der Tooltip muss nicht für den CVV sein , es könnte etwas anderes sein Und wenn Sie das tun, müssen Sie irgendwelche, Sie wissen schon, Karteneingabedaten zusammenstellen irgendwelche, Sie wissen schon, Karteneingabedaten zusammenstellen und sich andere Vorlagen ansehen, sehen, was andere Leute gemacht haben, was es nach einem guten, vertrauenswürdigen Formular aussehen lässt, das Sie eingeben könnten Aber mir ist egal, was der Tooltip ist. Es kann für etwas anderes sein. Gleiche gilt für das mobile Navi. Lass es auf das mobile Hi-Fi einschieben, aber es muss nicht wie meins aussehen. Es kann in verschiedene Richtungen gleiten. Es geht mehr um die Mechanik , um es zum Laufen zu bringen. Ordnung, also viel Spaß beim Erstellen von Prototypen mit vielen Overlays Wir sehen uns im nächsten Video. 82. So heften Sie die Navigation in Figma an den oberen Rand: Hallo. In diesem Video werden wir eine Navigation erstellen, die oben bleibt, wo die Dinge nach unten rutschen. Ich werde eine Schnellversion machen, weil die eigentliche Technik ziemlich einfach ist. Und dann mache ich eine längere Version bei der wir auf ein bisschen Transparenz achten und wir machen einen kleinen Sandwichriegel auf der Rückseite. In Ordnung, lassen Sie uns einsteigen. Ordnung, am schnellsten schnappst du dir das Ding, das du nicht scrollen willst. Du willst es an der Spitze reparieren. Und du musst zum Prototyp wechseln. Das ist es, was ich immer wieder vergesse. Ich weiß, dass meine Schüler das vergessen, also vergisst du vielleicht, dass du zum Prototyp gehen musst und sagst, dieses Ding hier ist ausgewählt. Ich will die Stelle. Willst du mit dem Elternteil scrollen? Das ist nur Scrollen und es geht weiter. Ich möchte nein sagen, ich möchte, dass es repariert wird. Die andere Sache, die Sie tun müssen, ist etwas, zu dem Sie scrollen können. Im Moment ist mein Inhalt vor dem Ende meiner Seite fertig, das Ding wird nicht gescrollt, das Ding wird nicht gescrollt weil es nichts gibt, zu dem man scrollen kann. Ich werde das duplizieren, okay? Und es ist hier übertrieben und ich muss nur überprüfen , ob es noch auf der Homepage ist. Ich kann es erkennen, weil es abgeschnitten ist. Ihr könnt hier meine Homepage-Ebenen sehen, Karte, die neue Karte, die ich gemacht habe, Karte vier, die ich einfach runterziehen werde , weil ich nicht weiß, OCD Geh da hin. Okay, eins, zwei, drei, vier hängt ab, aber es ist immer noch Teil der Homepage. Dreh das auf. Ich weiß , dass es da drin ist Eine letzte Sache ist, Sie müssen das übergeordnete Bild auswählen und sagen: Was soll ich mit diesem Überlauf unter dem Scrollverhalten machen? diesem Überlauf unter dem Scrollverhalten Ich möchte bitte vertikal scrollen. Lassen Sie uns nun diese Vorschau geben, schauen wir uns das an. Hoffentlich haben wir jetzt auch Sachen zum Scrollen. Das Wichtigste, an das Sie sich erinnern sollten , ist, dass es drei Schritte gibt. Du musst das Ding reparieren lassen. Du musst dich mit Prototypen auskennen, okay? Repariere es. Und dann muss der Überlauf vertikal sein Okay? Aber bei diesem speziellen Objekt macht man das nicht. Das ist alles, was mich zwickt. Manchmal. Ich denke, oh ja, mach das vertikale Scrollen. Perfekt. Okay? Es ist das eigentliche Elternbild, nicht das. Sie möchten, dass dieser Überlauf vertikal ist. Und du brauchst auch etwas zum Scrollen. Drei Dinge, du bist Gold wert. In Ordnung, lassen Sie uns jetzt den langen Weg gehen. bisschen Transparenz, und ich möchte Ihnen nur meine Arbeitsweise zeigen und es gibt ein paar kleine interessante Dinge, auf die Sie stoßen werden Ich möchte zurück zur Entwurfsansicht, also Shift E drücken, um hauptsächlich die Kabel zu entfernen Es ist schwierig, viel zu scrollen Du klickst auf diese Homepage und sagst, ich möchte keine Inhalte ausschneiden Das musst du nicht tragen. Das ist eher ein visuelles Zeug. Du kannst etwas wirklich Langes haben, ich werde das duplizieren. Eigentlich gehe ich zurück zu meinem Assets-Menü. Habe ich eine Karte erstellt? Nein, wir hätten keine Karte erstellen sollen. Haben wir es auf der Homepage gemacht? Wir haben nicht recht, sollten, ich sollte mir das erste jetzt schnappen, es in eine Komponente umwandeln, damit ich es global kontrollieren kann. Aber nur für dieses Video werde ich meine eigenen Ratschläge ignorieren und einfach mit ein paar davon weitermachen. Dieser hier, ist dieser außerhalb von zu Hause gelandet? Schau mal. Also nein, er ist immer noch da drin. Cool. Also musst du das nicht wieder nach oben verschieben. Das kann so lang sein, wie es will. Okay, ich werde hierher gehen. Und wenn ich eine Vorschau davon sehe, okay, die Vorschau, verwende ich Shift Space, um eine Vorschau anzuzeigen. Okay? Und ich werde jetzt scrollen und du kannst sehen, wie es nach unten scrollt Es ist immer noch im Telefon enthalten. Verstehst du, was ich meine? Auch wenn du den Rahmen länger gemacht hast. Offensichtlich brauchst du das, während du arbeitest. Wenn es veröffentlicht wird, bleibt es im Telefon hängen. Ob Sie den Clip ein - oder ausschalten, spielt keine Rolle. Als Nächstes möchte ich meinem NAV ein wenig Transparenz verleihen Was ich tun werde, ist, dass ich keine Navigation für mein Handy wie in einer Komponente habe. Ich habe sie alle als separate Frames. Ich werde daraus eine Komponente machen, Befehlsoption K auf einem MAC, Control Alt K auf einem PC. Jetzt ist es eine Hauptkomponente. Ich werde es kopieren oder ausschneiden und es in mein Komponenten-Panel verschieben, mein Komponenten-Panel verschieben weil wir einfach super sind. Ich habe das Navi hier. Geben wir diesem einen bitteren Namen. Nennen Sie das NAV. Handy. Geil. Gehen wir zurück zu unserer Seite. Wir machen mobiles Hi-Fi. Ich sage mal, es ist strafbar. Wo bist du? Bist du wach? ' Also bring ihn raus. Bring ihn da rein, vergewissere dich, dass er auf der richtigen Seite ist. Das ist nur ein Doppelcheck. Manchmal, ja, er ist auf der Homepage, was gut ist. Ich werde ihn löschen, ihn löschen. Löschen. Was ich nicht tun möchte, ist, das Nav jedes Mal aus dem Bedienfeld „Elemente“ herauszuziehen, also werde ich es kopieren. Und wenn Sie eine Instanz kopieren, erhalten Sie einfach eine weitere Instanz. Einfügen. Auch hier gilt: Wenn du auf den Namen klickst, weiß er quasi, wo er hingehört. Und lass uns diesen lila Teil ein bisschen durchsichtig machen . wir mit der rechten Maustaste darauf. Ich gehe dort versehentlich irgendwie nach Maine. Oder du gehst einfach zum Komponenten-Panel und ich hole hier mein Violett und ich muss den Link unterbrechen, weil er nicht transparent ist. Wenn ich das Aussehen dazu mache, wird es die ganze Sache machen. Ich möchte den Link dazu unterbrechen, und ich sage, es werden 80% sein. Ich muss von dieser anderen Seite aus etwas hin und her machen. Gehen wir zum Handy. Hi-Fi wäscht sich ein bisschen aus. Sieht vor diesem Hintergrund gut aus. Lassen Sie uns einfach eine Vorschau darauf werfen. Wie auch immer, drücken Sie die Leertaste und Sie können sehen, dass es nicht mehr angeheftet Lass uns das alles wieder einschalten. Du, mein Freund, erinnerst dich an den Prototyp. Elternteil scrollen? Nein, oben befestigt. Ich habe die gesamte Seite bereits so eingestellt , dass sie vertikal scrollt, also sollte das funktionieren Shift Leertaste Ich mag es, wenn es da oben drunter geht Wie die Farbe dort. Was ich tun könnte, ist die dunklere Farbe zu wählen. Diesmal mache ich es richtig , meine Komponente und ich gehe zu Design, Shifty Schau uns mit Abkürzungen an. Ich suche mir unsere Bibliothek aus. Ich nehme zuerst die dunklere Farbe, dann zerlege sie und reduziere sie auf 80%. Ordnung. Und mein gesamtes mobiles Hi-Fi hätte aktualisiert werden sollen. Denken Sie daran, dass Komponenten aus diesem Grund sehr praktisch sind, da sie alle auf einmal aktualisieren. Gehen wir zu unserer Vorschau. Ich werde einen Reset durchführen. Ich hab's schon getan. Ja, die Farbe gefällt mir besser. Ich mag es nicht, wenn Scott in der Ecke gequetscht wird. Daran muss ich arbeiten. Aber da hast du's. Sachen zum Scrollen. Du kannst es auch bis zum Ende machen. Es ist nur ein weiterer Schritt. Wenn Sie sogenannte Snackbars haben , die unten auftauchen. Manchmal haben Leute eine Navigation am unteren Rand ziemlich häufig. Lass es uns einfach mit einem Rechteck machen. Was ich tun muss, ist zu sagen, machen wir es mit diesem hier. Machen Sie einfach die richtige Position und dann verschiebe ich sie, weil diese ziemlich lang ist. Ich werde sagen, Sie mögen ein kleines mobiles Navi hier unten und ich werde eine Füllfarbe von haben. Lass uns diesen nehmen. Ich mache es kaputt und mache es ein bisschen durchsichtig. Nur ein bisschen 90%. Ich will es dort nicht wirklich haben. Ich will es hier drüber haben, Paste. Es ist an der richtigen Position, wenn du weißt, was ich meine, weiß, wo die Unterseite des Telefons ist, weil ich mit diesem angefangen habe. Wir müssen es nur auswählen. Denken Sie daran, dass wir Ihnen im Prototypmodus sagen müssen, was es ist? Scroll-Parent wurde behoben. Bleib wo du bist. Auch hier muss die Startseite oder der gesamte Frame vertikal ausgerichtet werden . Das habe ich schon gemacht. Lass es uns versuchen. Schiffs-Leertaste, nach oben und unten scrollen. Da hast du's. H. Eine Sache, die du vielleicht tun musst. In diesem Fall muss ich das nicht tun . Manchmal funktionieren bei mir unter Design die Einschränkungen oben links, denn wenn ich die Größe meiner Seite ändere, greifen wir auf meinen übergeordneten Frame Es ist an der Oberseite befestigt, sodass es sich nicht bewegt. Manchmal ist es standardmäßig so. Dieser Typ hier ist vielleicht standardmäßig unten Wenn ich dann die Größe meiner Seite ändere, sie an diesem Teil hängen Also war es in Ordnung für mich. Das ist etwas, auf das Sie je nach Design stoßen könnten . Da hast du's. Wir haben gemacht. Klebriges Navi. Stift nach oben. Erinnere dich noch einmal. Du musst im Prototyp sein, damit das funktioniert. Du musst auf das Ding klicken. Du willst repariert werden. Dann Position. Scroll Parent wird auf Fix geändert. Der übergeordnete Frame, in dem Sie es korrigieren möchten , muss vertikales Scrollen ermöglichen und Sie benötigen auch etwas zum Scrollen Das sollte funktionieren. In Ordnung, Sticky Navi vorbei. Wir sehen uns im nächsten Video. 83. Was sind Teams vs. Projekte vs. Dateien in Figma?: Hallo, alle zusammen. Schnelles Video. Ich möchte es nur noch einmal zusammenfassen. Ich kann hier auf deiner Homepage etwas verwirrend werden. Ihr habt Teams. Innerhalb dieser Teams gibt es Projekte. In diesen Projekten haben Sie Designdateien. Sie haben auch Entwürfe Lass uns die jetzt einfach abdecken und es in unseren Köpfen aufräumen. Lass uns reinspringen Ordnung. Gehen wir zunächst zurück zur Startseite, verwenden das Home-Symbol oben, oder wenn Sie sich in einem Browser befinden, können Sie hier zum F oben gehen und zu den Dateien zurückkehren. Es spielt keine Rolle, welcher. Dann haben Sie drei Arten von Dateien oder drei Arten von Dingen. Sie haben Dateien, Designdateien , an denen wir gearbeitet haben. Sie haben Projekte , in denen sie leben, und sie alle stehen unter diesem Dach. Hat Projekte. In diesen Projekten befinden sich Designdateien. Diese Designdateien. Lass uns einen Blick darauf werfen. Ich habe mein Team hier, mein eigenes Laptop-Team. Ich habe viele Projekte , an denen ich arbeite, und in all diesen verschiedenen Projekten befinden sich Designdateien. Nun, diese Projekte hier, ich kann ein neues Projekt machen. Nehmen wir an, wir arbeiten an einer E-Mail-Kampagne. Mit wem möchte ich sie teilen? Ich werde es einfach mit niemandem teilen, und dann kann ich meine Dateien hier reinstellen. Ich kann zu meinen Entwürfen gehen, dass ich vielleicht an etwas arbeite, und es sind Entwürfe, die niemand sonst in Ihrem Team sehen kann Es ist für dich versteckt, es sei denn, du teilst es. Wenn du dann gehst, in Ordnung, ich bin bereit, es mit dem Team zu teilen Ich kann diese Datei hier in dieses E-Mail-Projekt verschieben. Okay, es ist nur eine Art, alles zu organisieren. Schauen wir uns jetzt meine Projekte an , sie sind aus Entwürfen hervorgegangen Es ist in meinem Projekt namens E-Mail enthalten und jeder, der Zugriff auf mein Team hat, jeder, mit dem ich zusammenarbeite, kann es jetzt sehen. Macht das Sinn? Der Vorteil, es aus Entwürfen in Projekte zu verschieben , ist natürlich, dass es jeder sehen kann, aber auch Ihr Team kann damit zusammenarbeiten Sie können tatsächlich mit der Arbeit an dieser Datei beginnen. Wenn es sich um Entwürfe handelt, können sie es nicht ansehen oder kommentieren, wie es Doug getan hat, aber sie können nicht daran arbeiten Eine der Einschränkungen für das kostenlose Konto besteht darin, dass Sie nur ein Projekt haben können, und innerhalb dieses Projekts können Sie nur drei Designdateien haben Die Web-Lücke besteht darin , dass Sie so viele Teams haben können, wie Sie möchten Also werde ich sagen, alles klar, ich habe das kostenlose Konto. Ich habe ein Projekt und drei Dateien aufgebraucht. Ich werde ein neues Team zusammenstellen. Dann erhalte ich ein weiteres Projekt und drei Dateien. Wenn Sie anfangen, über das Pro-Konto nachzudenken , wenn Sie Figma häufig verwenden und sagen wir, ich arbeite mit einem Kunden und ich muss sie dann mit zwei separaten Teams teilen und herausfinden, wo sich die Dateien befinden und welche beiden separaten Teams sich zusammengeschlossen haben , dann wird es einfach chaotisch Machbar. Wenn Sie nur an ein paar Projekten für eine Reihe verschiedener Kunden arbeiten, funktioniert das perfekt Wenn Sie für einen Hauptkunden arbeiten und viele Projekte und viele Dateien haben, müssen Sie sich möglicherweise ein Upgrade überlegen. Sie können zwischen den Teams wechseln. Sie können sehen, dass ich dieses andere Team hier habe. Es wurde von jemandem mit einem kostenlosen Konto erstellt. Sie können sehen, dass es kostenlos ist. Ich wurde nicht von mir geschaffen, ich wurde von jemand anderem geschaffen. Ich wollte dir nur zeigen, wie es aussieht. Ich habe ein kostenpflichtiges Konto, aber die Person , die das Team gegründet hat, ist nicht der Boss, sie kontrollieren es und sie dürfen nur ein Projekt und nur drei Dateien hier drin haben. Hilfreicher? Hoffentlich tut es das. Nebenbei kann es hier etwas verwirrend werden, Ordnung, was mache ich hier? Teams sind wie der Kunde. Innerhalb des Teams gibt es Projekte, verschiedene Dinge, an denen du arbeitest. Sie können hier einiges von dem Zeug zum Mitbringen unseres Laptops sehen, einige der Kampagnen, an denen wir gerade arbeiten, Landing Pages. Sie befinden sich alle in separaten Projekten und wir können dort so viele Dateien ablegen, wie wir möchten Sie können sehen, dass wir kein riesiges Unternehmen sind, aber Sie können feststellen, dass viele Projekte laufen Also brauchen wir den Pro-Account. Da hast du's. Du hast ein Team. Das Team hat Projekte, und in diesen Projekten befinden sich Ihre Designdateien. Sie haben auch, dass diese Designdateien in Projekten gespeichert werden können, aber sie können auch in Entwürfen gespeichert werden, aber Entwürfe sind in Bezug auf das, was Sie tun können, etwas eingeschränkt Hauptsächlich geht es um das Teilen. In Ordnung. Hoffentlich war das hilfreich. Wir sehen uns im nächsten Video. 84. Interaktive Komponentenvariante für Hover-Kontrollkästchen in Figma: Haltet alle eure Hüte fest. Wir müssen ein Kästchen ankreuzen. Schau, damit jemand in unserem Prototyp interagieren kann und wir machen einen Hover Schau, du kannst mit der Maus darüber fahren und es ändert seine Farbe. Okay, sie werden interaktive Komponentenvarianten genannt. Das ist ein wirklich schlechter Name. Sie sind nicht so schwer. Wir haben Komponenten gemacht, wir haben Varianz gemacht. Wir werden nur ein bisschen Interaktivität zwischen unseren Varianten hinzufügen . Es ist Ha-Zeit. Lass uns da rein gehen. In Ordnung, also fange ich mit einem einfachen alten Knopf an. Es ist keine Komponente. Es ist nichts Besonderes. Das hier ist zufällig ein automatisches Layout , weil ich die Polsterung will, aber das ist alles Sie können einfach mit einem neuen Rechteck beginnen wenn Sie nichts, woran Sie gearbeitet haben, durcheinander bringen und ihm eine Farbe geben möchten Sie gearbeitet haben, durcheinander bringen und . Lass es wie einen Knopf aussehen. Braucht dazu keinen Text. Also werde ich damit anfangen. Zuallererst werde ich daraus ein Component-, Command Shift-, K - oder Beyond-Design machen. Hat das funktioniert? Ich habe gearbeitet. Die Abkürzung funktioniert auch , wenn Sie sich im Prototyp befinden. Das ist cool. Andernfalls entwerfen Sie und klicken Sie hier oben auf diese Option , die besagt, eine Komponente erstellen. Jetzt werden wir, wie wir es zuvor getan haben, eine Variante dieser Schaltfläche erstellen. In diesem Fall werde ich es einfach dunkler machen. Ich wähle das aus und ich gehe runter zu meiner Farbe und ich tausche diese gegen die dunklere Version aus. Also haben wir das schon einmal gemacht, oder? Ich ziehe eine Instanz davon heraus oder ich könnte sie aus meinem Assets-Bedienfeld holen und sie einfach von dort herausziehen. Wo heißt es? Es heißt. Es ist nicht auf der Komponentenseite. Es ist auf dieser neuen Desktop-Hi-Fi-Seite. Da ist es da. Das kannst du auch in die Länge ziehen. Das spielt keine Rolle. Also, was wir vorher gemacht haben , ist, wir konnten nur zu diesem Typen gehen und sagen: Okay, es gibt zwei Varianten davon , und ich kann zwischen ihnen wechseln. Ich habe es ausgewählt und kann nach oben scrollen und ich habe diese zwei verschiedenen, schlecht benannten Varianten. Aber jetzt können wir die Interaktion zwischen den beiden hinzufügen. Wir machen es hier oben in der Hauptkomponente. Hier gibt es Abweichungen. Ich möchte nur darauf klicken. Ich gehe zu meiner Prototypen-Abteilung und werde sagen, ich möchte, dass du dorthin gehst. Bis jetzt haben wir es nur auf andere Seiten gezogen , um zu navigieren Was wir jetzt tun können, ist es zwischen diesen beiden Varianten zu ziehen, und wir könnten sagen, bei einem Hover Hover Hover Beim Schweben. Wir wollen auch auf diese Variante umsteigen, das ist meine schlecht benannte zweite Version Und sofort sind wir es nicht. Lass es uns auflösen. Lassen Sie uns jetzt eine Vorschau darauf werfen. Umschalt-Leertaste Es ist ein bisschen klein, und sieh dir das an. Wir machen schwebende Sachen. Meine Maus ist heute wirklich komisch. Da hast du's. Du verstehst es. Das. Das verleiht den Komponenten ein wenig Interaktivität Das hat den verrückten Namen interaktiv, weil es interaktiv ist Es ist eine Komponente, weil wir daraus eine Komponente gemacht haben und aus dieser Komponente Variablen gemacht haben. Keine Variablen, Varianten. Das sage ich ziemlich oft. Ich vermisse diese beiden Begriffe. Aber wenn du ein bisschen Animation dazwischen hast, kannst du coole Sachen wie diese machen. Der Trick ist nicht das, das muss woanders sein. Wir brauchen diesen Kerl. Eigentlich möchte ich mir das Ganze draußen schnappen. Ich werde ihn schneiden und ihn auf die richtige Seite bringen. Ich gehe zu Dateien, Komponenten und ich werde diese hier erstellen. Und du sagst, wir haben das schon früher gemacht. Können wir den einfach aufrüsten? Das können wir absolut. Solange wir im Prototypmodus sind, kann ich sagen, dass das hier hingehört. Eigentlich wollte ich nur zu dieser hier gehen, der dunkleren Version. Auf einen Klick. Jetzt setze ich wieder auf Hover, während ich mit dem Schweben herumschwebte, tut mir leid, und ich sage, ändere zu diesem, löse dich auf, entspanne dich rein und raus Ordnung, nehmen wir das und bringen es auf eine unserer Seiten Lass uns weitermachen mit Wir können den Mauszeiger nicht auf einem Handy platzieren , weil wir herausgefunden haben , dass man auf einem Handy nicht schweben kann Lasst uns die beiden zum Laufen bringen. Lassen Sie uns eine Vorschau darauf werfen, Shift Spacebar. Du kannst es sehen Man kann es nicht wirklich sehen , weil es zu klein ist, aber es schwebt. Da haben wir's. Dunklere Version auf Hover. In Ordnung, das H ist also aufregend. Lass uns etwas Alltäglicheres machen. Lass uns Chick Mark machen. Jemand wird ganz schnell einen bauen. Du kannst mir dabei zusehen, wie ich es im Schnellmodus mache. Da hast du's. Da sind nur der Stift und die Ellipse Ich werde beide auswählen, weil ich wissen möchte, wo sie auf der Feature-Seite gelandet sind Manchmal ist es einfacher, es einfach aus dieser Seite aufzubauen, aber ich werde damit leben. Diese beiden hier. Ich würde sie gerne in einen Rahmen und dann in eine Komponente verwandeln . Ich muss nicht zuerst einen Frame machen. Wenn ich es zu einer Komponente mache, würde es automatisch in einen Frame eingefügt, also ist das eine kleine Abkürzung. Hier unten kann ich es in eine Komponente umwandeln. Das liegt daran, dass ich im Zeichenmodus bin. Wenn Sie sich im Entwurfsmodus befinden, gibt es diese Option nicht und Sie müssen entweder Ihre Tastenkombination verwenden oder hier oben gibt es eine Option, die besagt, weg. Ich verwende das Tastenkürzel zum Laden, das ist Optionsbefehl K oder Strg Alt K. In Ordnung, das haben Sie verstanden. Geben wir ihm einen Namen. Nennen wir das. Häkchen. Lassen Sie uns eine Variante dieser Komponente Zwei von ihnen. Den hier unten, ich rufe an. Geben wir ihm ein paar gute Namen. Zuallererst muss dieser der Beste sein. Das wird nicht die Standardeinstellung sein, aber auf diesem hier unten wird es aufgerufen. Aus. Es spielt keine Rolle, ob du in den Ebenen oder hier oben einen Namen gibst. Dieser hier wird ausgeschaltet sein. Ich werde mir diese Zecke schnappen. Ich doppelklicke einfach , um hinein zu kommen. Ich gehe hier rüber und schalte einfach den Augapfel aus. Du könntest es löschen Wie zuvor müssen wir die Interaktivität innerhalb unserer Komponente hinzufügen die Interaktivität innerhalb , die Varianz aufweist Ich liebe diese Begriffe. Wir werden in den Prototypmodus wechseln, Shifty Ich werde sagen, ich werde mit dem On-Click zu diesem gehen , was jetzt wirklich gut ist Wir wollen es anklicken und wir wollen es eigentlich andersherum wollen, nicht wahr? Wenn ich es noch einmal machen würde, würde ich beim ersten Mal das Häkchen ausschalten. Okay, lass es uns in das ändern. Lass es uns sofort versuchen. Lassen Sie uns also eine Instanz davon herausziehen. Ich muss auf das eigentliche Objekt klicken und eine Instanz herausziehen oder es aus Ihrer Bibliothek ziehen. Lassen Sie uns eine Vorschau darauf werfen. Umschalt-Leertaste jetzt klicken, klicken, klicken, klicken, oh. Es ging nur in eine Richtung. Es hat also funktioniert. Und was wir jetzt tun müssen, ist wieder hier in meiner Komponente, die Varianz hat, wir müssen ihr Interaktion hinzufügen, zurück in diese Richtung, und sie sollte sich nur an das erinnern, was Sie zuletzt getan haben Alles klar? Jetzt versuchen wir es noch einmal und fertig. Klick, klick, klick, klick, klick. Es ist eine Menge Arbeit, Dan, für ein Häkchen. Das ist es , was wir tun Und es ist einfach praktisch , die Leistungsfähigkeit beider Komponenten zu sehen , okay? Weil ich das in meinem Dokument immer wieder laden Ich kann mir die von anderen ausleihen, okay? Aber jetzt habe ich nur diese eine kleine Einheit , die zwischen den beiden hin- und herschalten kann, aber das kann automatisch, okay? Jetzt gibt es eine Interaktion damit. Anstatt zuvor ziehen wir es in die Länge, und ich würde sagen, im Entwurfsstadium würde ich die Immobilie hier austauschen. Und wählen Sie es manuell aus. Jetzt können Leute, die meine Website oder meine App testen , tatsächlich damit interagieren. Das sind viele Begriffe. Es ist eine Komponente, die eine Variante hat, und jetzt haben wir ihr etwas Interaktivität hinzugefügt. Deshalb werden sie interaktive Komponentenvarianten genannt. All das ist es. Wir haben ein Häkchen gesetzt. Wir sehen uns im nächsten Video. 85. Mikrointeraktions-Kippschalter in Figma: Hallo, wir werden eine Mikrointeraktion machen. Raus aus diesem Kippschalter. Du meinst, du hast schon einen Kippschalter gemacht, aber sieh dir das an. Wenn ich darauf klicke Schau dir an, das wird grün. Und sieh dir diese nette Interaktion an. Ich liebe es, dieses Ding zu lernen. Wir werden Mikrointeraktion lernen. Im Grunde ähnelt eine Mikrointeraktion also dem, was wir im letzten Video gemacht haben , als wir ein Kontrollkästchen hatten, aber eine Mikrointeraktion fügt ein wenig Animation hinzu, um zu vermitteln, was vor sich geht. A macht die Bedienung etwas unterhaltsamer. Das nennt man Mikrointeraktion. Lass es uns geschehen lassen. Wir werden alle Tools verwenden , die wir bereits gelernt haben. Es ist wirklich einfach zu machen. Hör auf, es runterzuklicken. Ordnung. Gehen Sie. In Ordnung. Ich fange mit dem Kippschalter an, den wir vorhin in der Schlagschatten-Übung gemacht haben vorhin in der Schlagschatten-Übung Ich werde meinen nur ein bisschen kleiner machen. Es ist nur eine Ellipse mit einer weiteren Ellipse darüber und einem Schlagschatten Okay? Geh zurück zur Schlagschatten-Übung. Wenn Sie das noch nicht getan haben, ist kein Schlagschatten erforderlich. Ich werde meins so ändern, dass ich das nicht habe. Ich werde ein bisschen grau machen, weil es aus ist. Dieser Kreis muss ein bisschen so sein. Und genau wie zuvor werde ich dafür sorgen , dass dieses Bedürfnis eine Komponente sein muss. Komm schon. Option K, Steueroption K auf einem PC. Es ist also eine Komponente. Diese Komponente benötigt zwei Varianten. In dieser unteren Variante werde ich den Kreis auf dieser Seite haben. Okay, dann müssen wir wie zuvor zum Prototyp übergehen. Ich benutze Shifty. Ich werde sagen, dass es darauf ankommt Was wird es bewirken? Wann tippe ich darauf? Großartig, es wird sich ändern. Aber der Unterschied besteht darin , es instanzieren oder auflösen, wir werden Smart Animate verwenden Wenn wir schon mal hier sind, können wir genauso gut dieses Video dazu bringen, dorthin zurückzukehren, wenn es angeklickt Es sollte alle Standardeinstellungen haben. Lass es uns versuchen . Denken Sie daran, dass Sie keine Vorschau des Komponentensatzes anzeigen können. Sie müssen eine Instanz davon herausziehen, nicht das Ganze, einen dieser Teile. Doppelklicken Sie, um hineinzukommen, und ich habe einfach die Wahltaste gedrückt gehalten und eine andere Version herausgezogen, oder halten die Alt-Taste gedrückt, oder Sie können sie aus Jetzt habe ich diesen ziemlich großen Kippschalter ziehen Jetzt habe ich diesen ziemlich großen Kippschalter Geben wir ihm eine Vorschau, drücken Sie die Umschalt-Leertaste und schon fängt es auf der rechten Seite Hoffentlich wird es das tun. Das tut es. Und bereit. Klick. Nett. Ich muss mit der Lockerung herumspielen, weil sie ein bisschen komisch ist Lass uns auch die Farbe ändern, wir sind hier drin. Wir können das offen lassen. Du bleibst da drüben und ich sage, untere Teil hier wird wieder in der Entwurfsansicht angezeigt. Es wird zu einem klebrigen Einschaltknopf wechseln. Farbe, die grün ist , weil ich gerade dran bin. Hervorragend. Und weil Smart animiert, sollte es funktionieren Lass es uns versuchen. Umschalten, Umschalten Sie können sehen, wie hilfreich es ist das die ganze Zeit geöffnet zu haben, oder ich würde es in diesem anderen Desktop-Fenster öffnen ich geöffnet habe, aber Sie können das nicht sehen Da sind die Witze meines Vaters aufgeführt. In Ordnung, das ist ein cooler Kippschalter. Lass uns ganz schnell mit der Lockerung herumspielen , denn das ist ein bisschen komisch. Okay? Also gehen wir zurück zum Prototypmodus und ich klicke auf diesen, und ich sage Entspannt euch. Ich werde ganz entspannt rein und raus gehen. Lass es mich nur ein bisschen schneller machen und das Gleiche gilt für die anderen. Du musst beide Drähte anklicken. Okay? Das wird leicht rein und raus gehen, und es wird 0,2 Sekunden dauern. In Ordnung, lassen Sie uns das jetzt versuchen. Okay. Besser. Was ist mit leichtem Ein- und Aussteigen? Zurück. Lass es uns für beide tun. Tun Sie es jetzt. Da ist ein aufgeregter Knopf. In Ordnung. Das bedeutet, genau die gleichen Übungen wie im letzten Projekt zu verwenden. Ich möchte Ihnen nur ein paar verschiedene Beispiele zeigen, und wir haben eine intelligente Animation und einen Farbwechsel hinzugefügt Ich habe es Color Change geschrieben. Aber Smart Animate sieht cool aus. Ich kann nicht aufhören, darauf zu klicken. Es ist ein kleines Zappelspielzeug Ordnung. Das ist es. Wir haben eine weitere interaktive Komponentenvariante entwickelt, und diese Animation hier sollte als Mikrointeraktion betrachtet werden , nur ein bisschen von etwas , das ein bisschen aufregender ist und ein bisschen Spaß macht, hilft zu vermitteln, was wir tun. Farbe ist gut. Die Balance ist wirklich klar. Mikrointeraktion. Ordnung. Das ist es. Wir sehen uns im nächsten Video. 86. Klassenprojekt 18 - Mikrointeraktion: Zeit für das Klassenprojekt. Wir werden einige Mikrointeraktionen oder interaktive Komponentenvarianten durchführen. Mikrointeraktionen sind netter. Mache die drei, die wir in der Klasse gemacht haben , also ein Häkchen Ich möchte, dass du es in eine Art E-Mail-Newsletter-Genehmigung umwandelst, das muss nicht genau so sein, aber du kannst hier sehen, dass muss nicht genau so sein, aber du kannst hier sehen, dass ich es in unsere Mailingliste aufgenommen habe , kleines Häkchen Ich möchte, dass du auch die Hover-Taste und den Kippschalter machst die Hover-Taste und den Kippschalter Wenn Sie Ihre Komponentensets erstellt haben, stellen Sie sicher, sie nicht einfach auf all Ihren Seiten liegen, sondern dass sie sich tatsächlich auf Ihrer Komponentenseite befinden tatsächlich auf Ihrer Komponentenseite , und sorgen Sie dafür, dass sie alle gut voneinander getrennt tatsächliche Instanz der Komponente muss sich auf den jeweiligen Seiten befinden. Die Google Switch finden etwas Kreatives , das damit zu tun hat. Aber was ich wirklich tun möchte, ist dies einen Screenshot dieser Gruppe und ihn in den Projektbereich hochlädt. Wenn du nun weißt, wie du deinen Bildschirm aufnimmst, würde ich gerne ein Video davon sehen, mit einem Vmeo- oder YouTube-Link. Wissen Sie, wie man das macht? Das ist nicht unbedingt notwendig und teile es in den sozialen Medien, was du gemacht hast. Ich liebe es besonders zu sehen, wie es funktioniert. In Ordnung, viel Spaß beim Micro Interaction Building. 87. Ändern der Miniaturansicht für Figma-Dateien: Jeder einzelne. Ein einfacher. Wir werden das Vorschaubild für unsere Designdateien aktualisieren, weil es standardmäßig nur die ersten Seiten auswählt, und manchmal schaust du wahrscheinlich schon in deinen Entwürfen nach: Was macht diese Was ist das? Was ist hier los? Wir werden das aktualisieren, insbesondere bei unserem Projekt, sodass es wie etwas aussieht das Projekt repräsentativ ist, und es ist schräg, was es cool macht. Ich bin so uncool. Lassen Sie uns da reingehen und Ihnen zeigen, wie Sie diese Vorschaubilder aktualisieren können, um das Finden von Dateien ein wenig einfacher zu machen das Finden von Dateien ein wenig In Ordnung, ich bin also in meinem Teamprojekt. Ich gehe zu Scott Wallet und Sie können das Vorschaubild sehen , das nicht sehr repräsentativ ist Sie können in diese Datei gehen und sagen, dass sie Ihnen im Grunde nur zeigt, was auch immer die obersten Seiten sind, was auch immer hier steht. Sie können einfach ändern, was auf der ersten Seite steht. Oder Sie können zu einer Ihrer Seiten gehen, auf der Desktop i Fi und Homepage Sie können mit der rechten Maustaste auf den Namen klicken und „Jetzt als Thumb festlegen“ sagen. Es ist repräsentativer, oder? Ich gehe hier zurück nach Hause. Es wird nicht aktualisiert. Du musst Figma schließen, es wieder öffnen und das ist jetzt dein Daumen Das ist eine gute Art, es zu tun. Eine andere Möglichkeit besteht darin, zu vielen Leuten zu gehen. Das heißt, sie gehen in das Dokument, sie erstellen eine neue Seite, sie nennen es Titelseite, kleben es an den Anfang. Im Moment gibt es dazu nichts. Aber was wir tun können, ist zu sagen, ich möchte einen Rahmen setzen. Ich möchte einen Frame davon haben, wenn Sie zu dieser Liste gehen, es gibt eine namens Figma-Community und diese Plugin-Cover-Datei Eine Titeldatei ist das, was wir wollen. Dies ist Ihre Standardbreite von 1920 x 1080 Pixeln, und wir können ein Bild hineinkleben. Ich gehe etwas suchen. Lass uns mobiles, mobiles Hi-Fi benutzen, und ich werde einen Screenshot von all diesen machen. Schau mal. Okay, und geh zurück zu meinem Cover, finde meinen Screenshot. Da ist es da, füge es in dieses Bild und verwende ein Bild Anstatt Frames und so von anderen Seiten zu kopieren und einzufügen , könntest du das tun, aber am Ende hast du Duplikate von Dingen könntest du das tun, aber am Ende hast du Duplikate Sie verpassen auch das sehr Reale. Alles muss auf seiner Seite sein. Ich weiß nicht warum. Aber ich kenne die UX-Design-Branche nicht, wenn man etwas zeigt, muss es auf die Seite gedreht werden, wie eine Waffe in Filmen , ein bisschen gespannt In Ordnung, ich werde diese Füllfarbe verwenden. Ich werde dieselbe wie diese verwenden. Okay. Oh, es wird großartig. Ich werde nur noch einmal überprüfen, ob das als Vorschaubild eingestellt ist Dort öffnest du viele Vorlagen. Und diese erste Seite, die Sie überprüfen, bewirkt nichts. Versuche etwas anzuklicken, oft ist es nur ein Screenshot von Dingen. Es gibt ein Marketingelement , wenn es darum geht, Vorlagen zu finden. Aber für dich willst du einfach, dass es hilfreich ist, du musst es nicht auf den Punkt bringen, aber ich weiß nicht, es fühlt sich an wie UX-Designregeln. Ich muss Figma verlassen und bin gleich wieder da. Hey, Presto, sieh uns an. Ganz launisch in Bezug auf den Winkel. Legen Sie entweder einen Rahmen als Vorschaubild fest, nur um es einfacher zu machen, oder erstellen Sie ein Deckblatt . Die Seite muss sich oben und in einem Winkel befinden. Da hast du's. Okay? Nur um den Schmerz zu umgehen, zeige ich dir ein paar meiner Entwürfe, du fragst dich, was ist das? Was ist das? Dieser hier hat nicht einmal eine Seite, weil du vielleicht an der zweiten Seite gearbeitet hast. Dieser hier, nicht so nützlich. Dieser hier, was ist das überhaupt? Dieser hier? Auch hier ist es schwer zu wissen, was diese Dinge erschaffen. Kannst du dir vorstellen, was sie bewirkt haben? Lassen Sie uns diesen tatsächlich öffnen und sehen, was sie getan haben. Ich habe übrigens keine Ahnung. Also haben sie ein Moodboard für die erste Seite erstellt, das heißt, sie haben dieses in einem Text erstellt Sie haben sie tatsächlich speziell dafür entworfen. Anstatt nur ein Screenshot. Man merkt, dass sie sich etwas Mühe geben werden, es zu entwerfen. Wenn du dir noch ein Beispiel ansiehst, sieh dir dieses an, sei bitte JB Ich habe gerade allen gesagt , sie sollen ein JP machen. Oh, es gibt ein Titelbild. Oh, perfekt. Also, dieses Cover, sie haben sogar das richtige Wort benutzt, und Sie können sehen, dass es tatsächlich so ist , wenn ich es mir ansehe. Wenn du darauf klickst, ist es nur ein Bild. Also haben sie das entweder in Figma oder in etwas anderem entworfen und es einfach als Ganz oben. Da hast du's. Nur ein netter kleiner Weg am Ende, um deine Akten aufzuräumen. In Ordnung. Das ist es. Wie man jetzt einen Daumen macht. Oh, tolles Video, Dan. Ordnung. Lass uns zum nächsten Video springen. 88. Kurzübersicht über Figma-Standorte: Jeder. Willkommen zum superschnellen Überblick über sogenannte Figma-Sites Wir haben unsere Seite gestaltet. Jetzt wollen wir sie tatsächlich bauen. Es gibt ein paar Optionen, die Sie haben. Sie können zu einem Entwickler gehen, Sie könnten es in etwas wie WordPress neu erstellen oder Sie könnten es Dragon Drop oder Wizzywig nennen Was Sie sehen, ist ein Editor, bei dem Sie beim Webdesign eher einen visuellen als einen Codierungsansatz verwenden eher einen visuellen als einen Codierungsansatz Die Figma-Sites sind neu. Es ist ein direkter Konkurrent von etwas wie Webflow. Ich habe es Infigma entworfen, jetzt müssen wir es bauen. Infigma-Sites sind ein Weg, das zu tun. Es ist ein ganzer Kurs für sich, aber ich wollte dir jetzt einen kurzen Überblick geben, um dir ein Gefühl dafür zu geben , was es ist und warum es das Richtige für dich sein könnte Wirf ihm etwas, Dan. In Ordnung, das ist also die Design-Datei, die wir gemacht haben. Ich habe angefangen, es auf Infigma-Seiten neu zu erstellen, was wir in diesem Tutorial tun werden Und Sie können hier Desktop, Tablet, Handy sehen. Ich werde es in der Vorschau ansehen und Sie können es auf dem Desktop sehen, es sieht so aus, aber Sie können sehen, wenn es auf Tablet herunterfällt Okay, ich ändere meine Karten. Wenn ich zum Handy komme, ändert sich das wieder. Es ist alles sehr schön und reaktionsschnell. Es ist sehr cool. Es heißt Figma-Sites. Lassen Sie mich Ihnen jetzt einen kurzen Überblick geben. Denken Sie daran, nur einen kurzen Überblick, flippen Sie nicht aus. Es ist nicht schwer, aber es ist anders. Mehr als ein Modul in diesem Kurs. Aber ich will es dir trotzdem zeigen, lass uns einsteigen. In Ordnung, Figma-Sites Ich gehe, Sie können entweder auf die neue Schaltfläche klicken und zur Figma-Site gehen oder auf die Startseite, Sie können zur Erstellung gehen und eine Site auswählen So oder so, wir haben eine neue Seite. Das Coole daran ist, dass es viele der gleichen Tools wie Figma verwendet Da ist Figma-Design, das Ding, das wir gerade lernen, wie man Websites gestaltet Dann ist da noch der Gebäudeteil, bei dem es sich um Figma-Websites handelt. Wir werden mit einer leeren Seite beginnen. Sie könnten mit einer Vorlage beginnen, die Ihnen sowohl eine Desktop - als auch eine mobile Version bietet . Ein paar Dinge, die wir tun müssen, wenn wir Dinge übertragen wollen. Wir können es kopieren und einfügen. Es funktioniert absolut. Wir werden damit beginnen, richtig, wir haben unsere Website um diese 14 40-Website herum aufgebaut. Die Standardeinstellung ist hier 12 80. Passen wir das einfach an. Es wird viel kopiert und eingefügt, weil es nicht so einfach ist wie das Erstellen einer Website Zum Glück ist unser Handy was unser Handy? Unsere Handygröße ist mobil. Hi-Fi wird es sein. Wir haben uns für eine der iPhone-Größen entschieden. Es ist dieser 393. Stellen wir einfach sicher , dass das Handy 393 hat. Sie könnten das tun, wir könnten auch eine Desktop-Ansicht machen. Entschuldigung, eine Tablet-Ansicht. Was wir tun werden, ist, Plus zu verwenden und zu sagen, dass ich auch mein Tablet darauf designen möchte. Wir müssen eine Website erstellen, die sowohl auf dem Desktop als auch auf dem Tablet und auf dem Handy gut aussieht. Du könntest das auch in Figma machen, während du gehst. Wir halten diesen Kurs etwas enger, indem wir das Tablet entfernen, aber Sie müssen darüber nachdenken In Ordnung, andere Dinge werden wir brauchen. Lass uns einfach etwas Einfaches tun. Lass uns einfach etwas zeichnen. Lass uns schnappen. Wir werden eine Hero Box FK für das Frame-Tool zeichnen. All die Abkürzungen, die du gelernt hast und die du dir während des Kurses eingebrockt hast, hast du immer noch. Ich werde das rausziehen und ich werde es hier so an die Seiten kleben. Ich werde ihm eine beliebige Füllfarbe geben. Das Coole daran ist, dass jedes Mal Sie etwas auf dem Desktop entwerfen, es Ihnen zeigt, wie es auf Tablet und Handy aussieht Leider funktioniert das tatsächlich. Sie können sehen, dass dieser hier diese kleine Lücke hat. Das liegt daran, dass es hier eine kleine Lücke gibt. Es ist nicht an der Seite hängen geblieben. Ich habe eine kleine Lücke gelassen, also werde ich sichergehen, dass es da hingezogen Hoffentlich werde ich auf dieser Seite sagen, dass Sie ziehen, ich möchte bis zu den Rändern rasten, und dann auf dieser Seite Nehmen wir an, ich möchte, dass es so weit von den Kanten entfernt ist. Was in diesem Fall zufällig 27 ist. Was ich jetzt tun kann, ist, mir eine Vorschau anzusehen. Sie können auf die Vorschau-Schaltfläche klicken, oder ich drücke diese am Ende oft. Es wird eine Vorschau der Desktop-Ansicht, der Tablet-Ansicht und der mobilen Ansicht angezeigt. Geh. Das nennt man Responsive Design, und hier verbringen wir die meiste Zeit, wenn wir eine Website erstellen. Wir müssen es in Figma entwerfen, die Kunden dazu bringen, sich abzumelden, und sie sagen, ja, wir lieben es Man muss es bauen, um all diese Dehnbarkeit zu verkraften. Denn wenn ich mir das ansehe, kann ich es herumschleppen, sodass ich sagen kann: Nun, Ihr Laptop diese Größe, mein Laptop hat diese Sie benötigen ihn, um auf all die verschiedenen Größen zu reagieren. Lassen Sie uns ein bisschen Reaktionsfähigkeit walten lassen. Kehren Sie immer wieder zu diesem Tab zurück. Du hast dort einen kleinen Zurück-Knopf gedrückt. Lassen Sie uns in diesem Rahmen ein bisschen Text schreiben. Ich hatte da alle möglichen Abkürzungen. Was habe ich gezeichnet? Ich bin mir nicht sicher. Ich habe eine Menge Sachen gehört. Was wir tun werden, ist das Textwerkzeug zu nehmen, hier reinklicken und ich werde tippen. Ich werde nur die Schrift verbessern. Das Coole daran ist, dass wir uns eine wirklich riesige Schrift aussuchen, weil sie hier erscheint. Zurück zu meinem Verschiebe-Tool, es erscheint hier und erscheint hier. Auf diesem kann man es nicht wirklich sehen. Das Ebenen-Panel hier, ich habe Desktop, Tablet und Handy. Wenn ich dem Desktop etwas hinzufüge, gilt es für alle. Es ist hier auf meinem Handy. Wenn ich drüben drüben drüben drüben drüben drüben rumhängt er da einfach rum. Was ich für das Handy tun muss, ist vielleicht zu entscheiden, dass ich das auf zwei Leitungen haben muss. Die drei Zeilen, und ich möchte, dass die Schrift kleiner ist, was für mein Mobilgerät geeignet ist. Da gehen wir hin. Was Figma oder Figma-Seiten tun , ist zu sagen, dass, Ordnung auf dieser Seite hier, ich werde sie ohne triftigen Grund nach oben verschieben Sehen wir uns eine Vorschau an. Auf dem Desktop ist es groß und auf dem Tablet ist es in der Mitte oben unten und hier unten auf dem Handy, es ist eine kleinere Schrift und es ist in zwei Zeilen aufgeteilt. Das ist der Spaß am Entwerfen für das Web. Du musst an all diese verschiedenen Größen denken und dann die Teile dazwischen ignorieren, du denkst, was machst du hier, du, okay? Es ist nur ein kurzer Überblick. Lass uns etwas bauen, etwas. Lasst uns diese Hera-Nachricht loswerden. Wenn ich es von meiner Homepage oder meinem Desktop lösche , ist es von allen verschwunden Was ich jetzt tun möchte, ist diese Karten von dieser Karte aus zu machen. Zuallererst unsere Karten, wir werden die Desktop-Karte verwenden. Wir haben es um unsere Säulen herum aufgebaut. Das Coole daran ist, dass ich es momentan nicht kopieren und einfügen kann. Die Spalten erinnern an Command G. Aber ich kenne die Grundlagen. Gehen wir mal rüber und sagen wir mal Desktop-Stühle, S-Layoutguide ist immer noch da? Fantastisch. Zwei Tools für eines lernen, was wirklich cool ist. Ich möchte, dass es Kolumnen sind. Ich möchte, dass sie einen Zähler mit 12 Mitgliedern haben. Ich möchte eine Marge an den Rändern von 100 haben , und ich glaube, der Abstand betrug 32. stimmt jetzt also. Bei diesen gelten sie nicht. Sie funktionieren nicht sehr gut. Das hier, was ich auf einem Tablet machen könnte, ich könnte einfach auf sechs runtergehen , weil es einfach einfacher zu handhaben ist. Margen von 50, und ich reduziere den Abstand auf 24 auf Mobilgeräten, ich werde auf sechs reduzieren und ich werde keine Ränder an den Rändern haben, und der Abstand wird 16 sein. Sie können alles an die verschiedenen Dinge anpassen. Sie nennen sie Breakpoints. Das heißt einfach, wenn diese Größe auf etwas unter 1.400 sinkt, brechen Sie ab und machen Sie dieses neue Ding, dem es sich in unserem Fall nur um die Spalten handelt Lass uns ein paar Sachen holen. Hier macht es Spaß. Ich kann das kopieren und ich kann hierher kommen und es einfügen. Oder wenn du es einfach willkürlich einfügst, könnte es enden, dass ich nichts ausgewählt habe , und ich füge es ein, ich habe beschlossen, es als neue Seite durchzuziehen und du kannst es nicht einfach hineinziehen und du kannst es nicht einfach hineinziehen Ich werde das rückgängig machen. Ich gehe in meinen Desktop und drücke auf Einfügen. Sie werden feststellen, dass es auf all meinen verschiedenen Seiten erscheint. Schnappen wir uns die anderen beiden und dich. Kopieren Sie zu diesem Design, stellen Sie sicher, dass auf meinem Desktop auf Einfügen geklickt wird, und sie sollten auf allen erscheinen. Was wir tun werden, ist, wir gehen, R, sie sind alle gut aufgereiht. Perfekt. In Ordnung, also habe ich das für den Desktop entworfen. Das sieht toll aus. Und am Ende sorgen Sie dafür, dass es zuerst auf dem Desktop funktioniert und dann die anderen etwas später. Denn was ich tun möchte, ist, es uns einfach in der Vorschau anzusehen. Lass uns nachschauen, wie es zu Hause aussieht. Es funktioniert irgendwie. Es macht komische Sachen mit den Lücken, siehst du? Also, was ich sagen kann, ist zurück zu hier, ich kann sagen, wir sind gegangen. Dieser benutzt nur die linke Seite. Es wird also 100 Pixel von links entfernt sein , egal was ich mache. Ich könnte sagen, geh nach links und rechts. Wenn wir uns jetzt eine Vorschau ansehen, okay. Kannst du ihn dort sehen? Er ist viel größer? Kannst du sehen, dass er sich dehnt, weil er links und rechts für seine Abmessungen verwendet links und rechts für und nicht nur links. Das sind die Dinge, die nützlich sind, wenn man sie erfunden lernt , man mag, ja, ich verstehe Aber wenn es um die Erstellung der Website geht, ist das viel wichtiger Ich werde hier dasselbe tun. Ich werde sagen, Sie und Sie werden links und rechts sein und hoffentlich einen Test machen. Es gibt eine Menge Tests. Man macht etwas, testet es, tut etwas, testet es, überspringt es nie. Aber in dieser Desktop-Ansicht ist es ziemlich gut. Es ist 100 Pixel vom Rand und reagiert. Es ist alles matschig. Wenn es zum Tablet kommt, heißt es, Boop, es funktioniert Jetzt können wir zum Tablet zurückkehren und dieses Problem beheben. Sechstens, bringen Sie den Desktop zum Laufen, dann gehen Sie zum Tablet und sagen Sie, Ordnung, ich möchte, dass Sie da sind Ich möchte, dass du dich bedeckst. Kannst du sehen, ich brauche sie kleiner. Seien wir, wir haben sie responsiv gemacht , denken Sie daran, Sie sagten, wir haben das unten links gemacht und Sie sagen, wir haben es responsiv gemacht. Also, warum machen wir uns die Mühe, das zu tun? Weil wir es jetzt gelernt haben. Dieses kleine Objekt hier unten steckt unten fest. Denken Sie daran, wir haben unten gelernt und es dann dazu gebracht, rechts zu bleiben. Es ist so, dass wir das später machen können, wir können gehen, perfekt. Leicht in der Größe zu ändern. war sinnvoll, wenn wir Figma machen, macht viel mehr Sinn, wenn Sie die Website tatsächlich entwerfen oder erstellen Das Lustige dabei ist, dass es eins, zwei gibt , mit dem dritten eins los? Wie auf Mobilgeräten müssen Sie möglicherweise zu Ihrer Tablet-Ansicht wechseln. Ich habe ein paar schlecht benannte Karten. Lassen Sie uns die alle schließen. Ich habe 18, die ich sehen kann, 19, die ich sehen kann und 20. Irgendwie ist es da drüben. Das ist eine Beta-Version davon, es also Dinge geben, die mit Zeit besser werden, die dir vielleicht nicht passieren werden. Also, was werde ich hier machen? Das ist das Rätsel, also, oh, hier, nein Was du tun kannst, ist auf dem Tablet zu sagen, ich gehe zum Erscheinen und ich werde sagen, du gehst weg Du bist da, immer noch da, wirst einfach nicht gesehen. Auf dem Handy, dieser hier, könnte ich entscheiden, dass ich, anstatt dass dieser an erster Stelle steht, ihn neu anordnen werde Ich werde sagen, du bist der Erste, du wirst an den Rand gehen Nun, in Figmacytes, wenn du es an den Rand ziehst und es einrastet, wird es nach links und rechts umgeschaltet Sie werden sehen, dass dieser nach rechts gesetzt ist. Aber wenn ich sage, du bist hier und du bist da, dann siehst du, dass es funktioniert hat. Sie können es natürlich manuell ändern, aber es wird es automatisch tun. Auf meinem Mobilgerät möchte ich dieses Ding länger machen. Okay, länger, länger. Sie werden sehen, dass dieser an der Unterseite befestigt wird , weil er denkt, dass Sie das wollen Nein, ich möchte, dass es oben ist, damit es nicht seine Größe ändert und sich nach unten bewegt Du verwendest den oberen Teil, wie du Ankerpunkt und ich werde vielleicht ein bisschen länger reifen Eigentlich sind die Spalten hier nicht so nützlich. Auf dem Handy gehe ich zum Augapfel und schalte sie aus, und ich werde die fehlende Karte finden Wo ist er hingegangen? Er war Frame 20. Er ist irgendwie da drüben. Also haben wir sogar mit der Bestellung herumgespielt, okay? Und das Schöne ist, dass es dieselben Tools verwendet. So wie Webflow das macht, macht Framer das. Es gibt viele andere Tools , die so sind wie Figma-Sites Es ist wie eine direkte Kopie davon, aber es verwendet dieselbe Sprache und dieselbe Terminologie Sie können aus Figma kopieren und einfügen. Und wenn Sie entwerfen, wenn Sie ein paar Websites erstellt haben, wenn Sie dieses Ding erstellen, können Sie sich genauso gut die Mühe machen, dieses Ding , wissen Sie, unten und rechts zu fixieren, weil Sie wissen Sie dadurch später beim Erstellen der Website Zeit sparen Ordnung, lassen Sie uns eine Vorschau ansehen . Ständige Vorschau. Und wenn Sie eine Zeit lang keine Vorschau ansehen und es kaputt machen, wissen Sie nicht, was kaputt gegangen ist . Okay, dir geht es also gut. Oh, du arbeitest gut und du arbeitest auch gut. Okay? Das Coole daran ist, kannst du das Tablet sehen? Ich habe das losgeworden, es ausgeschaltet, aber auf dem Handy geht es wieder und ich habe die Reihenfolge geändert. Fantastisch. Es gibt diese seltsame Sache auf Websites, wo sie diese Leiste haben, die Schiebereiste, die ich nicht mag, irgendwie verdeckt. Die eigentliche Website werden wir mit diesem kleinen Teil hier veröffentlichen , aber diesen kleinen Slideleisten im Weg Hoffentlich etwas, das verschwindet als. Schau es dir zwischendurch mal an , denn hier sieht es gut aus. Was passiert, wenn ich, es wieder das Ding mache, das es auf dem Desktop gemacht hat. Der Desktop funktioniert, aber auf dem Tablet nicht. Ich muss zu Tablet gehen. Falsche Datei. Geh davon zurück. Ich möchte zu Tablet gehen, wo bist du? Im Grunde haben wir gesagt, was wir für die Homepage getan haben, dass Sie nicht links, sondern links und rechts, links und rechts, links und rechts sind. Sehen Sie sich noch einmal eine Vorschau an. Hoffentlich musst du jetzt manchmal bis 21 gehen, ein weiterer Breakpoint Okay? Oh, viel besser. Es ist so, kannst du jetzt sehen, wie wir es für ein Telefon entworfen haben, das so groß ist, aber auch so groß, aber auch so groß. Und ein Tablet, das zufällig so groß ist, aber ein bisschen größer, ich weiß, das ist jetzt Tablet. Das ist ein riesiges Telefon und dieses hier, ein Tablet. Aber wenn es größer wird, größer, größer, größer. Wenn es dann irgendwann die Desktop-Größe erreicht, heißt es, richtig, Desktop, Sie können so viele Breakpoints haben, wie Sie möchten. Sie können sich für die Gewohnheit entscheiden, ich gehe immer wieder dorthin zurück. Du könntest einen supergroßen Desktop haben, größer als 14 40 ist. Was machst du damit? Vielleicht hast du einen vierten. Nun, ich habe etwas ausgewählt, das dir jetzt in deinem Tempo Sinn macht. Das muss ein ganz eigener Kurs sein, Figma-Seiten , weil Webdesign mehr ist , als ich hier nur ein kleines Modul machen kann Wenn Sie daran interessiert sind, hinterlasse ich in den Übungsdateien einen Link für einen Kurs mit Figma-Sites Ich habe noch keinen gemacht, aber wenn du Interesse hast, kannst du dich vorher dafür anmelden und wenn ich genug Interesse habe, werde ich ihn machen Vorerst wird jedoch so etwas wie Webflow funktionieren. Das ist ein Kurs, den ich habe Sie können nachschauen, wo Sie das haben, was Sie nicht tun wollten ist, Sie in diesem Kurs im Stich zu lassen , also, was mache ich als Nächstes? Oft wird ein Entwickler Ihre Website für Sie erstellen , und dieser verwendet keine Figma-Seiten Sie werden die Seite programmieren, ein anderes Framework verwenden, vielleicht ein Wortgebet, etwas anderes, und sie werden deine Designs einfach als Inspiration verwenden , aber sie werden die Bilder daraus ziehen, den Text, die Größen, all das Zeug kann herauskommen Aber mit so etwas wie Figma-Seiten oder Webflow kannst du sie jetzt selbst erstellen Sie können veröffentlichen, lassen Sie uns es veröffentlichen. Es hat unsere Website veröffentlicht, okay? Es veröffentlicht es noch nicht auf einer richtigen Domain. kannst du reintun. Okay, ich gehe zu diesem hier, schauen wir uns die veröffentlichten an. Lass uns einen Blick darauf werfen. Ich öffne es in meinem Browser. Das ist tatsächlich im Internet. Das könnte ich jetzt jemandem schicken, okay? Und es macht nicht viel. Pass auf, außer dass es weitreichende Breakpoints hat , die wir gerade herausgefunden haben Lassen Sie uns noch ein paar letzte Kleinigkeiten tun, um Ihnen noch ein bisschen mehr Gefühl dafür zu geben , wie das funktioniert Wir haben nur die Homepage entworfen. Was wir machen können, ist wie früher, wir können dieses Ding duplizieren. Diese Seite wird „Meine Funktionen“ heißen. Auf dieser Feature-Seite werde ich diese Boxen auf meiner Features-Seite loswerden, ich werde es wirklich groß machen , ich werde etwas Text hineinschreiben. Ich werde es nur an die verschiedenen Breakpoints anpassen die verschiedenen Breakpoints Ich mache ein paar wirklich schlimme Sachen. Lass uns das machen. All die Funktionen, die wir über Interaktionen gelernt haben , bei denen ich sagen kann, lasst uns zu Command E wechseln, was großartig ist. Gleiche Tastenkombination wie bei Figal Design. Ich kann sagen, wenn jemand darauf klickt, wird es auf die Funktionsseite weitergeleitet Wenn ich jetzt eine Vorschau davon sehe, meine Website mache , auf meine Schaltflächen gehe, habe ich daraus eine Schaltfläche gemacht und ich klicke darauf und gehe zu meiner Feature-Seite, die ich auf der Grundlage meiner FIGMA-Designdatei entworfen habe Sie können auch all die anderen Dinge tun , normale Webseiten-Sachen Wenn ich zu den Einstellungen gehe. Ich kann sagen, hier ist mein Seitentitel, ich kann all meine SEO-Sachen hinzufügen. Ich kann Google Analytics hinzufügen. Es gibt viele Dinge, die du tun kannst. Sie können eine tatsächliche Domain anschließen. Es könnte also sein, dass Sie Ihren Laptop.com mitbringen, die Website für den Kunden entwerfen und testen, weil es schnell geht Wir haben am Anfang darüber gesprochen, warum wir uns die Mühe machen, Figma zu verwenden nicht nur eine Website zu erstellen, weil es superschnell ist, ein Konzept zu erstellen, ein Wireframe zu erstellen, es testen zu lassen, ein Design zu erstellen, es von allen Beteiligten unterzeichnen zu lassen und dann loszulegen und Denn wenn man dann baut, muss man ewig damit verbringen oder Man muss viel Zeit damit verbringen. Lass uns von hier weggehen. Die Entscheidung darüber muss links und rechts liegen. Geht es in eine Kiste? Wie fließt es? In Ihrer Figma-Designdatei können Sie dagegen einfach eine Schaltfläche ziehen, um zu sagen, dass Sie da sind Okay. Aber wenn du eine Website entwirfst, was in all den Größen passiert, musst du darüber nachdenken, A. Ist das, was oben hängt, links dran? Wie groß ist sie auf Mobilgeräten? Wie passt es sich an die Größen zwischen den Größen an? Dauert viel länger, aber wenn Sie die Figma-Datei, die Designdatei, signiert haben , können Sie einfach in den Build-Modus wechseln Ich mag den Build-Modus sehr. Alles ist okay. Du fängst an, es zu machen. Es ist, als würde man ein Rätsel lösen. In Ordnung. Das ist der schnelle Überblick über Websites. Sie werden nicht gut in Websites sein , wenn Sie sich dieses Tutorial angesehen haben, aber ich wollte Ihnen einen Eindruck davon vermitteln was Websites sind und warum wir uns Mühe machen, all die Dinge in Figma zu tun, vielleicht besonders diese hier, vielleicht haben wir das gemacht Es ist cool. Wir aber jetzt wissen wir, warum wir diese Funktionen verwenden , ist haben die Funktion geliehen, aber jetzt wissen wir, warum wir diese Funktionen verwenden , ist, dass wir diese Dinge irgendwann responsiv machen müssen, sogar in unseren Designs. Es ist praktisch, sie einfach kopieren und einfügen zu können, sie auf das Handy zu kleben, ihre Größe zu ändern, aber es wird besonders toll wenn Sie diese Arbeit gemacht haben, die auf unserer Website veröffentlicht werden könnte Ordnung, meine Freunde, das ist der über die Figma-Seiten Benutze den Link in den Kursdateien. Ich werde es jetzt oben aufstellen. Wenn es einen Kurs gibt, führt dieser Link direkt zum eigentlichen Figma-Seiten-Kurs Ich werde nur die Interessen von euch abschätzen Ordnung. Figma-Seiten, fertig Es gibt eine Menge Waffeln. Es tut mir leid Lassen Sie uns zu ein paar prägnanteren Videos übergehen. Wir sehen uns im nächsten. 89. So exportieren Sie Bilder aus Figma: Erstens werden wir uns die Einstellungen für den Bildexport aus Figma ansehen Einstellungen für den Bildexport aus Figma Sie müssen ein Bild aus Figma herausholen und es an jemanden schicken Wir werden die verschiedenen Formate durchgehen. Okay? Wir werden über die verschiedenen Größen sprechen und darüber, wann sie verwendet werden sollen. In Ordnung, lassen Sie uns einsteigen und Bilder aus Figma exportieren. Ordnung, lassen Sie uns über das Exportieren von Bildern für allgemeine Zwecke sprechen allgemeine Zwecke Lassen Sie uns also über einige Dateiformate sprechen und das tun. Also möchte ich ein Bild exportieren. Fangen wir hier mit nur diesem Bild an. Okay? Ich möchte es exportieren. Sie verwenden den Dateiexport nicht wie bei vielen Programmen. Da ist tatsächlich dieses Gerät , das ich auswählen und einen Export hinzufügen möchte . Okay? Was für ein Export? Oh, fügte Effex hinzu. Reden Export Anschließend erhalten Sie einige Optionen welche Art von Exporteinstellungen Sie verwenden möchten. Dies sind die wichtigsten Lebensmittelgruppen, PNG, JPEG, Fici PDF Wenn es um Bilder geht, ist es im Allgemeinen sinnvoller, JPG und mehr JPG zu verwenden Ideal für Bilder, macht die Dateigröße wirklich klein. Der Nachteil ist, dass es nicht transparent ist, aber es hält die Dateigrößen sehr klein. Sie werden im Internet viele JPEG-Dateien sehen , die Teil des Webdesigns Klicken Sie auf Exportieren und es wird irgendwo abgelegt. Ich werde meins auf meinen Desktop in einen Bilderordner legen , den ich gerade erstellt habe. In Ordnung, lass uns mit den anderen Formaten weitermachen. Wann wäre PNG gut? Wenn Sie etwas haben , das Transparenz benötigt, schauen Sie sich an, dass etwas maskiert ist Sagen wir das hier. Also, wenn ich das als JPEG exportiere, aber du kannst auch ein anderes hinzufügen, um zu sagen, ich möchte auch ein PNG bei dem einen X. Wir werden gleich über Xs sprechen, aber sie haben nur die Größe, in der ich es gemacht habe. In diesem Fall hat dieser eine Fläche von 314 Pixeln im Quadrat. Wenn ich exportiere, werden Sie feststellen , dass der Name aus der Gruppe oder dem Frame ausgewählt wird, die Sie ausgewählt haben. Kannst du sehen, dass das nur ein Bild ist? Ich werde das IMG Star Wallet nennen. Wenn Sie es also nach und nach in Ihrem Ebenenbedienfeld benennen, wird es beim Exportieren einfacher. Ich werde einfach dort auswählen und nachschauen. Okay, du wirst sehen, dass ich zwei Bilder habe. Eins ist ein JPEG. Das Problem mit diesem ist, dass ein JPEG keine Transparenz hat. Man kann es nicht durchschauen, wohingegen das PNG sehr transparent ist. Sie können bis zum Hintergrund durchschauen. Also, wenn ich das für eine Website brauche und du die Hintergrundfarbe sehen musst, brauchst du ein PNG, auch wenn es ein Bild ist, aber weil du Transparenz brauchst, machen wir PNG. Das andere da drin ist SVG. SVG eignen sich für alles , was Vektoren ist. Es steht für skalierbare Vektorgrafik. Sie meinen damit, dass wir etwas Skalierbares finden sollten. Gehen wir zu unserer Komponentenseite. Ich möchte ein Logo finden, das es dort gibt. Wir wissen, wenn ich mein K-Tool verwende und es skaliere, wird dieses Ding für immer skalieren. Es besteht aus Vektorgrafiken, kleinen Ankerpunkten und so, sodass es sehr praktisch ist ein SVG zu sein, weil es auf vielen verschiedenen Browsern skaliert werden kann auf vielen verschiedenen Browsern skaliert Denken Sie an Figma-Seiten, wir können Dinge nach oben und unten skalieren. Deshalb ist das gut und die Dateigröße ist winzig und es ist transparent In diesem Fall würden wir sagen, dass ich zu meinem Verschiebe-Tool zurückkehren werde. Ich würde sagen, keinen Einfluss haben. Ich werde nach Export suchen und ich werde sagen, dass du als SVG am besten bist. Es wird exportiert, und deshalb verschwindet das X. Ich brauche es in keiner anderen Größe weil es bis ins Unendliche skaliert werden kann Ich werde es speichern, exportieren und ich habe dieses SVG Eine Menge Logos. Meins ist weiß auf weißem Hintergrund. Gute Arbeit. Lass es uns in den Lichtmodus schalten. Es wurde wieder exportiert. Das werden wir ersetzen. SVG zeigt manchmal eine Wortvorschau an, wie hier, aber das ist jetzt skalierbar. Superwinzig, 15 Kilobyte Aber sagen wir, ich wollte ein wirklich großes PNG weil ich groß sein muss, weil es hoch und runter skaliert werden muss, wohingegen mein SVG das macht, ohne Ich sage, ich will ein PNG. Ich werde dieses exportieren und lass uns die Größen vergleichen. Hier. Ich habe zwei PNGs, das sind 12 Pixel, kleiner als mein SVG, aber es ist auf diese Größe festgelegt. Ich kann es nicht größer machen. Sonst wird die Qualität schlecht. Bringen wir sie nach Figma. Hier sind meine beiden Dateien. Du kannst das PNG schon sehen. Es hat kleine Pixel. Es ist ein pixelbasiertes Format, wohingegen das SVG, das ich gerade eingeführt habe, unendlich skalieren kann. Deshalb verwende ich es für viele Icons und Logos , solche Dinge. Ich mache das rückgängig, bevor ich alle meine Designs Du kannst auch ein PDF verwenden Das ist in Ordnung. Ein PDF könnte nützlich sein, wenn Sie das tun. Gehen wir zu meinen Seiten und ich möchte das Ganze exportieren. Ich werde den gesamten Frame exportieren . Ich werde sagen, runter von meinem Skalierungswerkzeug, zurück zu meinem MO-Tool und ich werde sagen, lassen Sie uns dieses Bild nicht als großes Bild, sondern als PDF exportieren. Sie sind einfach, sie können gemeinsam genutzt werden. PDFs sind großartig, weil sie sowohl Pixelbilder auch den skalierbaren Vektor enthalten Es ist eine Mischung aus JPEGs und SVGs. Es ist großartig Exportiere den Kerl. Es nimmt den Namen des Frames, schauen wir uns das mal an und wir haben ein PDF, das wir mit anderen teilen können. Fantastisch. Oh. Warum möchte ich ein Menü haben? Schauen wir uns an, warum ich kein Menü habe. Das hier, oh, das gehört nicht zu meinen Bedürfnissen. Kann ich es reinbekommen? Da steckt es nicht fest. Ich ging rein, wackelte herum und landete auf meiner Homepage Jetzt werden wir exportieren. Lass uns über die Xs sprechen. Nehmen wir an, ich habe dieses Bild hier. Ich möchte es exportieren. Ich möchte es als JPEG bei einem X machen. Ich meine nur , dass alles, was größer als 620 ist, anfängt , pixelig zu werden Was Sie vielleicht tun könnten, ist, dass ich die doppelte Größe exportiere, die ich benötige, also wird es bei Come on Maths 12 40 erscheinen. Ich habe es getan A, Sie könnten tatsächlich zwei Versionen davon exportieren, einem JPEG von einem X und eine mit zwei X. Sie müssen mit Ihrem Entwickler darüber sprechen, was er will. Wollen sie zwei Versionen? Wollen sie eine kleine und eine große? Und was sie tun werden, ist zu verschlüsseln. Wenn dieses Bild auf einem Bildschirm mit niedriger Qualität angezeigt wird, wird die kleine Größe geladen Es lädt gut und schnell, weil es keinen Sinn macht, diese Big Mama Jammer-Version zu haben, die auf einem wirklich kleinen Bildschirm doppelt so groß ist Auf einem großen, hohen Heckbildschirm wird es sich dagegen so ändern, dass es das Schauen wir uns einmal an, wie es exportiert wird. Ersetze es. Meins heißt Lass uns mal schauen. Ich habe diese beiden hier. Eins ist das Portemonnaie und das hier ist das kleinere. Das ist die Größe, die ich in Figma hatte. Das ist der Export des zweiten. Sie müssen sicherstellen, dass Ihr Originalbild von hoher Qualität ist , damit es in doppelter Größe exportiert werden kann. Sprechen Sie mit dem Entwickler und finden Sie heraus, welche Größe er haben möchte. Es kann sein, dass Sie nur die doppelten Größen exportieren. Denn erinnere dich daran, wann wir uns die Seiten angesehen haben und auch, wann wir entweder Figma-Seiten machen oder diese. Welches ist es eigentlich Dieser hier. Aus diesem Grund, siehst du, wird es auf einem Bildschirm in dieser Größe erscheinen, aber auf einem anderen in dieser Größe oder auf einem anderen in dieser Größe. Siehst du , das ist eine Menge, deshalb exportieren wir oft die doppelte Größe, wenn wir Bilder für unsere Website exportieren. Manchmal benötigen Sie jedoch etwas, Sie in einer bestimmten Größe exportieren können. Nehmen wir an, Sie haben das und es muss in einer bestimmten Größe ausgegeben Sie können das loswerden und einfach sagen, sehen Sie sich dieses Drop-down-Menü hier unten an, gibt es Breite hier unten gibt es Breite. Das ist nur ein Beispiel. Wenn ich darauf klicke, bedeutet 512 W nur die Breite. Ich kann sagen, ich möchte, dass dieser 100 Pixel breit ist, weil ich ihn für etwas für meine Website benötige. Ich gebe ihm einen anderen Namen. Nennen wir das. 100 Pixel. Ich gehe einfach von Pixeln aus. Wenn du W sagst, lass uns zuschlagen. Lass uns einen kleinen Blick darauf werfen. Wir haben unsere Brieftasche , die sehr klein ist. Da hast du's. In Ordnung. Nehmen wir an, Sie nehmen einige Änderungen vor und müssen alles erneut exportieren. Du sagst, muss ich gehen und jeden einzelnen anklicken? Du kannst hier nicht einfach zum F gehen, zu Datei gehen und dann zu Exportieren gehen, es wird sich an all die Dinge erinnern , die du hinzugefügt hast, kleine Exportoption zwei. Sie können hier meine vier Dinge sehen. Vielleicht entscheiden Sie, dass ich Sie und Sie nicht brauche. Ich brauche nur diese beiden Updates. Ich werde all diese Bilder erneut exportieren, an derselben Stelle. Ich werde sie überschreiben. Alles, was Sie exportieren möchten, nehmen Sie es einfach und sagen Sie unten, klicken Sie auf Exportieren und wählen Sie aus, was auch immer Sie möchten. In diesem Fall möchte ich, dass es JPEG ist. Ich muss jetzt nicht wirklich exportieren, ich kann einfach zu meinen allgemeinen Exporteinstellungen gehen und es wird in diese Liste aufgenommen. Lass uns gehen. Da ist ihre Homepage. Bum. Und wir sind fertig. Ordnung, das ist ein kurzer Überblick darüber, wie man Bilder aus Figma herausholt Einfach Allzweck-Bilddateiformate. In den nächsten Videos werden wir uns ein bisschen mehr damit befassen. Ordnung, lassen Sie uns einsteigen. In Ordnung, ich bin zurück. Ich sagte, spring rein. Ich meinte, wir sehen uns im nächsten Video. Es war ein langer Kurs. Wir wissen es beide. Oh. In Ordnung, wir sehen uns im nächsten Video. 90. So teilen Sie Ihr Dokument mit Kunden und Stakeholdern: Hallo zusammen. In diesem Video werden wir unsere Figma-Dateien exportieren, die für unsere Kunden bereit sind Also unsere Kunden, vielleicht Stakeholder, nicht andere Designer, Entwickler, ganz konkret Leute, die nicht wirklich Figma-Benutzer oder UX-Designer Lassen Sie mich Ihnen also die verschiedenen Optionen für sie zeigen. Ordnung, wir haben uns also vorhin angeschaut, was wir teilen wollen und wir können den Link kopieren oder ihnen eine E-Mail schicken Das einzige Problem dabei ist, dass sie in einer Art von FGM-Land landen, was einigen Kunden, Sie wissen schon, nur Probleme bereiten wird Okay? Außerdem heißt es dein Müll und du musst aufräumen und wir haben uns das auch vorhin angesehen Du kannst es durchgehen und diese Typen auswählen und sagen: In Ordnung, ich möchte, dass du es als PDF exportierst . Das ist eine andere Art, es zu tun. Hier oben gibt es eine Option, die besagt: Ordnung, unter diesem FK können Sie sagen, ich möchte, dass Sie Frames als Datei als PDF exportieren. Das funktioniert nicht besonders gut, weil Sie damit enden, dass es jeden einzelnen Frame in meinem Dokument ausnutzt, unabhängig davon, was ich gewählt habe. Ich habe das alles exportiert. Das ist ein Frame, das ist ein Frame, also wurden sie alle exportiert. Sie können sie anschließend aufräumen , ich weiß nicht, mit Acrobat Reader oder was auch immer Sie für PDF verwenden, aber das ist nicht sehr praktisch Eines, das natürlich praktisch ist, ist ein Screenshot, aber hier unten gibt es noch ein anderes Tool Also schauen wir uns das Slice-Tool an. Ich kann hier ein Feld um diese Gruppe ziehen, sagen wir, ich möchte, dass dieses Bit exportiert wird. Ich werde umziehen Okay, alles andere, was da drin versteckt ist. Mach es schön sauber Die Slice-Option hier. Diese kleine gepunktete Linie endet hier in Ihrem Ebenen-Panel Wenn ich nach oben scrolle, gibt es ein Ding namens Slice One. Ich werde es nennen. Taskflow, und was ist das? Ecom. Das Coole daran ist, dass diese kleine Linie hier draußen nur alles exportiert , was sich in der Box Es ist kein echtes Objekt. Es ist wie ein Exportfenster. Wenn ich jetzt zu Exportieren gehe und es ausgewählt habe, kann ich es hier in meinem LAS-Bedienfeld anklicken. Ich kann sagen, ich möchte, dass Sie als Ch Pi exportieren. Ich werde das exportieren. Da ist mein Aufgabenablauf, und es wird einfach alles exportiert, was da drin ist. Da sind die Namen oben weg. Es ist nur ein bisschen aufgeräumter. Wenn du sagst, hey, warum hast du es nicht früher gezeigt, besonders wenn du ein Windows-Nutzer bist und Screenshots etwas schwieriger Es tut mir leid. Hauptsächlich , weil es nur dazu führt, dass diese Kiste hier ist, sie ist im Weg. Jetzt bist du ein wirklich guter Nutzer von Figma, du kannst anfangen, diese zu benutzen Sie können sie anschließend anpassen. Sie können sie löschen. Klicken Sie darauf, löschen Sie sie. Du kannst Boxen um viele verschiedene Dinge zeichnen und einfach alles, was sich darin befindet, exportieren . Es ist das Slice-Tool hier unten. Ich gehe zurück zu einer anderen coolen Art, Ihre Dateien mit einem Kunden zu teilen Ihre Dateien mit einem Kunden , die eher eine Präsentation ist, ich nehme mir diese Homepage hier und kopiere sie. Ich gehe zu Plus oder du kannst zurück nach Hause gehen. Du suchst nach den Folien. Wie Websites und diese anderen. Diese unterscheiden sich alle von dem Tool, das wir gelernt haben, nämlich Figma-Design, das von UX-Designern verwendet wird Sie können Figma auch für Folien verwenden, z. B. für eine PowerPoint-Präsentation Ich werde mit nur einer Folie beginnen, und ich werde mit einer Vorlage beginnen Es wird eine zufällige auswählen. Sehen wir uns diesen an. Womit wollen wir beginnen? Fügen wir alle Folien hinzu. Das Coole daran ist , dass es sich um eine andere Software handelt, aber jetzt, da Sie über gute Kenntnisse im Figma-Design verfügen, können Sie Figma-Folien ganz einfach verwenden. Lass uns gehen und schnappen. Ich habe es gerade kopiert, Mitglied. Ich kann mein Design einfügen, ich kann mein Skalierungswerkzeug verwenden und ich kann es zu einer Präsentation für meinen Kunden hinzufügen . Ich könnte das entscheiden und anfangen, diese Vorlage zu verwenden. Das Coole an diesen Vorlagen ist, dass ich, wenn ich im Hintergrund abklicke, anfangen kann, mit dem Vorlagenstil herumzuspielen. Sie haben diese ganze Hierarchie am Laufen. Ich könnte abklicken. Da ist diese Schaltfläche zum Verwechseln. S Remix-Vorlage, klicken Sie einfach darauf und finden Sie eine, die Ihnen sehr gut gefällt Keines davon mag ich. Klicke für immer weiter. Oh, der gefällt mir. Kannst du zurückgehen, Undo? Kannst du. Du kannst es durchgehen und sagen, ich will eigentlich, dass all mein Was ist das, das hervorhebt. Es ist mein H zwei, also klicke ich im Hintergrund ab. Ich werde jetzt sagen, dass H-Twos aber keine Untertassen sind. Es wird scharfer Reis sein. Ich werde Ihr ganzes Dokument durchgehen und alles wird aktualisiert. Sie haben Stile kreiert. Sie können ziemlich weit kommen, ziemlich schnell. Ich werde nicht ein ganzes Tutorial auf Figma-Folien durchgehen, aber es ist eine großartige Möglichkeit, sehr schnell professionell zu sein Ohne Figma zu verlassen, können Sie Dinge aus Ihrer Designdatei kopieren und einfügen , ohne PowerPoint verwenden zu müssen. Ich hasse PowerPoint Ich hasse PowerPoint nicht. PowerPoint hasst mich. Das hier ist vielleicht ein besserer Weg, um loszulegen und mit dem Teilen zu beginnen Sie können diese Präsentation teilen anstatt die Figma-Datei selbst zu verwenden Sie könnten einfach den Link zu Ihrer Figma-Designdatei teilen, was für manche verwirrend sein kann Sie könnten nur das einfache alte Export-PDF verwenden, oder Sie könnten dieses Segment verwenden, um einen Rahmen um sie herum zu zeichnen, oder Sie könnten die Figma-Folien untersuchen und sich für eine eher repräsentative Präsentation entscheiden All das teilen wir mit Kunden, Kunden, nicht mit anderen Designern, nicht mit Entwicklern Das machen wir als Nächstes. Wir sehen uns im nächsten Video. 91. Gespräche mit Ihrem Entwickler zu Beginn des Figma-Designprozesses: Hallo, alle zusammen. Ich dachte, ich würde aus dem Bildschirm springen. Wir machen das live. Wir arbeiten mit Ihrem Entwickler zusammen. Es gibt keine offizielle Art, mit einem Entwickler zusammenzuarbeiten, etwas wie einen offiziellen Übergabeprozess, okay? Was letztendlich passiert, ist, dass es vom Entwickler und Ihrer Beziehung zu ihm abhängt Das Ziel und das Tolle daran ist, Sie den Entwickler zu Beginn des Prozesses hinzugezogen haben , okay? Es macht keinen Spaß, jemanden mit einem fertigen Design zu überraschen. Der Entwickler wird das Gefühl haben, dass Groll wahrscheinlich ein zu starkes Wort ist, aber er hat nichts dazu Also, okay, dieser Designer hat mir dieses Ding zum Bauen gegeben, und ich werde es bauen, weil sie gesagt haben, dass ich es tun muss Sie wollen zum Beispiel, dass sie Teil der Wireframes sind, um Ihnen Ratschläge zu geben, Teil der ersten paar Frames, die Sie tun, um Ihnen Ratschläge zu geben, damit es nicht nur Zustimmung gibt, sondern dass sie das Gefühl haben, Teil des Prozesses zu sein dass sie Teil der Wireframes sind, um Ihnen Ratschläge zu geben, Teil der ersten paar Frames, die Sie tun, um Ihnen Ratschläge zu geben, damit es nicht nur Zustimmung gibt, sondern dass sie das Gefühl haben, Teil des , und so dass, besonders wenn Sie neu sind, wenn Sie früher Feedback erhalten, bedeutet das, dass Sie sich nicht in eine Katastrophe hineinversetzen. So oft habe ich das Gefühl, dass die Sprache wirklich einfach sein kann. Es müssen keine offiziellen Treffen sein. Es kann sein wie, Hey, Sandy, würde es dir etwas ausmachen, weißt du, kann ich dir schnell die Frames meiner Frau zeigen? Das ist der Punkt, an den ich mit dem Projekt gehen möchte? Ich will nur dein Feedback. Weißt du, würde es dir etwas ausmachen, mir 5 Minuten zu geben, okay? Oder, Hey, das sind die ersten paar Bilder. Was denkst du? Weil es so viele Jobs gibt, bei denen ich angenommen habe, dass etwas zu schwierig ist, also habe ich es nicht gemacht, nur um es in diesem ersten Gespräch herauszufinden , sie sagen, oh, das wollte ich machen, aber ich denke, wir werden das auf Phase zwei verschieben , weil es harte Arbeit zu sein scheint. Was denkst du? Und sie sagen, nein, wir haben dieses andere Ding, das sehr ähnlich ist. Wir haben bereits dieses, weißt du, diese Art von Framework gebaut diese Art von Framework , das bereits für diese andere Sache gebaut wurde. Wir haben das einfach da reingesteckt und ich werde es ändern. Und du sagst, ich bin kein Ingenieur oder Entwickler, also gibt es einfach viele Dinge, von denen ich denke, dass sie wirklich schwierig sind, aber es stellt sich heraus, dass sie es nicht sind und das Gegenteil. Okay? Es gibt Dinge, die ich entwerfe, und es ist quasi ein Kernstück von dem, was ich will. Es könnte einfach wie ein wertvolles sein. Ich denke, oh, lass uns großartig sein. Und dann sprichst du früh mit dem Entwickler und er sagt, das wird die doppelte Projektzeit in Anspruch nehmen oder all diese zusätzliche Komplexität erhöhen. Brauchst du es wirklich? Und wenn es früh ist, sagst du, nein, du sagst einfach, wir machen das in Phase zwei, Phase zwei ist eine gute Art zu sagen, wir machen das später, aber wahrscheinlich nie, weißt du, es zu mischen, damit wir dieses Projekt fertig stellen können Und das alles passiert in dieser ersten Art von Dialog. Also ja, es gibt einen Übergabeprozess, wenn alles genehmigt ist, aber das sollte nicht das erste Mal sein, dass Ihr Entwickler Ihr Projekt sieht. Arbeiten Sie also offen, bitten Sie sie um Kommentare, beziehen Sie sie mit ein und finden Sie heraus, warum und wie sie gerne arbeiten. Weißt du, welche Art von Dingen sie bei der Übergabe sehen wollen , damit sie dir nicht gefallen, ich hoffe, sie mögen es und schicken eine E-Mail mit all deinen Links und Bildern, und sie werden alle etwas wollen Sie werden wahrscheinlich Modelle, Prototypen und eine Menge Bilder sehen wollen , Prototypen und eine Menge Bilder Sie werden deine Modelle verwenden, um Abstände und Abstände und solche Dinge herauszufinden , wenn es ein neuer Job ist, okay Aber sie werden deine Rechtecke nicht verwenden, okay? Sie werden sich nur die Abstände ansehen und, ähm, ja, alles neu aufbauen, hauptsächlich im Code, okay, außer Dingen wie Bildern Also ja, es gibt einige Konsistenzen zwischen der Übergabe Wir werden gleich ein bisschen mehr tun, aber sprechen Sie mit Ihrem Entwickler und finden Sie heraus, wer er ist. Seien Sie proaktiv. Warte nicht einfach, bis magische Ingenieurabteilung es macht. Frag. Vielleicht haben Sie einen, Sie wissen schon, vielleicht haben Sie einen Produktleiter oder einen Produktmanager oder Sie arbeiten vielleicht alleine und werden es auslagern, oder vielleicht wird der Kunde das für Sie tun Finden Sie heraus, wer es ist. Sprich mit ihnen. Machen Sie den Entwickler zu Ihrem Freund. Wenn Sie der Entwickler sind, macht das die Dinge einfacher. Aber richtig, so arbeiten Sie mit Ihrem Entwickler zusammen. Lassen Sie uns einsteigen und ich werde Ihnen einige weitere taktile Dinge zeigen , die wir in Figma tun können 92. Entwicklermodus und Übergabe an einen Entwickler: In diesem Video werden wir uns einen sogenannten Dev-Modus in Figma ansehen sogenannten Dev-Modus in Figma Es richtet sich an Entwickler. Wir als Designer können Dinge so markieren, dass der Entwickler sie sich ansehen kann, und was sie sehen können, sind Dinge wie, richtig, das ist meine Schrift. Das ist ein CSS-Code , der dafür sorgt, dass es funktioniert sodass sie es genau so machen können, wie Sie es entworfen haben. Sagen wir hier oben für dieses Logo hier. Es ermöglicht ihnen, hier durchzugehen und, richtig, Logo zu sagen. Sie können ihre eigenen SVG-Dateien herunterladen und ihnen die Möglichkeit geben, ihre eigenen Dateien herunterzuladen anstatt dass Sie alles fertig exportieren müssen. Ordnung, lasst uns in den Dev-Modus springen. In Ordnung. Zunächst einmal ist der Dev-Modus eine kostenpflichtige Funktion in Figma, um darauf zuzugreifen Sie haben hier unten eine Option. Du kannst einfach darauf umschalten. Wir haben Design gemacht, in dem wir den größten Teil dieses Kurses verbracht haben. Wir haben ein bisschen gezeichnet , was die Tools verändert hat, und das Gleiche gilt für den Dev-Modus. Ändert die Tools und Sie erhalten hier unten eine neue Reihe von Tools. Was Sie im Designmodus tun können, ist, dass Sie entscheiden können: Okay, lass uns zu mobilem Hi-Fi übergehen Nehmen wir an, die Homepage ist fertig, alles ist abgesegnet, bereit für unseren Entwickler. Du kannst. Diese kleine Option hier oben , die wir für den Kurs ignoriert haben, kann man sagen, dass Mark bereit für Dev ist Klicken Sie darauf und klicken Sie darauf, oder Sie können einfach sagen, dass dieser Rahmen bereit für die Entwicklung ist Er wurde signiert und ist startklar, auch wenn auf dieser Seite nichts steht auch wenn auf dieser Seite nichts steht. Dann können wir es teilen und wir können hier reingehen und diesen Link für den Entwicklungsmodus teilen. Ich habe das kopiert und sagen wir, ich schicke es an meinen Entwickler. Das sehen sie. Die Entwickler benötigen ihre eigene Lizenz, also müssen sie unterschreiben und sie können sie so ansehen und sie können sehen , dass dieser hier als Entwickler markiert ist, dieser ist DV-fähig, aber sie können nicht viel tun, wenn sie kein kostenpflichtiges Konto haben Billiger als das reguläre FIGMA-Konto. Okay? Also hängt es davon ab , wo du arbeitest. Und wenn Sie diesen Ablauf häufig verwenden, ist es für sie wirklich nützlich, einen Dev-Account zu haben, damit sie so etwas wie die Elemente inspizieren können . Lass uns einen Blick darauf werfen. Das wird Ihr Entwickler sehen, wenn er sich Ihre Datei ansieht. Wenn sie ein kostenpflichtiges Konto haben, können sie alle meine Spalten sehen, die ich verwende für sie sehr nützlich, wenn sie wissen, welche Spaltengrößen Sie verwendet haben. Das wirklich Coole daran ist, dass sie es durchgehen und sagen können: In Ordnung, sieh dir diesen Schnappschuss an, den Dan gemacht hat Es sagt ihnen, dass sie die wichtigen Teile davon sind. Sie können sehen, dass ich oben 12 und 12 verwendet habe, was den Pixelabstand angeht, und 16 an den Seiten Hier auf dieser Seite fängt es an, ihnen nützliche Entwicklergrößen zu geben Nicht so viele Designgrößen, außerdem es ihnen das CSS oder ein anderes Framework, das sie möglicherweise verwenden, Android OOS, je nachdem, ob es sich um eine oder eine Website handelt, zusammen mit anderen CSS-Eigenschaften , die ihnen helfen könnten, es schneller zu erstellen, Farben, Scrollen nach unten. Sogar die Icons, die ich hier verwendet habe. Da ist das Logo. Sie können darauf klicken und selbst sagen, du kannst ihnen die SVGs schicken und ihnen die Größen sagen Sie können es anhand der Bilder herausfinden. Aber das gibt ihnen bestimmte Breiten und Höhen und Abstandsgrößen und ermöglicht es ihnen, sie durchzugehen und zu sagen, richtig, sie können ihre eigenen SVGs herunterladen, gibt ihnen die Kontrolle , alles herunterzuladen, was sie wollen, anstatt ähm, du musst alles exportieren Nehmen wir an, diese kleine Einheit, die wir hier gebaut haben, ist irgendwie skalierbar und bleibt unten Es gibt ihnen die Möglichkeit, ein flexibles Ende zu verwenden. Sie müssen nicht wirklich wissen, was das ist. Es ist praktisch, wenn Sie sich ein bisschen mit Programmieren auskennen. Es ist nicht unbedingt erforderlich. Sie können sich meinen Web-Essentials-Kurs ansehen. Wenn Sie das tun möchten, um einen Vorsprung darin zu bekommen , wie Sie es selbst programmieren können. Selbst wenn Sie es nicht selbst programmieren möchten, kann es praktisch sein, ein grundlegendes Verständnis der Sprache zu erlangen , ich weiß nicht, insbesondere diese Flex-Option. Sie heißt Flexbox. Tun Sie nicht, das wird für Ihre Entwickler Sinn machen und ihnen einen etwas größeren Vorsprung geben, wenn es darum geht, ob sie diese Schrift verwenden wollen, welche Schrift ist das Es ist Source Sans Pro. Welches Gewicht hat es? Normal, das sind unsere 700. Denken Sie daran, dass wir früher gelernt haben, Schriftstärken im Code oft zu Hunderten angegeben werden . Sie können den Text daraus kopieren und einfügen. Sie können Kommentare hinzufügen, die direkt in Ihre Designdatei zurückkehren wo sie fragen können: Hey, was machst du hier? Warum ist das so? Macht es dir was aus, wenn es so ist? Sprechen Sie mit Ihrem Entwickler, um zu sehen, ob er Figma schon einmal verwendet hat und ob das praktisch ist Manchmal wollen Entwickler einfach nur ein JPEG-Modell und alle Symbole, Logos und Bilder exportieren, und sie werden es selbst erstellen weil sie vielleicht so arbeiten Was Sie wahrscheinlich tun müssen, ist dass ich zu meiner Entwurfsansicht zurückkehren werde, nicht zur Entwickler-Ansicht, sondern Sie müssen ihnen wahrscheinlich eine Seite geben Es ist wirklich üblich zu sagen, bereit? Für DIV. Was ich mache ist, dass ich meine Arbeitsdateien habe, aber ich habe auch diese Datei hier oben. Vielleicht ist sie ganz oben, damit sie sie leicht finden können. Ich kopiere einfach, weil mein Desktop-Computer, nur zu Hi-Fi, wirklich chaotisch ist Vielleicht schnappe ich mir die, von denen ich weiß, dass sie fertig sind und kopiere sie einfach raus, kopiere sie, stelle sie auf ihre eigene Seite, bereit für DIV Fügen Sie sie ein, markieren Sie sie einfach als fertig aber lassen Sie sie wissen, dass dies die Seite ist, sie aus dem endgültigen Finale ziehen sollten. Denn für Sie ist es praktisch, alle Arbeitsdateien hier unten zu haben . Sie können sehen, dass dieser hier diesen kleinen Indikator hat , der besagt, dass etwas auf dieser Seite bereit für die Entwicklung ist. Sie können es hier auf dem mobilen Hi-Fi sehen , das wir zuvor gemacht haben. Wenn Sie ein Designer sind, markieren Sie diese vielleicht einfach als bereit für die Entwicklung und das war's. Das kannst du selbst. Wenn Sie der Entwickler sind, können Sie diesen Dev-Modus hier umschalten und anfangen, nützliche Informationen abzurufen, den Text herauszuziehen, die Schriftstärken, die Farben, die Stile, die Job-Schatten, die Sie ewig damit verbracht haben, ihn dort zu finden, Sie werden sehen, da ist mein Häkchenschatten. Das ist der CSS-Code, der das ermöglicht. Genau so hast du es. Und es hat sogar den Namen. Gold Mines ist ein super toller Stil. Das ist DevMe in Figma. Sobald Sie hier fertig sind, können Sie zum Designmodus zurückkehren Wenn sie ein Konto nur für Entwickler haben, haben sie nur Dvmode können nicht in den Designmodus wechseln Aber für mich, die ein bisschen programmieren, kann ich zwischen den beiden hin- und herschalten Hinweis: Sobald Sie Ihre Seite fertig haben, können Sie entscheiden, okay, Startseite hier, ich gehe zurück zur Entwurfsansicht ist, dass diese Homepage hier ausgewählt wurde, ich werde sie teilen und ich werde sie zum Kopieren freigeben Dev Modink Sie können sehen, dass der Link tatsächlich hier auf dieser Homepage beginnen wird hier auf dieser Homepage beginnen Damit sind sie für den Anfang an der richtigen Stelle. In Ordnung, das ist also ein kurzer Durchlauf durch Dvmode. Es hängt davon ab, wie du mit einem Entwickler zusammenarbeitest, ob er nur visuelle Modelle und eine Menge Bilder haben will , die du exportieren kannst. Das haben wir gemacht Wir können das auswählen und sagen, ich möchte dieses Bild in diesem Fall wahrscheinlich als JPEG exportieren , ihnen eine Datei mit allem, was darin enthalten ist, geben und sie mit nur einem Modell, vielleicht einer PD oder JPEG Ihres Designs, loslassen vielleicht einer PD oder JPEG Ihres Ordnung. Das ist Dev-Modus. Wir sehen uns im nächsten Video. 93. Klassenprojekt 19 - Fertigstellung des Entwurfs: In Ordnung, es ist Zeit für das Projekt der letzten Klasse. Ich hoffe, du fandest sie nützlich. Und was wir hier tun werden, ist einfach unsere Designs fertigzustellen, okay? Wir haben vor allem auf dieser Feature-Seite einige Lücken hinterlassen. Benutze es gewissermaßen als Testgelände. Ich möchte, dass du deine Funktionen, die wir auf dieser Homepage haben , auf eigene Karten ausbaust, diese Blöcke. Mir ist egal, wie sie aussehen. Wenn du nach Inspiration suchst, ich habe einfach auf etwas wie Dribble geklickt, okay und ich habe einfach die Funktionen der Benutzeroberfläche eingegeben und einfach irgendwie durchgesehen und ich dachte, Oh, das sieht hier ziemlich cool aus Und dafür verwende ich die Inspiration irgendwie. Du kannst meinen Lockup hier sehen. Ihr Desktop-HiFi-Flow, ich möchte, dass Sie vier volle Seiten haben Also ich möchte, dass du alles, was du verpasst oder zurückgelassen hast, zu Ende schreibst. Sie können hier sehen, dass ich meine Startseite, meine Funktionen, meinen Checkout und meine Bestätigungsseite auf meiner Desktop-Version fertiggestellt habe. Alles andere, was dir auch fehlt. Achten Sie darauf, Ihren Typ und Ihre Farbstile zu verwenden. Ich möchte, dass du mit Maskierung, einem oder mehreren Effekten herumübst , und du kannst Platzhaltertext für den Text verwenden, insbesondere auf deiner Feature-Seite, oder du kannst mit den KI-Optionen in Figma üben den KI-Optionen Wenn du kein kostenpflichtiges Konto hast , kannst du zu etwas wie GBT gehen, das kostenlos ist und das Gleiche tut habe es gebeten, mir einen Absatz oder eine Marketingseite zum Thema RFID-Schutz für eine Brieftasche zu geben, und genau das habe ich bekommen Ich habe nach Stichpunkten gefragt, und das hat es mir gegeben, und ich habe es für alle drei getan. Ich bin sogar einen kleinen Fuß da unten gestorben. Ich möchte also, dass du es fertigstellst und dann einen Screenshot machst, oder du kannst dein Slice-Tool verwenden oder JPEGs exportieren Es liegt an dir, aber ich möchte diese vier Bilder sehen. Laden Sie es in den Projektbereich und ich würde es lieben, lieben, lieben. Wenn du es noch nicht getan hast, teile es in den sozialen Medien. Wenn du willst, kannst du sagen, wo du bist. Äh, du machst diesen Kurs mit Dan. Und hier ist der Link. Das wäre auch nützlich. Teile es auf einem oder allen von ihnen. Sie erhalten optionale Bonus-Comer-Punkte , wenn Sie auch das mobile Hi-Fi nutzen Es wird lustig und interessant sein, dies auf eine mobile Version zu reduzieren lustig und interessant sein, dies auf eine mobile Version zu Probieren Sie es aus, wenn Sie Zeit haben. Aber für alle anderen möchte ich nur, dass du diese vier Seiten fertigstellst. Sie müssen nicht perfekt oder schön sein. Ich möchte nur, dass du die vier Seiten ausfüllst. Ich würde sie gerne sehen. In Ordnung, das ist es Viel Spaß mit dem letzten Klassenprojekt. Puh, wir sind fertig. mach das und wir sehen uns im nächsten Video 94. Was kommt als Nächstes?: Oh nein, es ist das Ende. Geh nicht. Äh, wir hängen schon so lange rum, aber das ist das Ende. Äh, rate mal was? Wir können mehr abhängen, wenn du willst. Du kannst einen anderen Kurs machen. Ich habe noch viel mehr, das für Ihren Standort in Figma von Interesse sein könnte für Ihren Standort in Figma von Interesse sein Es gibt eine Figma Advanced. Das ist wahrscheinlich der nächste Schritt Ich habe Kurse zu Photoshop, Illustrator im Design und After Effects Premiere Pro Blender ist ein weiterer guter. Ich habe das zusammen mit Robin unterrichtet, also sieh dir das an. Das ist ein weiterer guter nächster Schritt. Aber ich wollte dir und mir nur gratulieren, dir und mir nur gratulieren, wir haben es beide geschafft, okay? Diese Kurse sind nicht einfach zu machen und sie sind nicht einfach zu machen. Okay? Was andere Leute beim Scrobbeln machen, du bist hier drüben und wirst immer besser in Figma Also du selbst auf der Rückseite. Gute Arbeit. Ich möchte mich schnell bei den Redakteuren Taylor, Jason und Edgar bedanken , okay, für ihre Arbeit an diesem Kurs Ich mache nicht alles selbst. Also lass mich auch wissen, was du von der ganzen Erfahrung hältst, okay, meinerseits , was ich besser machen könnte. Lass mich die Kommentare wissen. Ich lese sie. Ich checke gerne ein und sehe, wie der Kurs läuft, das Verhältnis zwischen glücklichen und unglücklichen Menschen ist, was im nächsten Kurs besser sein könnte, was Ihnen an diesem Kurs gefallen hat . Und ganz allgemein, ja. Denkst du darüber nach? Lass es mich in den Kommentaren wissen. Ordnung. Das ist das Ende Und zum Abschluss möchte ich Ihnen nur die Erlaubnis geben, sich UX-Designer zu nennen. bist du jetzt. Manche Leute fragen mich, woher weiß ich, wann ich es bin? Weißt du, wie kann ich es akkreditieren lassen? Es gibt keine Akkreditierung, okay? Es ist ein Geisteszustand, und es kann schwierig sein, die Welt zu verlassen , wenn man Bäcker Grafikdesigner oder Mechaniker ist und dann fragt, wann werde ich UX-Designer Du bist jetzt quasi ein UX-Designer. Herzlichen Glückwunsch. Du bist kein sehr guter. Du hast gerade erst angefangen. Aber so funktioniert das irgendwie. Okay? Scheuen Sie sich nicht. Im nächsten Teil, wenn dich jemand fragt, was du machst, sag ihm, dass du ein UX-Designer bist, okay? Ich fange gerade erst an. Du bist neu, okay? Du bist es aber. Vielleicht sind Sie ein erfahrener UX-Designer, der gerade Figma lernt, also können Sie es mit Stolz sagen Aber ich möchte dir die Erlaubnis geben zu sagen, dass du ein UX-Designer bist Es ist schwer zu wissen, wann das angemessen ist. Jetzt ist es soweit. Du hast einen langen Kurs gemacht. Du hast viel gelernt. Mach weiter, werde ein UX-Designer. Okay, Ende, Ende. Das ist es. Hoffentlich sehen wir uns bei einem anderen Kurs wieder. Traurig. Tschüss. Fett schwarz. Ich werde mich drehen.