Lerne Figma 2021: Produktivitätstipps für das UX UI Design | Sarah Bannister | Skillshare

Playback-Geschwindigkeit


1.0x


  • 0.5x
  • 0.75x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Lerne Figma 2021: Produktivitätstipps für das UX UI Design

teacher avatar Sarah Bannister, UX/UI Designer | Dog Enthusiast

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

    • 1.

      Einführung

      2:15

    • 2.

      Building

      4:57

    • 3.

      Figma Auto Layout-Werkzeug

      12:07

    • 4.

      Wesentliche grundlegende Shortcuts

      1:58

    • 5.

      Tastaturkürzel Deep Dive

      14:41

    • 6.

      Bulk von Komponenten

      1:47

    • 7.

      Nudge Tool Tipp

      0:55

    • 8.

      Figma

      9:58

    • 9.

      Dein Projekt: Figma Community

      2:53

    • 10.

      Vielen Dank!

      0:51

  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Jedes Niveau

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

337

Teilnehmer:innen

--

Projekte

Über diesen Kurs

Dieser Kurs lehrt dich die Grundlagen des Figma zu werden! Du wirst Shortcuts und Methoden lernen, um deine Produktivität als Designer zu erhöhen und wir decken die großartige Auswahl an Funktionalität und Plugins in Figma ab.

Einige Themen, die wir lernen:

  • Was ein Designsystem ist und was geht in den Aufbau eines Designsystems
  • Figma’s Auto
  • Einige wesentliche Figma
  • Zusätzliche fortgeschrittene Figma
  • Figma erstellen
  • Ressourcen und Plugins aus der Figma

