Figma UI/UX-Design für absolute Anfänger: Entwirf ein Fintech-Dashboard

1. Intro: Die Entwicklung intuitiver und benutzerfreundlicher digitaler Produkte ist im heutigen digitalen Zeitalter unerlässlich Der Erfolg einer Software oder Anwendung hängt stark ihrer Benutzeroberfläche und der Einfachheit ihrer Benutzerführung ab. Viele digitale Produkte, die in der Vergangenheit gescheitert sind, sind gescheitert weil sie den entscheidenden Schritt der Entwicklung eines Prototyps übersprungen haben, was dazu geführt hat, dass sie schlechte Entscheidungen über die Platzierung der Elemente getroffen haben, was zu einer schlechten Benutzererfahrung für die Kunden führte. Anstatt direkt mit dem Programmieren zu beginnen, ist es wichtig, dass Sie einen Designer beauftragen, ein detailliertes Layout für jede Seite zu erstellen. Auf diese Weise können Sie sich schon vor der Erstellung ein Bild davon machen, wie das Endprodukt aussehen wird. So können Sie über Verbesserungen nachdenken, bevor Sie auch nur eine Codezeile anfassen Und wenn Sie es selbst entwerfen können, ist das sogar noch besser, weil Sie nicht viel Geld für einen UX-Designer für die Benutzeroberfläche ausgeben müssen viel Geld für einen UX-Designer für die Benutzeroberfläche Und dieser Kurs soll dir zeigen, wie man genau das macht. Ich zeige Ihnen, wie Sie mit FIMA schöne Benutzeroberflächen für Ihre Software-Apps und Website-Produkte entwerfen schöne Benutzeroberflächen für und sicherstellen können, dass jedes Element für eine verbesserte Benutzererfahrung richtig platziert ist für eine verbesserte Benutzererfahrung richtig platziert Und am Ende dieses Kurses werden Sie Ihr eigenes Dashboard für ein fiktives Finanzunternehmen erstellt haben , und Sie werden über die Fähigkeiten verfügen, in Zukunft Ihre eigenen Benutzeroberflächen mit Figma zu erstellen Ihre eigenen Benutzeroberflächen mit Figma Und nur für den Fall, dass Sie sich fragen wer ich bin, mein Name ist Ken , wer ich bin, mein Name ist Ken. In den letzten fünf Jahren helfe ich Menschen dabei, zu lernen, wie man mit Elementor professionelle Websites erstellt mit Elementor professionelle Websites Ich kann in meinem Profil nachschauen , um meine neuesten Arbeiten zu sehen. Während des gesamten Kurses werde ich Ihnen den Figma-Editor zeigen , Ihnen den Umgang mit den am häufigsten verwendeten Figma-Tools beibringen und Ihnen zeigen, wie Sie Ihre Designprojekte organisieren Und wie ich bereits erwähnt habe, werden Sie lernen indem Sie an einem realen Projekt arbeiten, das zu einem schönen Dashboard für eine fiktive Webanwendung führen wird einem schönen Dashboard für eine fiktive Wir machen hier keine Theorie. Wie Sie inzwischen sehen können, wird dieser Kurs praktisch sein. Er ist darauf ausgelegt, Sie schnell von einem Anfänger zu einem selbstbewussten Figma-Benutzer zu machen einem selbstbewussten Figma-Benutzer zu Aber du fragst dich vielleicht auch, ob dieser Kurs für mich ist Also für wen ist dieser Kurs? Nun, dieser Kurs richtet sich angehende UIUX-Designer, die sich mit dem beliebtesten UIUX-Designtool der Branche vertraut machen möchten sich mit dem beliebtesten UIUX-Designtool der UIUX-Designtool Wenn Sie also schon immer lernen wollten , wie man Figma, das führende UIUX-Designtool , benutzt , ist dieser Kurs genau das Richtige für Sie. Dieser Kurs richtet sich auch an Unternehmer, die ihre eigenen digitalen Produkte entwickeln möchten Wenn Sie also Unternehmer oder Webentwickler sind, aber einige Designfähigkeiten erwerben möchten, damit Sie Ihre eigene Software entwerfen können , bevor Sie Ihren Code schreiben. Dieser Kurs ist ein guter Anfang für Sie. Ich freue mich sehr darauf, loszulegen, und wenn Sie genauso begeistert sind wie ich, lassen Sie uns gemeinsam die Welt von Figma erkunden Aber bevor wir eintauchen, wir einen kurzen Blick auf das Klassenprojekt, an dem wir während des gesamten Kurses arbeiten werden . Los geht's. 2. Projektübersicht: Ich weise immer darauf hin, dass der beste Weg, eine neue Fähigkeit, insbesondere eine technische Fähigkeit, zu erlernen , darin besteht, an einem Projekt zu arbeiten. In dieser Lektion möchte ich Ihnen zeigen , was wir bauen werden. Ich bin also in meinem Editor und das ist das Dashboard, das wir erstellen werden. Wie Sie sehen können, ist es zuallererst sehr gut organisiert. Wir haben es als Dashboard. Aber wenn wir jetzt anfangen jeden Teil des Dashboards zu erweitern, werden Sie feststellen, dass das Dashboard aus drei Hauptteilen besteht. Suchleiste, das ist dieser Abschnitt all diesen Symbolen und der Suchleiste selbst. Wir haben die Seitenleiste, die aus dem Logo und all diesen Schaltflächen in der Seitenleiste und diesem Inhalt besteht, und ich kann sie verschieben. Wenn ich das auswähle, kann ich es auch verschieben. Und wir haben den Hauptinhalt , der sich natürlich aus dem Hauptinhalt zusammensetzt, den Sie sich ansehen möchten, und ich kann alles verschieben. Wenn ich den Hauptinhalt erweitere, ist er auch gut in die verschiedenen Teile unterteilt. Also lass mich einfach hier wegklicken. Wenn ich mit der Maus über ein Element fahre, wird es im Kunstwerk selbst hervorgehoben Schauen Sie sich das einfach an. Wenn ich zum Beispiel diese Karte mit den Gesamteinnahmen auswähle, nenne ich sie Gesamteinnahmen, weil es natürlich die Karte ist, auf der die Gesamteinnahmen angezeigt werden. Dies sind die Nettoeinnahmen, ausstehenden Zahlungen und Ausgaben. Das ist gruppiert. Ich kann es herumtragen und den ganzen Abschnitt neu anordnen. Die Sache ist, es ist auch eine Gruppe anderer Inhalte. Wir verschachteln Gegenstände oder Elemente immer tiefer. Wir haben vom Dashboard aus angefangen. Im Dashboard befinden sich diese drei Elemente, diese drei Gruppen, und innerhalb des Hauptinhalts sind die Karten verschachtelt, die verschiedene Arten von Inhalten enthalten Und in jeder Karte befinden sich weitere Elemente , aus denen die Karte besteht Zum Beispiel haben wir diese Gruppe, bei der der prozentuale Anstieg oder Rückgang zu verzeichnen ist . In der Vergangenheit, vielleicht im Gesamtverdienst oder im Nettogewinn. Es gab einen Rückgang von 3,4, einen Anstieg des Gesamteinkommens um 3,8, und das ist eine Gruppe, die auch die 3,8 hat, den Pfeil und das Rechteck, auf dem sie steht. Also Elemente innerhalb von Elementen innerhalb von Elementen verschachteln. Ich zeige Ihnen, wie Sie Ihre Arbeit organisieren, und ich zeige Ihnen, wie Sie jeden einzelnen Teil dieses Dashboards so erstellen jeden einzelnen Teil , dass Sie, wenn wir fertig sind, ein solches Dashboard haben, das Ihren Freunden oder Kollegen zeigen oder präsentieren gleichzeitig daran, dass wir bei Null anfangen werden. Wir werden keine Vorlagen von irgendjemandem verwenden. Wir werden im Hintergrund beginnen . Fügen Sie dann Schaltflächen hinzu. Fügen Sie das Logo hinzu. Wir werden jede einzelne Karte von Grund auf neu erstellen und jedes einzelne Element hinzufügen. Auf diese Weise können Sie verstehen, wie Sie all diese verschiedenen Tools verwenden , die Sie bei der Arbeit in Figma die meiste Zeit verwenden werden bei der Arbeit in Figma die meiste Zeit verwenden Das ist das Ziel, Ihnen anhand von Beispielen einen Leitfaden zu den am häufigsten verwendeten Tools Dies ist der beste Weg, um zu lernen, wie man diese Tools benutzt. Übrigens, ich werde Ihnen diese Designvorlage zur Verfügung stellen , damit Sie herausfinden und genau sehen können , wie ich jedes einzelne Teil erstellt habe , während Sie an Ihren eigenen Teilen arbeiten. Schauen Sie einfach unter diesem Videoplayer auf der Registerkarte Projekte und Ressourcen Dort finden Sie die Vorlage zusammen mit allen anderen Ressourcen, die ich für Sie nützlich finde. Nur für den Fall , dass du sehen willst, wie ich meine gemacht habe, vergiss nicht, sie herunterzuladen. Wenn Sie also genauso begeistert sind wie ich, wenn Sie lernen möchten, wie man dieses Dashboard erstellt , und die Fähigkeiten erwerben möchten, um jede andere Art von UX-Design zu erstellen, ist dieses Projekt ein guter Anfang für Sie. also, ohne weitere Zeit zu verschwenden, Lassen Sie uns also, ohne weitere Zeit zu verschwenden, uns in der nächsten Lektion treffen und ein Figma-Konto erstellen . Wir sehen uns in Kürze 3. Erstelle ein Figma-Konto: Willkommen zurück. Nun, da wir einen kurzen Überblick darüber haben, was wir bauen werden, ist es an der Zeit, ein Konto bei Figma zu erstellen Ich möchte nur von hier weggehen. Ich komme zu diesem Drop-down-Menü. Klicken Sie dann auf Zurück zu den Dateien. Jetzt werde ich für dieses spezielle Konto auf meine Homepage zurückgebracht . Wenn ich auf dieses Drop-down-Menü klicke, bin ich derzeit mit diesem Profil angemeldet , aber ich bin auch mit diesem anderen Profil hier angemeldet. Lass mich so abmelden. Melden Sie sich von allen Konten ab. Und das werden Sie haben, wenn Sie FIDMA besuchen. Also werde ich kostenlos auf Jetzt loslegen klicken. Wir werden das kostenlose Konto verwenden. Und mach dir keine Sorgen. Ich werde in der nächsten Lektion ein wenig über den kostenlosen Tarif sprechen . Lassen Sie uns also einfach weitermachen und vorerst ein Konto erstellen. Jetzt mache ich einfach mit einem Google-Konto weiter und verwende dieses Konto, und verwende das ich noch nie zuvor verwendet habe. Ich klicke auf Weiter. A, hier sind wir. Da wir zum ersten Mal ein Konto erstellen, werden wir diesen Onboarding-Setup-Assistenten ausführen , der sehr einfach ist So werden Sie in der Figma-Datei angezeigt. Also nehme ich einfach den Standardnamen, aber ich kann hier reinklicken und ihn ändern Sagen wir einfach Can the D und fahren dann fort. Sie können sich auch dafür entscheiden , einige Schritte zu überspringen. Fahren Sie fort. Was für eine Arbeit machst du? Nehmen wir an, ich bin in der Softwareentwicklung tätig, weil ich davon ausgehe, dass Sie vielleicht Schnittstellen für Ihre Software entwerfen möchten . Wählen Sie, was Sie wollen. Sie können auch andere wählen. Softwareentwicklung, fahren Sie fort. Beschreibt einer dieser Punkte Ihre Arbeit bei einem Agenturgründer, sagen wir, ich bin ein Freelancer, oder sagen wir, ich bin ein Gründer Fahren Sie fort. Mit wem arbeiten Sie normalerweise zusammen? Teamkollegen, Kunden, niemand, nur ich. Fahren Sie fort. Ich möchte einige Mitarbeiter einladen Nein. Sie können diesen Schritt überspringen, aber wenn Sie mit Personen an diesem speziellen Projekt zusammenarbeiten möchten , können Sie ihnen E-Mails senden. Sie können ihre E-Mails hier eingeben. Überspringe das. Was führt dich heute nach Figma Es für mein Team einrichten, einen neuen Job oder ein neues Projekt beginnen Ja. Und hier können Sie eine Reihe von ihnen auswählen. Also checke ich einfach die Dinge aus. Fahren Sie fort. Haben Sie Figma schon einmal für Produkte verwendet Nein, es ist mein erstes Mal. Fahren Sie fort. Welchen Plan hättest du gerne? Mir würde dieser Plan gefallen. Deshalb werde ich in der nächsten Lektion mehr über die Dateien und Projekte sprechen , auf die Sie mit diesem kostenlosen Plan Zugriff haben . Lassen Sie uns also weitermachen und auf Weiter klicken. Was möchtest du zuerst tun? Lassen Sie uns also über das Entwerfen mit Figma sprechen , denn wir wollen Fig Jam nicht verwenden Das ist ein ganzer Kurs für sich. Fertig stellen. Und hier sind wir. Sobald wir den Einrichtungsassistenten fertiggestellt haben, werden wir zu dieser kurzen Tour weitergeleitet, die uns die verschiedenen Teile des Editors zeigt. Wir werden das nicht durchgehen, sondern nehmen uns einen Moment Zeit und gehen die gesamte Tour durch , um uns die verschiedenen Teile des Editors anzusehen. Aber Sie werden sich daran gewöhnen, sie zu verwenden, wenn wir die verschiedenen Teile unserer Datei erstellen. Es scheint, weil ich mich abgemeldet habe, habe ich die Datei nicht geöffnet Ich werde mich in mein anderes Konto einloggen und es hier hinzufügen, damit ich auch sehen kann , was wir erstellen werden Im Grunde genommen ist das so, wie man ein Konto bei FIMMA erstellt. Lassen Sie uns in der nächsten Lektion über Dateien und Projekte im kostenlosen Tarif sprechen Dateien und Projekte im kostenlosen Wir sehen uns in Kürze. 4. Figma-Editor-Übersicht: I. Und willkommen zurück. Nun, da Sie ein Figma-Konto erstellt haben, ist es an der Zeit, einen kurzen Blick in den Editor zu Und wenn Sie auch den Editor durchgegangen sind und aufgefordert wurden, die Blase zu bearbeiten , die sich hier befand, müssen Sie diese blaue Blase gesehen haben Sie sind ein paar Schritte durchgegangen und haben die verschiedenen Teile des Editors gesehen. Und der letzte Schritt bestand darin, entweder hier weiter zu üben oder eine neue Datei zu öffnen. Also habe ich geklickt, eine neue Datei erstellt, und jetzt bin ich in einem leeren Editor Das ist dasselbe. Aber jetzt hat das natürlich einige Inhalte. Also hier ist ein leerer Editor. Als Erstes möchte ich natürlich darauf hinweisen, Sie den Namen dieser speziellen Datei, dieser Designdatei, ändern können, und sie befindet sich derzeit in Entwürfen Ich möchte ihr also einen Namen geben, vielleicht das Design von KI-Finanz-Web-Apps, weil wir eine Web-App, ein Web-App-UI-Design oder etwas Ähnliches entwerfen . Wenn ich jetzt zu den Dateien zurückkehre, wir sofort zum Entwurfsordner unter dem Team von Ken Koko weitergeleitet Entwurfsordner unter dem Team von Ken Koko Wie Sie sehen können, haben wir ein automatisch generiertes Team. Als wir den Setup-Assistenten beendet hatten, Figma dieses Team automatisch für uns erstellt, und wir haben Entwürfe und wir haben alle Projekte Jetzt haben wir in allen Projekten nur dieses Teamprojekt Wir werden darüber sprechen, was ein Projekt ist, was ein Team ist, was eine Seite ist, was eine Designdatei ist. Fühlen Sie sich also nicht von all dem überwältigt. Der Punkt, den wir daraus ziehen sollten, ist, dass diese drei Dateien in den Entwürfen enthalten sind Dies sind die Übungsdateien, die wir uns angesehen haben, zum Beispiel diese, Figma-Grundlagen, Figma-Grundlagen Jetzt können wir diese Datei von hier aus verschieben, indem wir mit der rechten Maustaste darauf klicken und Datei verschieben Und unter dem Team von Ken Koko, diesem Team, haben wir Entwürfe Wie Sie sehen können, befinden wir uns derzeit im Entwurf. Deshalb haben wir das Häkchen, aber wir können es auf Tim Project verschieben Jetzt enthält der Entwurfsordner also nur diese beiden Dateien. Wenn ich jetzt zu Tim Project gehe, haben wir jetzt die Designdatei für die AI Finance-Web-App Lassen Sie mich jetzt darauf doppelklicken. Wenn Sie mit der Arbeit an einem Projekt beginnen möchten, müssen Sie zunächst einen Frame verwenden. Also werde ich darauf klicken. Das ist das Frame-Tool. Wenn Sie auf das Drop-down-Menü klicken, enthält es einige andere Tools, die ich selten verwende Sie können jedoch mehr darüber erfahren, wofür sie verwendet werden Aber einen Rahmen nenne ich gerne den Bildschirm. Wenn Sie also zum Beispiel hier Frame auswählen, sehen wir Frame-Vorlagen, die wir verwenden können. Wenn Sie also eine Telefon-App erstellen, dies aber jetzt eine Web-App ist, sagen wir, Desktop. Nehmen wir zum Beispiel den Desktop. Nun, das ist ein Bildschirm, den wir mit unserem Design füllen können mit unserem Design füllen Wenn ich es lösche und der Frame aktiv ist. Wir können es auch manuell zeichnen. Und wenn wir die Größe bearbeiten möchten, können wir hier reinkommen und unsere Abmessungen manuell eingeben. Die Breite, die Höhe, die Breite können hier also 1920 sein. Steuerung und Scrollrad zum Verkleinern. Mittleres Mausrad Drücken Sie zum Ziehen das mittlere Mausrad nach unten Die Höhe kann 1080 betragen. Das ist Full-HD. So erstellt man also einen Bildschirm oder einen Rahmen. Natürlich gibt es hier auch andere Tools. Dies ist das Auswahlwerkzeug, und wir haben hier andere Tools. Sie wissen also wahrscheinlich schon, was diese Tools tun. Wenn Sie Text hinzufügen möchten, können Sie diesen verwenden. Natürlich weiß ich, dass ich diese Tools überspringe, und das liegt daran, dass wir im Laufe des Kurses sehen werden, wie man mit den am häufigsten verwendeten Tools arbeitet Also mach dir darüber keine Sorgen. Ich führe dich nur herum. Das nächste, was Ihnen aufgefallen sein wird ist, als wir einen Rahmen hinzugefügt haben, dieser wurde automatisch als Ebene erstellt. Immer wenn wir etwas hinzufügen, wenn ich das Rechteckwerkzeug auswähle und ein Rechteck hinzufüge, wird es hier hinzugefügt, aber es ist eine eigene Ebene. Wenn ich einige Texte hinzufüge und anfange zu tippen, ist das eine weitere Ebene. Wenn ich eine Linie hinzufüge, ist das eine weitere Ebene. Alles existiert als Ebene, aber wir können sie gruppieren. Wenn ich die Linie auswähle, ist sie bereits ausgewählt, und das Rechteck und die Texte, werden Sie feststellen, dass sie auch hier hervorgehoben sind. Wenn ich Strg G drücke, kann ich sie gruppieren und jetzt sind sie Gruppe eins. Ich kann sie Elemente nennen. Wenn ich die Elemente erweitere, können Sie jetzt die drei Elemente sehen, die wir hier haben. Hier drinnen kann ich auch diese beiden auswählen und sie gruppieren, Control G und innere Gruppe. Jetzt ist diese innere Gruppe innerhalb von Elementen verschachtelt, die wiederum innerhalb des Rahmens verschachtelt sind Wenn ich es erweitere, können wir jetzt diese beiden sehen Wenn ich die Gruppe selbst auswähle, kann ich die beiden mit mir herumtragen. Wenn ich das auswähle, trage ich die Elementgruppe, und wenn ich den Rahmen auswähle, trage ich die gesamte Frame-Gruppe. Ich hoffe, Sie verstehen jetzt , wie man mit Gruppen arbeitet, die Hierarchie von Gruppen. Wenn ich das jetzt auswähle, drücke Shift G, alle Gruppen zu gruppieren, die du ausgewählt hast. Und natürlich haben wir zunächst die Gruppierung der äußeren Gruppe aufgehoben Wenn ich jetzt wieder Shift G drücke, wir die Gruppierung der inneren Gruppe Du kannst mich das rückgängig machen lassen. Sie können auch Jetzt ist das eine Gruppe auswählen. Wenn ich mit der rechten Maustaste klicke, kann ich einfach so gruppieren. Sobald wir dieses Rechteck ausgewählt haben, werden wir hier einige Eigenschaften aufrufen, die wir ändern können. zum Beispiel die Füllfarbe aus, Wählen Sie zum Beispiel die Füllfarbe aus, wir können sie in Rot ändern. Wie wir sehen können, können wir auch einen Strich hinzufügen. Wenn Sie hier also Plus auswählen, wird ein schwarzer Strich hinzugefügt. Und wenn ich heranzoome, stelle ich fest, dass wir diesen schwarzen Strich haben, und wenn ich ihn erneut auswähle, können wir zum Strich gehen und seine Breite hinzufügen. Wählen Sie hier hinein und verwenden Sie den App-Pfeil auf der Tastatur. Wir können es auch in eine gestrichelte Linie ändern, indem wir in diesem Menü von durchgehend zu D wechseln, und jetzt ist es eine gestrichelte Solange es ausgewählt ist, können wir das Feld entfernen indem wir auf dieses Minuszeichen klicken Solange es ausgewählt ist, können wir auch mit dem Grenzradius herumspielen. Das sind die Ecken. Wir können auch einfach direkt hierher gehen und diese Punkte ziehen. Oder wir können hier reinkommen, dort reinklicken und einen bestimmten Wert eingeben. Vielleicht 20, und jetzt hat es einen Grenzradius von 20. Wenn ich 50 sage, einfach so. Wenn ich hier dieses unabhängige Ecksymbol auswähle, können wir das obere untere linke, obere rechte und untere rechte Bild ändern . Lass uns das versuchen. Oben rechts 50. Sagen wir nun oben rechts Null und unten rechts unten links Null. Da haben wir's. Wenn ich ausgewählt habe, können wir zurückgehen und erneut eine Füllfarbe hinzufügen und den Strich entfernen. Wenn wir den Text auswählen, Eigenschaften angezeigt, die sich auf Text beziehen Wir können die Schriftstärke ändern, extra fett. Wir können auch die Größe ändern, indem hier reinkommen und vielleicht 32 eingeben. Wir können von Inter zu einer anderen Schriftart wechseln. Geben wir vielleicht Montserrat Enter ein. Wir können die Ausrichtung des Textes ändern. Nun, wenn wir einen Absatz haben. Lassen Sie mich zum Beispiel einfach einen Absatz aus einem dieser Absätze kopieren Kopieren Sie diesen. Füge das dort ein. Jetzt werden Sie feststellen, dass ich hier einen langen Absatz eingefügt habe, aber er ist in einer Zeile, und das liegt an dieser Einstellung hier. Es kann entweder die automatische Breite sein, aber wenn Sie erneut darauf klicken, kann es entweder die automatische Breite sein oder Sie können sie auf eine feste Größe ändern Lassen Sie mich nun diese Ecke hier auswählen und sie dort platzieren. Wenn ich das nun erweitere, werden Sie feststellen, dass es sich von oder Breite zu fester Größe geändert hat von oder Breite zu fester Größe , weil es innerhalb der spezifischen Abmessungen des Textfeldes liegen muss , in dem es sich befindet. Wenn wir es jetzt wieder zurückschalten, ändert es sich zu dieser einzigen Zeile. In Ordnung. Das ist im Grunde ein kurzer Überblick über den Editor. Verlauf werden wir mehr über weiteren Verlauf werden wir mehr über die verschiedenen Teile des Editors erfahren. Denken Sie daran, dass mein Ziel mit diesem Kurs darin besteht, Ihnen zu zeigen, wie Sie die verschiedenen Tools verwenden können , die Sie bei der Arbeit in Figma die meiste Zeit Nachdem das geklärt ist, fahren wir mit dem nächsten Kurs fort, in dem wir über Teams, Projekte, Designdateien und Seiten sprechen werden Projekte, Designdateien und Seiten Was meinen sie? Was fällt in was. Lass es uns herausfinden. 5. Teams, Projekte, Dateien und Seiten: Ich möchte zu diesem Drop-down-Menü und zurück zu Dateien gehen . Das ist also das Projekt, an dem ich beteiligt war. Bevor wir zu weit gehen, möchte ich zunächst zu diesem Drop-down-Menü kommen, und wie Sie sehen können, kann ich ein Konto hinzufügen. Lassen Sie mich einfach ein Konto hinzufügen, weil ich unser Referenzdesign öffnen möchte, das ich zuvor entworfen Lassen Sie mich also einfach anmelden. Und das ist es. Lass mich sehen. Lass mich darauf doppelklicken. Ja, hier sind wir. Wenn ich jetzt zu den Dateien zurückkehre, bin ich auf dieser Registerkarte als Ken Bs angemeldet. Lass es mich einfach so ziehen, dass es der erste hier ist. Auf dieser Registerkarte bin ich als D angemeldet. Sie können mit verschiedenen Konten auf verschiedenen Tabs angemeldet sein verschiedenen Konten auf verschiedenen Auf diese Weise kann ich jetzt, wenn ich zum Konto von Ken Bersa zurückkehre, darauf doppelklicken Und wenn ich es öffne, kann ich es einfach von diesem Fenster abdocken und es als eigenes Fenster belassen, sodass wir einfach mit der Alt-Tabulatortaste zwischen den beiden wechseln können einfach mit der Alt-Tabulatortaste zwischen den beiden wechseln Nun, zurück hier, als wir mit der Einrichtung unseres Figma-Kontos fertig waren, als wir den Einrichtungsassistenten durchgingen, Figma automatisch ein Team für uns erstellt Im Moment sollten Sie hier ein Team haben, das etwas Tee sagt Jetzt, wo das erledigt ist, will ich es einfach loswerden , weil das Klappern ist Und jetzt, wo wir in diesem Team sind, Ken Pumas Team. Lass mich einfach darauf klicken Ja. Stellen Sie also sicher, dass Sie einfach auf das Drop-down-Menü und dann auf Ihr Team klicken Jetzt bist du in deinem Team. Hier haben wir ein Projekt. Wenn wir ein zusätzliches Projekt wollen, müssen wir auf den Pro-Plan umsteigen. Wenn ich darauf klicke, um ein Projekt hinzuzufügen, oder hier, erhalte ich die Aufforderung , auf Professional umzusteigen. Aber ein Projekt ist mehr als genug für unsere Arbeit, unsere persönlichen Projekte. Natürlich möchten Sie vielleicht diesen Namen des Projekts ändern. Also gehe ich zu diesem Drop-down-Menü, benenne es um und nenne es Control A. Wenn ich das lösche, AI Finance, dann benenne ich es um Das ist der Name dieses speziellen Teams. Lassen Sie mich einfach das Wort Team hinzufügen. Team da. Da haben wir's. Wenn wir hier auf dieses Drop-down-Menü klicken, können Sie auch ein anderes Team erstellen Vielleicht haben Sie ein Fitness-Team, ein Fitness-App-Team. Sie haben also ein anderes Team, das an einer Fitness-App arbeitet, und Sie können wählen, ob Sie vorerst mit anderen zusammenarbeiten oder Ski fahren möchten. Wähle Starter. Und jetzt dein internes Fitness-App-Team. Klicken Sie in dieses Drop-down-Menü, um zurück zu AI Finance zu wechseln oder ein weiteres Team zu erstellen Also möchte ich zu AI Finance zurückkehren. Da haben wir's. Und jedes Team wird ein Projekt haben. Das AI Finance-Team hat also ein Projekt. Aber jedes Projekt kann drei Designdateien haben. Wie Sie sehen können, haben wir diese Originaldatei. Ich kann noch einen hinzufügen, noch einen. Aber wenn ich zum vierten gehe, werde ich gebeten, ein Upgrade durchzuführen. Also lass mich einfach darauf doppelklicken. Und nenne es vielleicht KI-Finanz-Web-App. Gehen wir also zurück zu den Dateien. Wir sind also im Teamprojekt, wir können das Projekt umbenennen. Dieses Teamprojekt hier ist, wenn ich auf das Drop-down-Menü klicke und einfach das KI-Finanzteam auswähle, ist das Teamprojekt hier, das die drei Designdateien enthält, die wir gerade erstellen werden? Wenn ich recht habe, kann ich es umbenennen , um Designdateien zu finanzieren. Das tut mir leid. Designdateien von AI Finance. Also los geht's. Denken Sie jetzt daran, dass wir eine Datei namens AI Finance Web App erstellt haben . Vielleicht ist dies die Datei, mit der wir die Version der Webanwendung entwerfen. Wenn ich jetzt noch eine hinzufüge, daran, dass wir uns im AI Design Files-Projekt befinden. Diese kann als mobile AI Finance-App bezeichnet werden. Zurück zu den Dateien. Sobald wir eine Designdatei verlassen, sobald wir den Editor verlassen, werden wir zurück zu einem Projekt weitergeleitet. Und denken Sie daran, wir haben nur ein Projekt für jedes Team. Im Moment befinden wir uns also im AI Finance Design Files-Projekt. Lass mich das einfach Projekt nennen. Design-Projekt für KI-Finanzen. Wir können uns aber auch mit dem Team befassen, das dieses Projekt und alle anderen darin dem Team befassen, das dieses Projekt enthaltenen Projekte betreut , wenn wir Teil des kostenpflichtigen Plans sind. Wenn ich ins AI Finance-Team gehe, alle Projekte, die wir hier haben werden alle Projekte, die wir hier haben, unter dem Team aufgeführt. Aber denken Sie daran, dass wir in jedem Team nur ein Projekt haben können, wenn wir den kostenlosen Plan verwenden . Wenn wir uns nun in einem Projekt befinden, diesem Projekt, das sich derzeit im KI-Finanzteam befindet, darauf klicken, um alles zu sehen, was in dem Projekt enthalten ist können wir einfach darauf klicken, um alles zu sehen, was in dem Projekt enthalten ist. Jetzt sind wir in dem Projekt , das im Team ist. , dass wir in diesem Projekt Denken Sie daran, dass wir in diesem Projekt zwei Designdateien haben. Wir können eine weitere Designdatei hinzufügen. Nun, das ist der dritte. Nehmen wir an, wir haben vielleicht auch eine Website-Version unserer App, I Finance-Website. Das dient zu Informationszwecken, und wir möchten den Leuten von unserer App erzählen Jetzt haben wir hier drei Dateien AI Finance-Website, AI Finance Mobile App, AI Finance Web-App Wenn wir versuchen, eine Designdatei hinzuzufügen, erhalten wir hier die Meldung, dass wir ein Upgrade durchführen sollen , da wir in einem Projekt, das sich in einem Team befindet, nur drei Designdateien haben können in einem Projekt, das sich in einem Team befindet, nur drei Designdateien . Ich glaube, ich hatte hier etwas geschaffen, das uns bei der Hierarchie helfen sollte. Lassen Sie mich Adobe Illustrator einfach sehr schnell öffnen. Und hier sind wir. Wir haben ein Team. Zum Beispiel haben wir dieses KI-Finanzteam, und das Team kann nur ein Projekt haben , wenn wir den kostenlosen Plan verwenden. Ein Team kann ein Projekt haben. Wenn wir ein zusätzliches Projekt wollen, müssen wir den bezahlten Tarif für Profis nutzen. Ein Team kann ein Projekt haben. Ein Team, das KI-Finanzteam, hat ein Projekt , nämlich das KI-Designprojekt. Lassen Sie mich einfach ins Team selbst gehen. Es gibt nur dieses einzige Projekt namens AI Finance Design Project. Wenn wir zusätzliche Projekte hinzufügen möchten, müssen wir zum kostenpflichtigen Plan wechseln . Ein Team hat ein Projekt. Sie können jedoch mehrere Teams erstellen. Wir haben ein Fitness App-Team mit derselben Hierarchie. Wenn wir dazu wechseln, hat dies ein Projekt, das wir nicht umbenannt haben, und das Projekt hat noch keine Designdateien. Wir können auch ein drittes Team zusammenstellen. Vielleicht haben wir ein Marketplace-App-Team. Erstelle das. Lass uns das vorerst überspringen. Wie Sie sehen können, haben wir bisher drei Teams und Sie können weiterhin Teams erstellen. Lassen Sie mich einfach zurück zur KI-Finanzierung wechseln. Das Team des KI-Finanzteams hat ein Projekt, ein kostenloses Projekt namens AI Finance Design Project, und jedes Projekt kann drei Designdateien haben. Dieses KI-Designprojekt besteht aus drei Designdateien. Wenn wir eine zusätzliche wollen, müssen wir auch drei Figma Design- und FIJ-Dateien bezahlen Sobald wir uns in einer Design-Datei befinden, haben wir auch Zugriff auf drei Seiten, aber ich verwende übrigens nie mehr als eine Seite Wenn ich zum Beispiel die mobile App öffne, die mobile App öffne, doppelklicke ich darauf, die Designdatei für die mobile App. Wir sind gerade auf Seite eins. Wenn wir zusätzliche Seiten wollen, können wir herkommen. Wir sind auf Seite eins. Ich kann eine zusätzliche Seite hinzufügen, Seite zwei, Enter, Seite drei, Enter Wenn ich versuche, eine zusätzliche Seite hinzuzufügen, kann ich sie nicht bekommen. Normalerweise verwende ich also nur eine Seite. Lassen Sie mich das einfach löschen, und jetzt bleibt mir diese einzige Seite übrig. Lass mich das zusammenklappen. Hier kann ich jetzt anfangen, Elementebenen auf dieser ersten Seite hinzuzufügen. Für mich ist das in der Regel mehr als genug für mein Projekt, und das werden Sie sehen. Aber im Moment möchte ich, dass wir uns kurz die Hierarchie ansehen und wissen, wie Projekte, Dateien und Seiten zusammenhängen. Wir werden Fig Jam nicht anfassen , weil das ein ganzer Kurs für sich ist. Vielleicht mache ich das später. Im Moment konzentrieren wir uns nur darauf, dieses Dashboard mit dem Figma-Editor zu entwerfen Wir konzentrieren uns nicht auf Fig Jam. Nachdem das gesagt ist, denke ich, dass diese Lektion viel länger geworden ist, als ich erwartet hatte. Aber ich wollte das wirklich nach Hause fahren. Ich wollte, dass du diese Klarheit hast, weil dies einer der verwirrendsten Teile von Figma für Anfänger Sie verstehen nicht wirklich, was eine Datei ist, was ein Projekt ist, was ein Team ist Jetzt, wo Sie das alles verstanden haben, sind Sie meiner Meinung nach bereit, mit dem Aufbau unseres Dashboards zu beginnen. In der nächsten Lektion sehen wir uns an, wie Sie die Seitenleiste erstellen. Wir sehen uns in Kürze. 6. Hinzufügen eines Hintergrunds und eines Logos: Jetzt sind wir bereit, mit der eigentlichen Gestaltung des Dashboards zu beginnen , und wir sagen, dass wir mit der Seitenleiste beginnen werden. Wie Sie sehen können, müssen wir als Erstes das Logo importieren. Also zurück zu unserem Arbeitsbereich, wo ist er? Hier sind wir. arbeiten wir an der Web-App-Version unserer App. Also doppelklicke ich darauf und jetzt sind wir hier. Als erstes wollen wir den eigentlichen Bildschirm erstellen. Dazu wähle ich dieses Tool aus und sobald ich es ausgewählt habe, werden hier mehrere Vorlagen angezeigt , mit denen wir schnell beginnen können. Da es sich um einen Desktop handelt, möchte ich das Telefon auswählen, das Telefon zusammenklappen und den Desktop erweitern. Dann wähle ich das Macbook Pro 16 Zoll. Oder lass uns das einfach wählen . Da haben wir's. Wie Sie sehen können, können Sie natürlich, wenn ich dieses Tool noch einmal auswähle, wenn Sie für Telefone entwerfen möchten, hier jedes gewünschte Telefon auswählen. Sie mich als Nächstes zu Lassen Sie mich als Nächstes zu unserer Referenz zurückkehren. Ich möchte hier diese schwache Linie hinzufügen. Lassen Sie uns zunächst den Hintergrund hinzufügen. zurückwechsle, komme ich hierher und wähle das Rechteckwerkzeug aus. Wenn Sie das Rechteckwerkzeug nicht sehen können, klicken Sie auf das Drop-down-Menü und wählen Sie es aus der Liste aus. Dann ziehe ich es einfach und bedecke den gesamten Bildschirm damit. Oder Rahmen. Damit möchte ich einen sehr dunklen auswählen. Lassen Sie uns zunächst zu Blau wechseln. Sagen wir das Blau und dann vielleicht dieses Dunkelblau. Ich mache es nur im Freestyle, aber für dich musst du mit bestimmten Farbcodes arbeiten Hier ist der Farbcode. Wenn Sie die Farben verwenden möchten, die ich auswähle. Lass es uns bis zu diesem Punkt dunkler machen. Das ist der Farbcode. Lassen Sie mich nun dieses Drop-down-Menü auswählen und Zeile wählen. Wählen Sie diese Option, um es nur auf oben und unten zu beschränken und sich nicht von links nach rechts zu bewegen Sie können die Umschalttaste gedrückt halten. Das bedeutet, dass Sie sich nur für eine vertikale Bogenrate auf und ab bewegen . Und da haben wir's. Ich möchte die Linie selbst auswählen und die Strichfarbe auswählen. Ich möchte dazu gehen und es vielleicht bis zu diesem Punkt ziehen. Nur um sicherzugehen, dass es dunkel ist. Ich denke, das ist ein guter Ort. Um das Logo zu importieren, klicke ich auf dieses Drop-down-Menü Datei Bild platzieren Wie Sie sehen, haben wir die Tastenkombination Strg Shift K. Ich kann hier einfach auf eine beliebige Stelle klicken dann Strg Shift K. Dadurch wird der Explorer geöffnet und ich kann direkt zu der Stelle gehen, an der ich diese Elemente habe Ich habe diese Polo-Call-Ressourcen. Wir haben das Logo hier, falls Sie dieses Logo verwenden und auf eine beliebige Stelle klicken und es ziehen möchten dieses Logo verwenden und auf eine beliebige Stelle klicken und es ziehen Werde das Logo hier platzieren. Also halte ich die Umschalttaste gedrückt und wähle dann eine der Ecken aus und ziehe, um die Größe zu ändern Wenn Sie die Umschalttaste nicht gedrückt halten, bewegt sich der Rahmen von allen Seiten, aber wenn Sie die Umschalttaste gedrückt halten, bewegt er sich nur proportional Denken Sie daran, dass Sie bei gedrückter Umschalttaste K die Taste gedrückt halten, doppelklicken und dann eine beliebige Stelle auswählen und zum Importieren ziehen Da haben wir es also. Ich denke, wir beenden diese Lektion gleich hier. Wir haben gelernt, wie man den Hintergrund erstellt, diese Linie hinzufügt, Farben ändert und ein Bild importiert. Das ist auch die gleiche Methode, um jeden anderen Bildtyp zu importieren , den Sie importieren möchten. Lassen Sie uns also vorerst genau dort aufhören. In der nächsten Lektion sehen wir uns an, wie man eine Schaltfläche erstellt. Wir sehen uns also in Kürze. 7. Erstellen Sie die Sidebar-Schaltflächen: Willkommen zurück. Nachdem wir einen Hintergrund erstellt und das Logo hinzugefügt haben, ist es an der Zeit, die Schaltflächen zu erstellen. Lassen Sie mich einfach heranzoomen, indem ich die Strg-Taste gedrückt halte und mit dem Mausrad scrolle Halten Sie dann das Mausrad alleine gedrückt. Ich kann das ziehen und in die Mitte legen, damit wir es sehen können. Nun, Sie werden hier feststellen, wir einige Texte und ein Symbol haben. Und natürlich haben wir den Button-Hintergrund. Ich wechsle wieder hierher. Strg gedrückt halten und mit dem Mausrad scrollen Lassen Sie die Steuerung los, halten Sie das Mausrad gedrückt und ziehen Sie. Ich möchte hierher kommen und dieses rechteckige Werkzeug auswählen und an dieser Stelle ziehen und ablegen und loslassen. Jetzt werden Sie feststellen, dass es scharfe Ecken hat. Um es mit abgerundeten Ecken zu versehen, können wir hier reinklicken. Und geben Sie vielleicht zehn Enter, und ich denke, das ist eine gute Schaltfläche mit abgerundeten Ecken. Bei unserem Referenzdesign hier ist das natürlich heller als der Hintergrund. Wenn wir das auswählen, gehen wir hier zum Feld. Wählen Sie den Hintergrund aus. Ich denke, das ist die Hintergrundfarbe, die wir wählen. Nein, das ist die Hintergrundfarbe weil wir sie jetzt sehen können, aber jetzt möchte ich sie heller machen. Vielleicht bis zu diesem Punkt. Wir versuchen nur, mit Farben zu spielen. Aber denken Sie daran, wenn es sich um eine tatsächliche Marke handelt, an der Sie arbeiten, müssen Sie die Markenfarben verwenden. Seien Sie kreativ mit ihnen. Ich glaube, das gefällt mir. Als Nächstes möchte ich den Text auswählen und auf eine beliebige Stelle klicken, nicht unbedingt innerhalb der Schaltfläche. Ich kann auch hier klicken und Übersicht eingeben. Klicken Sie draußen oder irgendwo hier. Dann wähle das aus. Lass uns die Größe 16 und den Text 16 machen, einfach so. Sie können die Schriftart ändern, wenn Sie möchten. Im Moment ist es ter. Wir können vielleicht Monat Enter wählen. Wir können das Gewicht ändern, sodass ich Fett wählen kann . Da haben wir's. Als Nächstes möchten wir das Symbol hinzufügen. also zurückwechseln, werden Sie feststellen, dass ich hier bereits einen Tab für Vektorsymbole geöffnet habe, der als flaches Symbol oder als flaches Symbol bezeichnet wird, je nachdem, wie Sie es aussprechen möchten. Also gebe ich ein, was wir hier haben. Analytics, geben Sie zum Beispiel ein. Ordnung. Also hier sind wir. Ich habe diese Analyse hier und bin bereits angemeldet. Wenn Sie nicht angemeldet sind, können Sie die Symbole nicht bearbeiten , bevor Sie sie herunterladen. Wenn ich das Symbol selbst auswähle, wird die Option zum Bearbeiten des Symbols angezeigt Ich klicke auf das Symbol „Bearbeiten“. Solange dieses ausgewählt ist, klicke ich auf die Farbe und ändere sie in Weiß. Dann lade es herunter. Ich wähle Größe 64 Pixel. Kostenloser Download. Jetzt, wo wir es heruntergeladen haben. Lass mich einfach wieder hierher wechseln. Wir haben es heruntergeladen. Ich kann es hierher ziehen und dort ablegen. Halten Sie die Umschalttaste gedrückt, wählen Sie hier eine Ecke aus und ändern Sie deren Größe Platziere es dort. Sie können auch hierher kommen und auf dieses Symbol hier klicken, um es im Ordner anzuzeigen. Es öffnet sich dort, wo es sich in Ihren Downloads befindet. Und dann kannst du es dort hineinziehen und dort ablegen. Lösche das. Du kannst auch Shift K drücken, denk dran. Dann gehe zu Downloads. Doppelklicken Sie darauf und ziehen gedrückter Umschalttaste, um die Größe proportional zu Das sind alles verschiedene Möglichkeiten, das zu tun. Da haben wir's. Lass mich das einfach positionieren. Eine Möglichkeit, Objekte in Ihrem Kunstwerk zu positionieren , besteht darin, vielleicht den Text, das Symbol und dann schließlich die Schaltfläche auszuwählen . Wenn wir nun die Elemente ausrichten, werden sie in Bezug auf die Schaltfläche ausgerichtet. Wenn ich hierher komme, um vertikale Mittelpunkte auszurichten und darauf zu klicken, wie Sie gesehen haben, haben sie sich relativ zum Hintergrund der Schaltfläche selbst verschoben . Es wurde nicht verschoben, aber alles andere wurde verschoben, weil es das letzte Element ist, das ich ausgewählt habe. Also noch einmal, wenn ich das dort hinlege und es vertikal in der Mitte haben möchte, kann ich es auswählen, dann die Schaltfläche selbst, das Objekt, an dem das andere Objekt ausgerichtet werden soll. Klicken Sie dann auf „ Vertikal mittig ausrichten“, und jetzt befindet es sich in der Mitte des zuletzt ausgewählten Elements. Damit werde ich diese drei auswählen. Steuere G und gruppiere sie und benenne sie in Taste eins um. Wenn ich nun die Alt-Taste gedrückt halte, scheint der Mauszeiger, wie Sie sehen, doppelt vorhanden zu sein, und das ist ein Hinweis darauf, dass wir diese Taste gleich duplizieren Und wenn Sie die Maus ziehen, halten Sie die Umschalttaste gedrückt , um sie so zu beschränken , dass sie sich nicht nach links und rechts bewegt Halten Sie die Umschalttaste gedrückt, lassen Sie sie genau dort los und drücken Sie dann die Taste D, um mit dem Duplizieren fortzufahren Control D, und jetzt haben wir mehrere Tasten. Jetzt wiederhole ich den Vorgang für diese anderen Schaltflächen, den gleichen Vorgang der Bearbeitung dieses Textes, ich wähle diesen Text ich wähle ändere diese beiden Reihenfolgen. Dann gehe ich zu Flat Icon oder Flatcon und suche vielleicht nach Bestellungen Lass mich einfach nach Bestellungen suchen. Haltet einfach nach schönen kreativen Icons Ausschau. Lass mich die Verkäufe sehen. Ordnung. Also lasse ich mich das auswählen. Symbol bearbeiten. Solange dies ausgewählt ist, lädt White PNG 64 kostenlos herunter. Es wurde heruntergeladen. Wechsle hier zurück. Vergrößern. Geh her, ziehe das per Drag & Drop. Halten Sie die Umschalttaste gedrückt, nehmen Sie eine Ecke. Wähle das aus, entferne es. Wenn Sie nun eine Gruppe haben und ein Element innerhalb dieser Gruppe auswählen möchten, halten Sie die Strg-Taste gedrückt. Sie können ein einzelnes Element innerhalb einer beliebigen Gruppe auswählen. Wenn Sie die Steuerung loslassen, können Sie keine Elemente innerhalb der Gruppe auswählen , es sei denn, Sie doppelklicken. Jetzt möchte ich das neu positionieren . Halten Sie die Umschalttaste gedrückt. Und das lasse ich da stehen. Also werde ich den gleichen Vorgang für die restlichen Tasten wiederholen und wir sehen uns, wenn ich fertig bin. Nun, nur für den Fall, dass Sie feststellen, dass ein Objekt nicht zu einer Gruppe gehört , der Sie angehören wollten. Zum Beispiel befindet sich dieses Symbol jetzt nicht innerhalb dieser Gruppe, sondern außerhalb. Wenn ich diese Gruppe auswähle, ist es Taste drei, und das Symbol ist hier oben. Hier ist die Gruppe und hier ist die Brieftasche. Ich kann die Brieftasche einfach in Gruppe drei ziehen und sie dort ablegen. Wenn ich jetzt die Gruppe auswähle, jede einzelne Gruppe. Also Nachrichten, lass uns zu Nachrichten gehen. Lass mich das einfach so nach unten ziehen. Ändere das in Einstellungen. Wählen Sie das Auswahlwerkzeug aus. Dann werde ich hier sein. Wähle das aus. Bearbeiten Sie das Symbol. Ändern Sie die Farbe in Weiß, Download, PNG, 64, kostenloser Download. Geh wieder rein. Ziehen und Shift gedrückt halten. Natürlich ist es draußen, das ist Taste Nummer sechs, also ist es automatisch drinnen, also kein Problem. Halten Sie die Strg-Taste gedrückt, um dieses Symbol auszuwählen, entfernen Sie es, und halten Sie die Strg-Taste gedrückt, um es auszuwählen. Platzieren wir es dort. Halten Sie vielleicht die Umschalttaste gedrückt und wählen Sie das aus. Es ist richtig ausgerichtet. Das ziehe ich einfach. Ich hoffe, du hast den Prozess befolgt, den wir mit der ersten Taste gemacht haben, und jetzt hast du ein paar Knöpfe. Ich denke, das ist das Ende dieser Lektion. In der nächsten Lektion sehen wir uns an, wie Sie die Suchleiste erstellen. Wir sehen uns in Kürze. 8. Erstellen Sie die Suchleiste: Willkommen zurück. Jetzt ist es an der Zeit, die Suchleiste zu erstellen. Wir werden dieselben Prinzipien anwenden, die wir hier angewendet haben. Wir wechseln zurück zu unserem Editor. Hier sind wir. Als erstes müssen wir dieses rechteckige Werkzeug auswählen. Ich werde einfach ziehen und vielleicht loslassen, wenn ich an diesem Punkt angelangt bin. Jetzt muss ich ihm natürlich abgerundete Ecken geben. Ich wähle das aus und gebe ihm 50, um sicherzugehen , dass es vollständig abgerundet ist. Wie Sie sehen können, haben wir dieses Suchsymbol. Lass mich einfach hineinzoomen und suchen. Also gehe ich zum flachen Symbol. Suchen Sie dann nach Search Enter. Und los geht's. Wir haben hier so viele Linsensymbole. Lass uns gehen Lass mich mit diesem gehen. Ich klicke auf das Eddie-Icon. Ändern Sie das auf Nein, lassen Sie es mich gräulich machen Dann 64 kostenloser Download. Ich gehe wieder rein. Lassen Sie mich sogar all diese anderen einfach so schließen. wieder rein gehe, gehe ich zu Downloads und ziehe das hier rein. Nun, wie Sie sehen können, sind sich die beiden Farben fast ähnlich, sodass Sie die Linse sehen können. Ich wähle den Sarge-Balken aus und mache ihn vielleicht dunkler, etwas dunkler, einfach so Jetzt können Sie das Objektiv sehen, und ich halte die Umschalttaste gedrückt, um die Größe zu ändern Ich könnte es sogar an diesem anderen Ende platzieren, weil die Kurve auf der linken Seite auf der rechten Seite ist , einfach so Speichern. Und ich habe vergessen, hier mein Licht einzuschalten. Und ich hoffe, du kannst mich jetzt deutlich sehen. Was haben wir sonst noch hier? Wir haben diese Schaltflächen, Benachrichtigungen, den Dunkelmodus und den Benutzer. Also ich wechsle wieder hierher. Benachrichtigungen. Lassen Sie mich die Farbe für die Änderung auswählen. Laden Sie PNG 64 Pixels herunter, kostenloser Download. Wir müssen den Dunkelmodus eingeben. Wir können vielleicht dieses oder vielleicht dieses Bearbeitungssymbol auswählen. Lass es uns auf Weiß ändern, herunterladen, PNG, kostenloser Download und schließlich, ähm. Ich wähle dieses oder vielleicht dieses Symbol und ändere das zu Weiß. Laden Sie den kostenlosen PNG 64-Download herunter. Gehen wir jetzt wieder rein, Benachrichtigung. Und mach das. Benachrichtigung, lass es dort fallen, Helligkeit und Kontrast und Benutzer. Wählen Sie die drei aus, indem Sie die Umschalttaste gedrückt halten , um ihre Größe zu ändern Jetzt ziehe ich sie und platziere sie. Jetzt, wo ich die drei ausgewählt habe, kann ich sie sogar vertikal zueinander ausrichten. Ich denke, wir fangen jetzt an, ein gutes Design zu haben. Ich denke, wir werden es vorerst dabei belassen. Schauen wir uns an, was wir als Nächstes haben. In der nächsten Lektion sehen wir uns an, wie diese Karten erstellt werden. Wir beginnen hier mit einem Text und erstellen dann eine Karte. Wir sehen uns in Kürze. 9. Gesamteinkommenskarte: Jetzt ist es an der Zeit, mit der Erstellung der Hauptteile des Dashboards zu beginnen , und das sind die Karten. Aber bevor wir das tun, fügen wir zunächst diesen Text hinzu. Ich halte die Strg-Taste gedrückt, um diesen Text auszuwählen , und klicke dreimal auf Kopieren. Dann wechsle ich hier wieder zu meinem Editor. Wählen Sie den Text zu. Klicken Sie dort auf eine beliebige Stelle und drücken Sie dann die Taste V, um sie einzufügen. Ordnung. Also werde ich es einfach genau dort positionieren. Und ich komme und dreifachklicke hier rein, kopiere die Halle hier unten und ziehe Dreifachklick und füge. Lassen Sie mich die Pfeiltasten meiner Tastatur benutzen. Jetzt tippst du für dich. Lassen Sie mich einfach T auswählen und dann Financial Health eingeben. Status, Flucht oder Klick irgendwo draußen. Jetzt kannst du zum Text gehen. Sie können es auf Monsat oder ein anderes Telefon ändern, das Sie möchten Dann können Sie die Telefongröße erhöhen. Sagen wir vielleicht 36, und vielleicht sagen wir, Gewicht ist schwarz. Ich zeige dir nur, wie es geht, wenn du es nicht von irgendwoher kopierst und einfügst Lassen Sie uns auch einen Überblick über Ihre finanzielle Situation in diesem Monat geben Klicken Sie irgendwo draußen. Jetzt, wo wir das haben, kann ich es vielleicht auf Größe 12 ändern. Sagen wir 14 und ändern das wieder auf normal. Im Grunde ist das, wie man das macht. Aber jetzt lass mich das einfach löschen , weil ich meinen Text schon habe. Jetzt wollen wir diese Karte erstellen. Bevor wir das tun, fügen wir diesen Button hinzu. Ich wähle einfach das aus, halte es gedrückt und ziehe es. Bis zu diesem Ende. Dann halte ich die Strg-Taste gedrückt , um diesen Hintergrund selbst auszuwählen. Jetzt, wo es ausgewählt ist, kann ich auf I drücken, um das Dropper-Werkzeug aufzurufen , und ich kann den Mauszeiger über dieses Orange wird diese orange Farbe auf das Objekt angewendet , das gerade ausgewählt ist Klicken Sie also darauf. Jetzt hat unser Button diese Farbe. Das heißt, neue Produkte zu kreieren. Kreieren Sie neue Produkte. Klicken Sie irgendwo hier draußen. Halten Sie die Strg-Taste gedrückt, um die Schaltfläche auszuwählen, entfernen, und halten Sie die Strg-Taste gedrückt, um sie auszuwählen. Und mach dir keine Sorgen um die Organisation. Ich weiß, dass hier alles unorganisiert ist, aber das ist eine Lektion für sich. Wir werden alles organisieren, weil wir alles entsprechend gruppieren müssen Als Nächstes wollen wir diese Karte hier erstellen. Ich werde einfach gedrückt halten, um das zu duplizieren, und lasse es mich hier platzieren. Tatsächlich werde ich die Gruppierung vorerst aufheben, rechten Maustaste auf Gruppieren klicken, und jetzt ist es nicht mehr Ich möchte die Größe dieses 2255 ändern. Lassen Sie mich das tatsächlich Lassen Sie mich Die Breite ist 259, die Höhe ist 252. Lass uns 260 daraus machen. Bis 26260. Jetzt ist es quadratisch Ich möchte es auswählen und auf I tippen, um die Pipette aufzurufen , und wähle sie dann aus Klicken Sie dann nach draußen. Dadurch erhält es dieselbe Farbe wie die Knöpfe. Lassen Sie uns den Betrag erstellen, indem wir ihn kopieren. Du kannst das auch einfach ziehen, es auswählen und vielleicht lassen wir es beiseite legen. Sagen wir 43.210 draußen, klicken Sie. Stell das da hin. Doppelklicken Sie darauf. Vielleicht kann ich dieses Dollarzeichen nennen , draußen klicken und es irgendwo hierher ziehen und dort ablegen. Oder wir müssen es etwas breiter machen. Wir müssen es nicht unbedingt als Rechteck haben. Gesamteinkommen. Ich ziehe einfach weiter und wähle das aus. Gesamteinkommen. Einfach so. Jetzt haben wir diese drei, Ladenzellen, YouTube-Anzeigen, Google-Anzeigen. Wir können dieses Tool auswählen. Wir können dieses Rechteck auswählen, kleine Rechtecke erstellen, indem wir die Shift-Taste gedrückt halten Ich möchte mit der Strg-Taste und dem Mausrad hineingehen Dann geben wir ihnen einfach so eine abgerundete Ecke von vielleicht drei Drücke und ziehe das. Verkauf im Laden. YouTube-Anzeigen Google-Anzeigen. Klicken Sie also irgendwo draußen. Wähle das und das aus. Bevor wir das tun, lassen Sie uns das regelmäßig machen. Machen wir es vielleicht Größe. Wählen Sie „Hinzufügen“ und dann „ D“, um den gleichen Zug zu wiederholen. Google-Anzeigen YouTube-Anzeigen. Das ist das Einkommen, das wir mit all dem verdient haben. Lassen Sie uns jetzt die Farben wechseln. Kann dem ein hellgraues Aussehen geben. Wechseln wir zu Blau und geben wir ihm dann Hellblau. Geben wir dem vielleicht etwas rote Farbe. Oder sollte ich orange Farbe sagen? Ja, lassen Sie uns sagen, dass ich die Pipette zwei aufruft, während das ausgewählt ist, ich, und dann darauf tippen Und dann haben wir auch etwas schönes Grün. Also ich finde , das ist ein schönes Grün, wenn ich das öffne. nun im Referenzdesign hier die Strg-Taste Wenn ich nun im Referenzdesign hier die Strg-Taste gedrückt halte und dieses auswähle, ist das, wie Sie sehen können, das Pi-Chart-Symbol. also wieder hierher wechsle, kann ich zum flachen Symbol wechseln. Pi-Diagramm, Pi-Diagramm, Enter. Jetzt denke ich, das ist es, aber ich möchte etwas Einfacheres. Lass mich das einfach auswählen . Symbol bearbeiten, und jetzt haben wir drei Farben. Ich kann das ändern, in welche Farbe das war. Lass mich zurück zu hier wechseln, das auswählen, das kopieren. Drücken Sie C, um diesen Farbcode zu kopieren, gehen Sie wieder rein und fügen Sie ihn dort ein. Oh, wir sollten hier reingehen. Also wähle diese Orange. Kopieren Sie das, wechseln Sie hierher. Das ist die blaue Farbe. Doppelklicken Sie darauf, fügen Sie es dort und jetzt ist es orange. Endlich haben wir dieses Grün, doppelklicken Sie darauf, Strg C, wählen Sie das aus. Geh hier rein, doppelklicke darauf, gib ein. Jetzt haben wir das. Herunterladen, PNG. Laden wir 512 herunter. Kostenloser Download und los geht's. jetzt hier reinkommen, können wir das hier per Drag & Drop hierher ziehen. Halten Sie die Umschalttaste gedrückt, ändern Sie die Größe. Und jetzt wird jeder Teil des Pi hier durch diese Werte repräsentiert Lassen Sie mich die Umschalttaste gedrückt halten und alle auswählen. Halten Sie die Umschalttaste gedrückt, um ihre Größe zu ändern Ziehe sie und lege sie dort ab. Wählen Sie den Text selbst und geben wir ihm vielleicht die Größe zehn oder 11. Da haben wir's. Lassen Sie mich jetzt auch die Strg-Taste gedrückt halten und heranzoomen, dies und dann die Umschalttaste gedrückt halten, dann das. Lassen Sie uns das auf das kleine Quadrat ausrichten. Halte das und schalte dann um. Richten Sie es aus, wählen Sie es aus und halten Sie die Umschalttaste gedrückt. Richten Sie das aus. Wählen Sie nun diese drei aus und ziehen Sie sie nach rechts. Halten Sie die Umschalttaste gedrückt, um sich in einer geraden Linie zu bewegen. Lassen Sie uns nun von der linken Ausrichtung des Textes zur Schreibausrichtung wechseln . Lassen Sie mich das, dann das, dann das auswählen und sie in Bezug darauf nach rechts ausrichten und sie dann vielleicht bis zu diesem Punkt nach oben ziehen. Weil wir kommen und diese Zahlen hinzufügen wollen, 12,05 3.000$ Dollarzeichen 3.522, Dollarzeichen 10.320 und Dollarzeichen 10.320 und Dollarzeichen 2.410. Wir können auch den Text, die Abbildung selbst, auswählen und B drücken, um ihn fett zu machen Steuere B oder gehe direkt hierher und mache es schwarz. Aber das ist fett, besonders mutig. Ich wechsle hier. sind ein bisschen schwach, also wähle ich die drei aus, nach Gefühl und ziehe sie bis zu diesem Punkt Das ist auch schwach. Ich werde es vielleicht bis zu diesem Punkt ziehen. Nun, Sie werden feststellen, dass wir hier einige Vorkehrungen treffen müssen , um es ein bisschen ansprechender und organisierter zu gestalten. Aber im Allgemeinen liebe ich, was wir bisher haben. Spar dir das. Lassen Sie uns das zusammen mit all diesen Dingen nach innen schieben. Und schließlich müssen wir diesen Leistungsindikator hinzufügen. Also können wir das natürlich einfach ziehen. Warte, zieh das. Dann lass uns einfach die Größe ändern. 3,8 ist in diesem Monat um 3,8 gestiegen. Also, das ist hinter der Kiste. Also kann ich es einfach ziehen und darauf legen. Vielleicht irgendwo dort. Es ist immer noch nicht oben, also werde ich es immer noch nach oben ziehen Platzieren wir es genau dort. Anstieg um 3,5%. Klicken Sie nach draußen. Ich mache es grün. Also drücke ich einfach, solange das Auge ausgewählt ist, um die Pipette zu öffnen, einfach so, und dann Taste B, um sie fett zu machen Und natürlich müssen wir jetzt diesen Pfeil finden. Also gehe ich einfach rein, schließe das und dann Pfeil. Mir gefällt das, wähle das, das Bearbeitungssymbol. Ändere es in dieses Grün. Wenn ich wieder reingehe, wähle ich aus. Nein. Gehen wir zurück zu unserer Grafik, weil wir dieses genaue Grün haben wollen. Drücken Sie C, um das zu kopieren. Geh wieder rein, doppelklicke auf diese Paste. Laden Sie PNG 64 herunter, kostenloser Download. Da haben wir's. Geh wieder rein, ich ziehe das hier rein. Halten Sie die Umschalttaste gedrückt. Drehen Sie es dann bei gedrückter Umschalttaste um 45 Winkelinkremente. Und tun Sie das, halten Sie die Umschalttaste gedrückt und beginnen Sie zu drehen. Platzieren wir das dort. Und da haben wir es. Jetzt werde ich hier tatsächlich alles auswählen. Lass uns sehen. Ja, alles ist ausgewählt, Strg G. Dann wähle ich, solange es noch ausgewählt ist, die Gruppe aus, ich mache die Shift-Taste runter und wähle die Karte aus, die sie aufnehmen soll, richte jetzt alles in der Mitte aus. Da haben wir's. Also, wir haben unsere erste Karte. 10. Aufgabe – Der Rest der Karten: In der vorherigen Lektion haben wir diese Karte erstellt, und ich überlasse Ihnen die Aufgabe, diese drei Karten zu erstellen, eins, zwei, drei, und wie Sie sehen können, handelt es sich bei dieser Karte um einen Balken wie diesen, und er hat eine grüne Farbe. Wenn ich die Strg-Taste gedrückt halte, um sie auszuwählen, hat sie diese hellblaue Farbe, aber sie hat immer noch abgerundete Ecken und so weiter. Nun, ich wollte das nur genauer erläutern, wie ich das erstellt habe, war, wenn ich heranzoome, wie Sie sehen können, ist das hier ein Rechteck mit abgerundeten Ecken, aber auf Stufe drei. Deshalb treffen sie sich nicht so in der Mitte. Also zurück zu Level drei. Der gleiche Fall gilt dafür. Aber jetzt hat das keine Feldfarbe, sondern eine Strichfarbe. Und ich habe das im Grunde genommen hineingelegt , um diesen Effekt von Ebenen zu erzeugen. Ich hoffe, ich mache Sinn. Und bei letzterem habe ich dasselbe getan wie hier. Ich ging zu Flood Icon und suchte nach dem, was das ist, übrigens, Fecast Gehen wir einfach rein und schauen, ob wir eine Prognose bekommen können. Was bekommen wir? In Ordnung. Also, was wir bekommen, ist eine Wettervorhersage. Also ich denke, Verkaufsprognose. Ja. Sie sehen Dokumente wie diese , die ausstehende Zahlungen darstellen. Aber wie Sie sehen können, ist dieser Abschnitt diesem ziemlich ähnlich, und das können Sie ganz einfach tun. Ich wollte dir nur bei dieser Klarstellung helfen , damit du nicht stecken bleibst. Mal sehen, was du dir einfallen lassen kannst. Fühlen Sie sich auch frei, etwas Eigenes zu kreieren. Sie müssen diese Balken oder diese hier nicht erstellen. Mal sehen, ob du kreativ werden und etwas anderes für die Karten entwerfen kannst. In der nächsten Lektion sehen wir uns an, wie Sie diese Balkendiagramme und Grafiken hinzufügen . Wir sehen uns also in Kürze. 11. Hinzufügen von Grafiken und Diagrammen: Jetzt ist es an der Zeit, genau hier an dieser Karte zu arbeiten und wahrscheinlich an dieser. Zurück zu unserem Kunstwerk. Ich möchte diese Gruppe und diese Karte, auf der sie stehen, auswählen und diese Karte, auf der sie stehen, und alles zusammenfassen. Steuerung G. Jetzt ist es eine einzelne Karte, die ich ziehen kann, oder es gibt hier diese Zahl, bei der ich auch Schiff gedrückt halte, um beide auszuwählen, Strg G. A. Ich kann sie nicht hineinlegen, weil sie sich in einer separaten Gruppe befindet. Lassen Sie mich zunächst die Gruppierung aufheben. Was ist hier drin? Lass mich die Gruppierung einfach aufheben Jetzt haben wir 3.5. Lassen Sie mich es in Gruppe drei ziehen. Jetzt ist es in dieser Gruppe. In Ordnung. Nun lass mich gedrückt halten und ziehen, vielleicht bis zu einem Leerzeichen von 25. Und führe dasselbe Steuerelement D Jetzt ist der Abstand überall gleich. Aber natürlich werde ich das erweitern. Aber bevor wir das tun, halten Sie Shift und Shift gedrückt und ziehen Sie den Abstand von 25 erneut ihn genau dort los. Löschen Sie das und heben Sie dann die Gruppierung auf , weil ich die Gruppierung erneut abrufen und die Gruppierung wieder aufheben möchte Gruppierung erneut abrufen und die Gruppierung wieder aufheben Ich möchte sie in einzelne aufteilen. Danke. Elemente, lass mich das alles löschen. Lassen Sie uns wieder darauf zurückkommen. Das hat es immer noch, also behalte ich das. Aber ich wollte die Größe ändern, um sicherzustellen, dass es diesen Punkt erreicht Aber ich möchte es ein wenig erweitern, um sicherzustellen, dass das Tempo hier das gleiche ist wie Das heißt, wir werden den Knopf bewegen. Wählen Sie die Schaltfläche aus und halten Sie die Umschalttaste gedrückt, wählen Sie diese aus richten Sie die Taste dann entsprechend nach rechts aus. diese gilt derselbe Fall. Halten Sie Strg g gedrückt, um sie zu gruppieren. Halten Sie dann die Umschalttaste gedrückt und richten Sie sie einfach so an der Taste aus. Wenn wir jetzt wieder darauf zurückkommen, das ist auf der rechten Seite. Halten Sie also die Taste gedrückt, um die Ansicht mit dem Mausrad zu vergrößern . Lassen Sie mich das zunächst gruppieren. Wählen Sie das, das und dann was sie hält, und richten Sie sie so aus. Drücke dann G, um sie zu gruppieren. Das ist jetzt eine Gruppe. Ich werde auch, solange diese ausgewählt ist, das und das Steuerelement G auswählen, um sie zu gruppieren. Jetzt kann ich sie einfach als eine Gruppe tragen. Ich möchte das auswählen und das gedrückt halten bei. Jetzt stecken sie dahinter. Also werde ich sie nach oben ziehen. Halten Sie dann die Umschalttaste gedrückt. Nein. Lass uns einfach die Größe ändern Zuallererst, was steht da? Verkäufe letzte Woche. Verkäufe letzte Woche, und das sollte weiß sein. So haben Sie letzte Woche abgeschnitten. In Ordnung, einfach so. Lass uns trocknen und das da hinlegen. Jetzt können wir diese Größe mit dem Mausrad einstellen. Ich meine, ich kann die Pfeiltasten auf der Tastatur benutzen. Ich denke, 28 ist okay. Schieb es runter, vielleicht auf 13. Sagen wir 12, und dann drücken wir es hoch, drücken wir das runter. Ich denke, das ist eine gute Position. Lassen Sie uns das sogar nach unten drücken, nur um es darauf auszurichten. Halten Sie die Taste gedrückt, um die Figur selbst auszuwählen. Wählen Sie den Gesamtverdienst aus und erhöhen Sie ihn. Wählen Sie diese Gruppe aus und rücken Sie sie näher an die Zahl heran . Da haben wir's. Spar dir das. Um diese Pi-Diagramme und Grafiken hinzuzufügen, klicken wir hier mit der rechten Maustaste auf eine beliebige Stelle. Bewegen Sie den Mauszeiger über Plug-ins, verwalten Sie Plugins. Daraufhin werden die Plug-ins angezeigt. Dort können wir nach jedem beliebigen Plug-In suchen. Geben wir Diagramm ein. Und ich denke, genau das brauchen wir Charts. Von Sam Mason. Ich werde klicken Ich sage einfach Lauf. Ja, und das ist es. Wir können die Anzahl der Datenpunkte ändern. Ich lasse es einfach bei zehn stehen. Wir können entscheiden, ob es ein Streu-, Flächen- oder Balkendiagramm sein soll , ich wechsle zurück zur Linie Wir können den Bereich ändern, vielleicht sind es 10.000 Das ändert sich auf 10.000. Wir können den Datensatzbereich ändern. Sagen wir zwei. wir gerade von Balken sprechen, lassen Sie mich das in Balken ändern, und ich kann weitermachen und Diagramm hinzufügen sagen. Jetzt wird es auf Ihrem Kunstwerk platziert, und wenn ich die Ansicht vergrößere, werden Sie feststellen, dass der Text schwarz ist und diese Linien auf den Text zeigen. Zuallererst, und ich glaube nicht, dass es gruppiert ist. Wenn ich das Mausrad verwende und das Mausrad gedrückt halte, um es zu ziehen, wird es nicht gruppiert. Ich halte gedrückt. Lassen Sie mich zunächst mit der Steuerung und dem Mausrad heranzoomen . Dann wähle ich den Text aus, diesen anderen Text. Tatsächlich brauche ich das Raster nicht. Lassen Sie mich das Raster auswählen und löschen. Ich brauche es nicht. Jetzt Texte, die anderen Texte und die Leiste. Wenn ich sie jetzt ziehe, nur noch die Rasterbalken übrig. Strg G, um sie zu gruppieren. In Ordnung. Jetzt lass mich das einfach ziehen und hier ablegen. Halten Sie die Umschalttaste gedrückt, um es zu verkleinern. Jetzt werden Sie feststellen , dass der Text reduziert wurde, weil wir ihn verkleinert haben Text reduziert wurde Ich halte die Strg-Taste gedrückt, um einzelne Texte auszuwählen, um mehrere Texte zusammen auszuwählen Ich halte die Strg- und Umschalttaste gedrückt. Und ich ziehe das heraus, um den Texthalter zu vergrößern. Halten Sie dann die Strg- und Umschalttaste gedrückt, um den Text erneut auszuwählen. Fakt, lass mich das alles so auswählen. Dann ändere die Farbe auf Weiß. Ich wähle „Fakt“ aus, lass mich das auswählen. Halten Sie die Steuerung gedrückt. Es ist eine etwas mühsame Aufgabe, aber wir müssen sie erledigen, die Strg- und Umschalttaste gedrückt halten, um die verschiedenen auszuwählen Lassen Sie mich oben beginnen, die Steuerung, und die andere am Ende, halten Sie die Umschalttaste und die Strg-Taste gedrückt Dann wählen wir die mittleren aus. Und dieser Hauptteil. Ändere das auf Weiß. Lassen Sie uns das Gleiche dafür wiederholen. Halten Sie die Strg-Taste gedrückt. Drücken Sie die Umschalttaste. Ich wähle diese aus. Und ich ändere das auf Weiß. Für diese Farbe, die blaue Farbe, wähle ich diese aus und halte dann die Umschalttaste gedrückt. Drücken Sie die Augentaste auf der Tastatur, um die Pipette aufzurufen , und wählen Sie diese Farbe nur aus Gründen der Einheitlichkeit Ich glaube, mir gefällt, was wir bisher haben. Schauen wir uns an, was wir sonst noch haben. Schauen wir uns diese Art von Diagramm an. Ich klicke mit der rechten Maustaste auf Plug-ins. Jetzt haben wir Diagramme , weil es eines der zuletzt verwendeten ist. Geben wir fünf. Geben wir ihm drei Punkte. Raster ausblenden und los geht's. Diagramm hinzufügen, und das ist das Diagramm, das wir haben. Jetzt wiederhole ich den gleichen Vorgang. Stellen Sie sicher, dass Sie jedes Element im Diagramm auswählen. Ich glaube nicht, dass ich etwas zurückgelassen habe. Lassen Sie mich das zunächst auswählen. Wenn ich vor dem Gruppieren alles ausgewählt habe, habe ich jetzt die Möglichkeit, die verschiedenen Farben zu ändern Ich kann die Füllfarbe auf Weiß ändern, alles, was eine Feldfarbe hat, ist weiß Dann Strichfarbe auf Weiß, alles, was einen Strich hat. Derselbe Fall gilt für diese Gruppe. Füllfarbe weiß, Strichfarbe weiß. Jetzt möchte ich das auswählen. Es ist gelb, aber ich möchte, dass es diese orange Farbe hat. Für diesen zweiten möchte ich, dass es diese bläuliche Farbe Da haben wir's. Jetzt kann ich das auswählen. Strg G, um es zu gruppieren. Dann kann ich das verkleinern. Ich muss das vorantreiben Ich mache das einfach rückgängig. Da ist dieser Ausschnitt , der gerade passiert. Ich denke, lassen Sie mich das einfach bis zu diesem Punkt erweitern. Ich weiß nicht, was das ist. Lass mich das einfach rückgängig machen. Dann ziehe es noch einmal. Lass mich das dort platzieren und dann einfach die Größe ändern, solange wir noch da sind Ich weiß nicht, warum das passiert. Aber es ist okay. Halten Sie jetzt die Strg-Taste gedrückt. Was ist das? Ich weiß nicht, was das ist. Ich glaube, es ist der Clip außerhalb der Tabelle. Aber ehrlich gesagt weiß ich nicht, was es ist, aber es wird uns nicht davon abhalten, unseren Job zu machen. Gedrückt halten. Lass mich das einfach löschen. Lösche das. Halten Sie die Strg- und Umschalttaste gedrückt, um diese auszuwählen. Ich kann das jetzt erweitern. Da haben wir's. Drücke S, um das zu speichern. Und jetzt haben wir ein schönes Dashboard. Jetzt habe ich sie natürlich einfach dupliziert. Natürlich sollte deine einzigartig sein. Jeder von ihnen sollte anders sein. Ich hätte das Gleiche für diesen Teil getan weil es nur darum geht , die richtigen Charts zu finden. Und das sollte Bereich sein und dasselbe wiederholen. Aber das werde ich nicht tun, weil du das selbst machen kannst. Mein Ziel hier ist es, Ihnen eine nette Anleitung zu geben, der Sie folgen und Ihre eigene kreative Version oder das Dashboard erstellen können. Ich werde diesen und diesen und diese Texte auswählen und das. Dann endlich dieses Steuerelement G, um alles zu gruppieren. Halten Sie dann gedrückt, um es zu duplizieren. Und dann, mit einem Abstand von 25, lasse ich das dort fallen. Und es scheint, dass wir das nicht wirklich gruppiert haben weil es in einer anderen Gruppe ist, aber kein Problem. Wir werden ein bisschen aufräumen , wenn wir alles organisieren Also ziehe ich es mit gedrückter Alt-Taste, um es dort zu platzieren, und alles, was ich tun muss, ist es so zu ändern, dass es Verkäufe letzten Monats anzeigt, aber das werde ich nicht tun In der nächsten Lektion geben wir den letzten Schliff, da ich erklärt habe , wie Sie das machen werden. Das ist alles für den Moment und wir sehen uns in der nächsten Lektion. 12. Aufgabe – Finalisieren der Karten: Im Moment ist es also Zeit für eine weitere Aufgabe, und sie wird sehr einfach und schnell sein Wenn Sie sich diesen Abschnitt hier ansehen, finden Sie die zuletzt verkauften Artikel in Ihrem Inventar, und Sie werden feststellen, dass es sich dabei um Symbole handelt, die ich von Flat Icon heruntergeladen habe. Und das weißt du bereits, besuche Flacon, um sie herunterzuladen. Die andere Sache, die Ihnen auffallen wird, ist diese Überschrift und diese Unterüberschrift ist dem, was wir hier bereits haben, ziemlich ähnlich Das können Sie schnell erstellen. Endlich haben wir diese Quadrate mit unterbrochenen Linien genau hier. Das Erstellen eines Quadrats mit unterbrochener Linie ist sehr einfach. Alles, was Sie tun müssen, ist, dass ich Ihnen ganz schnell zeigen kann, wie das geht. Zurück zu unserer Arbeit. Ich werde die Strg-Taste gedrückt halten, dann das auswählen, dann herausziehen und ziehen, um das Duplikat zu duplizieren. Tatsächlich ist es gruppiert Lass es mich einfach gruppieren. Gruppe. Noch einmal, Gruppe, und jetzt ist das eine einzelne, und jetzt ist das eine einzelne Karte. Solange sie ausgewählt ist, gehe ich zu Strike über. Und füge hinzu und jetzt hat es einen Strich. Dann subtrahiere ich das Feld , um das Feld loszuwerden. Wenn wir jetzt hineinzoomen, werden Sie feststellen, dass es nur der Strich ist. Solange er noch ausgewählt ist, kann ich dem Strich einfach so diese hellbläuliche Farbe geben einfach so diese hellbläuliche Farbe Ich kann die Breite auch erhöhen. Nehmen wir an, ich kann ihm vier geben. Ich kann wählen, ob der Strich innen, außen oder mittig sein soll. Im Moment ist er drinnen. Wir können es auch draußen aufstellen. Jetzt ist es draußen und wir können es in die Mitte stellen. Jetzt, wenn ich zu diesem Menü hier gehe, können wir zu diesem Drop-down-Menü gehen und auf D ändern und das wird ein gestrichelter Strich So erstellt man das. Sie werden mit diesen Einstellungen herumspielen und sehen, was wir uns einfallen lassen können. Nachdem ich alles beschrieben Sie tun sollten, um dies zu erstellen, denke ich, dass dies eine einfache Aufgabe für Sie sein wird, und es sollte sehr interessant sein zu sehen, was Sie sich einfallen lassen werden. Das ist sehr einfach zu erstellen, einfach es zu duplizieren oder von hier aus zu erstellen und dann einige Texte hinzuzufügen, zum flachen Symbol zu gehen und eine geschlossene Schaltfläche auszuwählen Wie Sie sehen können, wurde dies entfernt. Wenn Sie zum flachen Symbol wechseln, können Sie vielleicht schließen sagen weil es ein geschlossenes Symbol ist, und hier sind wir. Nehmen Sie sich Zeit und füllen Sie diese Karte, diese und diese Karte „Jetzt aktualisieren Wir sehen uns in der nächsten Lektion, in der wir hier darüber sprechen werden, wie Sie in der wir hier darüber sprechen werden, wie alles organisieren können. Denn wenn Sie sich ansehen, was wir auf meiner Referenz-Website, auf meinem Referenzdesign haben , ist das tatsächlich die Referenz. Wenn ich das zusammenfasse, ist es sehr gut organisiert, also sehen wir uns in der nächsten Lektion. 13. Organisieren von Komponenten: Willkommen zurück. Jetzt ist es an der Zeit, unser Design oder unsere Datei zu organisieren. Und wenn ich mir hier unsere Referenzdesign-Datei ansehe, wie ich sie organisiert habe. Wie Sie sehen können, haben wir die Suchleiste, die sich oben befindet. Wir haben die Seitenleiste und dann haben wir den Hauptinhalt. Wenn ich den Hauptinhalt erweitere, wird er auch in verschiedene Abschnitte unterteilt. ich mit der Maus über verschiedene Bereiche fahre, merkst du, dass alles sehr gut organisiert ist, und ich kann einfach kommen und das tragen und es beiseite legen oder das und dann beiseite legen Lassen Sie uns das also bei unserem Projekt machen. Ich gehe wieder rein. Lass mich das jetzt einfach loswerden. Lassen Sie uns jetzt natürlich mit der Suchleiste beginnen. Es besteht aus dem Suchsymbol und dann aus der Suchleiste selbst. Ich wähle die beiden aus und dann Strg G, um sie zu gruppieren. Jetzt kann ich die beiden tragen und tun. Das ist bereits gruppiert. Denken Sie daran, dass wir die drei ausgewählt haben. Während diese Gruppe ausgewählt ist, kann ich die andere auswählen, indem ich die Umschalttaste gedrückt halte. Tatsächlich sind sie nicht aufeinander abgestimmt. Da ich dies zuletzt ausgewählt habe, können wir diese drei darauf ausrichten. Einfach so. Wenn ich jetzt Strg drücke, haben wir eine neue Gruppe namens Gruppe 16 gebildet und ich kann einfach alles tragen. Diese Gruppe 16 kann als Suchleisten-Enter bezeichnet werden. Verkleinern, Strg gedrückt halten und mit dem Mausrad scrollen Jetzt haben wir auch diese Tasten. Denken Sie daran, dass wir jede Schaltfläche gruppiert haben, sodass ich sie mit mir herumtragen kann , nur um zu überprüfen, ob jede von ihnen gruppiert ist. Ordnung. Ich wähle diese Schaltfläche, halte die Umschalttaste gedrückt, um sie alle zusammen mit dem Logo und dieser Zeile auszuwählen, dann drücke ich G, um sie zu gruppieren. Wenn ich jetzt nicht in der Lage bin, alle zu gruppieren. Wenn Sie dieses Verhalten bemerken, bei dem Sie alles ausgewählt haben, drücken Sie Strg G und einige Elemente sind nicht in der Gruppe enthalten. Sie können die Gruppierung aufheben, also werde ich die Gruppierung Jetzt sind sie Einzelpersonen. Jetzt lass mich einfach nach der Gruppe suchen. Es ist Gruppe 16. Lass es mich einfach Seitenleiste nennen. Jetzt kann ich zum Projektlogo kommen. Lass es mich einfach Logo nennen und es in die Seitenleistengruppe ziehen. Wählen Sie auch diese Linie aus, Seitenleistenlinie. Geben Sie sie ein und ziehen Sie sie ebenfalls in die Seitenleistengruppe. Wirf es da rein. Wenn ich jetzt die Seitenleistengruppe zusammenfalle, kann ich die gesamte Seitenleiste einfach so tragen. Denken Sie daran, dass wir das als Gruppe erstellt haben, also kein Problem. Das war auch eine Gruppe. Das ist nicht wirklich eine Gruppe, weil dieser Text nicht zur Gruppe hinzugefügt wurde , als wir Control G ausprobiert haben . Lassen Sie mich sehen. Diese Gruppe heißt Sales Last Week. Solange sie ausgewählt ist, doppelklicke ich einfach auf die Karte mit der Verkaufswoche. Nun, das ist der Kartentitel für Gruppe 13 mit Verkäufen der letzten Woche. Und jetzt kann ich ihn in die Karte mit den Verkäufen der letzten Woche ziehen. Wenn ich es jetzt ziehe und verschiebe, bewegt es sich zusammen mit einer Gruppe, weil es Teil der Gruppe ist und ich es mir zur Gewohnheit mache, jedes einzelne Ding mit dem passenden Namen zu beschriften. Wenn es hier dieser Betrag ist , braucht das kein Etikett. Aber was diese Karte angeht, können wir sie Gesamteinnahmenkarte nennen. Karte. Oh, acht. Wir haben das Falsche etikettiert. Zum Beispiel diese Gruppe hier, nennen wir sie Gesamtverdienstkarte weil es die Gesamtverdienstkarte ist. Wie Sie hier in unserer Referenz sehen können, , wenn ich sie auswähle als Gesamteinnahmen bezeichnet, wenn ich sie auswähle. Wenn ich das auswähle, handelt es sich um den Nettoverdienst. Wähle diese Ausgaben einfach so und schon ist alles andere drin. Zurück zu unseren Karten. Natürlich werde ich keine Zeit damit verbringen, diese anderen Teile zu beschriften, aber Sie verstehen, wie es geht. Natürlich ist das hier auch keine reine Gruppe, es sei denn, wir ändern das. Nehmen wir an, das sind Einnahmen aus dem letzten Monat. Monat. Klicken Sie nach draußen und wählen Sie dies aus. Diese Gruppe ist letzten Monat, lassen Sie mich das zusammenfassen. Lass mich das auswählen. Das ist Gruppe 14. Lass mich einfach darauf doppelklicken und es Verkaufsmonatskarte nennen. Jetzt der Titel des Verkaufsmonats. Und wirf es da rein. Karte „Gesamteinnahmen“, das ist diese Schaltfläche, sieben Seitenleiste, Suchleiste. Ordnung. Jetzt wollen wir die Hauptinhaltsgruppe erstellen. Lassen Sie uns nun wiederholen, was wir gerade getan haben C G. Hauptinhalt. Wenn ich es verstecke, ist das Co. Tatsächlich sollte dieser Text auch im Hauptinhalt enthalten sein. Also ziehen wir es einfach und fügen es dort hinein und auch diesen Button. Nennen wir es Create-Button. Denkt daran, Leute, das ist nur ein Leitfaden. Nehmen Sie sich Zeit, um jedes einzelne Element so zu organisieren , wie es für Sie und Ihre Teammitglieder sinnvoll ist, wenn Sie ein Team haben. Also, was ist dieses Rechteck? Ich weiß nicht, welches Rechteck das ist, wenn ich drück, und das ist der Hintergrund. B-Boden. Also werde ich es auch in den Hauptinhalt aufnehmen. Und jetzt steht es über allem, also ziehe ich es und setze es unter die Karte mit den Gesamteinnahmen. Wie Sie sehen können, ist die Seitenleiste und die Suchleiste nicht sichtbar, da sich der Hintergrund innerhalb des Hauptinhalts und der Hauptinhalt über der Suchleiste befindet. Tatsächlich haben wir es nicht hineingelegt. Ziehen wir die Seitenleiste über den Hauptinhalt und die Suchleiste über den Hauptinhalt. Ziehen Sie nun den Hintergrund in den Hauptinhalt. Direkt unter dem Gesamtverdienst. Doppelklicken wir nun auf das Macbook Pro, das der Frame war, und nennen wir es Dashboard. Jetzt können wir das Dashboard zusammenklappen, und da fangen wir an, wenn wir dieses Projekt jemandem beschreiben. Das Dashboard besteht aus der Seitenleiste und dem Hauptinhalt. Und die Seitenleiste besteht aus all diesen Schaltflächen, und ich kann die Schaltflächen zusammenklappen. Seitenleiste, das Logo. Du kannst Sachen neu anordnen. Sie können Taste eins über Taste sechs platzieren. Sie haben die Übung inzwischen verstanden. Ich bin mir ziemlich sicher, dass Sie damit fortfahren können , alles neu anzuordnen und zu organisieren Bevor Sie dieses Projekt mit jemandem teilen, müssen Sie es auf diese Weise organisieren Ich denke, wir haben bisher fast alles behandelt , was Sie die meiste Zeit verwenden werden , wenn Sie in Figma arbeiten Natürlich ist dies nur der erste Teil einer Reihe von Kursen. Ich werde regelmäßig über Figma veröffentlichen, Ich werde regelmäßig über Figma veröffentlichen von den Grundlagen bis hin zu den fortgeschrittenen Phasen Bevor du gehst, habe ich noch ein paar abschließende Gedanken, ich gerne mit dir teilen möchte, damit wir uns in der letzten Lektion wiedersehen. Geh nicht weit. 14. Schlussgedanken: Ich möchte mir nur einen Moment Zeit nehmen, um mich ganz herzlich bei Ihnen zu bedanken , dass Sie bis zum Ende dieses Kurses bei mir geblieben sind. Ich hoffe, Sie fanden es sowohl informativ als auch unterhaltsam und fühlen sich jetzt sicherer in Ihren Figma-Fähigkeiten Inzwischen haben Sie ein vollständig gestaltetes Dashboard, das Sie mit Ihren Freunden oder Arbeitskollegen teilen können, und dafür bin ich sehr stolz auf Sie Ich ermutige Sie sogar, sich selbst auf die Schulter zu klopfen und sich einen Moment Zeit zu nehmen , um zu feiern denn viele Menschen können einen Kurs beginnen, aber nur wenige schaffen es, ihn zu beenden. Und das hast du. Also herzlichen Glückwunsch zu dieser Leistung Wenn Ihnen dieser Kurs gefallen hat und Sie ihn wertvoll fanden, möchte ich Sie um einen einfachen Gefallen bitten Bitte nehmen Sie sich einen Moment Zeit, tatsächlich weniger als eine Minute, um eine Bewertung zu schreiben und anderen mitzuteilen , was Sie von dem Kurs halten. Ihr Feedback ist unglaublich wertvoll, weil es mir hilft zu wissen, ob ich einen guten Job mache, und anderen Schülern hilft, diesen Kurs zu entdecken. Wenn Schüler auf deine Bewertung des Kurses stoßen, können sie leicht entscheiden , ob es ein guter Kurs für sie ist. Wie ich bereits erwähnt habe, dauert es weniger als eine Minute, aber es wird einen großen Unterschied machen. Klicke einfach auf den Bewertungsstern unter diesem Videoplayer und lass mich wissen, was du von dem Kurs hältst. Und vergiss nicht, in meinem Profil nach weiteren Kursen zu UI, UX und Webdesign zu suchen meinem Profil nach weiteren Kursen zu UI, . Ich habe eine Vielzahl von Kursen, die Ihnen helfen sollen , Ihre Fähigkeiten weiter auszubauen und Ihre Karriere voranzutreiben. Denn denken Sie daran, wir leben in einer digitalen Welt. Und diese Fähigkeiten zu haben ist entscheidend. Schauen Sie sich also mein Profil für weitere Kurse an. Und wenn Sie mit der Arbeit an Ihrem Dashboard-Projekt fertig sind, vergessen Sie nicht, es hier mit der Community zu teilen. Wir lieben es, unsere Projekte zu teilen, um Feedback von Mitschülern und Lehrern zu erhalten. Lassen Sie mich Ihnen nur ein Beispiel für eine aktuelle Klasse zeigen. Hier ist ein Kurs, den ich vor einiger Zeit veröffentlicht habe. Und unter der Registerkarte Projekte und Ressourcen hier einige Beispiele für Projekte, die Schüler eingereicht haben , um Feedback zu erhalten. Sie müssen also nur zur Registerkarte Projekte und Ressourcen gehen und auf Projekt einreichen klicken. Und genau dort können Sie einen Screenshot Ihrer Fertigstellung hochladen . Vergiss nicht, ihm einen Projekttitel und vielleicht eine Projektbeschreibung zu geben. Ich freue mich also sehr darauf, Ihr Abschlussprojekt zu sehen. Ich möchte mich noch einmal bei Ihnen dafür bedanken, dass Sie an diesem Kurs teilgenommen haben, und ich freue mich darauf, Sie im nächsten Kurs zu sehen. Viel Spaß beim Entwerfen des Stücks.