UI/UX-Design: 6 Tipps zur Optimierung von Komponenten in Figma

1. Einführung: den ersten Monaten, in denen ich Figma benutzt habe, habe ich die Komponenten falsch verwendet. Erst als ich eintauchte und mehr über die Leistungsfähigkeit von Komponenten erfuhr , wurde mir klar, dass mein Vertrauen in Geschwindigkeit und Figma sich zum Besseren wendete. Wie UI/UX und Produktdesigner sind Komponenten die Bausteine für all unsere Projekte. Stark anzufangen ist unerlässlich wenn wir qualitativ hochwertige Arbeit leisten wollen. [MUSIK] Ich bin Maddie Beard und ich bin eine UI/UX-Designerin mit Sitz in Denver, Colorado. Ich arbeite seit 2017 professionell als Designer für große und kleine Technologieunternehmen sowie für mich selbst als Freelancer und Unternehmer. In diesem Kurs werden wir über sechs Möglichkeiten sprechen, um das Beste aus den Komponenten in Figma herauszuholen . Wir erstellen einige Komponenten auf die richtige Weise von Grund auf, richten die Eigenschaften der Komponente ein, machen sie responsiv, geben ihnen einige notwendige Varianten und machen sie schließlich interaktiv. Zum Abschluss werden wir einige Tipps für die Erstellung von Komponenten unter Berücksichtigung von Teamwork und Zusammenarbeit erläutern. Ich hoffe, Sie verlassen diesen Kurs nicht nur mit einem tieferen Verständnis der Komponenten, sondern auch mit einigen echten Fähigkeiten und Übungen. Diese Klasse richtet sich an alle Designer, die neu in Figma sind, Komponenten oder in einem Team arbeiten, oder vielleicht haben Sie schon eine Weile mit Komponenten gearbeitet , aber Begriffe wie Varianten, boolesche Eigenschaften und Auto-Layout hat gerade deine Augen glasig werden lassen. Sobald Sie diese sechs Lektionen abgeschlossen haben, werden Sie diese und weitere Funktionen nutzen , um Ihre Komponenten konsistent und flexibel zu gestalten und Ihnen und Ihrem Team viel Zeit zu sparen. Ich würde dich sehr ermutigen, diese Übungen zusammen mit mir zu machen und sie sogar mit deinem Team zu teilen, wenn du möchtest. Sie werden bald alles haben, was Sie benötigen, um diese Lektionen auf Ihre eigene Arbeit in Ihrem Unternehmen anzuwenden . 2. Eine Komponente erstellen: Lassen Sie uns zunächst lernen, wie Sie einige Komponenten richtig erstellen . Stellen Sie sich auf langfristigen Erfolg ein, indem diese fünf Tipps befolgen, wenn Sie Ihre eigenen Komponenten erstellen. Der erste Tipp ist, nur an Komponenten wie Vorlagen zu denken . Jede Instanz einer Komponente ist im Grunde jedes Mal, wenn Sie diese Vorlage verwenden. Änderungen, die Sie an der Komponente vornehmen, werden durchsickern und ändern einzelne Instanzen. Wenn Sie jedoch eine Änderung auf Instanzebene vornehmen, hat dies keine Auswirkungen auf die Hauptkomponente oder andere Instanzen der Komponente. Tipp Nummer 2: Verwenden Sie nach Möglichkeit Rahmen anstelle von Rechtecken. Drittens, nutzen Sie das automatische Layout. Viertens, achte immer auf die Ausrichtung. Fünftens, versuche, einem Pixelrastersystem zu folgen. In meiner letzten Firma haben wir ein Acht-Pixel-Rastersystem verwendet, aber was auch immer Ihr Team verwendet, ist völlig in Ordnung solange alle Designer konsistent sind. Schauen wir uns nun an, wie diese Tipps mit einigen echten Komponenten ins Spiel kommen . Ich werde damit beginnen , eine wirklich einfache Komponente zu erstellen , eine Schaltfläche. Also drücke ich einfach F auf meiner Tastatur, was die Abkürzung ist, um zu diesem Frame-Werkzeug umzuschalten. Also erstelle ich nur einen Rahmen. Wir erstellen eine , die 44 Pixel hoch und, sagen wir einfach 100 Pixel breit, für unseren Button ist. Wie ich in Tipp Nummer 2 sagte, ist es wichtig, Rahmen nur als Rechtecke zu verwenden , anstatt zusätzliche Ebenen hinzuzufügen. Anstatt zum Beispiel ein blaues Rechteck über diesem Rahmen hinzuzufügen , gebe ich diesem Rahmen einfach eine blaue Hintergrundfarbe. Auf diese Weise habe ich es mit weniger Ebenen zu tun und das sehr praktisch, wenn es um das automatische Layout geht. Lassen Sie uns nun den Text hinzufügen, also drücke ich einfach T als Tastenkombination. Jetzt wähle ich erneut diesen Rahmen aus und gebe ihm einfach einen Eckradius von vier, nett und subtil. Zu jedem Zeitpunkt können wir daraus eine Komponente machen, indem wir auf dem Frame auswählen und Optionsbefehl K drücken. Sie können dies auch tun, indem Sie zu Objekt und dann nach unten gehen, um eine Komponente zu erstellen. Nun, da dies eine Komponente ist, benennen wir sie einfach um. Kommen wir nun zum Autolayout. Der Grund, warum wir das automatische Layout verwenden, ist , dass verschiedene Instanzen dieser Komponente zwar unterschiedlich groß erscheinen können, der Text jedoch immer zentriert sein sollte. So wie es jetzt ist, ist der Text nicht zentriert. Wählen wir also den gesamten Frame aus und klicken Sie auf Autolayout. Standardmäßig wird das Kind angeheftet, was in diesem Fall der Text innerhalb des gesamten Rahmens ist innerhalb des gesamten Rahmens Es wird oben links mit etwas Abstand angeheftet. Wie Sie sehen können, haben wir 23 Pixel Polsterung auf beiden Seiten und 12 Pixel oben und unten. Aber was wir wollen, ist sicherzustellen , dass es an der Mitte festgeheftet wird. Also werde ich dort einfach auf das Symbol klicken. Dann denke ich, dass 12 Pixel gut für oben und unten sind, aber machen wir 24 für rechts und links. Wie gesagt, die Verwendung von Vielfachen von acht und sogar vier ist sehr hilfreich, wenn es darum geht, die Konsistenz in Ihren Layouts aufrechtzuerhalten . Was passiert nun, wenn wir die Größe dieser Schaltfläche ändern? Sie können sehen, dass der Text in der Mitte bleibt. Das ist genau das, was wir wollen. Lassen Sie uns nun eine andere Komponente erstellen. Lass uns eine Karte machen. Also drücke ich wieder F auf meiner Tastatur. Lass uns diese 200 mal 200 machen, nur für den Moment. Ich werde diese Karte umbenennen Option Command K. Ich mache R für Rechteck und lege hier ein Bild hinein, das die erste obere Hälfte dieser vertikalen Höhe einnimmt . Um das als Maske zu verwenden, gehe ich einfach in Fülle statt in Vollbild, ich klicke auf Bild und wähle dann einfach ein Bild aus. Ich habe diese Pizza hier auf meinem Desktop. Also wir haben das, jetzt fügen wir die anderen Elemente hinzu, die wir benötigen. Lass uns etwas Text schreiben. Also vielleicht ist das ein Titel und dann eine Beschreibung. Das sollte viel kleiner sein. Wir wollen das nach links ausrichten und machen dasselbe mit dem Titel. Jetzt, da wir alle Elemente haben , die wir benötigen, werde ich das Autolayout einschalten. Es wurde also ein bisschen funky, aber das ist okay. Lassen Sie uns herausfinden, warum das passiert ist und wie wir es genau so gestalten können, wie wir es als Vorlage für den Rest unserer Projekte haben möchten . Sie können also sehen, dass, wenn ich das automatische Layout erstellt habe, automatisch die Kinder positioniert werden, also die einzelnen Elemente innerhalb eines Frames. Es wird sie vertikal und mittig in der Mitte positionieren und oben festgeheftet. Genau das passiert hier. Dieser Text ist nach links ausgerichtet, aber das Textfeld selbst ist zur Mitte des Rahmens ausgerichtet. Also, was ich jetzt tun möchte ist, diese in einem Rahmen zu gruppieren. Ich klicke einfach auf die Bildauswahl und wir können das automatische Layout für diesen Frame innerhalb des Frames aktivieren . Also werde ich sie links oben ausrichten . Wir brauchen wirklich nur etwa vier Pixel zwischen diesen Typen. Anstatt den Text zu umarmen, möchte ich, dass er den Behälter tatsächlich füllt. Vertikal wollen wir, dass es den Inhalt umarmt. Also, das ist gut. Wenn wir dann hier auf diesen Mainframe klicken, können wir sehen, dass hier acht Pixel Platz sind. Machen wir daraus 12. Schauen wir uns nun an, was passiert, wenn wir das erweitern. Siehst du, wir bekommen Platz auf beiden Seiten. Anstatt also eine feste Breite für dieses Bild zu haben, sage ich, dass das Bild den Container füllen sollte. Wir halten die Höhe fest. Wenn wir es jetzt erweitern, können Sie sehen, dass es den gesamten Behälter füllt. Lass uns ein bisschen Polsterung hinzufügen. Wir möchten es zu diesem Element hinzufügen, weil wir nicht möchten, dass es auch auf das Bild zutrifft. Fügen wir also einfach 12 Pixel auf jeder Seite und 12 Pixel an der Unterseite hinzu. Es sieht gut aus. Geben wir dem Ganzen nun einen Eckradius, vielleicht 16. Jetzt müssen wir mit diesem Bild, das überlagert ist, reinkommen und es separat hinzufügen. Das sieht gut aus. Wir geben ihm nur zum Spaß einen Schatten. Ich werde den Schatten etwas subtiler machen. Ich verwende gerne acht Prozent. Sieht gut aus. Mit diesen beiden Komponenten machen wir bereits Tipp Nummer 1. Wir betrachten sie als Vorlagen, also achten wir sehr genau darauf , was passieren wird, wenn wir zum Beispiel diese Beschreibung so lange einschreiben, diese Beschreibung so lange einschreiben bis sie nächste Zeile. Das sieht perfekt aus. Also schau mal, wir denken über die Vorlage nach. Nummer 2: Wir verwenden, wenn möglich, Rahmen anstelle von Rechtecken. Nummer 3, wir haben das automatische Layout mit beiden gemeistert. Nummer 4, wir haben dafür gesorgt, dass alles korrekt ausgerichtet ist. Nummer 5: Wenn möglich, haben wir Polsterung und Abmessungen verwendet , die innerhalb eines Acht-Pixel-Rasters liegen. Eine Möglichkeit, zu überprüfen, ob unsere Komponenten flexibel sind und wir alles getan haben , was wir tun müssen, um sie erfolgreich einzurichten , besteht darin, eine Kopie davon oder eine Instanz herauszuziehen davon oder eine Instanz und sie wie Sie zu verwenden würde es in einem Projekt verwenden. Was wäre zum Beispiel, wenn wir hier einen wirklich langen Titel hätten. Wie Sie sehen können, hat dieser wirklich lange Titel diese Komponente erweitert, um wirklich umfangreich zu sein. Ich glaube nicht, dass wir das unbedingt wollen. Kehren wir also zu dieser Hauptkomponente zurück und ändern sie in ein Element mit fester Breite. Jetzt haben wir diese feste Breite, wir müssen sie auf jeden Fall nach links ausrichten. Schauen wir uns nun an, was passiert, wenn wir den Titel in einen längeren ändern. Da haben wir's. Jetzt, da dies eine feste Breite hat, wird sie nach unten gedrückt, anstatt sie nach rechts zu verschieben. Also, jetzt können wir hier rüber gehen. Da dies die Hauptkomponente ist, werden die Änderungen auf unsere Instanz übertragen. Jetzt können wir sehen, dass wir es uns genau so wünschen würden. Also werde ich dieser Komponente ein A-Plus geben und sagen, dass wir mit der nächsten Lektion fortfahren können. Jetzt bist du dran. Fahren Sie fort, wählen Sie eine oder beide dieser Komponenten aus und erstellen Sie sie selbst. Stellen Sie sicher, dass Sie alle fünf Kästchen für die Tipps, die ich in dieser Lektion gegeben habe, ankreuzen . Wir sehen uns im nächsten. 3. Einrichten von Komponenteneigenschaften: Sie nun ein oder zwei Komponenten zur Verfügung haben, mit denen Sie arbeiten können, lassen Sie uns einige Eigenschaften einrichten , damit wir sie noch flexibler gestalten können , sodass sie in Ihren Projekten verwendet werden können. In dieser Lektion werden wir das anhand von drei verschiedenen Eigenschaften tun . Boolean, bei dem es sich um eine Eigenschaft mit True-False, On-Off-Eigenschaft, Instance-Swap und Text handelt. Schauen wir uns also an, wie diese mit diesen beiden Komponenten, die wir bereits erstellt haben, ins Spiel kommen . Fangen wir mit booleschen Eigenschaften an. Stellen Sie sich das vor, als würden Sie einen Ein-/Ausschalter erstellen. Ich denke, ein guter Ort dafür ist in diesem Button. Also werde ich hier einfach ein Symbol platzieren und jetzt wollen wir herausfinden, wie man dieses Symbol aus- und wieder einschaltet. Denn manchmal, wenn Sie diese Schaltfläche verwenden, möchten Sie vielleicht ein Symbol und manchmal nicht. Sie also eine Komponente in nur verschiedenen Instanzen dieser Komponente verwenden können , anstatt zwei separate Komponenten zu erstellen, sparen Sie viel Zeit. Vor allem, wenn man sieht, wie einfach das ist. Also, was ich tun werde, ist reinzukommen und auf dieses Symbol zu klicken. Gegenüber der Ebene haben wir dieses Symbol hier. Es heißt, Boolesche Eigenschaft anwenden. Also klicke ich darauf und es wird mir automatisch angezeigt . Der Name dieser Eigenschaft ist standardmäßig Symbol anzeigen. Das klingt für mich also gut, und deshalb werde ich das erstellen. Wenn wir das nun herausziehen, um eine andere Instanz dieser Komponente zu sehen, haben wir einen Schalter bei dem das Ziel des Umschalters das Symbol ist. Figma ist gerade intelligent genug, um zu wissen, dass wir das mit einer booleschen Eigenschaft ein- und ausschalten wollen . Das ist also wirklich einfach. Gehen wir jetzt noch einen Schritt weiter. Was ist, wenn wir dieses Symbol durch etwas anderes ändern möchten? Nun, ich habe hier ein paar Varianten dieser Komponente erstellt , und in Lektion 4 werden wir uns viel eingehender mit Varianten befassen. Aber mach dir vorerst keine Gedanken darüber, wie ich das erstellt habe, lass uns einfach darüber nachdenken, wie wir es verwenden werden. Ich habe hier also eine Komponente, dies ist die Hauptkomponente und sie hat mehrere Varianten. Ich habe also die Download-Variante, die die Standardvariante ist, eine Share-Variante und eine Save-Variante. Figma ist also intelligent genug, um zu wissen, dass wir, da diese in einer Komponente gruppiert sind, möglicherweise zwischen ihnen wechseln möchten. Also jetzt nochmal, wenn ich reinkomme und hier auf dieses Symbol klicke, sehe ich dieses Symbol hier, sehe ich dieses Symbol hier, wende die Instanz-Swap-Eigenschaft an. Also klicke ich darauf, wir nennen es Instanz, und das sieht gut aus. Also, wann immer ich eine Instanz herausziehe und hier auf dieses Symbol doppelklicke, können wir rüberkommen und es für alle Instanzen dieser Icon-Komponente austauschen. Nun, der letzte, lass uns über Text sprechen. Wenn ich also möchte, dass jemand in meine Figma-Datei kommt und den Text ändern kann in meine Figma-Datei kommt und , ohne die Komponente selbst zu berühren, können wir den Text auswählen. Dann können wir hier unten auf dieses Symbol klicken und daraus eine Immobilie erstellen. Also ziehen wir jetzt wieder eine Instanz heraus, und anstatt den Text hier einzugeben, kann ich einfach die Instanz auswählen und dann zu diesem Eigenschaftenfenster und stattdessen etwas Text eingeben. Also vielleicht wollen wir , dass es Download heißt. Dann wird diese Komponente einfach automatisch aktualisiert , ohne sie berühren zu müssen. Das Gleiche funktioniert mit so etwas. Nehmen wir an, wir möchten den Titel und die Beschreibung ändern können . Wir klicken einfach auf diesen Button oder nennen diesen einen Titel, wir nennen diese eine Beschreibung. Wenn wir nun irgendwo eine Instanz dieser Komponente haben, ohne diese Komponente berühren zu müssen, klicken wir einfach darauf und kommen hierher. Hier ist der Titel, das ist eine Beschreibung. Wie Sie sehen, wird es auch auf alle Autolayout-Eigenschaften achten Autolayout-Eigenschaften , die wir zuvor festgelegt haben. Das macht die Dinge für Sie und Ihr Team einfach viel einfacher und schneller. Machen Sie weiter und spielen Sie mit diesen Eigenschaften mit den Komponenten , die Sie erstellt haben , und lassen Sie Ihrer Kreativität freien Lauf und machen Sie etwas Neues und testen die Grenzen des Booleschen und der Instanzwechsel und die Texteigenschaften. 4. Komponenten Responsive: Sie daran, dass Sie und Ihr Team diese Komponenten möglicherweise auf verschiedenen Bildschirmgrößen verwenden . ist also sehr hilfreich und zeitsparend, sie reaktionsschnell zu machen . Wir haben in Lektion 1 ein bisschen darüber gesprochen. Aber lassen Sie uns hier ein anderes Beispiel mit einer Navbar machen. Lassen Sie uns mit einer Navigationsleiste beginnen, die für ein iPad mini optimiert ist , und prüfen, ob wir sie für einen Desktop-Bildschirm responsiv machen können . Also drücke ich „F“ für Frame und erstelle etwas , das 774 Pixel breit ist, und lass uns mit einer Höhe von 60 Pixeln beginnen. Ich werde dem eine schöne Hintergrundfarbe geben. Wir schnappen uns ein gefälschtes Logo, das ich gemacht habe, und legen es da rein. Dann lassen Sie uns einige Menüpunkte machen. Also, wenn das ein Café ist, möchten wir vielleicht Menü, Öffnungszeiten und Kontakt. Nun, genau wie zuvor, wollen wir daraus eine Komponente machen, Option „Command K“, ich nenne es nav. Dann schalten wir das automatische Layout sofort , damit wir sehen können, womit wir arbeiten. Standardmäßig wird es also alle unsere Inhalte umarmen. Lassen Sie uns diese also in einem Rahmen gruppieren , sodass wir das automatische Layout aktivieren können. Nehmen wir an , wir möchten 24 Pixel zwischen jedem von ihnen haben. Dann sieht es definitiv so aus sich diese mehr nach unten umarmen, also stellen wir sicher, dass wir das mittig ausrichten können. Jetzt haben wir also den übergeordneten Frame, der die gesamte Komponente darstellt und zwei verschiedene untergeordnete Elemente. Mal sehen, was passiert, wenn wir versuchen, das zu vergrößern. Das ist definitiv nicht das, was wir wollen. Also, was ich tun werde, ist diesen Frame auszuwählen und rüber zu kommen und auf diese drei Punkte zu klicken Anstatt gepackt, . Anstatt gepackt, ändern wir das in Leerzeichen dazwischen. Sie können sehen, dass das eher dem entspricht, was wir wollten. Wir können dann reingehen und die Polsterung an der Seite wechseln, vielleicht würden 24 dafür funktionieren. Dann sieht es ein bisschen groß aus, also werde ich einfach reinkommen und es ein bisschen kleiner machen. Aber als ich das verkleinert habe, sieht es so aus, als hätte es die Höhe verändert. Ich möchte also sicherstellen , dass meine Höhe immer 60 Pixel beträgt , also sagen wir mal fest dafür. Das sieht also gut aus. Lassen Sie uns es jetzt testen. Ich habe diese Rahmen hier, einen für ein iPad Pro und einen für ein MacBook Pro, 16 Zoll. Also, was ich tun werde , ist, sie zu kopieren und einzufügen und wir werden sie einfach positionieren. Also zuerst für unser iPad und dann für unseren Desktop. Wie Sie sehen, hat das wirklich gut funktioniert, und Sie fragen sich vielleicht, was Sie tun würden, wenn Sie eines davon für einen iPhone-Bildschirm erstellen möchten? Nun, was wir vielleicht tun möchten, ist daraus ein Hamburger-Menü zu machen, und das müsste eigentlich eine separate Variante sein. Lassen Sie uns in der nächsten Lektion über Varianz sprechen. Aber vorher sollten Sie sich mit der Erstellung einer responsiven Komponente vertraut machen. Sie können etwas erstellen, das von einem iPhone auf iPad oder iPhone auf den Desktop oder vom iPad auf den Desktop reagiert . Was auch immer Sie möchten, und wenn Sie nicht weiterkommen , können Sie einfach das tun, was ich getan habe, und dieselbe Navigationsleiste erstellen . 5. Varianten für Komponenten erstellen: Manchmal reichen Eigenschaften und automatisches Layout nicht aus, um Ihre Komponenten flexibel genug zu machen , um sie im gesamten Projekt oder Designsystem verwenden zu können . Hier kommen Varianten ins Spiel. Sie können viel Zeit und Mühe sparen, wenn es darum geht, Bildschirme mit Ihren Komponenten zu entwerfen. In dieser Lektion erstellen wir Varianten für verschiedene Status einer Schaltfläche, Felder und Symbole, die Sie verwenden und austauschbar verwenden und austauschen können. Fangen wir mit dieser Schaltfläche an , die wir bereits erstellt haben. Also klicke ich einfach auf den gesamten Rahmen. Dann kommen wir hier zu den Eigenschaften und klicken auf den „Plus“ -Button und wir erstellen eine neue Variante. Dann klicke ich hier unten auf die Plus-Schaltfläche , um eine neue zu erstellen. Das wird also automatisch als Standard gekennzeichnet. Lassen Sie uns nun diese Eigenschaft bearbeiten und ihr einen Namen geben. Wir nennen es Staat. Die Standardeinstellung ist hier gut. Was wollen wir nun aus diesem Staat machen? Ich denke, wir beginnen mit Hover. Lassen Sie uns den Schwebezustand also etwas dunkler als Blau machen. Ich gehe einfach zum Befehlsklick, um zu der Bildebene hinter dem Text im Symbol zu gelangen. Ich gehe hier rein und ziehe das einfach runter, bis ich denke , dass es dunkel genug ist. Nur ein bisschen, es muss nicht zu drastisch sein. Jetzt ist das der Hover-Status und lassen Sie uns einen weiteren erstellen. Vielleicht haben wir einen Staat , der deaktiviert ist. diese, Nehmen wir statt Blau eine Farbe wie damit sie eindeutig deaktiviert ist und Sie sie nicht verwenden können. Ich finde das gut, also ist das einfach genug. Lassen Sie uns nun dasselbe mit einem Feld machen. Lassen Sie uns dieses Feld zunächst gemeinsam erstellen. Ich drücke F für Frame. Mal sehen, wir wollen auf jeden Fall, dass es 44 Pixel hoch ist, das Feld selbst und die Länge spielen im Moment keine Rolle. Lassen Sie uns das Feld beschriften und es zu einer Komponente machen. Was wir nun tun wollen, ist dieser Hintergrund nicht existiert weil wir eine Feldbezeichnung haben wollen. Das kann also ziemlich klein sein. Wir positionieren es einfach oben rechts. Dann wollen wir, dass ein anderer Frame innerhalb dieses Frames das eigentliche Feld ist, und dieser wird gefüllt sein . Vorerst machen wir es einfach weiß. Das wollen wir 44 Pixel hoch sein. Dann wollen wir sicherstellen , dass all das innerhalb des Rahmens liegt. Lass uns jetzt das Autolayout machen und einfach ein bisschen damit spielen. Wir haben dieses Etikett. Ich denke, wir wollen dieses Etikett tatsächlich etwas größer machen , 12 ist normalerweise gut für Etiketten. Jetzt hat es standardmäßig vier Pixel dazwischen oder fünf Pixel dazwischen . Machen wir vier draus. Lass uns diese Ecken einfach ein bisschen umrunden. Das sieht wirklich gut aus. Lassen Sie uns nun etwas Text in das Feld schreiben. Beispieltext. Wir machen das ein bisschen größer. Ich denke, wir wollen es mindestens 14 haben und wir werden es normal machen. Richten wir es nach links aus. Stellen wir sicher, dass dies auch nach links ausgerichtet ist , und lassen Sie uns diese zusammenfassen, damit wir das automatische Layout aktivieren können. Ich denke, wir wollen die Breite korrigieren und nur sicherstellen, dass wir, ich denke, wir können weniger Polsterung haben. Lass uns acht Pixel machen und dann 16 oben und unten. wir sicher, dass wir den Text darin zentrieren. Das sieht gut aus. Jetzt werden wir dafür definitiv mehrere Varianten benötigen. Ich füge einfach eine Eigenschaft hinzu, füge eine Variante hinzu. Wir machen das zu unserer Standardeinstellung. Wir nennen es den Standardstatus der Immobilie. Dann nennen wir dieses Feld. Jetzt wo ich darüber nachdenke, denke ich, dass der Standardstatus bevor jemand anfängt, etwas einzugeben, eher wie Beispieltext aussehen sollte. Gehen wir rein und machen es grau. Das reicht vorerst. Nun, dieser Text ist eigentlich der ausgefüllte Text. Jetzt haben wir zwei verschiedene Varianten und lassen Sie uns noch eine machen. Wenn jemand darüber schwebt, sollte hier vielleicht ein Strich darauf stehen , um Ihre Aufmerksamkeit darauf zu lenken. Wir fügen einfach einen Strich hinzu. Lass es uns etwas subtiler machen. Das sollte gut sein. Ein Pixel ist gut. Das sieht wirklich gut aus. Was wir jetzt haben, sind drei verschiedene Varianten. Aber dieser, den wir geschaffen haben, der Staat, den wir geben würden, schwebt. Das Problem ist jedoch, dass jemand Mauszeiger über ein Feld hätte bewegen können, das bereits gefüllt ist , und über ein Feld, das noch nicht gefüllt ist. Wir wollen sie eigentlich in zwei verschiedene Immobilien verwandeln. Ich werde das vorerst loswerden. Was ich tun werde, ist eine weitere Variante hinzuzufügen. Dann nur visuell, ich ordne sie gerne etwas anders an, wenn es sich um eine andere Eigenschaft handelt , damit ich visuell sehen kann, womit ich hier arbeite. Jetzt haben wir diesen, und lassen Sie uns diesen auch kopieren. In dieser linken Spalte haben wir nun diejenigen, die Standard sind. Jetzt müssen wir eine ganz andere Variante hinzufügen. [NOISE] Anstatt dass dieser Status heißt, nennen wir ihn Hover. Jetzt wird der Hover bei diesen beiden Ja und bei diesen beiden nein sein . Dann geben wir diesen beiden den gleichen Schlag wie zuvor. Stellen wir sicher, dass wir auch dafür den Staat ausfüllen . Dies ist die Standardeinstellung. Das sollte gefüllt sein. Jetzt haben wir diese Komponente mit insgesamt vier Varianten und zwei Eigenschaften. Schauen wir uns nun an, was passiert, wenn wir es benutzen. Ich werde das einfach hier drüben einfügen. Da wir nun den Wert Ja, Nein als eine unserer Eigenschaften hatten , wurde dieser Wert automatisch in einen booleschen Wert umgewandelt, was bedeutet, dass wir ihn ein- und ausschalten können, ähnlich wie das Symbol in der Schaltfläche in eine frühere Lektion, die es einfacher macht. Dann können wir auch vom Standardtext zum ausgefüllten Text hin und her wechseln . Jetzt können Sie sehen, wie das funktioniert. Sie können mit der Komponente so viele Varianten haben , wie Sie möchten. Sie können damit sehr detailliert werden. Dies ist nur ein sehr einfaches Beispiel für die Verwendung von Varianten mit einem Feld. Lassen Sie uns nun auf diese Symbole eingehen , die ich Ihnen zuvor gezeigt habe. Ich werde sie schwarz machen, damit sie vorerst besser zu sehen sind. Um Ihnen zu zeigen, wie ich das gemacht habe, füge ich einfach einen weiteren hinzu. Wir werden die Plus-Schaltfläche verwenden und das wird nur eine hinzufügen, die standardmäßig wie diese allererste aussieht. Ich doppelklicke einfach hier rein und lösche das. Aber wir haben immer noch diesen Rahmen hier. Ich schnappe mir einfach eines dieser anderen Icons. Ich drücke einfach Befehl C zum Kopieren. Jetzt wähle ich auf diesem Frame und Command V zum Einfügen aus. Dann ändere ich die Größe einfach so, dass es wie die anderen gut in diesen Rahmen passt. Das sieht gut aus. müssen wir ihm nur noch einen Namen geben. Typ, wir nennen das Bearbeiten. Das ist alles, was Sie tun müssen , um diese Reihe von Symbolen zu erstellen. Wenn Sie in Ihrem Designsystem Symbole haben, die unterschiedliche Größen haben können , können Sie absolut zwei verschiedene Hauptkomponenten für Symbole verwenden. Eine kleine und eine große oder eine große, mittlere und eine kleine, was auch immer für Sie funktioniert. Ich möchte dir nur schnell zeigen , wie ich sie tatsächlich gemacht habe. Ich drücke nur T für Text. Ich habe eine Schrift namens Font Awesome 5 Pro. Wenn ich gerade anfange zu tippen, gebe ich Pause ein, dann gibt es dafür ein Pausensymbol. Ich werde die Solid-Version machen. Dann mache ich nur noch Ctrl-Klick, Abflachen. So habe ich diese Icons erstellt. Lass uns hier nur ein paar mehr erstellen. Variante hinzufügen, einklicken, löschen, kopieren und einfügen, Größe ändern. Sie können es sogar gut in diesem Rahmen zentrieren. Das sieht gut aus. Jetzt haben wir fünf verschiedene Varianten dieses Symbols. Sie können es projektübergreifend in allen Komponenten oder Layouts verwenden , die dieses Symbol haben. Das macht es einfach viel einfacher, ein- und auszuwechseln. Sehen wir uns das in Aktion an. Jetzt werde ich mir eine Instanz dieser Komponente schnappen und sehen, wie flexibel wir damit umgehen können. Wenn wir es auswählen, können wir den Status ändern. Vielleicht ändern wir es auf Hover. Wir können auf das Symbol tippen und es in eines der von uns erstellten Symbole ändern. Bearbeiten. Dann können wir sogar hierher zurückkehren und den Text ändern ohne die Komponente zu berühren. Um das zu üben, schnapp dir eine deiner Komponenten und baue ein paar Varianten aus. Wenn Sie nicht weiterkommen, können Sie mit diesen Tastenzuständen beginnen. Erstellen Sie genau wie ich einen Standardstatus, einen Hover-Status und einen deaktivierten Status. Dann können Sie gerne einen Screenshot davon machen und ihn im Diskussionsbereich teilen. 6. Komponenten interaktiv machen: Ihre Komponenten interaktiv zu gestalten, ist definitiv eher eine zusätzliche Sache , die Sie tun können, wenn Sie Zeit haben oder wirklich mit dem Prototyping beginnen möchten. Wenn Sie jedoch in einem Team arbeiten , das viel Prototyping durchführt, sei es zum Testen oder zur Präsentation vor Nicht-Designern, kann Ihnen dies definitiv viel Zeit sparen. Stellen Sie sich das wie Prototyping auf Komponenten- oder Vorlagenebene vor , nicht auf Instanzebene. Beispielsweise übernimmt jeder Bildschirm , der eine Instanz dieser Hauptschaltflächenkomponente enthält , diese Verhaltensänderung, wenn der Mauszeiger über den Mauszeiger bewegt wird . Sehen wir uns das in Aktion an. Nun, wie schafft man das eigentlich? Nun, es ist super einfach. Wir werden uns nur mit diesen beiden Zuständen der Taste befassen. Was ich tun werde, ist auf diesen zu klicken und zum Prototyp überzugehen. Sobald ich das gemacht habe , sehe ich hier dieses Plus-Zeichen, wenn ich darüber drehe. Ich werde klicken und ziehen. Ich ziehe diesen Pfeil in den Schwebezustand. Dann machen wir es hier, statt beim Tippen, während wir den Mauszeiger bewegen, und es wechselt in diesen Schwebezustand. Das ist einfach genug. Dann verlassen wir den Prototypmodus und wechseln in den Designmodus. Ich werde diese Komponente kopieren. Nur um das in Aktion zu zeigen, füge ich es hier in diese Komponente ein. Dann klicke ich auf diesen ganzen iPhone-Frame und drücke hier oben auf die Wiedergabetaste. Sobald es geladen ist, können Sie eine Vorschau des Bildschirms sehen und ich werde es durchgehen. Wie Sie beim Zeigen mit dem Mauszeiger sehen können, diese Instanz dieser Komponente wechselt diese Instanz dieser Komponente von hellerem Blau zu dunklerem Blau. Es gibt so viel, was Sie mit diesen Arten von Interaktionen tun können . Dies ist nur die absolut einfachste aber ich finde, dass ich sie am häufigsten verwende. Probiere es aus und werde dann kreativ damit. Überlegen Sie sich Ihre eigene Interaktion und erstellen Sie einige Instanzen davon und testen Sie sie mit dem Vorschauplayer. 7. Aufbau mit Teamwork im Kopf: Bevor wir diesen Kurs beenden, möchte ich einige meiner Tipps zum Bauen mit Blick auf Teamarbeit teilen . Wenn Sie Komponenten für Ihr Team erstellen, unabhängig davon, ob Ihr Team aus zwei oder 50 Designern besteht, tragen diese Schritte zu einem reibungslosen Ablauf bei. Nummer 1: Verwenden Sie konsistente Benennungskonventionen für Ihre Komponenten. Es spielt keine Rolle, ob Sie nur ein paar Komponenten haben , wie wir es gerade tun, aber wenn Sie anfangen, ein ganzes Designsystem zu entwickeln, werden Sie viele, viele weitere Komponenten haben , viele Varianten, und sogar verschiedene Versionen von Komponenten. Was ich gerne mache, ist, diese auf verschiedene Seiten aufzuteilen und damit zu beginnen, eine Datei zu erstellen , die Ihr Designsystem ist. Darauf werden wir in diesem Kurs nicht näher eingehen , weil Designsysteme ein ganz anderes Biest sind, über das ich eine ganze Klasse machen kann. Aber früh mit Namenskonventionen zu beginnen , kann Ihnen wirklich helfen. Nehmen wir zum Beispiel an, wir haben zwei Versionen dieser Kartenkomponente. Vielleicht haben wir eine mit einem Bild und vielleicht haben wir eine mit Symbolen. Dann kannst du diese entsprechend benennen. Du könntest Karte/Bild und Karte/Symbole sagen. Das hilft wirklich, wenn Leute diese Komponenten verwenden und sie aus dem Asset-Panel in Figma ziehen . Zurück zu unserem anderen Beispiel könnten wir auch Nav/Mobile versus Nav/Desktop oder Icons/Large, Icons/Small sagen . Sie können sogar genauere Informationen erhalten, Icons/12 für 12 Pixel gegenüber Icon/24 für 24 Pixel. Ich habe auch gesehen, dass es so gemacht wurde. Nummer 2: Benennen Sie Ihre Ebenen innerhalb einer Komponente. Wann immer ich Komponenten erstelle, mache ich mir keine allzu großen Gedanken darüber, wie chaotisch es ist. Aber dann gehe ich zurück, sobald ich mit der Funktionsweise einer Komponente zufrieden bin mit der Funktionsweise einer Komponente zufrieden . Ich teste sie auf verschiedenen Bildschirmgrößen, dann bin ich damit zufrieden. An diesem Punkt werde ich zurückgehen und anfangen, meine Ebenen zu benennen und die Dinge wirklich zu organisieren. Oft werde ich Elemente in verschiedenen Frames rahmen. Es wird zu einem Rahmen innerhalb eines Rahmens innerhalb eines Rahmens innerhalb eines Rahmens. Kennzeichnung all dieser verschiedenen Frames ist sehr hilfreich, wenn jemals jemand reinkommen und diese Komponente optimieren muss. Nummer 3 ist, über die Art von Textbeschriftungen nachzudenken , die Sie verwenden, wenn Sie Beispieltext verwenden. Das ist abstrakt schwer zu beschreiben. Schauen wir uns dieses Feldbeispiel an. Für all diese haben wir das Wort Label als Feldbezeichnung verwendet , aber für den Text darin verwenden wir Beispieltext im Vergleich zu ausgefülltem Text. Das wird auch Entwicklern wirklich helfen , anstatt nur Lorem ipsum da drin zu haben, beschreibt es ihnen tatsächlich so, wie der ausgefüllte Text aussehen sollte, er ist schwarz, im Gegensatz dazu der Beispieltext sollte so aussehen, der grau ist. Ich habe dasselbe mit der Kartenkomponente gemacht. Ich habe den Titel benannt und dann die Beschreibung, die ich da habe. Das ist eine Beschreibung und manchmal füge ich sogar etwas hinzu, es kann in zwei Zeilen gehen, bevor es abgeschnitten wird oder so. Ich werde das als Leitfaden für meine Entwickler verwenden. Alles in allem geht es darum, zu versuchen Text in Ihren Komponenten zu Ihrem Vorteil zu nutzen, und das wird nur für Klarheit für alle Beteiligten sorgen. Nummer 4, ich habe das bereits in mehreren Lektionen geteilt , verwende aber das automatische Layout. Ich kann Ihnen nicht sagen, wie oft ich eine Komponente verwendet habe und so frustriert war , denn in der Sekunde , in der ich sie in einem echten Projekt verwende, ist sie für mich einfach nicht flexibel genug, um sie zu verwenden und also muss ich es anpassen und währenddessen wäre es viel schneller, es auf Komponentenebene anzupassen , sodass die Arbeit nicht mit allen Designern in Ihrem Team verdoppelt, verdreifacht oder vervierfacht wird. Das sind meine vier Tipps für Teamwork beim Bauen. Sie gerne über diese nach und teilen Sie einige Ihrer Favoriten mit Ihrem Team. 8. Schlussgedanken: Herzlichen Glückwunsch, dass Sie diesen Kurs abgeschlossen haben. Ich hoffe wirklich, dass diese Lektionen Ihnen nach und nach geholfen haben, sich beim Erstellen von Komponenten in Figma wohler zu fühlen . Ich ermutige Sie dringend, weiter zu üben und das Gelernte mit Ihrem Team zu teilen . Sie können auch gerne alle Fragen , die im Diskussionsbereich unten gestellt wurden, hinterlassen , die im Diskussionsbereich unten gestellt wurden, Ich werde sicherstellen , dass sie beantwortet werden. Vielen Dank, dass du heute Zeit mit mir verbracht hast. Wir sehen uns in meiner nächsten Klasse oder drüben auf meinem YouTube-Kanal. Tschüss.