Du findest Informationen wertvoll, wenn du nagelneu in Figma bist oder ein grundlegendes Verständnis hast und in deinem Design-Workflow effizienter werden möchtest. Wenn du Interesse am Erlernen eines Design-Tools hast, ist Figma eine erstaunliche Option, weil es sehr zugänglich ist – es ist kostenlos, browserbasiert oder desktop (du kannst es mit einem PC oder einem Mac verwenden und immer mit tollen neuen Funktionen und Community-Ressourcen aktualisiert.

Beginnen Sie, indem Sie ein Figma erstellen, wenn Sie noch nicht schon haben und lass uns in die Figma tauchen!

Ressourcen:

Atomic Design Artikel: https://xd.adobe.com/ideas/process/ui-design/atomic-design-prinzipien-methodology-101/

Atomic Design von Brad Frost (kostenloses Ebook): https://atomicdesign.bradfrost.com/

Figma Auto-Layout Leitfaden: https://help.figma.com/hc/de-us/articles/360040451373

Triff deine:n Kursleiter:in

Teacher Profile Image

Sarah Bannister

UX/UI Designer | Dog Enthusiast

Kursleiter:in
Level: Beginner

Kursbewertung

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen auf Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Einführung: Hallo, vielen Dank für Ihre Teilnahme an Coursera Schlechtigkeit während derzeit führender Produktdesigner bei einem Software-Unternehmen mit Sitz in Portland, Oregon. Und ich bin sehr aufgeregt heute in dieser Klasse, wir werden einige produktivitäts- und zeitsparende Tipps und Tricks in Figma lernen. Dies wird Ihnen viele Kopfschmerzen und die Zukunft ersparen. Es wird Ihnen Zeit sparen und beweisen Sie Ihre Work-Life-Balance und machen Sie einfach zu einem besseren Designer auf lange Sicht. Wenn Sie als Designer arbeiten, wissen wir, dass Sie manchmal andere haben, an die Sie Ihre Datei übergeben müssen. Ob es sich um einen anderen Designer oder eine Entwicklung handelt. Figma hat ein unglaublich kollaboratives Werkzeug. Andere Teamkollegen, mit denen Sie arbeiten, kommen möglicherweise direkt in Ihre Datei und interagieren mit Ihrer Entwurfsarbeit. Das ist die Schönheit von Sigma. Sie können tatsächlich sehen, wie Ihre Teamkollegen Cursor nebeneinander arbeiten. Es ist wirklich einfach, Kommentare zu hinterlassen und Leute auszurufen und wird direkt in Figma um Feedback gebeten Es ist kostenlos, es ist browserbasiert, aber es ist immer noch ein unglaublich leistungsfähiges Design-Tool und viele Designer verwenden es in ihren täglichen Arbeitsablauf. Aber wenn Sie etwas tun, wo Sie wissen, dass, wenn Sie keine organisierte Datei haben und Schreiben zu meinem Anfang nicht mit Produktivität arbeiten, dann ist es viel schwieriger, zurück zu gehen, diese Probleme zu beheben, anstatt wenn Sie gerade angefangen haben darüber nachzudenken, wie Sie der produktivste und schnellste und effizienteste Designer sein können. Sie könnten von Anfang an sein, wenn Sie Ihre Datei zum ersten Mal starten. Und darüber werden wir in diesem Kurs sprechen. Wir werden darüber sprechen, wie Sie Ihr Designsystem erstellen, wie Sie eine Design-Bibliothek, Farbbibliotheken, Textbibliotheken erstellen . Wir werden auch über einige der Sigmas fantastischen Funktionen sprechen , die in Bezug auf die Produktivität integriert sind, wie die automatische Layout-Funktion. Und dann werden wir über einige Tastaturbefehle und Tastenkombinationen sprechen, die Sie so zu einem großartigen, schnellen und effizienten Designer machen werden. Und es wird Sie setzen, so weit, hatte ich von vielen in den Spielen. Und wenn das nach gut klingt, passt es gut zu dir. Ich empfehle Ihnen, hier zu bleiben und wir können loslegen. 2. Building: Okay, also reden wir zuerst über den Handel mit einem Designsystem. Ein Designsystem ermöglicht es Ihnen, Ihre Entwürfe schnell mit dem geringsten Aufwand zu skalieren . Wenn wir also zu Pinterest gehen, können Sie anfangen, sich eine Vorstellung davon zu machen, wie Designsysteme aussehen. Sie können sogar damit beginnen, diese zu speichern. Wenn du ein Pinterest-Fan bist. Sie können eine Sammlung von diesen machen, wenn Sie irgendwie Brainstorming hier beginnen wollen Ich besitze Ideen, wie Sie Ihr Designsystem organisieren möchten. Wenn Sie nicht wissen, was ein Designsystem ist oder Gehäuse, oder noch nicht mit einem gearbeitet haben. Sie sind wirklich wichtig, weil sie Ihnen erlauben, mit Komponenten zu arbeiten und zu behalten, sie halten Ihre Entwurfsdateien so sauber wie möglich und so effizient wie möglich, während Sie arbeiten. Sie wollen nicht mit zerbrochenen Teilen eines Designs arbeiten. Denn sagen Sie, wenn Sie ein Branding-Update haben und die Farbe ändern müssen, sagen wir, Oh, in diesem Beispiel auf Pinterest, dem eiarmen UI Style Guide, sagen Sie, dass es eine Branding-Änderung gab, wo sie diese lila Farbe zu einem ändern blau oder einfach nur eine ganz andere Farbe als das, was hier in der App gezeigt wird. Sie verwenden diese Farbe in ihrem Farbsystem, wie hier gezeigt. Eine sehr häufige Farbe in allen Bereichen. Und es gibt oft, wo ein Unternehmen einen Markenwechsel durchführt und Sie müssen die primären Farbkomponenten ändern. Sie möchten nicht mit einzelnen kaputten Komponenten arbeiten, bei denen Sie jede einzelne Komponente von Hand ändern müssten, nicht was Monate dauern kann. Daher ist es unglaublich wichtig, in Designsystemen mit einer Designbibliothek zu arbeiten. Auf diese Weise können Sie diese Änderungen in Sekunden und nicht in Stunden und Stunden vornehmen. Und es macht es einfacher für jeden Designer, der in der Zukunft in Ihre Datei kommt und auch Updates vornehmen muss. Eine beliebte Methodik des Designs, Systembiologie als Atomic Design von Brad Frost. Und ich werde tatsächlich dieses kostenlose E-Book verlinken, das Sie lesen können oder bestellen Sie das physische Buch. Sie können mehr zu dieser Methodik lesen. Und das werde ich auch diesen Adobe XD-Artikel verknüpfen , der auch ein wenig Tiefe über das atomare Design geht . Und die Art und Weise, wie das funktioniert, ist, dass wir Atome, Moleküle, Organismen, Vorlagen und Seiten haben und ohne Kontexte, die ein wenig verwirrend erscheinen mögen, aber im Wesentlichen ist dies ein gutes Beispiel, das ich bei Google für ein entworfenes System gefunden habe. Ich habe auch meine eigenen gebaut, aber viele der Unternehmen, mit denen ich arbeite, kann ich die Arbeit nicht wirklich öffentlich teilen, also verwende ich öffentliche Beispiele, in denen ich mich befand. Sie können auch weiterhin Ihre eigenen Beispiele finden, um Ideen zu bekommen. Aber von dem, was wir hier auf der linken Seite sehen, und wenn wir weiter und Komplexität gehen, haben wir die Atome, die Moleküle, die Organismen, die Vorlagen und Seiten, wie wir vorwärts gehen. Außerdem sieht das aus wie ein Typ, ein Textstilleitfaden und einige Beispiele für ihre Verwendung von Datenvisualisierung durchgängig. Also ist es wirklich gut, diese Beispiele online zu finden und es wird Ihnen helfen, Ideen zu geben. Wir können tatsächlich anfangen, in Figma zu suchen. Wenn Sie noch kein Konto in Figma erstellt haben, gehen Sie einfach zu figma.com. Sie können sich einloggen oder sich anmelden und Sie können tatsächlich im Browser arbeiten, oder Sie können direkt in Figma arbeiten. Und das wirst du hier sehen. Sie werden sehen, ob Sie die physische App auf Ihren Computer herunterladen, Sie können zum Community-Abschnitt hier gehen und suchen Sie einfach in Design-System eingeben. Und Sie werden tatsächlich eine Menge von Starter-Design-System-Kits sehen. Und Sie können buchstäblich anfangen, diese herunterzuladen. Dieses erste, das Amp Design-System pro Fragment zu 0.03 Demo. Es sieht so aus, als könntest du das kaufen. Sie können alle diese fantastischen Ressourcen in der Figma-Community duplizieren. Das ist also ein großartiger Weg, wenn es so überwältigend ist, wenn Sie ein Design-Tool nicht sehr gut kennen. Aber wenn Sie hier auf den Seiten in Figma nach links gehen, und Sie können Befehl, Backslash tun und die Benutzeroberfläche in Seiten auf der linken Seite ausblenden , können Sie alle diese Komponenten sehen und damit anfangen zu spielen. 3. Figma Auto Layout: Okay, als nächstes werden wir über Figma Auto-Layout sprechen. Dies ist ein großartiges Tool, das Sie verwenden können, um super responsive dynamische Komponenten zu erstellen. In Figma wird es Ihnen eine Menge Zeit und Kopfschmerzen sparen, und es ist erstaunlich und jeder Designer sollte es definitiv nutzen. Es wird so eine Zeitersparnis. Und nur eine der besten Komponenten und Features wie figma zu bieten hat. Also sie tatsächlich, wenn Sie zum Community-Abschnitt gehen und, und wenn Sie jetzt auf die erste Seite gehen, können Sie feststellen, dass figma in den Trenddateien tatsächlich diesen wirklich hilfreichen Leitfaden namens Figma auto erstellt hat Layout Spielplatz. Wenn Sie aus irgendeinem Grund nicht auf der Titelseite finden können, können Sie nach diesem Titel suchen und ihn suchen. Also, wenn wir Sigma nicht kennen und diese duplizieren und es wird automatisch geöffnet und in Ihren Entwürfen in Ihrem Projektbereich gespeichert. Wenn Sie jemals darauf zurückkommen und damit spielen wollen, wird es Ihnen einige Wege geben, so dass wir entweder die Anfänger ELL wählen können, wenn Sie noch nie Auto-Layout verwendet haben, was ist neu und Auto-Layout, wenn Sie nur die neuen Funktionen sehen wollen, einige Beispiele. Nur für Sie zu referenzieren. So können Sie beginnen, Ihre eigenen Auto-Layout-Frames zu erstellen, sobald Sie es sich bequem machen. Und dann auch einige Ressourcen. Ich werde diesen Artikel verlinken. Wenn Sie mehr über das automatische Layout lesen möchten, Lassen Sie uns einfach mit den Anfänger-Optionen gehen. Dies wird also ein guter Überblick dafür sein, was das automatische Layout ist und warum Sie es verwenden sollten. Und es ist ein ziemlich lustiges Tutorial, mit dem man auch herumspielen kann. Auto-Layout ist im Wesentlichen eine Funktion in Figma, mit der Sie dynamische Frames erstellen können , die auf ihre Inhalte reagieren. Also, wenn Sie jemals Schaltfläche in Sketch oder Figma oder Adobe XD gemacht haben, und Sie erstellen einfach eine statische Schaltfläche. Sie wissen, dass Sie die Breite der Schaltfläche ändern müssen , um sich manuell an die Texte anzupassen, die Sie eingeben. So haben wir zum Beispiel einen statischen Knopf hier. Wenn wir nur tippen, Hoppla, ich bin ein Knopf und ich liebe Auto-Layout. Oh nein. Also wollen wir das nicht. Wir möchten, dass diese Schaltfläche verwendet wird, dynamisch reagiert und die Größe dynamisch auf das, was wir eingeben. Unser erster Schritt besteht also darin, das automatische Layout manuell anzuwenden. Sie gelangen zum rechten Seitenbereich, klicken Sie auf Automatisches Layout. Und dann können wir automatisch hinzufügen, ich liebe lag. Und schauen Sie sich das jetzt haben wir eine dynamische Größenänderung Schaltfläche. Es hält die Polsterung konsistent. Und wenn wir eine Master-Komponente davon erstellen, dann werden wir in der Lage sein, diese Komponente in der App oder Website, die wir entwickeln, wiederzuverwenden . Und alle Schaltflächen passen sich automatisch an den Typ an, den Text, den Sie verwenden müssen, je nach Benutzerfluss und Bildschirm, für den Sie entwerfen. Ein weiteres Beispiel für das Ausrichten mehrerer Elemente. Wenn wir wählen und ziehen Sie diese drei Komponenten hier. Und wir können tatsächlich drücken Umschalttaste a, und das wird automatisch Tastaturbefehl Auto-Layout. Und ich denke, Tastaturkürzel sehr, sehr nützlich und helfen Ihnen, sehr effizient zu sein. Aber das zeigt nur, dass sie sich ein wenig neu ausgerichtet haben. Wir können auch diese auswählen, verschieben ein wenig neu ausgerichtet, wie wir diese vertikal ausrichten können. Mit diesem Werkzeug auf der rechten Seite können Sie Ihre Ausrichtung auswählen. Für die vertikale Ausrichtung möchten wir, wenn wir es zentrieren wollen, können wir auch eine dieser Komponenten auswählen und tatsächlich wirklich leicht das Layout ändern und die gesamte Rahmengröße passt sich den Änderungen an, die Sie vornehmen hier. Und es ist so einfach, andere Komponenten hinzuzufügen, wie wir es einfach hinzufügen können, aber wir können es zurück zu dieser Ausrichtung bringen. Wenn wir horizontal ausgerichtet werden wollen, können wir das auch hier tun. Also warte eine Minute. Oh, du musst den ganzen Rahmen auswählen. Und dann gehen wir. Es gibt also eine Menge, die Sie mit dem Layout tun können, und es ist einfach so viel schneller, Dinge mit angewendetem automatischem Layout neu auszurichten. Dies zeigt die Anpassung der Polsterung für eine Schaltfläche. Dieses zweite Werkzeug. Also genau hier, können Sie tatsächlich mit der Maus über diese Teile bewegen und ziehen, um die Polsterung automatisch anzupassen. Und das übernimmt das gesamte Padding. Sie können auch individuelle Polsterung anwenden. Also, wenn ich Tonnen Polsterung oben und dann ein wenig Polsterung auf der rechten Seite mögen wollte , was, wenn Sie wirklich kantig sein und Muster wie sicher gestalten wollen, aber das ist nur ein Beispiel dafür, wie Sie einige Instanzen haben könnten , sind einige Elemente, die Sie einige spezifische Auffüllung möchten. Ein weiteres Beispiel für individuelle Polsterung. Wenn Sie also zu diesem Abstand zwischen den Elementen gehen, können Sie ändern. Wenn Sie eine Liste haben, können Sie einfach den Abstand zwischen den einzelnen ändern. Dies ist wirklich nützliches Werkzeug als auch. Dies zeigt, wie verschiedene Elemente, die mit den Größenänderungsoptionen auf eine neue Größe eingestellt sind. Wenn wir also auf jede von ihnen klicken, können wir tatsächlich sehen, wie die Größenänderung auf zwei eingestellt wird. Also für diese vertikalen, diese füllen vertikal. Sie füllen den gesamten Behälter vertikal. Diese horizontale. Es wird den Behälter horizontal umarmen, aber es wird diese Menge an Platz behalten. Also 32 Pixel Polsterung ist eine Menge, wird konsistentes Jahr bleiben. Und wie das aussieht, wie wir die Größe ändern können. Und das passt sich einfach weiterhin an ihre horizontale Größenänderung an. Und dann, wenn wir die Größe vertikal ändern, werden diese vertikalen Komponenten auch übernehmen. Das ist also wirklich nützlich, wenn Sie mit Frames arbeiten, die halten. Zum Beispiel hier ist dies ein großartiges Beispiel. Diese Social-Media-Beiträge, ich halte die Option gedrückt und Sie können tatsächlich zur gleichen Zeit beide Enden des Rahmens ändern, in dem Sie arbeiten. Anstatt, wenn ich nur meine Mausoption gedrückt halte, können Sie zwei gleichzeitig tun. Das ist also ein großartiges Beispiel dafür, wo Größenänderung ins Spiel kommt. Denn wie sagen, wenn ich Auto-Entlassung, Auto-Layout ausschalten, reagiert es nicht mehr. Es ändert sich nicht dynamisch. Dies ist eine neuere Funktion, die wirklich großartig ist, wenn Sie mit Komponenten arbeiten , die Sie reagieren möchten, aber mehrere Elemente darin haben. Und Sie meinen, dass diese Teile dynamisch auf die Breite des Containers reagieren. Hier ist ein Beispiel für das Layout der Paktverteilung. Also im Grunde würden Sie hier gehen und es zeigt gepackt oder Abstand zwischen den gepackten bedeutet, dass sie zusammengepackt bleiben, während Sie die Breite erweitern. Oder wir wollten diesen vertikalen Raum zwischen, wenn wir uns ändern würden. Wenn Sie also gesehen haben, dass dies diese Änderung annimmt, wenn wir das zu packen ändern bedeutet der Abstand zwischen dem Grunde, dass Sie sich keine Sorgen machen müssen , solange Sie Ihr Padding Set haben. Also haben wir 16 Pixel Polsterung durchgehend. Und dann, wenn wir das dehnen, werden diese Elemente reagieren. Die super niedlichen Kätzchen werden reagieren. Und dann werden sie den Abstand gleich und sauber halten. Und die 16 Pixel der Polsterung an den Seiten. der Ausrichtungsfunktion können Sie die Position der Elemente innerhalb eines Containers anpassen oder schweben. Ein tolles Stück Magma, das für eine wirklich einfache Übergabe an Entwickler ermöglicht. So interagiere ich eigentlich mit meinen Entwickler-Teamkollegen. Meine Hand direkt in Figma. Dieses Inspect Tool ermöglicht es Entwicklern die Spezifikationen Ihrer Design-Elemente wirklich einfach zu erfassen. Und das zeigt ein wirklich großartiges Beispiel dafür. Im Bedienfeld „Prüfen“ können Sie hier alle verschiedenen Spezifikationen und Eigenschaften dieser Kunsttafel sehen. So, wie Sie auf verschiedene Elemente klicken, können Sie tatsächlich sehen. So zum Beispiel, einfach hier zu klicken, wie zeigt den Code für diesen Hintergrund, zum Beispiel. Aber wenn wir hier klicken, können wir alle Eigenschaften in diesem Rahmen sehen. Und es ist wirklich einfach für Ihre Entwickler zu kommen und sich diese Spezifikationen zu holen. Aber wir sind am Ende hier und wir haben diese lustige kleine Herausforderung mit mehr giddy Gas. Wenn wir unsere Fähigkeiten. Im Grunde, was ich frage, ist, mit diesem Layout hier zu interagieren. Also unsere erste Aufgabe ist es, wenn Sie auf ein Bild in Figma klicken, können Sie tatsächlich direkt Bilder, Siliziumsatz von Klick und eine Reihe von verschachtelten Komponenten auswählen . Wenn ich den Mauszeiger darüber halte und Befehl C klicke oder halte, das Bild gerade hervorgehoben. Ich kann es dann automatisch auswählen, ohne klicken zu müssen. Sie möchten verschachtelte Komponenten starten. Also, wenn wir Befehl D tun, die tatsächlich nur unser Bild dupliziert. Wir können das automatische Layout aktiviert. Wir können es zu den dritten Beiträgen hinzufügen und sehen, wo es angelegt ist, und fügen Sie es dort hinzu. Dann bittet es uns, den vierten Beitrag nach oben zu verschieben. Wir sehen also nur drei, aber mit aktiviertem Auto-Layout können wir erweitern, wie wir das vierte sehen. Wir klicken auf diese ganze Komponente. Also dieses Gruppen-Kartenstück hier, wir bewegen uns zurück nach oben. Jetzt können wir unser Layout wieder ändern, zurück nach unten. Jetzt bittet es uns, die Breite des iPhone 11-Frames auf 750 Pixel zu ändern. Wenn wir also klicken und dann erneut klicken, haben wir den gesamten Rahmen ausgewählt. Wenn wir also die Breite auf 700150 Pixel ändern, dehnt sich alles aus. Also jetzt bittet es uns, die Verteilung der Statistikzeilen zu ändern. Also diese Social-Media-Statistiken hier, wollen wir diese auswählen. Und wenn wir das ändern, um zu packen, können wir jetzt die gesamte Liste der Mitarbeiter sehen. Also ja, gib das eine Chance. Es ist wirklich einfach, unkompliziert Führer. Und dann werden wir über einige andere tolle Keyword-Befehle und Verknüpfungen sprechen. 4. Grundlegende Basic: Also, jetzt werden wir über Tastenkombinationen in Figma sprechen. Wenn du auf eine Design-Insel gehst, Figma, werde ich Mac-Tastaturkürzel abdecken, weil das ist, was ich benutze. Sie können Figma auf einem PC mit Windows verwenden. Aber wenn Sie in Figma und eine Datei gehen und in der unteren rechten Ecke auf Hilfe und Ressourcen klicken, können Sie tatsächlich zum Tastaturkürzel Menü gehen. Und all diese werden Ihnen zur Verfügung stehen und sie sollten auf irrelevant für Ihr System aktualisieren. Also die wesentlichen Tastenkombinationen, die wir haben, die wirklich beschleunigen Ihren Workflow und wirklich hilfreich in einer Vielzahl von Situationen, die ich benutze die ganze Zeit als den Befehl Backslash und das ermöglicht es Ihnen, die UI-Panels zu verstecken . Ich benutze das viel, wenn ich mit meinen Teamkollegen durch Designs gehe, nur weil es den Bildschirm nicht so überladen ist, wenn ich nicht arbeite. Wählen Sie die Farbe. Also das ist Kontrolle C. Und was das tut, ist, dass wir jetzt das Pipettenwerkzeug haben. Und wenn ich ein anderes Element auswähle, dieses graue Feld hier, und ich mache Control C, kann ich das viel schneller ändern, als zu gehen und manuell und wählen Sie das Hex-Symbol und ändern, was die Seitenleiste, es ist viel schneller. Und die, wenn es etwas, das Sie suchen möchten, ein Menü oder einen Befehl, dass es bereits Plugin, die wir über Plugins sprechen. Plugins sind auch ideal, um Zeit zu sparen. Sie können den Befehl Schrägstrich drücken, und das ermöglicht es Ihnen, verschiedene Systemelemente oder Plugins zu sehen verschiedene Systemelemente oder , die Sie heruntergeladen haben, die Sie leichter zugreifen können. 5. Keyboard: Diese Werkzeuge sind ziemlich einfach, in vielen dieser Elemente hier skizziert. Also, wenn Sie mit diesen Elementen herumspielen, die primären Design-Werkzeuge oben, der oberen Seitenleiste. Sie können leicht beginnen, einen Haken für diese einige unbekannte Verknüpfungen zu bekommen , die wirklich helfen können, Ihren Workflow zu beschleunigen. Wenn Sie jemals zwischen den Panels hier, die Sie sehen, wechseln möchten, kann es ziemlich zeitaufwendig sein, herauszufinden , wo Sie versuchen, mit den hier angeordneten Tasten zu gehen. Es gibt Tastenkombinationen, mit denen Sie schnell zwischen diesen wechseln können. Wenn Sie also möchten, wenn wir auf Assets arbeiten, wenn Sie sich in einem anderen befinden, sagen Sie das Bedienfeld „Assets“ oder Ihre Designsystemkomponenten live und Sie zum Ebenenbedienfeld navigieren möchten, drücken Sie Option 1. Und dann können Sie einfach wieder zum Bedienfeld „Assets“ mit Option zwei und dem Design-Panel auf der rechten Seite wechseln . Hier ist das Option a. Und dann das Prototyping-Panel , wo Sie interaktive Prototypen erstellen würden. Er kann Teile in Figma miteinander verknüpfen und Lebensprototypen zusammen mit den Designs, Spezifikationen und den Komponenten haben . Das Prototyp-Panel ist Option neun. Und wenn Sie als Entwickler zu inspizieren waren und Sie wollen Cloud-Perspektive Option 0. Das können also wirklich nützliche Werkzeuge sein, wenn Sie versuchen, schnell zwischen den Panels zu navigieren. Also haben wir einige wirklich nützliche Text, Tastenkombinationen. Dieser hier liebe ich, weil ich lange Zeit nicht wusste, dass Sie Listen und Figma machen können. Und ich dachte, es wäre unmöglich. Und ich dachte, was machst du mir Witze, aber du kannst es nicht. Wenn Sie also Ihre Listenelemente auswählen, nur diese Textzeilen, können Sie Umschaltbefehl 7, 8 drücken , und Sie haben eine Aufzählungsliste. Und Sie können auch schnell die Ausrichtung dieser Elemente mit den Ausrichtungstastaturbefehlen ändern. Also, wenn Sie noch einmal News Optionsbefehl und die, Ich denke, die entsprechende Schriftzug für jede Ausrichtung. Also Option Befehl T richtet sie an der Mitte aus. Option Befehl L Zeilen von links, Option Befehl rechts oder unsere Zeilen mem schreiben eine Option Befehl J richtet sie als gerechtfertigt aus. Sie können auch die Schriftgröße, die Schriftstärke , den Schriftabstand und die Zeilenhöhe anpassen. Und Sie können das tun, indem Sie die eckigen Klammern verwenden. also für die Schriftgröße für diese Listenelemente Wenn Siealso für die Schriftgröße für diese Listenelementeden Befehl shift drücken und dann die linke Winkelspitze Klammer verkleinern, erhöht die rechte Winkelspitze ihre Größe. Und Sie können sehen, was diese Größenbestimmung hier ist. Und wir können auch die Schriftstärke anpassen, indem Sie Option Befehl, Winkel Klammer tun. Warten Sie früher auf den linken Ordner für rechts, bis Sie den maximalen Betrag für diese bestimmte Schriftart haben. Der Buchstabenabstand ist nur die Befehlstaste und die eckigen Klammern, je nachdem, welche Sie verwenden. Und dann ist die Zeilenhöhe Shift Option. Und dann die Winkelklammern. Wieder einmal werden wir die Linienhöhe anpassen. Es gibt also Zeiten, in denen man vielleicht mit Bildern und Figma arbeiten kann. Und es gibt einige tolle Transformation als Verknüpfungen, die wir verwenden können, wenn Sie mit Bildern arbeiten. Oder diese gelten auch für andere Elemente. Aber wenn Sie die Ausrichtung oder die Richtung dieses Bildes umkehren möchten, zum Beispiel, wenn wir Shift H verwenden, können wir die horizontale Richtung ändern. Umschalttaste B wird es vertikal drehen. Mit dem Zuschneidewerkzeug haben Sie tatsächlich einige Möglichkeiten, um ein Bild in Figma zu bearbeiten. Wenn er diese Option betätigt, kommen wir hierher. Und Sie können hier tatsächlich zuschneiden und die Ansicht dieses Bildes ändern. Wenn Sie also mit diesen herumspielen, können Sie lernen und sehen, wie sich diese ändern. Ansicht. Aber das Beschneidwerkzeug, können Sie ändern. Wie viel davon dir nicht gezeigt wird. Wenn Sie die Umschalttaste gedrückt halten, werden die Dimensionen als letztes Wort beibehalten. Und Sie können auch leicht, wenn Sie Play drücken, haben Sie auch alle diese Funktionen, um das tatsächliche Aussehen des Bildes mit diesen Einstellhebeln zu ändern , können Sie sehr einfach das Bild ersetzen, indem Sie auf Auswählen klicken. Stellen Sie sich vor Sie können ein neues Bild von Ihrem Gerät auswählen und hochladen. Wenn Sie die Escape-Taste drücken und dann die Entstehung wie gewohnt betrachten, können Sie wirklich leicht die Deckkraft aller grafischen Elemente ändern. Lassen Sie uns diese Elemente auch auswählen. Wenn wir eins drücken, ändert es die Deckkraft auf 10. Wenn wir F5 drücken, ändert es sich bei 250, und wenn wir 100 drücken, ändert es es in 100. Es gibt also einige Optionen hier, wenn Sie die Deckkraft ändern möchten. Also sagen wir, wir haben damit gearbeitet. Stellen Sie sich vor, wir wollten es mir wie ein Tophelden-Bild einer Website, die wir bauen. Und dann wollten wir wie ein Overlay erstellen. Und wenn wir dort auf das obere Overlay klicken wollten, drücken Sie F5 und dann wiederkehrte. Und etwa oder so zum Beispiel. Und wenn Sie bekommen, was ich sage, aber wenn Sie nur die numerischen Tasten verwenden, können Sie diese Deckkraft leicht ändern. Wenn Sie also mit Overlays arbeiten, ist das in diesen Fällen ein wirklich nützliches Werkzeug. Die angeordneten Tastenkombinationen sind wirklich nützlich, da Sie sonst, wenn Sie Ihre Ebenen neu anordnen möchten, manuell in den Menüpunkt Objekt gehen müssen, und dann nach unten zu diesen scrollen, diese Liste von -Befehlen. Und es ist so viel schneller, um Benutzerschlüsselwort. Also, wenn wir hineinzoomen und diesen lila Kerl hier auswählen, und dann wollen wir die Ebene hinter dieser größeren rosa Form hierher schicken. Wir können Kommando linke Klammer drücken, und das wird senden, jetzt, es ist hinter diesem rosa Quadrat versteckt. Und wenn wir es zurückbringen wollten, können wir Command drücken, rechte Klammer, wenn das bringt. So bringt die Schicht, nur eine Schicht vorwärts oder rückwärts. Und Farbton. Sehen Sie oben auf diesem Panel hier, im Ebenenfenster, können Sie tatsächlich beobachten, als ob ich es rückwärts schicke, Sie können es beobachten, einfach durch die Ebenen navigieren eins nach dem anderen. Und wenn wir es zurückbringen wollen, müssten wir all diese Zeiten ausdrücken, wenn wir die Schicht wie möglich nach hinten schicken wollten , einem Klick würden wir einfach die seitlichen Klammern drücken. Also habe ich gerade auf die linke eckige Klammertaste geklickt. Wenn ich es wieder nach oben bringen wollte, hörte drücken Sie die rechte. Wenn ich diese Ebene nun aus diesem Rahmen verschiebe, verschwindet sie und sie ist nicht wirklich sichtbar, obwohl sie oben ist, sie befindet sich jetzt oben in einem anderen Frame. Also werde ich es nicht sehen können, weil, obwohl ich drücke oberen Befehl zu bringen, die rechte eckige Klammer. Es ist im falschen Rahmen. Wenn ich also einmal auf Befehl Z klicke, die rückgängig gemacht wird, ist es wieder sichtbar, da es sich im richtigen Rahmen befindet. Also, das ist etwas zu beachten. Einige finden, dass die Ohrschichten verschwinden. Jetzt einige Alignment-Verknüpfungen, die Sie verwenden können. Wenn Sie die Option a und D verwenden, können Sie ganz einfach links oder rechts ausrichten. Und wenn Sie die Option W oder S haben, können Sie leicht die obere und untere Ausrichtung ändern. Mittenpunkte ausrichten ist die vertikale oder horizontale Ausrichtung. Wenn Sie also die Option H wählen, wird die Ebene horizontal in der Mitte ausgerichtet. Wenn Sie die Option B wählen, wird sie vertikal in der Mitte des Rahmens , der Zeichenfläche oder dem Rahmen ausgerichtet , in dem sie sich befindet. Und die Distribution Spacing, wenn wir dieses Rechteck hier duplizieren, können wir Abstände verteilen. Eigentlich brauchen wir es. Was mehr? Sie möchten den Abstand gleichmäßig auf eine Reihe von Elementen verteilen. Sie würden die Option H oder Steuerungsoption B und das wird diese Elemente cer ausrichten, eine aufgeräumte Funktion. Sie können das auch finden. Hier, und Sie haben einige Optionen dort. Aber wenn Sie die Tastenkombination dafür verwenden wollten, ist es nur die Control-Option-Taste und Sie können sehen, wie es mehrere Elemente dauerte und nur die Art und Weise aufgeräumt wurde, dass sie ausgerichtet wurden und es in eine organisierte Liste oder eine organisierte Anordnung von Elementen, anstatt dass sie ein bisschen weg in ihrer Organisation sein. Und zurück zum Auto-Layout, wenn wir Auto-Layout hinzufügen möchten, noch einmal, dieser Tastaturbefehl ist Shift a. Und dann, dass einfach automatisch hinzugefügt Auto-Layout zu diesen Komponenten. Und wenn wir es aus irgendeinem Grund entfernen wollten, wäre es Option Shift a. Nun, es ist nicht mehr ein automatisches Layout. letzte Sache, die wir als Erstellen von Komponenten mit Tastenkombinationen durchgehen, werden Komponenten den Großteil Ihrer Designbibliothek in Ihrem Designsystem ausmachen. Und die Art und Weise, wie diese jetzt angelegt sind, sind das keine Komponenten außer der UNO. Sie sehen, dass diese lila sind, die Umrisse, die darauf hinweisen, dass es sich um eine Komponente handelt. Und Sie können hier sehen, dass dies ein direktes Kind einer Master-Komponente ist. Wenn wir also auf die Formularfeld-Master-Komponente klicken, können wir tatsächlich unsere Liste der Design-Komponenten und im Grunde die vielen Design-Bibliothek sehen , die diese Design-Datei ausmacht. Also zum Beispiel, wenn wir, wenn wir eine dieser Komponenten ändern, wie Lassen Sie uns die Farbe des Labels zu lesen ändern. Wir werden sehen, dass die Aktualisierung überall dort stattfinden , wo die Beschriftung in Ort Halter Texteingabe Komponente verwendet wird. Wir werden diesen Wandel durchgängig sehen. Das ist nur, um zu betonen, wie wichtig es ist, Komponenten in Ihrem Dieline-System zu verwenden , weil Sie es hassen würden jede einzelne Eingabekomponente manuell zu ändern und eine Komponente zu erstellen. Wenn wir also diese ganze Spitze machen wollten, diese obersten drei Elemente oder Komponenten, oder drücken Sie einfach Option Befehl K. Und jetzt zeigt dies, dass es eine Komponente ist. Und wir möchten nur diese Master-Komponente nehmen und sie in unserem Designsystem hier auf der Komponentenseite platzieren, so dass das organisiert ist. Und dann können wir ein Exemplar nehmen. Wir können eine Kopie davon von hier nehmen, indem Sie den Befehl C drücken, die Tastenkombination. Oder wir können tatsächlich in unser Asset-Panel gehen und dann können wir sehen, dass neue Komponente. Es ist derselbe. Wenn wir also zurückgehen und diese Komponente finden, können wir sie einziehen und sie hier nutzen. Und dann sehen wir jetzt, dass dies eine untergeordnete Komponente der Master-Komponente ist , die wir gerade erstellt haben. Wenn Sie dies als Komponente lösen möchten, so dass Sie es zu einer anderen Komponente machen können , die ein ähnlicher Stil sein könnte, aber vielleicht müssen Sie eine neue Komponente erstellen, die diese verwendet, einige andere Konstruktionselemente. Sie können Option Befehl B drücken, und das wird dies wieder in einen blauen Umriss verwandeln, anzeigt , dass es nicht mehr Teil des Komponentensystems ist , das wir gerade verwendet haben. Eine andere Sache, wenn Sie nicht manuell zu Ihrem Asset-Panel gehen müssen. Sie können den Tastaturbefehl Shift I drücken und Sie können nur eine wirklich praktische Liste Ihrer Komponenten aufrufen , die Sie in Ihrer Asset-Bibliothek verwenden , und sie einfach auf diese Weise greifen. 6. Bulk: Eine weitere Verknüpfung, die ich oft als Massenumbenennungsfunktion verwende. Also, wenn Sie wollen, Nehmen wir an, wir haben vier Rahmen, oder Frame 2, 3, 4, 5. Und wir wählen alle Rahmen aus. Wir können, wir können den Befehl R drücken, den Befehl RT, Abkürzung, und dann können wir diese in, sagen wir, abgerundete Sir, Ziele umbenennen . Und wir können sogar eine Zahl, Aufstieg oder Abstieg hinzufügen. Also jetzt haben wir abgerundete Kreise, 1, 2, 3, 4. Also haben wir einfach alle diese Komponenten umbenannt, ohne es eins nach dem anderen tun zu müssen. Wenn Sie jemals eine bestimmte Anzahl von Komponenten in einem allgemeinen Bereich auswählen möchten , können Sie Befehlstaste, Umschalttaste und ziehen. Und dann wird das alle auswählen oder einfach nur, Sie können sie auch anklicken. Wenn wir also nur die umbenennen wollten, auf die ich gerade geklickt habe, dann können Sie das tun und dann erneut die Befehlstaste R drücken. Und dann können wir die Nummernfolge hinzufügen. Und dann dauerte es einfach all die. Es ist außerhalb der Linie, weil wir nur zufällig die Elemente ausgewählt haben. Aber jetzt haben wir abc 1, 2, 3, 4, 5, 6. So ist es wirklich einfach, Komponenten schnell umzubenennen überwiegen, anstatt zu versuchen, es manuell und Sequenznummer oder traurig oder so zu tun, es ist viel schneller, auf diese Weise zu tun. 7. Nudge Tool-Tipps: Ich werde sehr schnell über das Nudge-Tool reden. Wenn Sie also an Figma gearbeitet haben und Sie Ihre Pfeiltasten verwenden, können Sie ein Element um ein Pixel schieben. Und wenn Sie die Umschalttaste gedrückt halten, können Sie sie um 10 anschieben. Aber wenn Sie hier und mit dem Logo in den oberen linken Menüpunkt gehen, können Sie zu Einstellungen gehen. Und dann ganz unten in den Präferenzen, können Sie Ihren Schub ihn ausrichten. Also, wenn du deinen, deinen großen Schub anstelle von zehn verschieben wolltest , könntest du das aktualisieren. Und jetzt bewegt es eine 120 Pixel mit der entsprechenden Tastenkombination, die ich drücke. Und während ich die Verschiebung in eine Richtung halte, die ich möchte, dass es gehen würde. Also denke ich, dass 10 zum größten Teil ziemlich gut funktioniert. Aber wenn es einen Grund gäbe, dass du das ändern möchtest, dann kannst du das so machen. 8. Figma: Okay, Jetzt werden wir über Plugins sprechen, die erstaunlich sind. Es gibt so viele erstaunliche Plugins und Figma, wenn Sie in den Community-Bereich gehen und Sie werden tatsächlich so viele Ressourcen finden. So können Sie finden, was im Trend steht. Sie können Plugins finden. Thick Jam ist ein neueres Online-Whiteboarding-Tool, was wirklich Spaß macht, wenn Sie in dieser virtuellen Remote-Umgebung arbeiten, was viele von uns jetzt tun, können Sie diese Vorlagen verwenden, um gemeinsam für das Workshopping mit Kunden zu Brainstorming. Es ist erstaunlich. Sie haben Zugriff auf Best Practice-Designsysteme. Figma bietet Wireframes, Illustrationen, Icons, Typografie, mobiles Design, Web-Design-UI-Kits, alles, was man sich als eine Art Starter Kit oder Vorlage vorstellen könnte. Sie haben Zugriff auf so viele professionell gestaltete Vorlagen, mit denen Sie herumspielen oder aufbauen können, oder natürlich , wissen Sie, wir kopieren oder stehlen niemanden Arbeit, aber das sind einige hilfreiche Ressourcen. Und oft, wenn sie lizenzfrei oder kostenlos oder Creative Commons Lizenzierung sind und Sie sich keine Sorgen um das Urheberrecht machen müssen, dann werden sie so auflisten und sie werden es sagen. Viele davon sind Marketing-Tools, also könnten sie aus, haben einen Link, der Sie aus Ephedra nehmen wird, um ein ganzes Wireframe-Kit zu kaufen, zum Beispiel. Aber so oder so, super toll, Inspiration zu bekommen. Und mit Plugins gibt es nur so viele Tausende von Plug-Ins, die für Figma gemacht werden , die Ihren Workflow beschleunigen und Ihnen das Leben erleichtern. Eine, die ich viel verwende, ist, dass ich viele Benutzerflüsse und meine Arbeit erstelle. Wenn Sie also auf einen dieser Tests klicken, sind dies Wörter und klicken Sie auf Umschalttaste oder halten Sie die Umschalttaste gedrückt und klicken Sie auf das nächste Element. Sie sehen nur, dass der Pfeil automatisch ausgefüllt wird, um eine Verbindung zu diesem Flow herzustellen. Und Sie können entweder die einzelnen Elemente auswählen, ich verknüpfe sie auch miteinander. Wenn Sie also Wireframes oder Elemente verknüpfen, um zu zeigen, wie ein Benutzerfluss aussieht. Das ist so einfach. Sie können die Farbe leicht ändern. Sie können die Klemmen der Pfeile so ändern, dass sie einen anderen Stil haben. Und Sie können auch, das ist dynamisch, so dass, wenn Sie es ziehen, wird es automatisch die Länge der Pfeile für Sie ändern. Ein weiteres Plug-in, das ich sehr oft verwende, ist das Unsplash-Plugin. Dies ist so nützlich, wenn Sie erstellen, vor allem, wenn Sie die High-Fidelity-Mockups bekommen. Wenn Sie erstellen, wenn Sie beispielsweise ein Benutzerprofil erstellen und diesen Kreis haben müssen, haben Sie ein Benutzerbild im Kreis. Wenn wir junge Erwachsene eingegeben haben, können wir diese tolle Liste oder diese tolle Auswahl an Bildern von Unsplash bekommen, die alle kostenlos zu verwenden sind, lizenzfreie Bilder, die die Fotografen wissentlich hochladen um nutzen ihre Arbeit ohne kommerzielle Rechte. Also sind Sie in der Lage, diese für kommerzielle Rechte zu verwenden , ohne sich um Copywriting Problem Sorgen zu machen. Also, wenn wir dieses Bild so wählen, wie dies programmiert ist, weiß es, dies zu skalieren, um zu erkennen, was der Brennpunkt des Bildes. Sie können also trotzdem den Brennpunkt ändern, wenn Sie das anpassen möchten, indem Sie auf den Füllbereich klicken und auf das Bild klicken und dann Zuschneiden auswählen. Sie können das hier anpassen. Sie können also, wenn Sie wollen, dass es sich mehr auf ihr Gesicht konzentriert, können Sie dies mit diesem Werkzeug auch tun. Ein weiteres Plugin, das wirklich nützlich ist, wenn Sie Datenvisualisierung überhaupt in Ihrer Arbeit viel verwenden. Dann gibt es Werkzeuge oder Sie können Ihre Daten eingeben. Und Sie können automatisch ein Liniendiagramm, Streudiagramm, ein Balkenbereich-Pi oder ein Donutdiagramm für Sie erstellen lassen, ohne manuell ein oder ein UI-Kit mit Datenvisualisierung erstellen zu müssen, wenn Sie nur auf der Suche nach einem einfachen -Diagrammtyp können Sie Ihre Daten eingeben und automatisch an ihm. Und Sie können dies nach Bedarf an Ihre Entwürfe anpassen. Also, das letzte hieß Diagramme. Dieses Plug-in für Diagramme wird als Diagramm bezeichnet. Aber Sie können hier alle verschiedenen Optionen sehen. Dieser ist tatsächlich bietet eine Pro-Version, aber Sie können zufällige Daten verwenden. Sie können eine Tabelle importieren oder eine JSON-Datei verwenden. Das ist also wirklich genial, wenn Sie diese Ressourcen zur Eingabe der Daten zur Verfügung haben. Und dann wird es automatisch ein Diagramm für Sie zeichnen. Also, wenn wir dieses Element hier auswählen, und dann gehen wir zu unseren Plugins und klicken Sie auf UI Farbverläufe. Wir haben Zugang zu einer Tonne vordefinierter Gradienten. Und gute Steigungen sind eigentlich eine Art Fertigkeit. Du willst nicht, dass es zu hart oder der Übergang zu mir ist. Nicht natürlich. Dies ist also eine wirklich gute Option, wenn Sie nur eine gute Auswahl von wollen. Wirklich schöne Farbverlauf Apfelwein Fingerspitzen, ohne zu viel darüber nachdenken oder zu viel Zeit damit verbringen, sie neu zu erstellen. Ein weiteres Plugin, das ich über Option für Plugins gehen werde, ist Symbol-Bibliotheks-Plugins. So Material Design-Symbole. Material Design ist Googles Designsystem und Best Practices Richtlinie. Und sie haben nur eine riesige Reihe von vorgefertigten Icons. Du kannst es benutzen. Viele Leute entwerfen gerne ihre eigenen Icons. Ich mache viel Arbeit, wo die Benutzeroberfläche nicht wirklich kreativ sein muss. Es muss eine professionellere oder vertraute Schnittstelle haben. Also verwende ich gerne vorgefertigte Icons, weil es so viel Zeit und Materialdesign spart. Wenn Sie eine Komponentenbibliothek für ihre Entwicklung verwenden , die Best Practices für Materialentwurf und deren Konstruktionsrichtlinie verwendet. Dann ist es wirklich einfach, die Komponenten in Ihrem Designsystem entsprechend zu benennen. In den Entwickler-Spezifikationen in Ihren Entwicklern wissen genau, welche Symbole zu verwenden sind, und sie können die Spezifikationen greifen, um die Farbe, die Größe und dann den Namen zu kennen . Solange es mit dem Bibliothekar, Material Design-Symbolen, übereinstimmt ist es sehr einfach zu übergeben, aber Sie können einfach alle diese auswählen. Und Material. Design ist Open Source. Oh, das ist toll, und du musst dir keine Sorgen machen. Soweit Urheberrecht und solche Dinge. Wir haben eine kommerzielle Lizenz. Und dann gibt es auch andere Optionen. Es gibt Stromliniensymbole ist eine riesige Icon-Bibliothek. Und sie haben tatsächlich eine Pro-Option, um Zugriff auf die SVG-Datei zu erhalten. Also, wenn es geladen wird, aber sie haben eine große Anzahl von Kategorien und ihre Symbolbibliothek. So haben Sie alle diese verschiedenen Optionen und es ist wirklich einfach zu navigieren und zu sortieren. Wie wenn Sie, ich meine, sie haben Möbel Dekoration Kategorie, sie haben eine Kategorie für alles. Also und sie sind wirklich stilvoll und einfach wirklich cool und es gibt so viele Möglichkeiten zur Auswahl. Aber wenn Sie ein wenig mehr von einem Trend in der Nähe oder aktualisiert wollen, denke ich. Art von einzigartigen Satz von Symbolen, die ich denke, dass Streamline hat eine wirklich gute Vielfalt. Sie müssen vielleicht, es lohnt sich, wenn Sie gehen, um es viel zu verwenden, Es lohnt sich auf jeden Fall, aber Sie müssen zahlen, um diesen Zugang als Premium-Benutzer zu erhalten. Und Sie müssen auch herausfinden, welche kommerzielle Lizenz Sie verwenden und viele Benutzer Sie eine Bestellung haben können, um sie kommerziell zu verwenden. Also, das ist auch etwas, woran man denken kann. Aber die Verwendung einer Symbol-Bibliothek wie diese wird Ihnen eine Menge Zeit sparen und es macht Spaß, durch zu gehen und wählen Sie diese Symbole aus. Und dann können Sie tatsächlich beginnen , diese Symbole hier zu nehmen und diese Komponenten zu erstellen. Und Pesos hier zu beginnen, auf Ihrem Symbol Bibliothekar, Ihrem Designsystem zu bauen. Und wirklich leicht zwischen Zeilen Komponenten hin und her wechseln. Und die Art und Weise, wie Sie zwischen Komponenten wechseln. Eine weitere schnelle Abkürzung ist, wenn wir eine Master-Komponente davon erstellt haben. Und dann, wenn wir das für dieses getan haben, dieses, wenn wir all diese duplizieren, haben wir jetzt diese untergeordneten Komponenten. Und wir können leicht zwischen der Instanz dieser Komponenten wechseln. Also hier sagt es die Symbolinstanz, weil Home solid, wir sehen tatsächlich unsere Symbolliste, die wir gerade erstellt haben, diese untergeordneten Komponenten in diesem Instanzselektor angezeigt. Und wir können leicht ändern, welche Instanz wir ausgewählt haben. Das ist also äußerst nützlich. Es ist gut sicherzustellen, dass Sie Benennungskonventionen konsistent sind, da Sie Konventionen benennen , während Sie bestimmen, wie sie in diesem Auslagerungsinstanzselektor angezeigt werden. Also, das ist auch etwas zu beachten. 9. Dein Projekt: Figma Community: In Ordnung. Wir haben heute viele Verknüpfungen durchgemacht und viele Produktivitäts-Hacks können wir jetzt mit Ihrem Klassenprojekt beginnen. Ich möchte, dass Sie zum Community-Abschnitt und Figma navigieren und eine UI-Kit-Vorlage finden , mit der Sie spielen möchten und gehen Sie voran und laden Sie eine herunter. Also ging ich und duplizierte das Auto-Layout-Tisch-Kit. Dies ist also ein Layout Get, dem Sie dynamisch ansprechende Tabellen wirklich schnell erstellen können. Es gibt eine Menge von diesen verfügbar in Figma-Community-Bereich und Download oder Duplet-Kit von Ressourcen. Wenn wir also auf Duplikate klicken, wird es ein neues Projekt für mich erstellen, das meine eigene Kopie ist und ich kann bearbeiten und ändern, wie ich will. Und so haben sie Tipps und Tricks Seite in hier, die Ihnen zeigt, wie Sie das Kit verwenden. Sie können Varianz austauschen, Sie können alles mit Komponenten an die Bedürfnisse der Tabelle anpassen , die Sie entwerfen. Und hier haben Sie Ihre Textilien, Ihr, Ihr Farbsystem. Also alle diese, können Sie tatsächlich finden, dass Farbsystem hier auch auf den Farbstilen. Dies ermöglicht es Ihnen, diese dynamisch zu ändern. Wenn Sie fortfahren und in eine Farbe klicken, können Sie diese Farbe tatsächlich in Ihrem Farbsystem bearbeiten und sie ändert sich durchgehend. Und dann haben sie ihre grundlegenden UI-Komponenten, die Sie den Stil von ändern können. Diese sind auch weniger drauf. Und wählen Sie eine Schaltfläche aus. Und jetzt sind alle Text-Schaltflächen in dieser blaugrün statt in dem königsblau. Es gibt also so viel, was Sie in den verfügbaren Ressourcen in der Community für Figma tun können, ich würde es lieben, wenn Sie ein UI-Kit heruntergeladen haben, das zu Ihnen spricht. Es gibt eine Menge Spaß. Und wenn Sie gerade angefangen haben, mit diesen herumzuspielen und etwas zu schaffen, erstellen Sie einfach etwas und ich lese, versuchen Sie, alle Verknüpfungen zu nutzen, die wir gelernt haben. Wenn Sie ein Design-System-Kit verwenden möchten und nur versuchen, Ihre erste Landing Page zu erstellen. Und Sie sind, wenn Sie ein Projekt haben, an dem Sie arbeiten, aber Sie möchten versuchen, einige der Verknüpfungen oder Produktivitäts-Hacks anzuwenden. Sie laden einen Screenshot hoch und teilen, welche Produktivitäts-Hack oder eine Verknüpfung, die Sie aus diesem Set lernen, wird Ihnen wirklich helfen und Sie sind vorwärts als Designer. 10. Vielen Dank!: Hey, gute Arbeit, diesen Kurs zu Figma Produktivitäts-Tipps und Tricks abzuschließen. Ich freue mich sehr, dass Sie in Ihr berufliches Wachstum und Ihr persönliches Wachstum investiert und Ihren täglichen Workflow verbessert haben und in Ihre Ausbildung, Weiterbildung investieren oder einfach nur eine neue Fähigkeit lernen, die Sie interessiert an. Und ich hoffe, Sie in meinen nächsten Kursen zu sehen. Bitte abonnieren und folgen Sie mir und Sie bleiben auf dem Laufenden über die nächsten Inhalte, die ich veröffentliche. Und wenn Sie irgendwelche Beiträge oder Feedback zu den Arten von Inhalten rund um Design und die Designbranche haben, über die Sie mehr erfahren möchten. Bitte lassen Sie es mich wissen, geben Sie mir ein Feedback und ich kann versuchen, einige Kurse auf das einzugehen, was angefordert wird. Nochmals vielen Dank.