Figma für Anfänger:innen

1. Einführung: Willkommen bei Figma für den Anfängerkurs. Dieser Kurs richtet sich an absolute Anfänger, Junior-Designer und diejenigen, die ihre Karriere wechseln und Designer werden wollten . Wir werden alles über 3D-Oberflächen, Komponenten, Stile, Autolayout-Varianten, Prototyping und Plugins lernen. Wenn Sie keines dieser Wörter kennen, habe ich gerade gesagt, dass wir dabei sind alles zu erklären, was Sie wissen müssen, um eine solide Grundlage für das Entwerfen in Figma zu haben und die Erwartungen zu erfüllen. Dieser Kurs ist kein Ersatz für die Schule. Und Sie müssen auch viel alleine üben , um Designer zu werden. Je nachdem, wann Sie sich diesen Kurs ansehen, erstelle ich möglicherweise bereits mehr Kurse zum Thema Design. Wenn sie noch nicht existieren, sich keine Sorgen, sie sind in Arbeit. Ich plane, Themen wie Designsysteme zu behandeln, wie man den ersten Job verleiht, wie man visuelle Fähigkeiten verbessert und so weiter. Gehen wir nun zu Video Nummer eins, einer kräftigen Benutzeroberfläche. 2. Figma: Wir lernen die wichtigsten Buttons und Features von Figma kennen und erweitern unser Wissen mit jedem neuen Video weiter . Zu Beginn müssen wir uns nur auf zwei Ansichten konzentrieren, obersten Ebene in einer Dateiansicht, auch bekannt als der Ort, an dem wir entwerfen. Wenn Sie Figma zum ersten Mal öffnen, sehen Sie diese Oberfläche. In dieser obersten Ebene auf der linken Seite haben Sie ein Menü, das Dateien enthält. Drafts ist ein Ordner mit deinen privaten Sachen. Es ist hervorragend, wenn Sie alleine arbeiten oder üben. Auf der anderen Seite sind Themen hilfreich, wenn mehr Leute an einem Projekt arbeiten, da Hierarchie etwas tiefer ist und erweiterte Funktionen in Bezug auf Designsysteme bietet, die wird in diesem Kurs nicht behandelt. Aber ich werde auf dem Weg ein oder zwei Dinge erwähnen. Auf der obersten Ebene befindet sich ein Teamname, und darin befindet sich ein Projekt auch bekannt als Ordner, in dem Sie Ihre Designdateien aufbewahren. Ich würde sagen, das ist es, wenn es um die Dinge geht , die Sie jetzt über diese Ansicht wissen müssen. Lassen Sie uns also eine neue Datei erstellen und untersuchen, was Sie dort tun können. Links von mir sehen Sie , dass ich mich in Entwürfen befinde und ich beginne mit einem Klick auf eine neue Datei. Ich wette, Sie werden die meiste Zeit in dieser Ansicht verbringen. Also gehe ich alle wichtigen Buttons und Abschnitte durch und erkläre Ihnen, wie ich sie verwende. Oben links haben wir ein Menü mit unzähligen Aktionen. Aber das einzige, mit dem ich jemals interagiere, sind Vorlieben. Das Nudge-Betrag-Nudging erfolgt über die Pfeiltasten. Grundsätzlich können Sie Ihre Ebenen mit Pfeilen verschieben. Beim Entwerfen verwende ich meistens Pfeiltasten, um Objekte zu bewegen, weil ich weiß, dass ich sie in Schritten von einem oder acht Pixeln bewege . Das hängt mit Grids zusammen. Und wenn Sie noch nie davon gehört haben, können Sie meinen YouTube-Kanal überprüfen. Ich habe ein paar Videos, die erklären, was ein Grid ist. Es ist ein wichtiges Designwissen. Schau es dir an. Fahren wir nun mit den anderen Buttons fort. Wenn ich einen Button nicht erwähne, bedeutet das, dass ich ihn nicht wirklich benutze. Rechts haben wir ein Move-Tool. Es ist ein unverzichtbares Werkzeug, um Dinge zu bewegen. nächste ist ein Frame. Denken Sie an die Abkürzung F, denn der Rahmen ist das Rückgrat für jedes Design. Du entwirfst alles in Rahmen. Und auch im rechten Bereich haben Sie einige Vorlagen. Und normalerweise müssen Sie einfach das neueste iPhone und das neueste Design auswählen . Sofern Sie nicht an einer Website arbeiten, verwenden Sie eine andere Vorlage oder geben Sie einfach Ihre Breite und Höhe nach Ihren Wünschen ein. Dann haben wir einige geometrische Formen. Denken Sie daran, weil Sie es oft verwenden werden, klingt verrückt, aber der größte Teil der Benutzeroberfläche besteht eigentlich nur aus Rechtecken. Dann haben wir ein Textwerkzeug mit einer Abkürzung T. Auch daran sollte man sich erinnern, weil es eines der Kernelemente beim Entwerfen ist. Normalerweise drücke ich einfach T und erstelle meine Textebene. Dann haben wir ein Handwerkzeug, aber ich benutze es nie so. Ich drücke einfach die Leertaste. Ziehen Sie die Leinwand herum. Und schließlich haben wir noch Kommentare, das A und O von Figma. Sie können Ihren Teamkollegen Kommentare hinterlassen und sie können antworten. Es ist super nützlich und ich benutze es ständig. Sie können sogar beinlos markieren. Wenn Sie beim Entwerfen von Shift C nicht ständig Kommentare sehen möchten beim Entwerfen von Shift C nicht ständig und deren Reglerverschiebungen beim Auswählen eines Elements dort angezeigt werden, werden verschiedene Eigenschaften angezeigt. Versatzelement auf der rechten Seite ist der Ort, an dem Sie die Grafik in einfachen Worten bearbeiten. Design, das ist es vorerst, wir werden zusätzliche Funktionen lernen während wir uns auf dem Kurs bewegen. Als nächstes kommen unsere Komponenten. 3. Komponenten: Komponenten oder Elemente, die Sie in Ihren Designs wiederverwenden können. Nehmen wir an, Sie haben eine Schaltfläche, die wir in jeder Ansicht Ihres Designs mit üblichem Kopieren und Einfügen verwenden müssen Ihres Designs mit üblichem Kopieren und Einfügen Sie würden keine einzige Quelle der Wahrheit teilen. Wenn Sie den Hintergrund einer Schaltfläche ändern, wissen andere das nicht . Geben Sie Komponenten ein. Wenn Sie eine Komponente haben , bei der es sich um eine Schaltfläche handelt, und Sie Exemplare dieser Schaltfläche in Ihrem Design verwenden, alle Änderungen, die Sie an der Hauptkomponente vornehmen werden alle Änderungen, die Sie an der Hauptkomponente vornehmen, in den Exemplaren widergespiegelt. Sie müssen also nicht nach jedem Button suchen und ihn manuell optimieren. sich Zeit sparen, können Sie Komponenten aus beliebigen Layern oder Objekten erstellen , die Sie entworfen haben. Dies kann eine ganze Reihe von Dingen wie Schaltflächen, Symbolen, Layouts und mehr sein. Wir werden eine Button-Komponente erstellen und daraus lernen. Machen wir also einen Hintergrund, etwas Text. Zentriere es. Wir wählen alle links angezeigten Schaltflächen und dieses Rechteck aus und klicken hier. Jetzt haben wir eine Komponente und wir wollen sie auch Button diese Komponente nennen. Okay, jetzt wo wir eine Komponente haben, wie können wir auf diese Schaltflächenkomponente zugreifen? Nun, es gibt nur wenige verschiedene Möglichkeiten. Zuerst können Sie zu Assets gehen und dann unsere lokalen Komponenten sehen. Wir können es einfach so auf Ihre Designs ziehen. Sehr einfach. Dann können Sie auf dieses Symbol klicken und schon haben Sie wieder Ihre lokalen Komponenten hier drüben. Es spielt wirklich keine Rolle , wo Sie auf sie zugreifen. Wenn Sie Shift I drücken, wird dieses Ressourcenfenster geöffnet und es ist dasselbe. Nun, diese Gruppe hier drüben, diese Schaltflächen sind nur Instanzen von diesem. Sie würden diese Art von Komponente natürlich nicht in Ihre Designs integrieren. Sie sollten getrennt woanders leben. Es kann sich auf einer anderen Seite oder sogar in einer anderen Datei befinden. Und ich kann Ihnen ganz schnell die Magie der Komponenten zeigen. wir so, als wäre das über das gesamte Design verteilt. Deshalb möchte ich diesen Knopf ein wenig aufpeppen. Ich möchte die Farbe ändern. Lass uns etwas Blaues und auch den Text. Es ist also lesbar. Und vielleicht wollen wir dort einen Grenzradius setzen . Jetzt sieht es viel schöner aus. Das nächste, was wir tun müssen, ist diese Schaltfläche ansprechbar zu machen. Was heißt das? Wenn ich ziehe, sieht das nicht sehr gut aus. Es sieht kaputt aus und wir möchten, dass es intelligent und reaktionsschnell ist. Gehen wir also zum nächsten Video, dem Auto-Layout. 4. Auto: In diesem Video werden wir über Auto-Layout sprechen. Es ist eine sehr fortschrittliche und sehr komplexe Funktion, die viele Menschen nur schwer verstehen konnten, wie es funktioniert. Mit Auto-Layout kann man viel machen, aber ich werde versuchen, in einer einfachen Sprache mit einfachen Beispielen zu erklären , wie es funktioniert und wie ich es verwende. Ich habe hier schon ein bisschen Design vorgefertigt , damit wir schneller laut Ihre Designs intelligent und reaktionsschnell machen können. Fangen wir mit einem einfachen Beispiel an. Ein Knopf, ich mache wieder einen Knopf. Sie sehen also, dass Sie den Inhalt einer Schaltfläche durch manuelles Ziehen positionieren können . Es ist einfach schwarz. Sie können auch zwei Elemente auswählen und dann positionieren. Es ist also ausgerichtet, da man sieht, dass es sich ändert. Aber so wollen wir nicht entwerfen , da dies weder reaktionsschnell noch intelligent ist . Also wollen wir das auswählen. Machen wir eine Komponente. Nennen wir es besser Button. Wir können hier auch ein bisschen Würze hinzufügen. Eine Sache, ich habe den Eckenradius hier drüben eingefügt, aber es spiegelte nicht wider und entwirft. Dies liegt daran, dass Sie den Clip-Inhalt überprüfen müssen, da dann alles, was sich unter diesem Rahmen befindet, abgeschnitten wird, was bedeutet, dass ich dann meinen Eckenradius sehe. Das nächste, was ich tun möchte, ist Auto-Layout zu dieser Schaltfläche hinzuzufügen . Warum? Denn wenn ich es dehne, sieht es kaputt aus. Also lass es uns hinzufügen. Wir haben hier einen neuen Bereich mit tonnenweise neuen Dingen. Versuchen wir das zu erklären. Die erste Option ist, wo Ihr Auto-Layout vertikal oder horizontal verläuft. Nun, ich möchte, dass die Dinge in der Schaltfläche horizontal gestapelt werden, also belasse ich es als nächstes bei dieser, Ausrichtung des Inhalts eines Frames. Nun, ich möchte, dass es zentriert ist, weil ich möchte, dass die Textschaltfläche zentriert sich nicht auf die eine oder andere Seite stützt. In der Mitte ist dies also der Abstand zwischen den Elementen. Dies ist nützlich, wenn Sie mehr als einen Artikel haben. Natürlich kann ich es dir hier schnell zeigen, also werde ich duplizieren. Wie Sie sehen können, ist es auf acht Pixel eingestellt. Wenn ich es vergrößern würde, würde der Abstand größer werden. Natürlich dient die untere Reihe zum Auffüllen, also Abstand von den Rändern. Ich will nicht, dass es so viel ist. Es ist viel. Lass uns 16 setzen. Okay, das ist vernünftiger. Lassen Sie uns auch dieses zusätzliche Etikett hier löschen, und das ist die Polsterung für Ober- und Unterseite. Es können 16 sein. Klar. Oder wenn Sie möchten, können Sie unabhängig entscheiden was die Polster von jeder Kante sind. Wenn wir jetzt versuchen, diese Schaltfläche zu erweitern, befindet sie sich in der Mitte. Es sieht aus und verhält sich so, wie ich es möchte. Sie können sehen, dass wir darunter etwas haben, das sich Umarmung nennt. Was bedeutet das? Nun, wenn Sie das automatische Layout aktivieren, erhalten Sie auch in diesem Rahmenabschnitt einige Optionen . Sie wissen, wie sich die Breite verhält, ist sie fest oder sie wird alles, was sich darin befindet, in Anspruch nehmen. Wenn Sie eine Umarmung setzen, zieht sie sich um den Inhalt dieses Rahmens zusammen. Wenn Sie versuchen, es zu erweitern, wird es sofort behoben. Kehren wir zur Umarmung zurück, denn wir möchten, dass alles reaktionsschnell ist und wir nicht wissen, wie der Inhalt oder der Name dieser Schaltfläche aussehen wird . Deshalb wollen wir, dass es entsprechend erweitert wird. Nehmen wir an, wenn die Schaltfläche eine Etikettenreihenfolge hat , als wenn wir sie korrigieren würden, dann können Sie sehen, dass dies nicht funktioniert. Dies ist weder intelligent noch reaktionsschnell. Also wollen wir, dass es wieder umarmt. Natürlich können Sie verschiedene Einstellungen für die Instanzen selbst vornehmen. Auch eine Möglichkeit, dies zu tun. Aber ich würde Ihnen empfehlen, eine Umarmung zu setzen da wir möchten, dass sie sofort reagiert. Die nächste ist Höhe. Ist es eine feste Höhe oder wird es Inhalt fressen? Wenn wir das einfach hierher verschieben. Wenn ich die Höhe dieses Buttons erweitere, weil wir ihn in der Mitte ausgerichtet haben, in der Mitte. Jetzt ist es zentriert, es funktioniert auch wenn ich es so erweitern würde. Aber mit Alignment kann ich diktieren , wo meine Texte stattfinden? An welcher Kante haftet es? Ich möchte, dass es in der Mitte steht , weil ich in jedem Fall möchte, dass es in der Mitte ist. Das ist also perfekt für mich, aber ich möchte nicht, dass es sowohl horizontal als auch vertikal befestigt wird . Also werde ich einfach alles umarmen. Auf diese Weise wird alles, was ich für einen Schaltflächentitel schreibe , entsprechend erweitert oder verkleinert. Wenn Sie der Meinung sind, dass das eine Menge Informationen sind, schauen Sie sich das an. Wir haben also ein einfaches Design hier drüben. Wir wollen einen Feed machen. Oder eine Menüliste mit Elementen , die sich in einer Spalte wiederholen, ich zeige Ihnen, wie ich das mache. Also wähle ich zuerst alles hier aus. Ich werde die Tastenkombination Shift a verwenden, um ein Auto-Layout aus der Auswahl zu erstellen. Da hast du es. Mein Design hat sich jetzt geändert, aber das ist in Ordnung. Ich möchte, dass der Abstand zwischen den Elementen in dieser äußeren Schicht , sagen wir acht, beträgt. Aber jetzt möchte ich, dass Pizza und Preis in einer Reihe stehen, nicht in einer Spalte. Also werde ich das automatische Layout auflisten. Ich erstelle ein neues. Nun, diese beiden sind ausgewählt. Shift a, wir ändern jetzt die Richtung. Wir möchten, dass es sich Container anfühlt. Und dann können Sie sehen, dass die gesamte Grenze auf die Größe eines Containers kostet. Aber ich möchte nicht, dass es auf der linken Seite ist. Ich möchte, dass Pizza auf der linken Seite und der Preis auf der rechten Seite ist. Also was ich tun werde, ist in das erweiterte Layout zu gehen. In unseren Layouteinstellungen, Abstandsmodus, möchte ich das ändern, was sehr wichtig ist. Und ich werde den Raum zwischen diesen wählen , um alle Elemente zu entscheiden. So wie das. Jetzt haben wir Pizza auf der linken Seite und einen Preis auf der rechten Seite. Was würde passieren, wenn ich den Preis dupliziere? Nehmen wir an, ich möchte einen Rabatt anwenden. Es befindet sich in der Mitte , weil es den gleichen Abstand zwischen den Gegenständen in einem bestimmten Behälter berechnet . Aber wenn ich diese beiden Preise wieder auf der rechten Seite haben will , muss ich sie in einen anderen Rahmen packen. Ich werde die automatische Layout-Verknüpfung verwenden. Ich werde, sagen wir, 16 Pixel Abstand zwischen diesen beiden Elementen setzen , ich werde ein wenig hineinzoomen. Wählen wir einen Preis aus. Zusätzliche Optionen für Text, dann Dekoration, streichen Sie durch. Vielleicht kann das noch kleiner sein. Und wir können uns vielleicht ändern. Nimmt ein bisschen gräulich an, und das kann vielleicht rot sein. Da hast du es. Wenn wir also diesen Rahmen hier auswählen, als Frame to Wear Descriptive bezeichnet wird, können wir sehen, dass wir zwei Elemente haben, eine Textebene und weiteren Rahmen, der zufällig automatisches Layout ist. Und weil wir nur den Raum zwischen ihnen haben, werden sie tatsächlich dazu drängen, zu entscheiden. Dies ist sehr nützlich beim Entwerfen, insbesondere im Webdesign, wenn Sie ähnliche Header haben und Sie drücken müssen, sagen wir, Logo oder einen Titel auf der linken Seite und das Home-Menü auf der rechten Seite. Aber wir sind noch nicht fertig mit dem Verschachteln des automatischen Layouts. Wir haben Auto-Layout als Behälter für dieses Bild und auch diese Pizza und den Preis und auch einige Beschreibungen. Ich werde Auto-Layout daraus machen, diesen ganzen Rahmen. Shift a. Jetzt ist es Autolayout. Es umarmt sich. Ich kann sogar eine feste Höhe setzen und ein paar Pixel hier platzieren, wenn ich will. Und jetzt, wenn ich diese Karte dupliziere, ist das nicht der Effekt, den ich wirklich wollte. Also werde ich hier die Richtung der obersten Ebene oder des Layouts ändern . Und ich kann einfach duplizieren, und es ist intelligent, es reagiert, es bleibt einfach genau so, wie ich es wollte. Eine Sache, die ich ändern möchte, ist der Abstand zwischen den Elementen. 32 scheint eine gute Zahl zu sein. Wenn wir nicht möchten, dass Design über den Rahmen läuft, können wir Inhalte ausschneiden . Da hast du es. Eine andere Sache, die ich erwähnen möchte, ist, dass Sie Dinge in das Auto-Layout einfügen können, aber wenn Sie nur ziehen, würde ich sagen, dass ich diese Bestellschaltfläche platzieren möchte und ich möchte, dass sie in voller Größe ist. Also gehe ich einfach zu dieser Option hier drüben und wähle Feldcontainer. Auf diese Weise können Sie Ihre Schaltfläche oder ein anderes Element innerhalb des Rahmens erweitern , bei dem es sich um ein automatisches Layout handelt. Alle Dinge, die sich in einem Rahmen mit automatischem Layout befinden, können erweitert werden, um sich als Container zu fühlen. Das ist eine zusätzliche Option für Objekte, Elemente, die innerhalb des Auto-Layouts vorkommen. Wenn Sie die Reihenfolge der Elemente ändern möchten, können Sie einfach ein Element auswählen. Und dann können Sie mit den Pfeiltasten einfach auf und ab oder nach links oder rechts gehen und Ihre Elemente so positionieren , wie Sie möchten. Alle Abstände sind konsistent, da Autolayout intelligent ist. Das ist alles, was ich in diesem Video teilen möchte, wenn es um Auto-Layout geht, das waren viele Informationen. Auto-Layout hat noch mehr zu bieten, aber alle anderen Dinge sind noch weiter fortgeschritten. Also lass uns einfach hier aufhören. Lass uns ein bisschen darüber nachdenken. Ich empfehle dir, zu üben und zu versuchen, die gleiche Oberfläche zu erstellen, die ich hier gemacht habe. Oder Sie machen einfach einen Screenshot oder schauen sich Ihre Lieblings-App an und versuchen, die Benutzeroberfläche mithilfe des Auto-Layouts ein wenig zu replizieren . Als nächstes unsere Varianz. Das hat mit Komponenten zu tun. Also wir sehen uns dort. 5. Varianten: Willkommen bei variance. Dieses Thema ist eine etwas steilere Lernkurve, aber ich werde mein Bestes tun, um es Ihnen so einfach wie möglich zu machen . Varianz und Eigenschaften können also nur auf zwei Komponenten angewendet werden. Ich habe hier eine Button-Komponente und sehe diese Zeile namens properties. Wenn Sie Plus drücken, haben Sie vier Optionen. Lass uns jeden ausprobieren und sehen, was passiert. Ich denke, Learning by Doing ist der beste Weg, um Varianz und Eigenschaften zu lernen. Lassen Sie uns zunächst boolean verwenden. Boolean bedeutet, dass ein Layer ausgeblendet oder angezeigt werden kann. So können wir zum Beispiel ein Icon ein- und ausblenden. Also werden wir genau das tun. Nennen wir es hat einen Icon-Standardwert, true. Ordnung. Und dann müssen wir dieses Symbol auswählen und wir finden die Layer-Zeile oder hier, klicken Sie auf das Symbol. Jetzt habe ich alles zusammengebunden. Und wenn ich eine Instanz dieser Schaltfläche mache, habe ich diese Eigenschaft namens has icon, und ich kann das Symbol ein- oder ausblenden. Einfach, nicht wahr? Sie können auch einfach alles auswählen , was Sie ein- oder ausblenden möchten , und auf dieses Symbol klicken. Erstellen Sie von hier aus eine neue Eigenschaft, Sie müssen nicht die erste Eigenschaft von einer übergeordneten Eigenschaft erstellen. Sie können Eigenschaften aus Unterkomponenten erzeugen. Also lass es uns so versuchen. Nennen wir es Text. Da hast du es. Und jetzt, wenn wir auf die Instanz klicken, blenden wir Text ein oder aus. Mit nur wenigen Klicks haben Sie eine Schaltfläche erstellt, die ganz anders aussehen kann, aber Sie haben nur eine Komponente, die ziemlich schick ist. Denken Sie also daran, dass wir hier vier Optionen hatten. Wir haben nur diese booleschen Werte untersucht. Wir können also auch einen Instanz-Swap erstellen. Ich werde ein Symbol finden, egal welche tolle Immobilie es ist. Und wie Sie sehen können, ist es an nichts gebunden. Wir haben es gerade erstellt. Deshalb erstelle ich diese Dinge gerne aus tatsächlichen Komponenten , die das Verhalten ändern. Und dann hast du dieses Ausrufezeichen nicht und es ist ein bisschen schneller. Also werde ich meinen Kalender finden. Ich klicke auf dieses Symbol und wähle diese einzige Option. Was also passiert ist, dass wir hier ein Symbol haben und wir haben dieses kleine Drop-down-Menü, in dem wir das Symbol in etwas anderes ändern können. Und natürlich funktionieren andere Optionen immer noch. Und die letzte Option war Text. Also werde ich es aus der Ebene erstellen , die das Verhalten ändert. Also Inhalt, ich klicke auf dieses Symbol hier drüben, oder wir können einfach eine Eigenschaft erstellen. Es erkennt alles, was Sie bereits entworfen haben. Es ist also ein bisschen schneller, dies aus dem Inneren unserer Komponenten heraus zu tun. Also auf Ebenen, die das Verhalten ändern. Und wenn ich auf die Instanz klicke, sehe ich meinen Text und kann etwas anderes schreiben. Ich habe eine einfachere Möglichkeit, Symbole zu verwalten und Text in Komponenten zu ändern. Also, wenn es um verschiedene Icons geht, finde ich einfach mein Symbol, ich ziehe es einfach, drücke Option Command. Und wenn Sie diese lila Umrisse auf Ihrem Symbol sehen, Sie sie einfach los. Und los geht's. Es ist vertauscht. also nicht nötig, diese Instanz hier auszutauschen. Wenn es um Text geht, verwende ich diese Texteigenschaft oder hier nicht. Denn wenn Sie T drücken, können Texte einfach so geändert werden. Es ist nicht so schwer. Ich muss diese Texteigenschaft also nicht wirklich verwenden, weil ich sie gerade geändert habe, Design selbst. Das Letzte, was wir haben, ist die Variante selbst. Also lass uns auf diesen klicken. Wenn Sie diese gestrichelte Linie sehen, die signalisiert, dass diese Komponente tatsächlich Varianten innerhalb mehrerer Komponenten hat . Also werde ich eine neue Variante erstellen. Lass uns das Design ein bisschen ändern. Jetzt sieht es ganz anders aus. Und weil wir die Variante bearbeiten, haben wir sofort diese Eigenschaft bekommen. Ich möchte es umbenennen. Doppelklicken Sie also einfach. Nennen wir es Stil, und dann müssen Sie jede Komponente auswählen und den Namen anpassen. Die Standardeinstellung ist für diesen in Ordnung. Ich überlasse es für diesen. Ich möchte nicht, dass es sehr intuitiv ist, also nenne ich es negativ. Wenn ich also meine Instanz auswähle, kann ich einfach einen anderen Stil wählen, z. B. einen negativen. Und ich kann wieder andere Eigenschaften wie zum Beispiel das Symbol ausblenden manipulieren. Und es funktioniert auch , wenn du zurückgehst. Ich habe nur zwei Varianten in der Button-Komponente, aber schau, wie viele verschiedene Optionen verfügbar sind. Das ist also die Macht von Varianten und Eigenschaften. Nur weil die Varianz etwas verwirrend ist, empfehle ich Ihnen, zu üben. Versuchen Sie, noch komplexere Schaltflächen zu erstellen. Versucht, Kartenelemente, Eingabefelder usw. zu erstellen . Je mehr Sie üben, desto einfacher wird es. Als nächstes kommen Stile, etwas, das Komponenten zusammen sehr ähnlich ist. 6. Stil: Willkommen bei styles. Stile sind Komponenten sehr ähnlich. Es ist nur ein Satz von Eigenschaften, die Sie unter einem Namen gespeichert haben. Und dann kannst du diesen Stil benutzen. Wo auch immer Sie InDesign wollen. Sie können Farb-, Text- und Effektstile verwenden. Fangen wir also mit Farbe an. Ich werde es so anpassen, dass es, sagen wir mal lila, ist. Und ich werde einen neuen Stil kreieren. Fantastisch. Ich erstelle noch einen. Lass uns, sagen wir blau. Hervorragend. Wenn ich nun ein anderes Oval erstelle und auf das Stilsymbol klicke, kann ich sehen, dass ich diese beiden Stile hier habe, also kann ich einfach anwenden und es wird genauso aussehen wie dieser. Das ist also der Kern der Stile. Versuchen wir nun, dasselbe für Text zu tun. Nochmals, Stilikone plus. Und du nennst es. groß. Meine Stärke, hier klug zu sein, ändern wir es einfach. Tu so, als würde es so aussehen. Und dann soll es genau so aussehen wie dieser Text hier drüben. Sie können also einfach auf dieses neue Textelement klicken, zu Stil gehen und Ihren Stil auswählen. Versuchen wir nun, den Effektstil zu erstellen. Also werde ich die erste Woche ein wenig wirken, damit es sichtbar ist. Und jetzt werden wir es benennen. Wenn wir auf Canvas klicken, können wir Effektstile sehen, diesen Schatten. Also kann ich das auf andere Ovale anwenden, sogar auf einen Text. Das sind Stile, sie sind nicht so schwer. Es handelt sich nur um eine Reihe von Eigenschaften, die Sie in Ihrem gesamten Design wiederverwenden möchten . Im nächsten Video werden wir über Prototyping sprechen. Also wir sehen uns dort. 7. Prototyping: Um Ihnen das Prototyping tatsächlich zeigen zu können, benötigen wir einige Designs. Also habe ich diese Datei aus der Community gefunden und sie wird sich hervorragend für die Demonstration von Prototyping eignen. Der erste Schritt ist, gehen wir in den Prototypmodus. Jetzt sieht die Oberfläche ein bisschen anders aus. Wir entwerfen nicht. Ich zoome rein. Und nehmen wir an, vom Login aus möchte ich auf der Homepage landen. Also wähle ich einfach die Schaltfläche Anmelden und lasse los , wenn dieser Pfeil den Homepage-Rahmen berührt. Jetzt haben wir hier einige Interaktionsdetails. Es gibt viele, viele verschiedene Möglichkeiten, etwas in Figma auszulösen, z. B. ein Modell zu zeigen oder zu einer anderen Ansicht zu wechseln. Aber meistens benutze ich onclick, aber nur damit du es weißt, du hast auch viele andere Optionen. Dann ist die nächste Option, navigieren wir zu einer separaten Ansicht oder öffnen wir Overlay, tauschen Overlay aus, schließen Overlay, gehen zurück, scrollen zu oder öffnen wir sogar einen Link. Im Moment wollen wir eigentlich nur zu einer Ansicht navigieren, weil du diesen Pfeil auf der Homepage fallen gelassen hast , Feige Backenzahn die Nase. Also ist es hier drüben. Jetzt können wir auch einige Animationen in unsere Prototypen einfügen, damit sie sofort verfügbar sind, sich auflösen, intelligent animieren können und so weiter. Wir werden Smart Animate etwas später überprüfen , da das interessant ist. Aber jetzt lass uns einfach Instant verwenden. Okay, lass uns das schließen. Und wenn Sie dann hier auf dieses Wiedergabesymbol klicken, erhalten Sie eine Vorschau Ihres Prototyps. Also wird es jetzt geladen. Ordnung. Wenn Sie nach draußen klicken, sehen Sie einen anklickbaren Hotspot. Klicken wir nun auf Anmelden, und genau das haben wir in unserer Designdatei eingerichtet. Wenn wir nun Geld senden möchten, wählen wir dieses Symbol oder hier aus, und das ist unser nächster Bildschirm. Das macht so viel Spaß. Lass es uns schließen. Also tippe ich hier auf und bin genau dort, wo ich es in der Sendegeldansicht haben möchte. Wenn ich jetzt zurückgehen möchte, drücke ich Plus und Interaktionen. Klicken Sie auf Zurück. Wenn ich zurück klicke, bin ich da. Jetzt haben wir einen vollen Kreis hier drüben. Dann. Wenn ich auf Senden drücke, möchte ich in dieser Ansicht landen. Und es funktioniert. Das ist also der Kern des Prototypenbaus. Du erstellst nur Hotspots und was passiert dann als nächstes? Welche Ansicht lädst du? Sie können umbenennen. Sie können wie den Hauptfluss setzen, und dann versuchen wir, etwas anders zu machen. Also werde ich das dupliziert herausnehmen . Und ich werde auch diese Tastatur hierher bringen. Gehen Sie ganz schnell in den Designmodus. Zuerst müssen wir daraus einen Rahmen machen da Gruppen nicht mit Prototyping arbeiten. Und dann gehen wir in den Prototypmodus und verbinden diese beiden Frames. Beim Klicken möchte ich also nicht navigieren, ich möchte ein Overlay öffnen. Das ist richtig. Möchten Sie, dass es zentriert ist? Nein. Ich möchte, dass es unten zentriert ist und ich möchte schließen, wenn wir nach draußen klicken. Und ja, ich möchte Hintergrund hinter Overlay hinzufügen. Wir können sogar die Animation optimieren. Wenn Sie einziehen, haben Sie hier ein kleines Video, damit Sie eine Vorschau darauf sehen können, was passieren wird. Ja, das ist genau das, was ich von unten nach oben will. Und ich werde schließen. Jetzt im Prototyping-Modus, der Seitenleiste, kann ich zu einem anderen Flow gehen und jetzt kann ich auf Senden tippen. Und in der Tat haben wir ein Modell. Ich kann es schließen, indem ich draußen klicke. Das ist genau das, was ich wollte. Ich kann sogar Animationen optimieren , um schneller zu werden. Ich kann 150 Millisekunden setzen. Jetzt ist es schneller. Hier sieht es super aus. Als Nächstes möchte ich Ihnen zeigen , dass es beim Prototyping sehr nützlich ist, ist Smart Animate. Zu diesem Zweck werde ich zwei Frames erstellen. Ich werde einen Kreis bilden. Wir nennen es Kreis. Und dann werde ich es in den nächsten paar erweitern. Im Grunde verwende ich Keyframes meine Animation, weil ich die intelligente Animationsoption verwenden möchte. Es ist wichtig, dass Elemente gleich genannt werden. Alle Elemente, die Sie intelligent animieren, fotografieren möchten , haben denselben Namen. Gehen wir jetzt zum Prototyp. Verbinde dich mit dem anderen Frame. Wir wollen es nicht per Klick machen. Lass uns nach Verspätung benutzen. 800 Millisekunden sind in Ordnung. Animation, intelligent animieren. Und Sie können sogar wählen, um welche Art von Animation es sich handeln kann. Bouncy zum Beispiel. Was hier passiert ist, dass es automatisch funktioniert. Sie können sogar eine Schleife machen. Also würde dieser Kreis einfach abprallen. Wir wollen On-Click nicht verwenden. Wir wollen sagen, nach Verspätung, intelligent animiert, federnd, großartig. Wenn wir jetzt eine Vorschau anzeigen, springt es von selbst so. So können Sie sehr interessante Animationen erstellen. Bevor ich dieses Video verpacke, möchte ich Ihnen eines meiner eigenen Projekte zeigen. Es ist nicht groß, aber ich habe ein paar Verbindungen hier drüben. Wenn ich also meinen Prototypmodus öffne, sieht man, dass ich viele Elemente miteinander verbunden habe. Und normalerweise sehen Dateien so aus, nachdem Sie Ihre Verbindungspunkte angewendet haben. Ich glaube, das sind genug Informationen , um Ihnen den Einstieg in das Prototyping zu erleichtern. Prototypen kann man wirklich verrückte Sachen machen. Ich habe auf Twitter wirklich erstaunliche Dinge gesehen , die Leute tun. Und der Himmel ist die Grenze. Im nächsten Video werden wir uns die Plug-ins ansehen. Wir sehen uns dort. 8. Plug-ins: Willkommen beim Plug-In-Video. Dieser wird sehr kurz sein, weil Plugins sehr einfach sind. Wenn Sie ein Plugin installieren möchten, Sie einfach in Ihrem Figma-Dashboard klicken Sie einfach in Ihrem Figma-Dashboard hier auf die Registerkarte Community, und dann haben Sie Zugriff auf alle Arten von kostenlosen Assets und Plugins und so weiter. Es ist wirklich voll mit super nützlichen Sachen und weniger nützlich. Aber es ist erstaunlich, wie sich die Leute so viel Mühe geben , ihre Assets und Plugins zu teilen. So können wir zum Beispiel auf eine Kategorie klicken und nach Plugins suchen. Icons sind ziemlich beliebte Plugins, muss ich sagen. Vielleicht können wir das mal ausprobieren. Kostenloses Icon Pack von I Conduct. Du führst es einfach aus. Das Plugin wird geladen und nehmen wir an, du klickst auf dieses N. Los geht's. Jedes Plugin funktioniert ein bisschen anders. Natürlich wäre es für mich sinnvoll , jedes Plugin durchzugehen und zu zeigen, wie es funktioniert, da Sie nur die Dokumentationsbeschreibung des Plugins lesen und es dann verwenden müssen . Ich benutze nicht so viele Plugins. Sie können sehen, dass diese beiden nur für den Zweck dieses Tutorials installiert wurden. Aber auch diese, die ich verwende, manchmal ist Unsplash Protopie nützlich weil ich meine Produkttypen gerne in diesem Tool mache. Behoben. San Francisco ist wirklich gut denn wenn Sie die Schriftart in San Francisco verwenden und Größe ändern, muss sich auch der Buchstabenabstand ändern. Also dieses hervorragende Plug-In, um es pixelgenau zu machen und wie Apple es beabsichtigt hat. Und das letzte ist eigentlich mein Plug-In. Ich habe es geschrieben, es macht eine Icon-Bibliothek. Das werde ich Ihnen in meinem nächsten Kurs für Designsysteme zeigen . Wenn Sie Plugins für Ihre Arbeit als notwendig erachten, können Sie einfach ein paar davon installieren und sie ständig verwenden. Ich persönlich möchte, dass meine Dateien nicht auf Plug-Ins angewiesen sind, weil sie morgen verschwinden können sie morgen verschwinden können und Sie dann ein Problem haben. Aber natürlich habe ich keine fehlenden Plugins oder ähnliches erlebt . Ich kann dir noch ein Plug in zeigen, wie es auf Splash funktioniert. Und wir können etwas Textur auftragen. Jetzt fühlt sich dieses Rechteck wie diese Textur an, ist ziemlich ordentlich und spart jede Menge Designzeit. Ich ermutige Sie, auf die Registerkarte Community zu gehen und verschiedene Assets zu erkunden , die die Leute teilen. Es gibt jeden Tag eine Menge neuer Plug-ins. Und Sie können auch Designsysteme finden, einige Boilerplate für verschiedene Dinge visuell Säuren und so weiter. All diese Dinge können Ihnen helfen, ein besserer Designer und tatsächlich zu sehen, wie andere Menschen bestimmte Dinge tun. Und es ist ein Vertreter, wir haben alles gelernt, was wir wissen müssen , um Figma erfolgreich einsetzen zu können. Es gibt natürlich jede Menge fortgeschrittenes Zeug , das ich in einigen meiner nächsten Kurse behandeln könnte. Bisher haben Sie jedoch eine wirklich solide Grundlage, um in Figma effizient zu entwerfen. In meinem nächsten Video werde ich einige meiner Listenwörter mit Ihnen teilen. Also du da. 9. Outro: Ich hoffe, Ihnen hat dieser Kurs gefallen und Sie haben Selbstvertrauen, mit dem Entwerfen in Figma zu beginnen. Wir haben in diesem Kurs gerade an der Oberfläche gekratzt und Sie können so viel mehr Wissen freischalten, wenn Sie üben . Sie finden mich auf Twitter und auch YouTube, wo ich Tonnen von Figma-Tutorials habe. Wenn du magst, Podcasts, schau dir meine Podcast-Party an. einen guten und viel Spaß beim Entwerfen.