Figma Grundlagen Super Easy Crash Kurs

1. EINFÜHRUNG: Hallo allerseits. Ich bin Ruanda geht gut. Und ich möchte Sie zum Super-Easy-Crash-Kurs von Figma Basics begrüßen . In diesem Kurs lernen wir alle Grundlagen von Figma kennen, das ist der Designteil, die verschiedenen Merkmale von Pigma. Und wir werden auch lernen, wie man Prototypen in Figma erstellt. Und das alles wird innerhalb von 16 Minuten erledigt. Schauen wir uns nun den Inhalt dieses Kurses an. Jetzt sind dies der Inhalt dieses Kurses. Und ich habe diesen Kurs so gestaltet , dass er sehr anfängerfreundlich ist. Das heißt, wenn Sie keine Ahnung haben, was Figma ist oder ob Sie neu bei Figma sind, möchten Sie lernen, wie es funktioniert. Sie sind neu im Design und Prototyping als Ganzes. Keine Sorge, wir werden von Grund auf neu lernen. Ich werde alle Aspekte des Entwurfs und des Prototypens mit der Figma-Anwendung behandeln. Zunächst werden wir den Installationsteil von Sigma behandeln , wie die Desktop-Anwendung installiert wird. Dann werden wir mit einigen grundlegenden Steuerelementen fortfahren wie dem Erstellen des Rahmens mit dem Befehl Vergrößern, Verkleinern und dem Handwerkzeug, das die grundlegenden Notwendigkeiten für die Verwendung der Pigma-Anwendung sind . Und dann werden wir mit dem Designteil fortfahren. Wir werden mehr über Formen, Massenkomponenten, Auto-Layout alle Funktionen von Figma lernen, die zum Erstellen von Designs in Figma benötigt werden . Dann werden wir mit der Verwendung von Plugins fortfahren. Es gibt so viele Plugins in Figma, die unsere Arbeit erleichtern. Wir werden lernen, wie man Plugins einsetzt , um unser Projekt noch besser zu machen. Dann fahren wir mit dem Figma-Community-Teil fort. Sie sind verschiedene Ersteller, die ihre eigenen Projekte hochladen und wir können diese Projekte duplizieren und ändern. Um unser eigenes Projekt zu erstellen. Wir können die verschiedenen Elemente der Schöpfer kopieren und unsere eigene Kreativität nutzen und uns von ihnen inspirieren lassen. Wir werden lernen, wie man die Figma-Community einsetzt , um unser Projekt noch besser zu machen. Und weiter werden wir auch lernen, wie man Prototypen in Figma erstellt, wir lernen die verschiedenen Funktionen , die beim Prototyping beteiligt sind. Und dann werden wir den Prototyp implementieren, um ein einfaches Projekt, eine mobile Anwendung, zu erstellen. So wird der Ablauf des Kurses sein. Zuerst lernen wir den Entwurfsteil. Wir werden verschiedene Merkmale von Pigma behandeln, wie Rahmen, Massenkomponenten, die wir nacheinander betrachten werden. Danach lernen wir, wie wir die Plug-Ins und Figma-Community-Funktionen nutzen können , um unser Projekt noch besser und unsere Arbeit viel einfacher zu machen . Und nachdem wir erfahren haben, wie das Prototyping funktioniert, werden wir ein Projekt erstellen, das den Prototyp ohne weitere Verzögerung implementiert . Fangen wir an. 2. Installieren der Figma Desktop App: Hallo, jeder hat Walker und ich möchte dich zu diesem Figma begrüßen , den IQ-Werten von jemandem. Jetzt ist Figma ein Tool zum grafischen Design und Prototyping. In diesem Kurs werden wir alle Grundlagen von Figma behandeln , die Sie für Grafikdesign, Benutzeroberflächendesign oder Prototyping benötigen . Und wenn Sie völlig neu bei Figma sind oder Figma bereits installiert haben, aber nicht wissen, wie es funktioniert, dann ist dies der richtige Ort für Sie. Wir werden schnell alle Grundlagen von Magma abdecken , die Sie benötigen. Lasst uns anfangen. Das erste, was Sie benötigen, ist die Figma-Desktop-Anwendung. Wenn Sie bereits installiert sind, ist es notiert. Wir melden uns einfach in einer Minute bei dir. Und wenn Sie keine Figma-Desktop-Anwendung installiert haben, gehen Sie einfach zu einem beliebigen Browser und suchen Sie nach Figma-Download. Hier sehen Sie das erste Ergebnis, das genau hier auftaucht . Figma.com. Klicke einfach drauf. Jetzt können Sie sehen, dass es eine Option für die Desktop-Anwendung gibt. Sie können dies für Mac OS oder Windows herunterladen. Jetzt verwende ich gerade Windows, also klicke ich einfach auf Windows und dies ist ein einfacher Installationsprozess. Laden Sie einfach die Datei herunter und installieren Sie die Figma-Anwendung. Sobald ich die Figma-Desktop-Anwendung installiert habe, wird die Schnittstelle ungefähr so aussehen. Jetzt haben wir zwei Möglichkeiten. Sie können sich mit Ihrem Figma-Konto anmelden oder ein neues erstellen. Jetzt hatte ich bereits ein Figma-Konto, aber um mit dir mitzugehen, werde ich einfach ein neues erstellen. Ich klicke einfach auf „Ein rechtes Ohr erstellen“. Und jetzt werden wir zum Browser weitergeleitet. Jetzt können Sie hier ein Figma-Konto mit Ihrer E-Mail oder Ihrem Passwort erstellen . Oder du kannst dich einfach bei Google anmelden. Also klicke ich einfach auf Weiter mit Google rechtem Ohr. Jetzt gibt es einige Optionen, die Sie einfach ausfüllen können. Und wenn Sie fertig sind, klicken Sie einfach auf Konto erstellen. Jetzt ist der Anmeldeprozess abgeschlossen. Sie können sehen, dass es eine Option gibt, öffnen Sie die Desktop-App. Ich klicke einfach darauf und klicke einfach auf Figma öffnen. Jetzt werden wir zum ersten Mal die Figma-Desktop-Anwendung eingefügt . Und es fragt uns nach einem Teamnamen. Sie können das später einfach anklicken. Standardmäßig wird der Teamname der Name Ihrer E-Mail sein. Hier sehen Sie also, dass Rona Goggles Team ist. Also klicke ich einfach später darauf. Und hier gibt es zwei Möglichkeiten. Klicken Sie einfach selbst auf „Erkunden “. Jetzt bist du draußen. Einige von Figma angegebene Standarddateien ignorieren sie einfach und gehen zum Designteil. Wenn Sie nun etwas erstellen oder etwas entwerfen möchten , müssen Sie als Erstes einfach auf das Pluszeichen klicken. Also klicke ich einfach auf dieses Pluszeichen. Und es wird auf der Seite „Untitled“ geöffnet. Jetzt sind wir im Designbereich. Sie können sehen, dass der Name ohne Titel ist und als Entwürfe verklagt wird. Wenn Sie den Namen ändern möchten, können Sie einfach einen einzigen Klick darauf machen und uns nun einen neuen Namen geben . Klicken Sie einfach nach draußen. 3. Grundlegende Steuerelemente in Figma: Wenn du jetzt etwas im wirklichen Leben entwerfen willst, lass uns sagen, du wolltest Malerei zeichnen. Das erste, was Sie brauchen, ist ein Papier oder eine Leinwand. In ähnlicher Weise brauchen wir in Figma eine Leinwand für unsere Entwürfe. Jetzt heißt diese Leinwand, Lasst uns Frames. Wenn Sie einen Rahmen für Ihre Designs festlegen möchten, können Sie einfach auf den Rahmen klicken oder einfach die F-Taste auf Ihrer Tastatur drücken. Ich drücke einfach die F-Taste auf meiner Tastatur. Jetzt sehen Sie auf der rechten Seite verschiedene Frames, die jetzt angezeigt werden , dies sind die Standardmaße für verschiedene Frames. Sie können für das Telefon sehen, es gibt iPhone 13 Pro Max. Dies sind die Abmessungen des Bildschirms aus dem iPhone. Und wenn Sie für Desktop möchten, können Sie sehen, dass dies die Standard-Frame-Dimensionen für den Desktop sind . Jetzt wähle ich einfach diese Desktop-Option für ein gezeigtes Netz aus. Bevor wir jetzt anfangen, etwas zu erstellen, gibt es ein paar Befehle und Tasten, die ich gerne wissen möchte. Das erste ist der Befehl „Vergrößern “ und „Verkleinern“. Deins das nächste Top-Frame. Und wenn ich ab diesem Herbst herauszoomen möchte, muss ich die Strg-Taste gedrückt halten und mit meiner Maus nach unten scrollen. Sie können sehen, dass wir daraus herauszoomen. Wenn Sie hineinzoomen möchten, können Sie die Strg-Taste erneut gedrückt halten und mit der Maus nach oben scrollen. Jetzt sind die Steuertasten für den Windows-Benutzer, wenn Sie ein Apple-Gerät haben, dann denke ich, dass dies die Befehlstaste anstelle der Strg-Taste sein wird . So sind die Funktionen auf Führung, Steuerung und Befehl unterschiedlich. Jetzt ist der nächste Befehl das Handwerkzeug. Sagen wir jetzt, ich möchte dieses Ding ziehen und es auf der linken Seite belassen. Bisher müssen Sie nur die Leertaste auf Ihrer Tastatur gedrückt halten. Und jetzt können Sie sehen, dass der Cursor kein Handsymbol mit der Maus macht, Sie können einfach klicken und ziehen Sie dieses Ding beliebig. Also ziehe ich das einfach auf die linke Seite. Auf diese Weise können Sie verschiedene Elemente ziehen. Diese beiden sind jedoch sehr wichtig Handwerkzeug und Vergrößern, Verkleinern Befehl. Jetzt sehen sie vielleicht unbedeutend aus, aber während Sie entwerfen, sind verschiedene Elemente im Rahmen außerhalb des Rahmens. So ist das Drag-Tool, Zoom-Modus zoomen Teil sehr praktisch. Denken Sie also daran, dass ich, wenn Sie hineinzoomen und verkleinern möchten, wenn Sie hineinzoomen und verkleinern möchten, die Strg-Taste oder die Befehlstaste für Apple-Benutzer gedrückt halte und einfach mit der Maustaste nach unten scrolle . Für das Handwerkzeug müssen Sie Ihre Space-Taste gedrückt halten und einfach Ihren Rahmen oder verschiedene Elemente Ihrer Figma-Datei ziehen Ihren Rahmen oder verschiedene Elemente , jeden Sie möchten. Das ist alles für die Einführungssitzung. In der nächsten Sitzung werden wir verschiedene motorische Merkmale von Sigma lernen. Das ist also alles. Danke. 4. So erstellst du Designs in Figma: Wenn Sie in Figma Änderungen an einem bestimmten Element vornehmen möchten, müssen Sie es zuerst auswählen. Wählen Sie also ein bestimmtes Element aus, sagen wir Rahmen oder Form oder irgendetwas. Du musst einfach darauf klicken. Jetzt können Sie sehen, dass ihr Desktop ein Frame ausgewählt wurde. Wenn Sie diesen Rahmen aufheben möchten, können Sie einfach nach draußen klicken. Jetzt gibt es auch eine andere Möglichkeit, diese Elemente auszuwählen. Sie können hier auf der linken Seite im Layer-Bereich sehen, dass es den Desktop gibt. Sie können einfach direkt hier klicken. Dies wird gewählt. Und jedes einzelne Element, das Sie Ihrer Designseite hinzufügen , wird im Layer-Abschnitt hinzugefügt. Jedes Element fungiert als einzelne Ebene. Also werden wir das im späteren Teil mit einem Beispiel besprechen. Der Name des Frames , den wir in der vorherigen Sitzung standardmäßig hinzugefügt haben , ist Desktop eins. Wenn Sie den Namen ändern möchten, können Sie einfach hier auf Lager 1 im Layer-Abschnitt doppelklicken . Von hier aus können Sie den Namen des Elements ändern. Also ändere ich einfach den Namen dieses Frames, um es uns sagen zu lassen. Wenn Sie fertig sind, drücken Sie einfach Enter. Jetzt können Sie sehen, dass der Name dieses Frames geändert wurde. Lassen Sie uns eine weitere Rahmentürseite hinzufügen. Sie können einfach die F-Taste auf Ihrer Tastatur drücken. Wenn Sie sich jetzt Ihren Cursor ansehen, können Sie sehen, dass es ein Pluszeichen gibt. Wenn ich also einfach meine linke Maustaste halte und dieses Ding trotzdem ziehe, möchte ich, kann ich einen Rahmen meiner eigenen Dimensionen hinzufügen. Sie können auch die Live-Dimensionen sehen. Also lasse ich einfach diese Maustaste. Und hier ist mein anderer Rahmen. Wenn Sie diesen Rahmen nun an eine beliebige Stelle verschieben möchten, können Sie einfach die linke Maustaste ziehen und diesen Rahmen an eine beliebige Stelle ziehen. Und du kannst dieses rechte Ohr einfach ausrichten. Okay, also die Standardabmessungen dieses Rahmens oder 1576 und bis 1053, wenn Sie diese Abmessungen ändern möchten, müssen Sie nur auf der rechten Seite sehen, dass die Breite und Höhe vorhanden ist. Von hier aus können Sie also Änderungen an ihren Dimensionen vornehmen. Sie können eigene Dimensionen hinzufügen. Ich füge einfach ein paar Dimensionen hinzu. Ich ändere die Breite auf 1080 und ändere die Höhe auf 109 auf 0. Sie können die Schaltfläche „Vergrößern“, „ Verkleinern“ und das Handwerkzeug verwenden , das den Bildschirm so ausgesprochen das den Bildschirm so ausgesprochen mit der Sie bequem bearbeiten können. Also behalte ich es einfach so. Wenn Sie sich nun den Ebenenabschnitt auf der linken Seite ansehen , können Sie sehen, dass es den Frame gibt. Dies war das zweite Element, das wir hinzugefügt haben. Lassen Sie uns nun dem Designteil zugehen. Also wähle ich diesen Frame einfach hier aus. Wenn Sie sich jetzt die rechte Seite ansehen, können Sie sehen, dass es verschiedene Möglichkeiten für das Designteil gibt . Die Option Breite und Höhe, die wir gerade gesehen haben. Es gibt eine andere Option, die die Winkeloption für die Drehung ist . Sie können einfach den Zeilenwinkel eingeben. Du willst dieses Ding drehen. Wenn ich gerade zehn eingegeben habe und die Eingabetaste drücke, kannst du sehen, wie es sich dreht. Jetzt können Sie dieses Ding auch manuell drehen. Sie müssen nur die Maus in die Nähe einer der Kanten nehmen. Und Sie können sehen, dass sich der Cursor zum Rotationssymbol ändert. Und von hier aus kannst du einfach die linke Maustaste gedrückt halten und dieses Ding trotzdem ziehen, du willst es drehen. Und auf der rechten Seite im Designteil sehen Sie eine Live-Vorschau der Winkeländerungen, die Sie vornehmen. Ich gebe es einfach noch einmal an 0, dass es weitergeht. Es gibt auch das Eckenradius-Feature. So können Sie gewöhnliche Ideen für dieses Ding hervorrufen. Was ist jetzt Eckenradius? Jetzt zoomen wir hinein und schauen uns diesen Rand an, diese Idee. Hier sehen Sie also, dass dies ein perfektes Rechteck ist. Die Kanten sind gerade Linien. Jetzt wähle ich diesen Rahmen aus und füge hier einen Eckenradius hinzu. Fügen wir also einen Eckenradius von 50 hinzu. Jetzt können Sie sehen, dass es einen Eckenradius in Richtung Frame gibt. Dies geht auch um den Eckenradius. Jetzt die Funktion für das automatische Layout und das Layout-Raster erkläre ich im späteren Teil mit einem Beispiel. Sprechen wir nun über den Feldbereich. Fülle genau wie der Name schon sagt, hier ist das Gefühl deiner Elemente. Derzeit haben wir den Rahmen ausgewählt, also ändern wir die Füllung dieses Rahmens. Im Moment wurde die Füllung dieses Rahmens als weiß ausgewählt. Wenn ich nun genau hier auf diese Farbe klicke, sehen Sie, dass wir verschiedene Optionen für die Farbe dieses Elements haben. Sie können einfach eine beliebige Farbe auswählen. Sie können die Deckkraft dieses Dings auch anpassen , indem Sie hier ändern. Wählen Sie einfach die gewünschte Farbe aus. Sie erhalten eine Live-Vorschau und nehmen die Änderungen vor, indem Sie gerade als grün gestartet wurden. Und es gibt auch viele weitere Möglichkeiten für dieses Gebiet. Wenn ich diese Option einfach hier erweitere, können Sie sehen, dass es auch lineare, radiale, eckige, diamant- und Bildfüllung gibt. Man kann sie einfach einzeln erforschen. Es gibt diese lineare Fülloption. Du kannst sie so ändern, wie du willst. Es gibt auch diese Bildoption, was bedeutet, dass Sie ein Bild als Gefühl für das Element hinzufügen können . Wählen wir also die Bild-Option aus. Von hier aus können Sie ein Bild von Ihrem Gerät hochladen. Wir haben ein Bild als Füllung des Rahmens hinzugefügt. Jetzt gibt es die Striche, Effekte und Exportoptionen, also schauen wir uns sie eins nach dem anderen an. Derzeit ist die Option Strich nicht aktiviert. Wenn Sie also die Strichoption aktivieren möchten, können Sie sehen, dass das Pluszeichen vorhanden ist. Klicke einfach drauf. Und jetzt wurde die Strichoption aktiviert, ist die Farbe des Strichs. Sie können also einfach eine beliebige Farbe auswählen. Ich nehme es einfach wie gelesen. Und Download ist die Strichgröße. Sie können dieses Ding einfach ziehen und die Strichgröße auswählen. Oder Sie geben einfach die gewünschte Nummer manuell ein. Ich hab gerade gesagt, dass der Junge zehn hat. Jetzt haben wir unserem Rahmen einen roten Strich hinzugefügt. Und weiter, Es gibt die Effektoption. Derzeit ist dies also nicht aktiviert. Klicken wir also auf das Pluszeichen. Und jetzt gibt es Schlagschatten, innere Schattenebene verschwommen und so weiter. Sie werden diese Funktionen selbst erkunden. Jetzt gebe ich dir nur ein Beispiel für, sagen wir Schlagschatten. Wählen Sie einfach dieses Symbol direkt hier aus und ändern Sie die Werte nach Ihren Wünschen. Wir haben jetzt einen Schlagschatten hinzugefügt. Wenn ich jetzt einfach reinzoome, siehst du, dass der Schlagschatten genau hier ist. Dann gibt es die Exportfunktion. Also klicke ich einfach auf dieses Pluszeichen. Sie können sehen, dass ich den Frame ausgewählt habe. Wir sprechen davon, diesen Frame auszunutzen. Und jetzt gibt es Optionen , diese Dateitypen zu exportieren. Es gibt also PNG, JPG, SVG, PDF und so weiter. Wählen wir PNG aus. Und jetzt klicke ich einfach auf Frame eins exportieren. Jetzt können Sie dies auf Ihrem Gerät speichern. Also klicke ich einfach auf den Verkauf. Jetzt wurde dieser Frame als PNG auf unserem Gerät exportiert. Okay, also hier ist der Rahmen. Sie können sehen, dass dies der Rahmen war, den wir exportiert haben. So wird es als Bild aussehen. Jetzt fügen wir diesem Frame einige Elemente hinzu. Werfen Sie also einen Blick auf die Option oben links. Das erste ist im Grunde das Verschiebewerkzeug, das wir verwenden, nämlich unser Mauszeiger. Und das zweite ist das Skalierungswerkzeug. Jetzt dient das Skalierungswerkzeug im Grunde genommen die Größe der Elemente auf Ihrer Seite zu ändern. Wählen Sie also das Skalierungswerkzeug aus , das Sie auswählen können oder Sie können die J-Taste auf Ihrer Tastatur drücken. Bevor ich jetzt das Skalierungswerkzeug auswähle, zoome ich einfach ein wenig heraus , weil ich mich so wohl fühle, zu bearbeiten. Nehmen wir an, ich wähle diesen Frame gleich hier aus. Und ich möchte die Größe dieses Rahmens ändern. Dafür brauchte ich das Skalierwerkzeug. Drücken wir den Knopf auf unserer Tastatur. Jetzt wurde das Skalierungswerkzeug aktiviert. Wenn ich jetzt mit der Maus zu einer dieser Kanten fahre, sieht man, dass sich der Cursor geändert hat. Jetzt ist das ein Größenanpassungsbool. Wenn ich also nur mit der linken Maustaste klicke und dieses Ding ziehe, kann ich die Größe meines Frames ändern. Okay, so funktioniert das Größenänderungstool. Wenn ich nun die Größe dieses Frames ändern möchte, wähle ich einfach darauf aus. Und ich bringe meinen Cursor in Richtung Rand und ziehe dieses Ding einfach. Wenn Sie jetzt einen Blick darauf werfen, während ich die Größe dieses Rahmens ändere, befindet sich ein Teil davon hinter diesem Frame. Wenn Sie nun diese Frame-Idee dahinter haben wollen , unser erstes Bild, also müssen Sie nur zum Ebenenbereich gehen und dann die linke Maustaste auf unserem ersten Frame halten linke Maustaste auf unserem ersten Frame und ziehe dieses Ding über den Frame eins. Okay, so funktionieren Layer. Jetzt lege ich es einfach zurück, wo es war. Und ich verschiebe das Ding einfach hier hin. Okay, also wenn ich diesen Frame auswähle und zum Rand gehe, kannst du sehen, dass die Skalierungsoption derzeit noch aktiviert ist. Wenn Sie dies also ausschalten möchten, drücken Sie einfach die V-Taste auf Ihrer Tastatur. Wenn ich jetzt meinen Cursor in Richtung Rand bringe, können Sie sehen, dass wir die Größe dieses Dings immer noch ändern können, aber es wird nicht entsprechend einer festen Dimension geändert. Sie werden die Größe dieses Dings nach dem Zufallsprinzip ändern, okay, also drücke ich einfach Control Z auf meiner Tastatur. Wenn Sie es wieder in seine ursprüngliche Dimension bringen. Und jetzt drücken wir noch einmal den Knopf. Jetzt können Sie sehen, dass wir die Größe dieses Dings in jeder Dimension ändern und die Größe proportional ändern. Okay, also drücke ich einfach wieder die V-Taste auf meiner Tastatur. Um zur Option Verschieben zurückzukehren, können Sie sie aus Ihrem Wert auswählen. Sie können den Maßstab entweder verschieben oder auswählen. Lassen Sie uns nun zur zweiten Option übergehen. Die zweite Option ist Frame. Wir haben diesen Teil bereits behandelt. Und jetzt sind die dritten Option die Formwerkzeuge. Wenn ich das also erweitere, kannst du sehen, dass dies die Videos Shape-Tools sind. Und einige dieser Tools haben auch eine Abkürzung. Wenn Sie sich also mit Figma auskennen, können Sie einfach direkt über Tastenkombinationen auswählen. müssen nicht jedes Mal aus diesem Menü auswählen. Lasst uns zuerst mit einem Rechteck gehen. Jetzt klicke ich einfach auf dieses Rechteck. Nun, genau wie der Freestyle-Rahmen, kannst du einfach mit der linken Maustaste ziehen und dieses Ding ziehen. Erstellen Sie ein Rechteck. Und wenn Sie die Maustaste verlassen, wurde das Rechteck gebildet. Also klicke ich einfach nach draußen. Jetzt gibt es auch eine weitere Funktion dieses Rechteckwerkzeugs. Wählen wir das Rechteckwerkzeug erneut aus. Und jetzt sagen wir, ich wollte ein Quadrat anstelle eines Rechtecks hinzufügen . Wenn Sie anstelle eines Rechtecks ein Quadrat hinzufügen möchten, können Sie dieses mit derselben Option hinzufügen. Das ist das Rechteck-Werkzeug. Dafür. Alles, was Sie tun müssen, ist einfach die Umschalttaste auf Ihrer Tastatur zu ziehen und dann dieses Ding zu ziehen. Wenn du jetzt einen Blick darauf wirfst, während du dieses Ding schleppst, geht es auf eine perfekte quadratische Art und Weise. Ich lasse einfach meine Maustaste und lasse dann die Umschalttaste. Es bleibt also perfekt. Okay, also deine Overs im Quadrat und deine über Rechteck. Und beide wurden mit demselben Rechteckwerkzeug hinzugefügt. Genau wie die Frame-Option, als wir den Rahmen ausgewählt konnten wir Änderungen im Entwurfsbereich vornehmen. Ebenso, wenn Sie Änderungen an Ihrem Rechteck oder Quadrat oder irgendwelchen Elementen vornehmen möchten , die Sie sind. Sie müssen nur diese Elemente auswählen und dann können Sie direkt hier Änderungen vornehmen. Okay, also lasst uns die Füllung dieses Quadrats ändern. Ich ändere es in Blau. Und lasst uns auch im Bereich dieses Rechtecks bleiben. Ich behalte es weiß. Und ich füge dem einfach einen Schlaganfall hinzu. Ändern Sie einfach die Strichfarbe und ändern Sie die Strichbreite. Lassen Sie uns ein paar weitere Shape-Tools untersuchen. Es gibt die Linie. Ich wähle einfach diese Liniensache aus. Ebenso können Sie einfach die linke Maustaste gedrückt halten . Und du kannst das Ding schleppen. Wenn Sie möchten, dass dies genau bei 0 Grad oder 45 Grad oder 90 Grad liegt, können Sie einfach die Umschalttaste auf Ihrer Tastatur halten. Und von dort aus kannst du diese Dinge einfach ziehen , damit du sehen kannst , was im Verhältnis bleibt. Und dann bewege ich meine Maustaste. Da haben wir also eine gerade Linie. Hier ist die Linie. Sie können diese Zeile auswählen und Änderungen in ihrem Entwurfsbereich vornehmen. Ändern wir die Strichbreite dieser Zeile. Da ist es. Und lassen Sie uns die Strichfarbe ändern, rot. Jetzt geht es auch um diese Pfeiloption. Ähnlich wie line. Jetzt halte ich einfach meine Umschalttaste gedrückt und ziehe dieses Ding genau hierher. Wenn wir eine Anzeige oder Ihr Reservoir haben, ändere ich einfach die Strichbreite und ändere die Strichfarbe. Es gibt auch hier einige Möglichkeiten. Sie können auch den Endpunkt ändern. Okay? Also da ist der Diamant schmal, da ist der Linienpfeil. Dies ist also nützlich, um Flussdiagramme zu erstellen und so weiter. Weiter geht es um diese Sonnenfinsternis. Jetzt kannst du einfach die linke Maustaste gedrückt halten und dieses Ding ziehen, aber ich lasse dieses Ding einfach so wie es ist. Jetzt können Sie mit diesem Eclipse-Tool auch einen perfekten Kreis hinzufügen . Alles, was Sie tun müssen, ist einfach das Eclipse-Tool auszuwählen. Und bevor Sie anfangen, dieses Ding zu ziehen , indem Sie die linke Maustaste gedrückt halten, halten Sie einfach die Umschalttaste auf Ihrer Tastatur gedrückt, damit wir einen perfekten Kreis erhalten. So funktioniert es und kannte zuerst die Maustaste und lassen Sie dann die Umschalttaste, damit sie perfekt bleibt. Jetzt wähle ich noch einmal meinen ersten Frame aus. Wenn ich versucht habe, die Größe dieses Dings zu ändern, können Sie sehen, dass wir die Größe dreidimensional ändern . Wenn ich jetzt die Umschalttaste gedrückt halte während ich die Größe dieses Dings ändere, können Sie sehen, dass es sich in einem perfekten Verhältnis bewegt. Wir können den Freestyle nicht machen, den wir wollen. So ist die Umschalttastenbox, ich schätze, ich hatte auch ein Feld in unserem Kreis. Lassen Sie uns nun über die anderen Tools sprechen. Ich werde das Ding einfach erweitern. Hier sehen Sie, dass es ein Stiftwerkzeug gibt und es gibt ein Bleistiftwerkzeug. Wählen wir zuerst das Stift-Werkzeug aus. Jetzt ist das Stiftwerkzeug ähnlich, verbinden Sie die Punkte. Wenn Sie einen Vektor erstellen möchten, können Sie das Stiftwerkzeug verwenden. Der erste Schritt ist irgendwo klicken. Jetzt wird dies der Ausgangspunkt sein. Und wenn Sie jetzt erneut klicken, sind dies die anderen Punkte. Es ähnelt also dem Erstellen von Punkten und Linien. Wir erstellen genau hier einen Vektor. Jetzt bringe ich das einfach zum Startpunkt, oder du kannst es an jeden gewünschten Punkt bringen. Wenn Sie fertig sind, klicken Sie einfach auf Fertig rechtes Ohr. Wählen wir nun unseren Vektor aus. Und Sie können sehen, dass unsere verschiedenen zusätzlichen Funktionen, die wir auch für Vektor verwenden können. Fügen wir diesem Vektor also eine Füllung hinzu. Derzeit wurde das Feld nicht hinzugefügt, also drücken wir das Pluszeichen. Jetzt können Sie den Vektor auch als Feld sehen. Lassen Sie uns die Füllung dieses Vektors ändern. Dies sind jetzt, das ist nur als Referenz. Die Vektoren sind sehr nützlich. Sie können eine beliebige Form erstellen, die Sie möchten. Jetzt, weiter, da ist das Bleistift-Werkzeug. Ich wähle einfach dieses Stiftwerkzeug aus. Jetzt ist es zum kostenlosen Styling. Sie können früher die linke Maustaste drücken und alles zeichnen, was Sie wollen. Wenn Sie eine gerade Linie zeichnen möchten, können Sie einfach die Umschalttaste auf Ihrer Tastatur gedrückt halten , damit sie eine gerade Linie zeichnet. So funktioniert das Bleistiftwerkzeug. Wenn Sie mit dem Bleistiftwerkzeug fertig sind, drücken Sie einfach die Taste auf Ihrer Tastatur, damit Sie zur Option Verschieben zurückkehren. Wenn Sie ein bestimmtes Element löschen möchten, müssen Sie nur dieses bestimmte Element auswählen. Okay, sagen wir mal, ich möchte das löschen , das mit einem Bleistift gezeichnet wurde. Wählen Sie einfach dieses Element aus und drücken Sie die Rücktaste auf Ihrer Tastatur. Ok, jetzt ist dieses Ding weg. Und wenn Sie die Änderungen rückgängig machen möchten, sagen wir jetzt, ich habe diese Bleistiftzeichnung verdünnt und wollte sie zurückbringen. Drücken Sie einfach Control Z auf Ihrer Tastatur, damit die Änderungen rückgängig gemacht werden, gehen Sie einen Schritt zurück. Sie können das oft tun , um zum vorherigen Schritt zurückzukehren. Also wähle ich das einfach noch einmal aus und lösche es, indem ich die Rücktaste drücke. Also lösche ich dieses Ding auch. Dieser auch. Okay, das dreht sich also alles um das Penicillin Pen Tool. Lasst uns jetzt mit dem anderen weitermachen. Das ist das Textwerkzeug. Wählen Sie einfach den Text direkt hier aus. Und jetzt fügen wir Text irgendwo in unserem Rahmen hinzu. Also gehe ich einfach mit dem Handwerkzeug runter. Ich zoome rein. Fügen wir nun Text in dieses Feld ein. Ich klicke einfach hier. Und jetzt können Sie von hier aus einfach jeden gewünschten Text hinzufügen. Sagen wir also, sobald wir fertig sind, klicken Sie einfach irgendwo nach draußen. Hier ist unser Text und ich ziehe dieses Ding einfach in die Mitte. Sie können sehen, dass Figma ein sehr intelligentes Tool ist. Es gibt Ihnen auch Dimensionen. Ist unser Punkt, genau hier können Sie sehen, dass es perfekt im Mittelpunkt steht. Und jetzt können Sie diesen Text auch anpassen. Sie können auf der rechten Seite in der Designoption sehen, dass es verschiedene Optionen gibt. Du bist die fremden Stile. Sie können die Schriftart von hier aus ändern. Lassen Sie uns auch den Schriftstil ändern. Ich ändere es zum Kochen. Jetzt gibt es das Handbuch, das wir bereits behandelt haben. Sie können einfach die Leertaste auf Ihrer Tastatur kochen und dieses Ding an eine beliebige Stelle ziehen. Und das letzte Feature ist das Hinzufügen eines Kommentars. Also wähle ich einfach dieses Ding aus. Sie können auswählen, wo Sie einen Kommentar hinzufügen möchten. Ich wähle diesen Kreis einfach hier aus. Ich füge einen Kommentar hinzu. Jetzt wurde der Kommentar hinzugefügt, und jetzt drücke ich die V-Taste auf meiner Tastatur, um zurückzukehren. Nehmen wir an, Sie arbeiten als Team und möchten die Kommentare überprüfen , die Ihre Teamkollegen diesem speziellen Design hinterlassen haben. Benutzer müssen auf diesen Kommentar direkt hier klicken. Und auf der rechten Seite sehen Sie die verschiedenen Kommentare, die Ihre Teamkollegen fallen gelassen haben. Hier sehen Sie, dass es den einen Kommentar gibt, den Yoda es ist. Auf diese Weise sind Kommentare nützlich, wenn Sie als Team arbeiten. Okay, das ist also alles für diese Sitzung. Wir sind mit den Grundlagen von Figma bedeckt. In der späteren Sitzung werden wir mit den erweiterten Funktionen von Figma fortfahren und auch den Prototyping-Teil durchgehen. Das ist alles. Danke. 5. Einige Vorkenntnisse vor dem Prototyping: Hallo und willkommen alle zurück. In dieser Sitzung werden wir einige erweiterte Funktionen von Figma kennenlernen und uns auf den Prototyping-Teil stützen. Bevor wir also mit dem Prototyping beginnen, gibt es ein paar Bilder von Pigma, die Sie kennen müssen, die am häufigsten in Figma verwendet werden. Also lasst uns anfangen. Also füge ich zuerst eine Sonnenfinsternis hinzu. Jetzt weißt du, wie man eine Sonnenfinsternis hinzufügt. Gehe einfach zum Shape und wähle die Eclipse-Option aus. Und wenn Sie den perfekten Kreis addieren möchten, müssen Sie nur den Tastenwert Umschalttaste halten oder dieses Ding ziehen. Hier ist es. Wir haben also einen perfekten Kreis. Jetzt wähle ich diesen Kreis einfach hier aus. Und wenn man sich den oberen Bereich anschaut, gibt es drei Möglichkeiten. Bearbeiten, Objekt, Erstellen, Komponenten und Benutzer maskieren. Jetzt sind all diese drei sehr interessant und wichtig, wenn Sie mehrere Designs erstellen, während einen Prototyp erstellen oder einfach nur für das grundlegende Journal figma. Wir werden sie einfach eins nach dem anderen durchgehen. Der Kreis wurde bereits ausgewählt, daher klicken wir einfach auf die Option Objekt bearbeiten. Und jetzt können wir diesen Kreis so bearbeiten, wie wir es wollen. Sie können sehen, dass es hier vier Punkte gibt, sodass Sie sie einfach anpassen und so gestalten können , wie Sie es wünschen. Okay, das ist also eine der Funktionen von Figma, um etwas Design zu erstellen. Und wenn du fertig bist, klicke einfach auf Fertig rechtes Ohr. Und Sie können auch die Füllung dieser Form ändern. Jetzt ging es um das Feature „Objekt bearbeiten“. Ich lösche das einfach. Um ein Objekt in Figma zu löschen, müssen Sie nur dieses bestimmte Objekt auswählen und auf Ihrer Tastatur die Rücktaste drücken. Jetzt ist die Form weg. Bevor ich jetzt mit einem anderen Feature von Figma fortfahre, füge ich einfach ein Rechteck hinzu. Gehe also einfach zu Shapes, klicke auf das Rechteck. Und jetzt halte ich einfach die Umschalttaste gedrückt , weil ich ein perfektes Quadrat will. Es ist, dass wir ein perfektes Quadrat haben. Und nun lassen Sie uns mit einem weiteren interessanten Merkmal von Magma fortfahren einem weiteren interessanten Merkmal von , das als Create-Komponente bezeichnet wird. Okay, das waren also die Option „Komponente erstellen“. Bevor ich Ihnen nun erkläre , was die Komponente erstellen ist, zeige ich Ihnen nur den Unterschied zwischen der Option Komponente erstellen und ohne die Option Komponente erstellen zu verwenden Option Komponente erstellen und . Jetzt ist die Option „Komponente erstellen“ sehr nützlich beim Erstellen von Designs und auch beim Prototyping. Jetzt hast du gehört, dass wir ein Quadrat haben. Ich dupliziere dies jetzt einfach , um eine Kopie eines Elements zu erstellen. Alles, was Sie tun müssen, ist das bestimmte Element auszuwählen und auf Ihrer Tastatur auf die Steuerung D zu drücken. Und es heißt Duplikate Auswahl. Jetzt gibt es zwei Rechtecke. Du musst das einfach hier hier ziehen . Da ist es. Und jetzt drücke ich einfach noch einmal Control D auf meiner Tastatur, um eine weitere Kopie zu erstellen. Wenn Sie es bemerkt haben, hat Figma automatisch den Raum zwischen den beiden erstellt. Sigma ist also eine sehr intelligente Anwendung. Und jetzt sind wir drei Quadrate. Ich wähle einfach das erste Quadrat gleich hier aus. Wenn ich nun versuche, die Füllung dieses ersten Quadrats zu ändern, ändern wir es in Rot. Wenn Sie es bemerken, habe ich den Appell des Posts im Quadrat geändert . Die Attraktivität der verbleibenden Poolplätze ist jedoch der verbleibenden Poolplätze gleich, obwohl sie die Kopie des ersten ist. Obwohl sie die Kopie des ersten Quadrats sind, sind sie in keiner Weise mit dem ersten Quadrat verwandt, da sie einfach kopiert werden und beide Quadrate ein einzelnes Element sind oder sich sind sie in keiner Weise mit dem ersten Quadrat verwandt , da sie einfach kopiert werden und beide Quadrate ein einzelnes Element sind von den der erste. Hier ist die Funktion „ Komponente erstellen “ nützlich. Denn wenn Sie ein Design oder ein Projekt in Figma erstellen , wird es viele Reputationen geben. Die Entwürfe müssen einem bestimmten Farbmuster oder sagen wir einem bestimmten Format folgen einem bestimmten Farbmuster . Und Deadtime, Sie können nicht jedes einzelne Objekt einzeln bearbeiten , nur um ein bestimmtes Muster beizubehalten. Zu dieser Zeit ist die Create-Komponente sehr praktisch. Jetzt lernen wir, wie man Komponentenfunktionen erstellt. Jetzt erstelle ich einfach eine Kopie dieses roten Rechtecks. Ich habe gerade Control D auf meiner Tastatur gedrückt. Und ich ziehe das Ding hier runter. Jetzt haben wir eine Kopie dieses Quadrats. Und lassen Sie uns die Attraktivität dieses Platzes nur zu Demonstrationszwecken ändern . Aber ich ändere es einfach in, sagen wir grün. Jetzt ist es hier. Wir haben ein Rechteck, anderes Rechteck, es ist grünes Rechteck. Jetzt haben wir ein grünes Rechteck. Und jetzt zeige ich Ihnen, wie die Funktion „Komponente erstellen“ funktioniert. Ich habe dieses grüne Rechteck ausgewählt und klicke einfach auf Komponente erstellen. Wenn Sie beobachten, wird die Farbe dieser bestimmten Ebene in lila geändert. Hier haben wir eine Komponente, dieses grüne Rechteck ist jetzt Bestandteil der übergeordneten Komponente. Wenn ich nun eine Kopie dieses Elements oder E5 erstelle , die gebunden um dieses grüne Rechteck zu duplizieren. Schau dir einfach an, wie es funktioniert. Ich drücke einfach noch einmal Control D auf meiner Tastatur. Jetzt erhalten wir eine Kopie dieses Rechtecks, und ich drücke einfach noch einmal Control D auf meiner Tastatur. Jetzt habe ich drei grüne Rechtecke. Wenn ich jetzt versuche, etwas mit dem ersten zu ändern, ist das das übergeordnete Rechteck. Sie können sehen, dass dies das übergeordnete Rechteck ist. Wenn Sie sich den Abschnitt „Layer“ ansehen, können Sie sehen, dass dies nicht die erste Komponente war , die wir erstellt haben. Und das Rechteck sechs und Rechtecke sieben sind die Kopien des ersten. Sie können den Unterschied zwischen den Symbolen sehen. Es zeigt also, dass das Rechteck fünf der übergeordneten Komponente, und dies sind die untergeordneten Komponenten. Jetzt habe ich die Rechteckdatei ausgewählt und versuche einfach, die Füllung dieses bestimmten Elements zu ändern . Klicken wir auf „Ausfüllen“. Ich ändere es einfach in, sagen wir gelb. Wenn ich jetzt versuche, irgendeine Farbe zu ändern oder Änderungen an dieser Rechteckdatei vorzunehmen, die Änderungen auch in den übrigen beiden sichtbar. Es gibt die Kopien der Rechteckdatei. So funktioniert das Feature „ Komponente erstellen“. Was auch immer Sie mit der ersten Komponente machen, die untergeordnete Komponente folgt. Dies ist nicht nur für Formen geeignet, sondern auch für die Textur. Ich zeige dir nur, wie das für Text funktioniert. Lass uns etwas Text hinzufügen. Über Text. Ich wähle einfach diesen Text aus und vergrößere die Größe davon. Vergrößern wir also die Größe ein wenig. Auch unsere Texte und ich trete einfach auf Komponente erstellen. Jetzt ist dieser Text auch eine Komponente. Jetzt ist es nicht unbedingt so, dass , genau wie die Formen ähnlich sind Texte, genau wie die Formen ähnlich sind, auch ähnlich sind. Texte können alles sein. Also drücke ich einfach Control D auf meiner Tastatur. Wir haben ein Duplikat dieses speziellen Textes erstellt. Jetzt ändere ich diesen Text einfach hier. Yoda es ist, das ist das zweite Element und Figma ist einfach ist unsere Mutterkomponente. Jetzt habe ich den ersten Text ausgewählt. Jetzt ändere ich einfach die Füllung dieses speziellen Textes. So funktioniert das Feature „ Komponente erstellen“. Obwohl beide einem ähnlichen Muster folgen, Es ist nicht notwendig, dass sie genau gleich sein sollen. Es geht zum Rechteckbeispiel. Noch einmal verkleinere ich einfach die Größe dieses bestimmten Rechtecks. Und ich behalte es genau hier. Wenn ich nun Änderungen an der übergeordneten Komponente vornehme, ändern wir das Feld noch einmal. Sie müssen darauf doppelklicken , um die Füllung zu ändern. Jetzt habe ich mich einfach geändert, wir machen es, sagen wir pink. Hier sieht man also, dass sich die Farbe jetzt für alle geändert hat. Es ist jedoch nicht notwendig, dass die Form, die Größe aller von ihnen genau sagen muss , dass sie auch von beliebiger Form sein können. Okay, also lasst uns jetzt zu einem anderen interessanten Merkmal von Sigma übergehen. Ich löse das alles einfach ab. Sie wählen einfach alle aus und drücken Rücktaste auf Ihrer Tastatur, damit sie gelöscht werden. Jetzt füge ich einfach eine weitere Sonnenfinsternis hinzu. Geh einfach zu Eclipse. Ich halte einfach die Umschalttaste gedrückt, damit wir einen perfekten Kreis erhalten. Jetzt werden wir ein weiteres interessantes Feature von Figma lernen , das als Benutzermaske bezeichnet wird. Jetzt haben wir einen perfekten Kreis. Ich behalte es einfach auf der Seite und ich füge hier kein Bild hinzu. Also gehe ich einfach zu den Shapes und klicke einfach auf Bild platzieren. Zeigt dieses Bild genau hier an, sodass Sie ein bestimmtes Bild haben. Ich erweitere dies einfach, indem ich die Umschalttaste auf meiner Tastatur halte und dann die Kanten ziehe. Wir haben also hier eine symmetrische Größenanpassungsoption. Was ich jetzt machen möchte, ist, dass dieses WordPress-Logo genau hier auf diesem Kreis ist. Ich möchte, dass beide Teil derselben Sache sind. Also lege ich dieses Bild einfach über diesen Kreis. Gehen Sie jetzt einfach zum Ebenenbereich, fett die Umschalttaste auf Ihrer Tastatur wählen Sie sowohl die Sonnenfinsternis als auch das Bild aus. Und wenn beides erledigt ist, klicken Sie einfach auf die Maskenfunktion des Benutzers der oberen Ecke des Menüs, so dass dies der Fall ist. Jetzt können Sie sehen, dass wir das Element nicht maskiert haben. Das ist also alles, was die Jugend-Masken-Funktion funktioniert und Sie können dieses Ding überall ziehen, wo Sie möchten. Und sobald Sie zufrieden sind, werden Sie diese Elemente gruppiert und erstellen aus diesen beiden ein einzelnes Element. Gehen wir also zum Ebenenbereich, halten Sie die Umschalttaste auf Ihrer Tastatur gedrückt, wählen Sie sowohl die Sonnenfinsternis als auch das Bild und drücken Sie einfach auf der Tastatur Strg G. Sobald Sie fertig sind, können Sie sehen dies eine einzige Gruppe ist. Dies sind nicht mehr verschiedene Elemente. Da ist es. So funktioniert die Maskenfunktion des Benutzers. Jetzt haben wir zwei Kreise und Ausgaben. Dieser zweite Kreis über den ersten Kreis wird sich auf ein weiteres interessantes Merkmal von Sigma zubewegen . So sehen Sie hier einen zweiten Kreis ausgewählt. Wählen wir auch den ersten gleichzeitig aus. Halten Sie also einfach die Umschalttaste auf Ihrer Tastatur gedrückt und wählen Sie den ersten Kreis aus. Jetzt haben wir beide Kreise ausgewählt. Wenn Sie sich den oberen Bereich ansehen, können Sie diese Option sehen , die Boolesche Gruppen anzeigt. Erweitern Sie das einfach. Jetzt können Sie sehen, dass es viele verschiedene Optionen gibt, wie Vereinigungsauswahl, Subtrahieren, Überschneiden, Ausschließen. Sie können diese booleschen Gruppen auch ausprobieren. Klicken wir also auf die Gewerkschaftsauswahl und sehen, was wir bekommen. Wir haben gerade auf die Gewerkschaftsauswahl geklickt und Sie können sehen, dass wir eine andere Form haben. Und im Moment ist dies eine Vereinigung der beiden Kreise, die wir geschaffen haben. Lassen Sie uns also auch die anderen Optionen untersuchen. Wenn Sie einen Schritt zurück gehen möchten, drücken Sie einfach Control Z auf Ihrer Tastatur. Sie können mit dem vorherigen Schritt fortfahren. Also drücke ich einfach noch einmal Control auf meiner Tastatur. Jetzt haben wir wieder zwei Kreise. Und es ist nicht unbedingt so, dass beide in einer identischen Form sein müssen. Sie können in jeder Form sein, die Sie wollen. Also ändere ich einfach die Form dieses bestimmten Kreises hier. Ich ändere es einfach in eine Sonnenfinsternis. Und jetzt spiele ich das über den ersten Kreis. Wählen wir beide aus. Noch einmal. Halten Sie einfach die Umschalttaste auf Ihrer Tastatur gedrückt und klicken Sie auf die erste. Jetzt haben wir beide Objekte ausgewählt. Und lassen Sie uns einige andere Funktionen ausprobieren, z. B. Auswahl subtrahieren die Auswahl subtrahieren, dass diese Auswahl jetzt subtrahiert wurde. So funktioniert das Boolesche Gruppen-Feature in Figma. Jetzt, da wir diese Teile abgedeckt haben, lasst uns einfach weitermachen. Ich füge einfach hier etwas Text hinzu. Wenn Sie ein Duplikat dieses Textes erstellen möchten, müssen Sie nur diesen Text auswählen und auf Ihrer Tastatur auf Steuerelement D drücken. Dort haben Sie eine Kopie dieses bestimmten Elements erstellt. Und das ist auch eine andere Möglichkeit, ein Duplikat dieser Elemente zu erstellen. Wählen Sie einfach den gewünschten Text, den gewünschten Text oder eine beliebige Form aus, und Sie müssen nicht jedes Mal die Strg D drücken. Halten Sie einfach die Alt-Taste auf Ihrer Tastatur gedrückt. Dann kannst du dieses Ding einfach überall hin ziehen. Okay, jetzt können Sie sehen die Kopie dieser speziellen Texte direkt hier platziert wurde indem Sie die Alt-Taste auf meiner Tastatur gedrückt halten. So funktioniert es. Ebenso können Sie auch Kopien der Shapes erstellen. Ich habe diese Form genau hier ausgewählt. Ich halte einfach die Alt-Taste auf meiner Tastatur gedrückt und ziehe das Ding nach unten. Sie können eine einfache doppelte Kopie aller gewünschten Elemente erstellen . Wenn Sie zu den vorherigen Schritten zurückkehren möchten, das heißt, wenn Sie rückgängig machen möchten, drücken Sie einfach mehrmals auf der Tastatur Strg und Z . 6. Prototyping und Erstellen eines Projekts: Lassen Sie uns nun mit dem Prototyping-Teil fortfahren. Und während des Prototyping-Teils, wo wir einige weitere Funktionen und Tools in Figma lernen werden . Fangen wir an. Jetzt werden wir einen grundlegenden Prototyp erstellen, sagen wir, einen Prototyp einer mobilen Anwendung erstellen. Also müssen wir zuerst einen Keyframe hinzufügen zur Frame-Option wechseln. Klicken Sie auf Frame. Sie können den gewünschten mobilen Bildschirm auswählen. Da ist es, du bist wir haben ein Gehirn. Und lasst uns hineinzoomen. Halten Sie einfach die Strg-Taste auf Ihrer Tastatur gedrückt und scrollen Sie mit der Maustaste nach oben. Da ist es. Lassen Sie uns nun ein Duplikat dieses Rahmens erstellen, weil wir einen Prototyp erstellen wollten . Also zeige ich dir einfach, wie das Prototyping funktioniert. Je älter die Alt-Taste auf meiner Tastatur. Und zieh das Ding genau hierher. Ich halte die Alt-Taste auf meiner Tastatur noch einmal gedrückt und ziehe dieses Ding, das IT oder. Wir werden mit diesen drei Frames eine einfache mobile Prototypanwendung erstellen eine einfache mobile Prototypanwendung . Ich ändere einfach die Füllfarbe dieses Post-Prints. Lass es uns in Schwarz umstellen. Jetzt fügen wir dem ersten Frame etwas Text hinzu. Also tippe ich einfach. Willkommen in unserer App. Wenn Sie feststellen, dass die Textgröße zu groß ist, reduzieren wir die Textgröße. Zunächst wähle ich einfach den Text aus und reduziere die Low-Tech-Größe von dir. Dass es jetzt ist, haben wir die Textgröße reduziert und ich schreibe einfach, willkommen in unserer App. Ich platziere dieses Ding, diese Idee. Fügen wir nun einige Textfelder in Form einer Schaltfläche hinzu. Wenn ein Benutzer auf diese Schaltflächen klickt , wird er auf eine andere Seite weitergeleitet. Das werden wir in diesem Prototyp erstellen. Wir haben einen Text hinzugefügt und werden etwas über ein weiteres wichtiges und beliebtestes Feature von Pigma erfahren , das als Auto-Layout bezeichnet wird. Wählen Sie einfach diesen Text hier aus. Dann müssen Sie nur noch Umschalttaste auf Ihrer Tastatur drücken. Sie können sehen, dass das Auto-Layout hinzugefügt wurde , und Sie können dies ebenfalls hinzufügen. Ich aktiviere einfach die Fülloption für dieses spezielle Auto-Layout so, dass es so ist. Und wir können einfach die Füllung dieses bestimmten Elements ändern . Lass es uns einfach in gelb ändern. Und jetzt sind wir eine Art Schaltfläche für diese spezielle Anwendung benotet . Und jetzt wähle ich das einfach aus und reduziere die Größe, indem ich die K-Taste auf meiner Tastatur halte und dann dieses Ding ein wenig nach oben ziehe. Und jetzt erstelle ich einfach ein Duplikat dieser Funktion. Also wählen wir dieses aus. Halten Sie die Alt-Taste auf Ihrer Tastatur gedrückt und ziehen Sie dieses Ding in die Nähe. Jetzt erstelle ich nicht gerade eine schöne Anwendung. Ich zeige Ihnen nur, wie das Prototyp-Feature funktioniert, und jetzt bearbeiten wir den Text dieses bestimmten Elements dies so zu nennen, wie es ist. Jetzt haben wir zwei Elemente für diese bestimmte Seite erstellt . Jetzt wird dies die Homepage der Anwendung sein, und ich platziere sie einfach hier. Jetzt in diesem zweiten Frame, unsere Idee wird die Über uns Seite sein. Das heißt, wenn ein Benutzer direkt hier auf diese Schaltfläche Über uns klickt, wird er auf diese spezielle Seite weitergeleitet . Okay, also lasst uns die Details in diesem zweiten Frame hinzufügen. Ich habe gerade auch die Füllung dieses zweiten Frames geändert. Lass uns ein paar Texte hinzufügen. Sie können den Text auch genau von Ihrem kopieren. Einfach die Alt-Taste auf Ihrer Tastatur fett gedrückt und ziehen Sie dieses Ding genau hierher, und dann können Sie diesen Text später bearbeiten. Ich bearbeite einfach den Text. Ich erstelle einfach ein Duplikat dieses Textes, die Alt-Taste auf meiner Tastatur. Zieh das Ding hierher und ich füge einfach eine einfache Zeile hinzu. Und jetzt ein weiteres wichtiges Feature von Figma oder den Plugins. Mal sehen, wie die Plugins-Funktion funktioniert. Jetzt füge ich dieser Idee einfach eine Form hinzu. Lassen Sie uns auf der Seite Über uns ein Quadrat hinzufügen. Wenn ich nun dieses Quadrat auswähle und mit der rechten Maustaste klicke, kannst du sehen, dass wir bestimmte Optionen erhalten. Und unter diesen Optionen gibt es eine Funktion, die als Plug-Ins bezeichnet wird. Jetzt weißt du, was Plugins sind, aber mal sehen, wie Plugins Figma verhandeln. Plugins in Figma machen deinen Job wirklich einfach. Es gibt so viele Plugins für viele Funktionen. Lasst uns sie erforschen. Sie können sehen, dass wir verwaltete Plugins sind und Plug-Ins durchsuchen in der Community-Option Ich klicke einfach auf Plug-Ins durchsuchen in der Community. Von hier aus können Sie die gewünschten Plugins installieren, nicht nur Plug-Ins mehr Community sind, ist eine sehr große Community. Sie können sehen, dass es verschiedene Funktionen gibt. Es gibt Topografie , die sowohl mobiles Design als auch Dui Kids Illustrationen usw. ist. Sie werden auch Ihre eigenen Entwürfe veröffentlicht. Derzeit suchen wir also nach Plugins. Sie können also sehen, dass die Plugins-Option ausgewählt wurde. Jetzt suchen wir was für ein Plugin. Ich suche einfach nach dem Unsplash-Plugin. Jetzt hilft uns das Unsplash-Plugin dabei, einfach auf nicht urheberrechtliche Bilder zuzugreifen. Welches Design Sie auch sagen können, das ist das Unsplash-Plugin. Also klicke ich einfach auf Installieren. Klicken Sie einfach auf Plugin installieren. Jetzt wurde das Unsplash-Plugin installiert. Gehen wir zurück zur Gestaltungsseite. Wenn ich jetzt noch einmal mit der rechten Maustaste auf dieses Quadrat klicke, kannst du sehen, ob ich zu den Plugins gehe, du kannst sehen, dass es das Unsplash-Plugin gibt , das wir gerade installiert haben. Also klick einfach drauf. Sie können sehen, dass das Plugin geöffnet wurde. Von hier aus können Sie also nach einem Bild suchen, das Sie möchten. Es gibt also das Mondbild, das ich will, also klicke ich einfach darauf. Da ist es. Hier sehen Sie, dass wir den Mond zum Rechteck hinzugefügt haben. So funktioniert das Unsplash-Plugin. Jetzt wurde die Seite Über uns erstellt. Lassen Sie uns auch die Kontaktseite erstellen. Ich ändere einfach die Füllung dieses bestimmten Rahmens. Halten Sie also einfach die Alt-Taste auf Ihrer Tastatur gedrückt und ziehen Sie dieses Ding genau hierher. Und wenn Sie sicherstellen möchten, dass beide perfekt ausgerichtet sind, können Sie auch die Abmessungen überprüfen. Okay, also wähle einfach das Poster über uns oder die Alt-Taste auf deiner Tastatur aus. Und dann kannst du den Cursor einfach zu den Rändern bewegen . Sie können sehen, dass es die Entfernung gibt, die Abmessungen dieses bestimmten Textes. Es heißt also 1996. Jetzt können Sie sicherstellen, dass dies über uns auch in der gleichen Entfernung ist. Halten Sie also einfach die Alt-Taste und zeigen Sie dann auf die Kanten. Hier sieht man, dass es nicht genau ähnlich ist. Halten Sie jetzt einfach die Alt-Taste auf Ihrer Tastatur gedrückt und verwenden Sie die Pfeiltasten auf Ihrer Tastatur, um die Abmessungen zu ändern. Okay, also ändere ich es einfach auf 1986. Okay, jetzt sind diese beiden perfekt ausgerichtet. Ich ändere einfach den Text, um uns zu kontaktieren. Lassen Sie uns nun dieser Kontaktseite ein weiteres Plugin hinzufügen. Also drücke ich einfach die rechte Maustaste. Gehen wir zu Plugins und klicken in der Community auf Plug-Ins durchsuchen. Jetzt addieren wir noch einmal eine Karte, die Standort-Plugin ist. Ich habe gerade das erste Plug-In hier installiert. Klicken Sie auf Installieren. Jetzt wurde das Plugin installiert, also drücken Sie einfach die rechte Maustaste, gehen Sie zu Plugins. Und jetzt wählen wir eine Dome-Mapmaker-Funktion aus. Von hier aus können Sie also jeden gewünschten Ort hinzufügen. Also tippe ich einfach einen beliebigen Zufall ein, auch dieser ist in Ordnung. Sie können die Eingabeadresse direkt hier eingeben und dann den Speicherort hinzufügen. Ich klicke einfach auf Map erstellen. Da ist es. Und jetzt können Sie dies auch ändern. Gehe also einfach zu den Rändern und K-Taste auf deiner Tastatur. Von Ihnen aus können Sie die Größe dieses bestimmten Dings ändern und diese ziehen. Okay? Wenn Sie nun die V-Taste auf Ihrer Tastatur drücken, kehren Sie zur Option Verschieben zurück. Da ist es. Und Sie müssen nicht jedes Mal manuell Dinge erstellen. Verschiedene professionelle Designer haben die Anwendungsprototypen und verschiedene UI-Kits und so weiter erstellt . Und alle von ihnen wurden bereits in der Community hochgeladen. Alles was Sie tun müssen, ist einfach die rechte Maustaste zu drücken. Gehe zu Plugins und durchsuche Plug-Ins in der Community. Und hier können Sie einfach nach einer mobilen Anwendung suchen. Das ist nicht, wir erstellen nur die Suche nach mobiler Anwendung. Sie können also sehen, dass dies der Plugin-Abschnitt ist, und das ist ein weiterer Abschnitt, der als Dateien bezeichnet wird. Klicken Sie einfach hier auf Dateien. Und hier sehen Sie, dass dies die verschiedenen Projekte sind, verschiedene Designs, die von Benutzern erstellt wurden und in der Community hochgeladen wurden. All dies sind also Dateien, was bedeutet, dass Sie diese Dateien kopieren und ändern können. Sie können jedes einzelne Element aus diesen Dateien kopieren und in Ihrem eigenen Projekt verwenden. Das bedeutet, dass Sie nicht jedes Mal manuell Dinge erstellen müssen . Was auch immer Sie zum Erstellen der automatischen Beta- und Anwendungsseite benötigen , Sie können einfach in der Community suchen, sich von diesen Personen inspirieren lassen und auch die einzelnen Elemente kopieren. Sie können diese Projekte buchstäblich in Ihre eigene Figma-Anwendung importieren und dann ändern. Nehmen wir an, ich möchte die Anmeldeseite für meine Bewerbung. Alles was ich tun werde, ist einfach hier nach dem Login zu suchen. Und dann kannst du einfach auf Dateien klicken. Sie können sehen, dass dies die verschiedenen Dateien sind für die Anmeldeseite verfügbar sind. Sie können sehen, dass sich diese auf Anmeldeseiten befinden, die für mobile Anwendungen erstellt wurden , oder sagen wir an Tech-Aktien. Sie können auswählen , welche Sie möchten und welche Vorlage Sie möchten. Ihr, dies ist das erste Projekt. Also klicke ich einfach drauf. Hier sehen Sie, dass dieser Ersteller eine einfache Anmeldeseite für die mobile Anwendung erstellt hat , eine einzige Anmeldeseite. Alles, was ich tun werde, ist einfach auf Duplikat zu klicken , da wir diese Elemente kopieren möchten. Alles, was Sie tun müssen, ist einfach auf Duplikat zu klicken , damit Sie das Projekt in Ihre eigene Schwein meine Anwendung importieren können . Hier können Sie also sehen, dass dieses vom Benutzer erstellte Projekt jetzt in unsere eigene Desktop-Anwendung importiert wird . Das erste, was ich machen möchte, ist, dass ich diesen Login-Tab in meinem eigenen Design haben möchte . Also wähle ich einfach diesen Login aus, noch den Text, sondern auch das Rechteck damit, weil ich die gesamte Login-Registerkarte haben möchte. Wählen Sie also einfach das Rechteck auch mit der Umschalttaste und erstellen Sie dann eine Gruppe mit Control G auf Ihrer Tastatur. Sobald Sie Control Z drücken, können Sie sehen, dass beide Elemente in einem gruppiert sind. Wir drücken einfach Control C auf unserer Tastatur, um diese Login-Registerkarte zu kopieren. Und dann kehren wir zu unserem eigenen Projekt zurück. Und dann wählen wir einfach den Frame und fügen ihn dann genau hier ein. Jetzt ist die Login-Registerkarte auch in unserem Projekt verfügbar. Wir haben es einfach vom Benutzer kopiert. Jetzt wollen wir auch diese Icons, die Social Sign-In-Symbole in unserem Projekt. Wir wählen einfach diese ganzen Icons aus. Wir werden erneut auf unserer Tastatur auf Control G klicken , um eine Gruppe zu erstellen. Und wir drücken einfach Control C, um all diese Symbole zu kopieren, die Gruppe zusammen. Dann kehren wir zu ihrem eigenen Projekt zurück und dann drücken wir einfach Control V auf unserer Tastatur. So funktioniert es. Es macht unsere Arbeit viel einfacher. So funktioniert die gesamte Kopierfunktion. Und es ist sehr nützlich. Jetzt, da wir mit dem Designteil fertig sind. Dies ist nicht gerade ein schönes Design. Ich wollte dir nur ein grundlegendes Design zeigen , das wir mit dem Prototyp weitermachen können. Jetzt können Sie sehen, dass wir mit dem Designteil fertig sind. Lassen Sie uns also zum Prototyp-Bereich übergehen. Dort sieht man, dass dies neben dem Design der Prototypbereich ist. Lasst uns nun den Ablauf dieses Prototyps verstehen. Wenn ein Benutzer auf die Schaltfläche Über uns klickt, möchten wir, dass der Benutzer zum zweiten Frame umgeleitet wird. Das ist die Seite „Über uns“. Dies ist der erste Teil. Und wenn der Benutzer auf die Schaltfläche Kontakt klickt, möchten wir, dass er zum dritten Frame weitergeleitet wird. Das ist die Seite „Kontakt“. Dies ist der Ablauf unseres Prototyps. Was wir jetzt tun werden, ist, dass wir diesen Prototyp erstellen werden. Der Ablauf des Projekts ist jetzt klar. Lassen Sie uns den Prototyp erstellen. Gehen wir nun zum Button Über uns. Hier sehen Sie, dass sich hier in der Nähe des obigen Buttons ein Punkt befindet . Also klicken wir einfach darauf und ziehen dieses Ding in den zweiten Frame. Das heißt, wenn ein Benutzer auf die Schaltfläche Über uns klickt, werden Sie zum zweiten Frame weitergeleitet. Vielen Dank für die Schaltfläche „Kontakt“. Was müssen wir tun, ist dieses Ding zu ziehen , das sich in die Nähe der Schaltfläche „ Kontakt“ befindet. Wir müssen dieses Ding auf den dritten Frame ziehen, das ist die Kontaktseite. So funktioniert der Prototyp. Es ist ganz einfach, es ist ziemlich einfach. So funktioniert das Prototyp-Framework. Sie können die Animationen auch darüber bearbeiten , wie Sie es machen möchten. Hier sehen Sie also, dass wir zwei Interaktionen für den Prototyp erstellt haben . Die Schaltfläche Über uns und die Schaltfläche „Kontakt“. Jetzt kannst du sie nicht sehen, weil sie ganz nah dran sind, also mache ich sie nur ein bisschen. Sie können also sehen, dass es sich um zwei separate Interaktionen handelt. Die Schaltfläche „Über diese“ geht zum zweiten Frame, Das ist die Seite „Über uns“. Und die Schaltfläche „Kontakt“ durchläuft das dritte Frame. Das ist die Kontaktseite. Sie können auch hier Animationen erstellen. Das war nur eine Einweginteraktion, die wir gelernt haben. Wir müssen auch eine umgekehrte Interaktion schaffen. Ich füge einfach einen Text hinzu, der früher sagt, weil wir gelernt haben, wie wir von der Schaltfläche Über uns zur Seite Über uns gehen können . Aber was ist, wenn der Benutzer von oben auf dieser Seite zur Homepage zurückkehren möchte . Also habe ich einen Text mit der Aufschrift Previous erstellt. Ich füge einfach ein automatisches Layout hinzu, indem ich mit der rechten Maustaste darauf klicke. Jetzt haben wir auch ein Auto-Layout hinzugefügt und ich ändere einfach die Füllung. Lassen Sie uns diesem Film eine Farbe geben , dass wir auch einen vorherigen Button erstellen. Dann benutzen wir diesen Button auch zum Prototyp. Jetzt kopiere ich diesen Button auch in den dritten Frame. Da ist es. Jetzt haben wir auch den vorherigen Button mit dem dritten Frame. Sie können neben dem vorherigen Button sehen, dass es einen Punkt gibt. Wir ziehen dieses Ding einfach und bringen es zurück zum ersten Frame , in dem eine Interaktion angezeigt , dass Sie, wenn Sie auf die vorherige Schaltfläche klicken, zum ersten Frame weitergeleitet werden. Das ist die Homepage. In ähnlicher Weise wird für die nächste Schaltfläche „Zurück“ dasselbe tun. Man sieht, dass es den Punkt gibt. Ziehen Sie einfach dieses Ding und bringen Sie es zurück zum ersten Frame. Das ist die Homepage. Jetzt sind wir vollkommen fertig mit unserem Prototyp. Wir haben eine Vorwärtsinteraktion geschaffen und wir haben auch eine umgekehrte Interaktion geschaffen. Für immer die Anwendung. Jetzt schauen wir uns an, wie unser Prototyp funktioniert. Jetzt, da wir mit dem Prototyp fertig sind, können Sie sehen, dass es den Play-Button gibt. Also klick einfach drauf. Hier. Das ist unsere Homepage. Wenn Sie auf Über uns klicken, werden Sie zur Seite Über uns weitergeleitet. Dies ist die Seite „Über uns“. Und wenn du zurückgehen willst, klicke einfach auf vorherige. Wenn Sie auf vorherige klicken, da ist es, sind Sie wieder auf der Homepage. auf die Schaltfläche Kontakt klicken, Wenn Sie einfach auf die Schaltfläche Kontakt klicken, werden Sie zur Kontaktseite weitergeleitet, wenn Sie einfach auf die Schaltfläche Kontakt klicken. Und wenn Sie auf vorherige klicken, werden Sie zurück zu unserer Homepage weitergeleitet. So funktioniert die Vorschau des Prototyps und Sie können diesen Prototyp auch teilen. Klicken Sie einfach auf die Schaltfläche „Teilen“. Du kannst es an jeden Freund schicken. Sie können es auch an jede Mail oder jeden Figma-Benutzer senden. Sie können es auch in der Figma-Community veröffentlichen. Klicken Sie einfach auf Teilen. Sie können auch in der Pigma-Community veröffentlichen. Diese können sich auch von Ihrem Projekt inspirieren lassen. Sie können die Elemente des Projekts kopieren, genauso wie wir das Projekt anderer duplizieren und dann ändern können . sich also alles um Figma. Dies sind die Grundlagen von Sigma. Wir haben einige grundlegende Funktionen gelernt, wir haben einige erweiterte Funktionen gelernt. Wir haben auch gelernt, wie man Prototyping macht. Das ist alles für diese Sitzung, und das ist alles für diesen Kurs. Ich empfehle Ihnen oder Leuten, dass Sie regelmäßig die Figma-Community besuchen, verschiedene Dinge von anderen Benutzern lernen , die ihre Designs gepostet haben. Figma gibt es immer Neues zu lernen. Du kannst immer die Figma-Community besuchen. Dann können Sie ihre Projekte duplizieren und verstehen, wie sie diese Entwürfe und Projekte erstellt haben . Das ist also alles für diesen Kurs. Ich hoffe, ihr geht es gut in Figma. Viel Glück und vielen Dank.