Komponenten in Figma erstellen und verwenden – Anfängerkurs

1. Willkommen im Figma-Kurs – Komponenten erstellen: Hey, willkommen in der Klasse. Mein Name ist Sidebars und ich bin Marketing- und Produktdesigner. Und heute werden wir über Komponenten sprechen. Und ich werde dir zeigen, wie man diese wirklich dynamischen Module macht. Und dann Figma, das dazu beigetragen hat Ihren Designprozess viel effizienter und effektiver zu gestalten. Hier haben wir eine gefälschte Social-Feed-Website und auf der rechten Seite einige Schaltflächen , die voranimiert sind. Sie können also sehen, wenn Sie den Mauszeiger über sie bewegen, sie ändern sich in einen Strich, Kontur, eine weiße Füllung im Vergleich zu einem NoStroke und eine blaue Infile. Nun stellen diese offensichtlich Schaltflächen dar und in dieser Klasse werde ich Ihnen zeigen, wie Sie die einzelnen Komponenten herstellen , die notwendig sind , um diesen Effekt zu erzeugen. Wenn Sie Ihre Apps oder Websites oder andere Programme entwerfen , haben Sie das Wissen, um wirklich wertvolle dynamische Komponenten zu erstellen wirklich wertvolle dynamische Komponenten , die Ihren Designprozess gut aussehen lassen können ausgefeilter und vor allem spart Ihnen viel Zeit. Also, wenn Sie nach einem sehr einfach zu verfolgenden Kurs suchen und vielleicht Abonnent meiner vorherigen waren . Sie werden wissen, dass ich beim Unterrichten eher einen sehr unbeschwerten Ansatz verfolge. Und ich freue mich darauf, dich in meiner Skillshare-Klasse zu sehen. Wenn Sie sich für eine Registrierung entscheiden, wissen Sie nicht, was Sie gerade tun, aber wenn Sie mitmachen möchten, können Sie mir gerne folgen und gerne folgen und wir werden einige dieser Schaltflächen zusammen erstellen. 2. Das erste asset für Komponenten erstellen: Willkommen zur ersten Lektion in dieser Skillshare-Klasse. Wir werden Schaltflächen erstellen, die Hover-Effekte haben und mit der Komponentenfunktion von Figma erstellt werden. Das erste, was wir tun müssen, ist , unsere Knöpfe zu entwerfen. Also gehen wir zur Registerkarte Rechteck, erstellen ein Rechteck und benennen diese Form um. Jetzt sehen Sie standardmäßig die natürliche Farbe, dies ist grau. Und wir werden das erstellen und es zur Schaltflächenfarbe machen wollen . Wenn wir also hier zum Quadrat gehen und Solid wählen und dann eine Farbe wählen, entscheiden wir uns für ein Blau. Und dann runden wir die Ecken ab weil wir einen Knopf mit soliden eckigen Ecken erstellen können , aber runde Tasten fühlen sich gut an und es hat in modernen Apps gut funktioniert. Also klicken wir auf das Kästchen und kommen hier zu diesem Tool, das den Eckenradius ändert. Ich mache diese vier. Und Sie werden hier sehen, wie wir jetzt eine leichte Kurve haben , abhängig von der Größe Ihres Buttons. Wenn ich das also verkleinere, wirst du sehen, wie sich der Radius entsprechend ändert und ihn vergrößert. Es sieht eher wie ein Rechteck aus und macht es kürzer und es wird ein größeres Verhältnis des Eckenradius haben. Je nachdem, wie groß Ihr Button ist, möchten Sie das vielleicht ändern. Und Sie können dies erneut tun, indem Sie entweder eine Zahl eingeben oder den Radius hier ziehen. Sie können also durch Ziehen sehen, dass der Radius abgestufter wird. Jetzt, wo wir das getan haben, werden wir diesen Button in einem Rahmen gestalten. Wenn ich mit der rechten Maustaste auf das Quadrat schreibe, haben Sie die Möglichkeit , die Rahmenauswahl vorzunehmen. Dadurch wird der erste Rahmen und die obere linke Ecke angezeigt. Sie können sehen, wie diese Form unter diesen Rahmen passt. Jetzt geben wir diesem Button einen Namen, von dem wir wissen, dass es sich um einen Button handelt. Und dann fügen wir diesem Rahmen etwas Text hinzu. Drücken Sie die Text-Taste und dann auf die Innenseite. Und wir nennen das als nächstes. In diesem Beispiel wird dies eine Schaltfläche „Weiter“ sein , um zu einer neuen Seite oder einem anderen Teil der App zu gelangen. Nun ist dieser Text offensichtlich etwas zu klein, und obwohl dort 18 steht, sind unsere Schaltflächen eindeutig sehr groß. Taste, dieses Verhältnis richtet sich nach der Größe Ihres Buttons. Wenn ich hier klicke und auf Donnerstag klicke, ist das immer noch nicht ganz groß genug. Lass uns 45 gehen. Dehnen Sie die Schachtel auf. Und jetzt sehen Sie, wie sich dieser nächste Text innerhalb des Schaltflächenrahmens befindet. Nun, was ich tun werde, ist, diesen Text im Textfeld selbst zu zentrieren . Also klick hier. Und dann muss dieser gesamte Abschnitt zentriert in der Schaltfläche sein. Sie werden diese Symbole hier oben sehen, die Ausrichtungssymbole, ich werde auf vertikal ausgerichtete und zentrale Linie klicken . Das ist jetzt Central. 3. Component erstellen: Also, was wir tun werden, ist auf den Rahmen zu klicken. Und wir werden das in eine Komponente umwandeln. Wenn ich also mit der rechten Maustaste klicke, müssen Sie eine Komponente erstellen. Dadurch wird der Rahmen automatisch in eine Komponente umgewandelt. Und Sie können dies sehen, wie es lila gefärbt ist oder auf der Registerkarte Ebenen auf der linken Seite nachsehen. Nun, um den Hover-Effekt dort zu erhalten, wo er sich ändert, je nachdem, ob Sie die Form oder das Asset eingeben oder verlassen. Wir werden eine Variante erstellen, eine Variante. Und Sie können mehrere Varianten haben je nachdem, wie komplex Ihre Komponente ist. Wenn Sie also oben darauf klicken, sehen Sie die Option Variante hinzufügen verwendet Masken- oder Vereinigungsauswahl. Wir möchten eine Variante hinzufügen und Sie werden sehen wie automatisch eine Kopie erstellt wird, die wir dann ändern können, damit sie den gewünschten Effekt erzielt. Der gestrichelte Umriss zeigt nur die Ausdehnung der Komponenten. Und wenn Sie auf diesen Plus-Button klicken, wird eine weitere Variante hinzugefügt. Wir haben also oben die Standardschaltfläche und dann die Variante darunter. Lassen Sie uns nun die Ästhetik dieses Artikels ändern. Was wir also tun wollen, um deutlich zu machen , dass der Mauszeiger darüber schwebt, wir werden die Farben ändern. Also machen wir einen Doppelklick. Und wenn Sie doppelklicken, wird automatisch das unterste Baumelement innerhalb des ausgewählten Assets ausgewählt. Form eins, das ist das Rechteck. Es hat eine blaue Farbe und wir werden einen Strich hinzufügen. Jetzt hat dieser Strich die gleiche Farbe wie die Füllung. Wenn wir also hier klicken, auf das Pipettenwerkzeug klicken, die Innenseite klicken, werden Sie jetzt sehen, dass es einen blauen Umriss gemacht hat. Und wenn Sie dann die machen, machen Sie die Dicke etwas breiter. Offensichtlich können wir aufgrund der gleichen Farben nicht sehen , wie das aussieht. Wir können die Füllfarbe in Weiß ändern. Wir gehen. Jetzt haben wir eine weiße Füllung und einen blauen Strich. Und Sie können sehen, dass der Text verschwunden ist , weil der Text weiß war. Also machen wir diesen Text blau. Klicken Sie also auf das Pipettenwerkzeug dort. Jetzt haben wir also im Wesentlichen einen inversen Button , den wir dann als unseren Hover-Effekt verwenden können. Und jetzt das, das war's. Das ist im Grunde der Hauptkomponententeil oder die Hauptkomponenten. Und jetzt müssen wir nur noch am eigentlichen Ablauf des Buttons arbeiten . 4. Hinzufügen von Flow zur Komponente: Wenn Sie also in die obere rechte Ecke gehen, sehen Sie einen Prototyp. Mit Prototype können Sie jetzt Bewegungen und Animationen zu Objekten in linearer Reihenfolge hinzufügen . Wenn dieser Prototypbereich ausgewählt ist und ich auf eine Schaltfläche klicke, werden Sie sehen, wie wir ein kleines Plussymbol haben. Mit Figma können Sie jetzt per Drag & Drop ziehen. Wenn ich darauf klicke und nach unten ziehe, siehst du, dass die automatische, automatisch klickt und sich an die eingebaute Komponentenvariante anhängt. Lass los. Und dann erscheint ein Popup-Feld. Nun, wenn wir hier auswählen können, wie dies mit unserer Maus oder unserem Touch interagieren soll oder wie Sie es verwenden und auf welchem Gerät es verwendet wird. Im Moment hat es standardmäßig geklickt. Aber wir wollen es haben, weil Frauen, wenn die Maus die Taste betätigt, wollen wir, dass es in die andere Variante wechselt. Und wenn es außerhalb des Compound-Komplexes, des Behälters des Buttons, kommt , möchten wir, dass es wieder zu dem wird, was es war. Klicken Sie also beim Schweben. Es ändert sich von Eigenschaft eins zu Variante zu. Jetzt können Sie wählen, ob Sie einen Augenblick haben möchten, Sie können wählen, ob er sich auflöst, dort ein bisschen verblassen lässt, was wir tun werden. Was das jetzt macht, ist, dass jedes Mal, wenn Sie diese Schaltfläche aufrufen, diese Schaltfläche angezeigt wird. Und wenn Sie diesen Knopf verlassen, wird dieser Knopf angezeigt. 5. Testen der Komponenten: Um dies zu testen, erstellen wir einen sehr schnellen Rahmen. Wir können uns also vorstellen, dass dies ein Monitor ist. Und dieser Monitor ist, wir werden das in einen Rahmen setzen. Also Rechtsklick auf Frame Und wir werden das einfach machen. Wir können dort machen , was du willst. Sie können sich also vorstellen, dass dies die App ist. Und wir werden die Komponente jetzt in diesen App-Bereich einfügen wollen . Sie gehen also zu Assets und Sie werden sehen, dass, weil wir eine Komponente erstellt haben, diese zu einem lokalen Komponenten-Asset gemacht hat. Jetzt kannst du dies in den Bereich ziehen und du wirst sehen, wie wir diese dann stapeln können. Also, wenn das ein isolierter Knopf ist, großartig. Dies kann ein Weiter - und ein Zurück-Button sein. Wenn wir also die Ausgabe versuchen, tun Sie dies, kopieren Sie Einfügen. Und jetzt haben wir zwei Knöpfe. Und wir können das hier nennen, dieses als nächstes. Und wir können doppelklicken und etwas zurück machen. Jetzt werden Sie feststellen, dass Sie mit den intern ausgewählten Assets den Text dieser Elemente tatsächlich ändern können ohne die ursprüngliche Komponente zu beeinflussen. Was es tun wird, ist, alle Animationen beizubehalten, alle Flows wie zuvor beizubehalten, aber es wird den Text beibehalten , der wirklich nützlich ist. Sie müssen also nicht zehn Versionen derselben Komponente erstellen . Sie können eine Version erstellen und sie dann in Ihrem Hauptarbeitsbereich ständig ändern. Das ist also unser Zurück-Button und unser nächster Button. Und natürlich können Sie Ihren App-Bereich nach Ihren Wünschen gestalten. Ich werde es einfach schön und einfach halten, damit wir oben eine kleine Leiste platzieren können , damit es wie eine Art Header einer Website aussieht. Ändere die Farbe. Vielleicht machen wir vielleicht eine Form. Vielleicht das, vielleicht ist das ein Formular. Also lass uns das weiß machen. Sie können einen Effekt hinzufügen. Wenn Sie darauf klicken, wird standardmäßig ein Schlagschatten angezeigt. Wir können einen Radius hinzufügen. Nochmals, all die Dinge, die Sie bereits in der Klasse gelernt haben . Und wenn ich zu den Ebenen zurückkehre, wirst du sehen, wie es im Rahmen sitzt. Wenn ich also auf das Ausrichtungswerkzeug klicke, wird es automatisch in die Mitte dieses Rahmens verschoben. Jetzt können Sie sich wieder vorstellen, dass dies eine Art Form ist. Und nur um zu zeigen, dass es sich um eine Form handelt, werde ich einige Zeilen einfügen. Hier hätten Sie also Ihren Namen und Ihre E-Mail-Adresse und so weiter. Und jetzt werden wir es testen. In diesem Teil können Sie sehen, wie Ihre Animationen funktionieren. Wenn Sie also auf den ersten Frame klicken und dann zu diesem Wiedergabesymbol gehen, wird dieses automatisch in eine App-ähnliche Umgebung geladen . Also wenn ich auf Play klicke und uns ein wenig herauszoomen lasse, lass uns auf den Bildschirm passen, denn offensichtlich haben wir hier eine sehr große, große Anwendung gemacht. Aber du wirst hier sehen, wie wir die Knöpfe haben. Und wenn ich über diese Schaltflächen gehe, werden Sie sehen, wie sie jetzt diese Animationseffekte haben. Jetzt wieder, best macht das Entwerfen von Komponenten sehr, sehr einfach. Denn wie Sie sich vorstellen können, würde es ewig dauern, wenn Sie all diese Schaltflächen manuell erstellen und all diese Flows für jeden einzelnen Frame all diese Schaltflächen manuell erstellen und all diese Flows für jeden einzelnen Frame Ihrer App manuell erstellen müssten. Und in diesem Beispiel können Sie sehen, wie Kopieren und Einfügen ein zweites Bild erstellt wird. Und nur um zu zeigen, wie das funktioniert, kannst du hier hingehen und diesen Hintergrund ändern, so dass er anders ist als eine andere Seite, wenn du so willst. Also entfernen wir das, entfernen sie und ändern den Hintergrund, und ändern den Hintergrund damit wir sehen können, dass es sich um eine andere App handelt. Wir können diese Schaltflächen tatsächlich so animieren , dass sie auf die gleiche Weise funktionieren. Wenn ich also darauf klicke und in den Prototyp gehe, kann ich diesen Habits tatsächlich einen eigenen Flow machen. Es erinnert sich also nicht nur an die ursprüngliche Komponente, Animationen und Flows, sondern Sie können der eigentlichen Benutzeroberfläche, in der Sie gerade arbeiten, auch zusätzliche Fluss- und Prototypanweisungen hinzufügen zusätzliche Fluss- und Prototypanweisungen . Wenn ich also zum Prototyp gehe, wirst du sehen, dass es bereits die Hover-Interaktion hat, aber du kannst es dort machen, wo es geklickt hat, es würde etwas anderes tun. Wenn ich das mache und es hierher ziehe, wirst du in einer zweiten Interaktion sehen, wie es hinzugefügt wird. Sie müssen die Interaktion variieren und in Ihrer haben Sie Ihre , die Sie tun. In diesem Fall sagen wir onclick, navigiere zum zweiten Frame. Und dann wollen wir in diesem Rahmen entgegengesetzt sein. Wenn wir also auf Zurück klicken, kehrt dies zu dieser Seite zurück. Mal sehen , wie das aussieht. Ich gehe hier, klicke auf Weiter. Es öffnet den neuen Rahmen. Zurück. Es öffnet den vorherigen Frame. 7. Schlussfolgerung der Kurseinheit: Wirklich einfach, sehr einfach zu machen. Und Sie können schnell sehen, wie Sie mit den Komponenten und Figma sehr schnell einige wirklich nützliche und zeiteffiziente Designs erstellen können und Figma sehr schnell einige wirklich nützliche und zeiteffiziente Designs . Und was ich gerne sehen würde, ist, dass Sie eine eigene Karte oder eine App erstellen oder eine Anwendung, ein Dashboard anpassen und einfach ein paar Schaltflächen erstellen. Und mal sehen, wie diese Animationen ablaufen. Und ich werde die in unserem Projektbereich der Klasse verfolgen . Stellen Sie also sicher, dass Sie, sobald Sie das getan haben, einige Screenshots machen oder einige Videos hochladen , damit wir sehen können, wie es Ihnen geht. Und wenn Sie Fragen haben, diese gerne im Fragenbereich hinterlassen. Und die Bewertung war immer sehr hilfreich. Danke, dass du dir diesen Kurs angesehen hast. Und wenn Sie möchten, dass ich mich eingehender mit Komponenten beschäftige, können wir einige wirklich, sehr komplexe Komponenten herstellen , die viele Varianten und viele Flow-Prototypen haben . Danke, und wir sehen uns in der nächsten Klasse.