Design wie ein Profi: Figma-Token für Konsistenz und Effizienz im Designsystem

1. Einführung: Arbeiten Sie hart daran, die Inkonsistenz in Ihrem Design zu beheben , und möchten Ihre Benutzererfahrung auf allen Plattformen vereinheitlichen Sie möchten die Skalierbarkeit Ihres Systems erhöhen, dann sind Sie hier richtig In diesem Kurs werden wir das Design-Token verwenden, um die Einheitlichkeit in unser gesamtes Projekt zu bringen Zunächst werden wir uns von unserem TDS-Update verabschieden. Wie beim Design-Token werden wir einen Token ändern und beobachten, werden wir einen Token ändern und wie er sich über die Designs verteilt Wir werden auch aufhören, den Wal neu zu erfinden, da wir die Tokens fördern werden, um den Arbeitsablauf wiederzuverwenden und zu rationalisieren Ideal für UIUX-Designer, Produktdesigner oder Einzelpersonen, die ihre Effizienz verbessern und ihren Designprozess mit Figma-Token standardisieren möchten Effizienz verbessern und ihren Designprozess mit Figma-Token standardisieren ihren Designprozess keine Vorkenntnisse über Token erforderlich, aber ein grundlegendes Verständnis von Figma guter Letzt werden wir auch die Lücke zwischen der Designkommunikation schließen, indem wir eine gemeinsame Sprache für Ihr Team schaffen . Lass uns anfangen. 2. Dein Kursprojekt: Laufe des Kurses wirst du weiter üben, indem du dein eigenes Design-Token in Figma Bitte laden Sie die Figma-Datei mit dem Design-Token Fortuden Dot herunter. Diese Datei bietet einen praxisnahen Ansatz, der es Ihnen ermöglicht, Fähigkeiten in Echtzeit aufzubauen und sicherzustellen, dass Sie jedes der Konzepte so beherrschen, wie es Sobald Sie die Datei geöffnet haben, sieht sie so aus. Sie können den Dateinamen oben lesen, Token in Klammern für Schüler entwerfen, und wenn ich die Datei ein wenig vergrößere, werden Sie das erleben. Ich habe dieses Symbol bewusst grau dargestellt, sodass Sie das Token erstellen und es im Verlauf des Kurses anwenden können. 3. Was ist Design-Token: Was sind Design-Tokens? Bei Design-Token geht es vor allem darum, die Designeigenschaften und den Wert einer unterschiedlichen Ausrichtung in den Designsystemen zu verwalten die Designeigenschaften und den Wert . Wenn ich mir die Karte gerade ansehe, ist ein Teil des UI-Elements darauf vorhanden. Eines davon ist die Karte selbst. Der zweite ist der Text. Der dritte ist der Button. Nun ist jedem der Benutzeroberflächenlamente eine Eigenschaft zugeordnet Eine Karte kann rund sein, ein Text, der eine Farbe, Größe usw. hat , Größe usw. Eine Schaltfläche hat auch eine Farbe, Größe, einen Abstand, einen Abstand usw. Jeder dieser Werte befindet sich innerhalb des Tokens. Dieser Wert kann in Form von Farbe, Zahl, Stamm oder Boolean dargestellt Zahl, Stamm oder Boolean Im Allgemeinen haben wir drei Arten von Tokens. Eines davon sind primitive Token, eeny-Token und Component-Token Sehen wir uns die primitiven Token im Detail an. 4. Primitive Token: Farbe ist eines der am häufigsten verwendeten primitiven Tokens in jedem Designsystem. Sie werden auch als globale Tokens bezeichnet. Lassen Sie uns einige primitive Token erstellen. Es gibt zwei Möglichkeiten, wie wir es erstellen können. Eine ist manuell und die zweite ist die automatische Ebene. Drücken Sie auf eine beliebige Stelle auf der Leinwand und wir gehen nach rechts hinein und klicken auf diese, Ken Variablen. Sie können auf eine beliebige Stelle in diesem Bereich klicken. Ich werde dieselbe Wählbox öffnen. Sie erstellen es manuell, klicken auf die Notenvariable und wählen die Farbe aus. Ich gebe dir einen Namen, hat 500 hier. Es ist auf diesem. Wenn wir diesen Farbpilot öffnen, können wir einfach eine beliebige Farbe auswählen , diese verlieren und die Variable ist jetzt erstellt. Jetzt ist es zeitaufwändig, dieses Top auf diese Weise zu erstellen. Klicken Sie mit der rechten Maustaste und lassen Sie uns dieses Ding löschen. Stattdessen werden wir es intelligent machen. Gehen Sie zur Werkzeugleiste und wählen Sie diese Schaltfläche, um die Aktion aufzurufen. Sie können die Tastenkombination Strg K verwenden, oder wenn Sie auf einem Macintosh sind, können Sie Command K verwenden. Gehen Sie zum Plug-In und Sie können dieses Plugin namens The unCSS color General verwenden Sie können jedes Plugin verwenden, soweit es Ihnen erlaubt, die Variablen zu generieren Ich habe Ph-Farbe griffbereit bei dir. Kopiere diese erste Farbe. Farbleitfaden eingegeben und die Variablen gelöscht. Dies ist der erste. Lassen Sie uns diese Übung für die zweite Farbe (Bightd, Copy, Faced und Created ) durchführen. Was passiert nun Wenn ich auf die lokale Variable klicke, finden wir nichts. Wenn Sie jedoch auf dieses Drop-down-Menü klicken, hat es einen Abschnitt namens Farben und es werden automatisch alle Variablen erstellt , nach denen wir suchen. Das sind alles unsere primitiven Tokens. Jetzt werde ich dieses Ding in primitiv umbenennen , damit es leicht zu verstehen ist. Auf diesen werde ich doppelklicken, sagen wir primär, und auf diesen einen Doppelklick sekundär. Wir haben unsere ersten primitiven Öffnungen erstellt. 5. Variablen erstellen: Nachdem Sie das Plugin für den Foundation Color Generator ausgeführt haben, werden Sie einige subtile Änderungen an der Benutzeroberfläche feststellen. Wenn ich auf eine beliebige Stelle auf der Leinwand klicke und auf die rechte Seite gehe, können Sie im Farbstil sehen, dieser Bereich zuvor leer war. Jetzt habe ich sowohl einen blauen als auch den gelben Stil , die hier auftauchen. Wir wollen diese Hierarchie nicht. Also was ich tun werde, ich werde beide auswählen, indem ich die Sift-Taste drücke und sie anklicke und nach oben ziehe Sobald ich diese Aktion ausführe, wird das Fundament automatisch gelöscht Der nächste Schritt wäre, diesen Stil für die Variable zu erstellen Dafür werde ich ein Plugin verwenden , das Style to Variable heißt. Ich gehe nach unten und klicke auf die Aktion. Und hier oben sehen Sie, dass der Stil variabel ist. Ich möchte mir etwas Zeit nehmen und nach diesem suchen. Jetzt werden Sie mehrere Plugins sehen, aber das, das wir verwenden, ist dieses. Also werde ich Ihnen die Details zeigen, damit wir alle auf derselben Seite sind alle auf derselben Seite und Sie auch die gleiche Erfahrung machen. Das ist ein sehr gutes Plugin. Ich habe es schon mehrmals versucht. Lassen Sie mich also Escape drücken und ich kehre zu meinem Bildschirm zurück. Lassen Sie uns nun das Plugin ausführen und lassen Sie mich die Variable auf der rechten Seite öffnen Jetzt passiert hier die Magie. Es wird dir sagen, welche Sammlung du erstellen möchtest , da wir keine Sammlung in unseren Variablen haben, also werde ich sagen, wir wollen eine Sammlung erstellen und ich möchte einen Namen geben, der primitiv ist. In dem Moment, in dem ich auf Erstellen klicke, ist Folgendes passiert. Es hat automatisch alle primitiven Token erstellt , die wir für unser Designsystem benötigen. Es bedurfte jedoch noch einiger Verfeinerungen, die wir in wenigen Sekunden erledigen werden Aber du kannst dir gut vorstellen, eins, zwei, und wir werden noch mehr dazu machen Jetzt lass mich X hier raus und lass mich auch hier raus. 6. Feinabstimmungs-Token: Um unser Token zu verfeinern, gehen wir zum Abschnitt mit den Variablen, klicken wir darauf und finden es heraus. Welche Tokens haben wir gerade? Wir haben ein blaues. Wir haben ein gelbes Bild auf der linken Seite als Gruppe, und darin haben wir die Spielsteine. Nun, Blau ist sehr allgemein gehalten. Benennen wir es in primär um. Das wird also mehr Kontext hinzufügen, und den gelben möchte ich als sekundären Kontext verwenden. Wählen Sie die primäre aus. Ich möchte den blauen Bindestrich des Textes entfernen. Entweder mache ich dieses Ding manuell oder wir können ein Plug-In verwenden, um dieses Ding für unsere Bedürfnisse zu automatisieren Lass mich X hier raus. Lass mich zum Plugin-Bereich gehen, was Action ist, und ich gehe zum Plug-In und Widget und verwende das Plugin namens Batch Rename Variable. Um sicherzugehen, dass Sie auf derselben Seite sind, zeige ich Ihnen die Details des Plugins. Dies ist das Plugin, in dem ich verwende. Lass mich dieses Plugin ausführen. Und lass mich auf die rechte Seite gehen und die Variable öffnen. Jetzt werde ich das Ding Seite an Seite halten. Für die rechte Seite kopiere ich den Text, den ich suchen möchte, und klicke auf die Vorschau-Änderungen. Unten können Sie sehen, lassen Sie mich dieses Ding entfernen, damit Sie es klarer sehen können. Macht es genau das, was wir brauchen? Es entfernt Blue Dash, das rechte Innere. Um zu sehen, wie es in Bearbeitung ist, scrolle ich einfach nach unten und übernehme die Änderungen. Lassen Sie mich beide Seite an Seite behalten. Lassen Sie mich nach unten scrollen und die Änderungen übernehmen damit Sie sehen können, wie Bj entfernt wird Lass uns mit der Sekundarstufe weitermachen. Lass mich sehen, Teil davon zu sein. Überprüfe die Änderungen. Klicken Sie erneut auf die vorgenommenen Änderungen. Jetzt sind wir in der Lage, dass die Tokens etwas sind , das ich sehr gerne verwende, wir können es weiter skalieren, wenn wir im Kurs lernen. 7. Zusätzliche primitive Token: Wir möchten unserer primitiven Sammlung zusätzliche primitive Token hinzufügen . Nun, was das bedeutet. Lass mich auf die rechte Seite gehen und die Variable öffnen. Wir haben also eine Sammlung, deren Name primitiv ist. Sie können es oben links sehen, und innerhalb dieser Sammlung möchte ich dieser Sammlung einige primitivere Tokens hinzufügen. Jetzt werde ich hier mit X rauskommen und die gleiche Übung machen , die wir ein paar Videos gemacht haben. Ich gehe also auf die rechte Seite und generiere die Stile, die wir für die Erstellung des Tokens benötigen. Aber vorher musst du noch eine Plausibilitätsprüfung durchführen und die gelben und blauen Farben hier entfernen, gelben und blauen Farben hier entfernen damit wir den Hirsch nicht regenerieren müssen Geh eins nach dem anderen. Lass mich das erste kopieren. Geh runter, geh zum Foundation Color Generator. Und hier kann ich generieren. Ich gehe zum Material, richtig, das verwenden wir, verwenden dasselbe und ich kann einfach auf Create Style klicken. Erstens, ich werde es schnell für alle Dinge eins nach dem anderen machen . A Lass uns zurückgehen und es noch einmal überprüfen. Jetzt haben wir sie alle, grün, blau, gut. Und ich wähle einfach eins, zwei, drei, vier aus, indem ich die Strg-Taste drücke, wähle es aus und setze es an die oberste Stelle, damit wir diese Hierarchie nicht brauchen. Der kniffligste Teil hier ist, ich den gleichen Plug einschalten werde, den wir ausgeführt haben , und zwar von Stil zu variabel, aber dieses Mal müssen Sie etwas vorsichtig sein Nun, hier wird gefragt welcher Sammlung müssen wir etwas hinzufügen? Wenn ich auf die rechte Seite gehe und die Variable öffne, siehst du, dass wir eine Sammlung namens primitiv haben, sodass ich das Primitiv aus dem Drop-down-Menü auswählen kann Und der zweite ist der Modus. Nun, dieser Wert ist nichts anderes als das, was hier auf der rechten Seite kommt. Ich habe keinen Flügel verliehen, also sage ich einfach Licht und werde hier denselben Text verwenden. Jetzt werde ich ihn erstellen und aktualisieren und Sie können gleich sehen, dass alle vier Farben Orange, Blau, Braun und Grün hier auftauchen. Jetzt werde ich es schnell so umbenennen, wie wir diese Übung gemacht haben, und es für dich abschließen. Ich habe die Änderungen abgeschlossen, und so sieht unsere endgültige Ausgabe aus. die wir erstellt haben, gab es primäre und In den vergangenen Videos, die wir erstellt haben, gab es primäre und sekundäre Videos , und wir haben erfolgreich die zusätzlichen Tokens wie Warnung, Information, Erfolg und Fehler hinzugefügt , Information, Erfolg und Fehler , so wie wir es haben wollen. 8. Workaround für Bewegungstoken: Wir möchten primitive Sal-Token für unser Designsystem erstellen , die uns helfen, Warnmeldungen, Informationsmeldungen, Erfolgsmeldungen und LM-Meldungen zu unterstützen Informationsmeldungen, Erfolgsmeldungen und LM-Meldungen Um das jetzt zu tun, werden wir das gleiche Verfahren anwenden, aber es gibt einen Haken. In unseren lokalen Variablen, derzeit all unseren primitiven Tokens, versuchen wir, sie in einer Sammlung namens Primitive zu gruppieren. Was auch immer die neuen primitiven Tokens sind, die wir erstellen, gehören auch zu dieser speziellen Sammlung. Aber wenn ich mit X rauskomme und diese Übung noch einmal mache, kopiere, und diese Übung noch einmal mache, kopiere, machen wir diesen Ton, der Aktion genannt wird, wählen den Tin CSS-Farbgenerator, fügen etwas ein und erstellen Variablen. Jetzt, wo die Variablen erstellt sind, werde ich mit X hier raus kommen. Wenn ich wieder zur lokalen Variablen zurückkehre , werde ich diese Tokens hier nicht auftauchen sehen. Stattdessen wurde eine zusätzliche Sammlungsgruppe erstellt, deren Name als Farbe oben steht. Hier können Sie alle Variablen sehen , nach denen wir suchen. Zum Zeitpunkt der Aufnahme gibt es keinen Mechanismus, um eine Sammlung von Variablen oder Tokens von einer Gruppe in eine andere Gruppe oder von einer Sammlung in eine andere Sammlung zu verschieben Tokens von einer Gruppe in eine andere Gruppe oder von . Um dieses Problem zu beheben, verwende ich eine Problemumgehung, die ich gerne mit Ihnen teilen möchte Ich werde dieses Ding zuerst löschen. Gut, ich werde Pim in zwei Farben umbenennen, weil das ist, was der B Deford-Sammlungsordner durch das Tailwind-CSS generiert wird Wenn ich hier rauskomme und die gleiche Übung mache, die ich gemacht habe füge ich ein und erstelle Variablen noch einmal und fertig, ist Wenn ich jetzt zu lokalen Variablen gehe, können Sie sehen, dass sie in derselben Sammlung enthalten sind, nach der wir suchen. Ich werde diese Übung eine nach der anderen für all diese Dinge wiederholen . Ich werde doppelklicken und Warnung sagen. Und sobald das erledigt ist, werde ich es wieder in Primitiv umbenennen. Auf diese Weise werden alle primitiven Token in einer einzigen Sammlung zusammengefasst , und das ist genau das, wonach wir suchen. Ich habe diese Übung abgeschlossen und werde diese Sammlung wieder in Primitive umbenennen. 9. Beliebige Token verschieben: Aufgrund der neuesten Verzögerungen bei Wigma solltest du nun in der Lage sein, solltest du nun in der Lage sein eine Variable von einer Sammlung in eine andere oder einen Token von einer Sammlung in eine andere Sammlung zu verschieben andere oder einen Token von einer Sammlung in eine andere Sammlung zu Bisher war das nicht möglich. Das ist jedoch nicht so einfach, aber wir können uns das ansehen. Gehen Sie zur lokalen Variablen und klicken Sie darauf. Ich werde hier zwei Sammlungen erstellen. Das ist Sammlung A. Gut. Und ich werde auch hier eine Variable erstellen, nämlich eine Farbe. Ich werde hier eine Farbe A angeben. Ich werde eine weitere Sammlung erstellen. Erstellen Sie eine Sammlung und ich sage diese als B. Einer der Haken, den ich hier hervorheben möchte, ist, dass Sie nur kopieren und einfügen können , es sei denn darin ist ein Token oder eine Variable enthalten. Nehmen wir zum Beispiel an, ich habe eine Sammlung A, ich habe hier einen Wert, rechts li copy. Wenn ich zur Sammlung B gehe, habe ich hier nichts. Ich kann nicht mit der rechten Maustaste klicken und etwas einfügen. Sie müssen mindestens einen Wert in dieser bestimmten Sammlung haben. Ordnung. Wenn ich jetzt Click and Paste schreibe, kann ich die Farbe A aus der Kollektion A einfügen . Das ist nicht nur auf Farbe beschränkt. In diesem Fall können Sie eine beliebige Variable verwenden. Nehmen wir an, ich gehe runter und klicke auf Variable erstellen und dieses Mal erstelle ich eine Zahl. Ich habe diese Variable oder dieses Token in der Sammlung A erstellt . Ich kann mit der rechten Maustaste klicken, es kopieren, zur Sammlung B gehen und auf die gleiche Weise einfügen. Einer der Nachteile dabei ist , dass Sie nach dem Kopieren und Einfügen diesen Wert aus der Sammlung A löschen müssen. Während der Aufnahme haben wir in diesem speziellen Menü keine Option zum Ausschneiden. Zweifellos werden sie es in Zukunft hinzufügen. Es entwickelt sich sehr schnell. Okay. 10. Semantischer Token: Synctic Token verweisen in der Regel auf ein primitives Token und Namen, die auf dem Kontext ihrer Ansichten basieren Sie werden auch als abstrakte Ebene der Token bezeichnet abstrakte Ebene der Token Lassen Sie uns anhand einer Analogie aus dem Kontaktbuch lernen. Wann immer Sie eine Nummer in Ihrem Telefonbuch speichern möchten, geben Sie dieser bestimmten Nummer in der Regel einen Namen Sie können ganz einfach Aktionen wie Telefonanruf, Messa oder Videoanruf Messa oder Videoanruf Dieser Name ist nichts anderes als ein syntisches Token, das wir erstellt haben. Es hat den Kontext, dass dies für James die Nummer ist und wenn sich die Nummer in Zukunft ändert, ändert man nicht den Namen der Person, sondern aktualisiert die Nummer innerhalb dieses Tokens Wenn Sie mit beginnen, erhalten Sie CO-Element eines primären Tokens oder ich sage primitiven Tokens. Ich wähle das Element aus und gehe zum Flossenbereich. Wählen Sie die ersten hundert aus. Wir werden dasselbe für die Schaltfläche tun und hier einen Rand anbringen. Im Strich wähle ich 100 aus. Das primitive Token selbst hat keinen Kontext. Was meinst du mit den ersten hundert? Wir wissen nicht, wo wir es benutzen sollen. Daher werden wir ein semantisches Token erstellen. Um das zu tun, gehe ich zur lokalen Variablen. Ganz oben werde ich Sammlungen erstellen und ihnen einen Namen als Semanti geben Darin erstelle ich eine Variable, eine Farbvariable, gebe der Oberfläche den primären Wert und gebe einen Wert Anstatt ihn einzugeben, klicke ich auf diesen, wähle die Bibliothek aus und wähle hundertwd Das bedeutet nun, dass ich mich bei diesem speziellen Token auf die primäre Zahl Hundert beziehe, die eine der Variablen ist Lass uns das Ding für die Grenze machen. Ich werde eine weitere variable Grenze erstellen und ich werde mich auf die ersten hundert beziehen. Jetzt gehe ich zurück und ändere diese Farbe. Hier werde ich statt 100 unser semantisches Token verwenden. Ich werde nach unten scrollen. Dies ist unser semantisches Token, wir haben auch hier Surface Primary erstellt, ich werde Surface Primary auswählen Hier wähle ich einen Rand aus, scrolle nach unten, und dieser ist Rand Da wir unsere semantischen Tokens bereits angewendet haben, ist es einfach, sie zu verwalten Jetzt möchte ich die Hintergrundfarbe dieser beiden UIL Mn ändern die Hintergrundfarbe dieser beiden UIL Eine ist die Karte, eine zweite ist der Button, aber ich möchte den Rand nicht ändern Bisher war das nicht möglich, weil all diese drei Geräte mit der Primärstation 100 verbunden waren. Aufgrund des semantischen Tokens muss ich nur hier statt 100 hingehen, ich werde einfach sagen, ich werde auf dieses klicken Nehmen wir an, ich möchte es auf 400 ändern. Das ist es. Das wird sich überall im System ändern. Sie müssen es nicht manuell tun und es ist einfach zu verwalten. 11. Semantische Token-Praxis: Wenn Sie sich jetzt diesen Bildschirm ansehen, möchte ich, dass Sie eine Pause einlegen und darüber nachdenken, was sind die ganzen Unterschiede zwischen semantischen Tokens, die wir erstellen können Wir haben einen Text. Wir können ein Token für Symbole, Hintergrund, Rundheit und Abstände erstellen Hintergrund, Rundheit und Abstände Wann immer Sie ein semantisches Token oder ein Alias-Token erstellen, muss es einem klaren Kontext zugeordnet werden Das Token sollte spezifisch genug sein, um zu beantworten, wie, wo oder wann es verwendet werden soll Ich habe einen Token-Namen als Text erstellt, aber dieser Token ist zu genetisch bedingt und hat keinen Wert. Sie wissen einfach nicht, wo Sie diesen Text verwenden sollen. Möchten Sie ihn als Primärtext verwenden? Möchten Sie es als Sekundärgerät verwenden ? Es ergibt keinen Sinn. Wann werden Sie ein semantisches Token erstellen, stellen Sie sicher, dass Sie ihm einen Kontext hinzufügen Ich habe unserem semantischen Token einen Mehrwert hinzugefügt, und so sieht es aus Also bei primärem Text wissen wir, dass dieser als Primärtext verwendet werden kann Wir haben auch einen Sekundärtext wie PM und SNI. Beides gehört in den Sekundärtext. Ich habe also Text, der nicht zweitrangig ist. Abgesehen davon habe ich einen Hintergrund, sodass ich Surface under Square Primary verwenden kann , um dem Symbol mehr Kontext zu geben Ich kann das Wettersymbol verwenden das SNI ist, denn wenn wir in keiner App etwas erstellen wollen, dann habe ich eine Kategorie von Symbolen, die speziell für das Wetter verwendet wird Ich habe die Nomenuktur Wetter als Teil der Gruppe verwendet, dann das Element und dann den Kontext, in dem es sich innerhalb dieses Elements das Element und dann den Kontext, in dem es Lassen Sie uns versuchen, die semantischen Tokens zu erstellen und anzuwenden. Ich gehe zu meiner lokalen Variablen und klicke auf Combat. Wir haben bereits zwei semantische Token erstellt. Derzeit bin ich in der Gruppe zur Sammlung semantischer Token und wir werden versuchen, drei weitere zu erstellen Einer ist primärer Text. Kuchen, Duplikat. Wir können das zweitrangig machen. Noch ein Duplikat, und das machen wir als Wetter-Dash, Icon-Dash Sunny. Lass uns diesen verlinken. Gehen Sie also für den Primärtext in die Bibliothek und gehen Sie zu dem Abschnitt, in dem wir die graue Farbe haben. Das ist also leicht zu finden. Lassen Sie uns diesen als 950 für Sekundärtext markieren. Nehmen wir auch hier das Grau, das wir haben, und dafür denke ich, dass 500 in Ordnung sein sollten. Was das Wetter angeht, können wir, glaube ich , 500 in der Wärmezone hinlegen , sollte das in Ordnung sein. Ja. Lass uns diesen auswählen. Gehen Sie zum Bereich „Farbe füllen“, hier ist es? Wir können hier nach unten scrollen, wir haben die Oberfläche primär, wählen Sie diese aus, gehen Sie runter, Oberfläche primär für diese, für diese, sowie diese Zahl, sowie diese oder diese vier Dinge, indem Sie die Strg-Taste drücken, ich kann eins nach dem anderen auswählen. Jetzt geben wir es sowohl dem Text Primary, PM als auch Sunny. Ich möchte diese beiden als Sekundär verwenden. Lass mich hierher gehen, der Sekundarstufe eine SMS schreiben. Das ist in Ordnung. Wir beziehen uns auf dieses Symbol. Ich denke, ich kann runtergehen, es auswählen und eine Farbe angeben , wo alles in Ordnung ist. Substantiv Hier finde ich, dass dieses Tool anders aussieht. Fein. Lassen Sie uns dieses Ding kopieren, rechten Maustaste klicken, die Eigenschaft kopieren, diese auswählen, mit der rechten Maustaste klicken und Ihre Eigenschaft einfügen. Das sieht gut aus. Statt Großbuchstaben brauchen wir einen Urteilsfall. Alles, was Sie tun müssen, ist diesen auszuwählen, hier unten rechts hinzugehen und diesen als sonnig und das sieht gut aus, und ich denke, sie sind gut. 12. Token-Benennung: Da unser Designsystem im Laufe der Zeit weiter wächst, benötigen wir eine verbesserte Namenskonvention um es effektiv verwalten zu können. Benennung von Design-Tokens ist für unser Designsystem unerlässlich , da sie Klarheit, Konsistenz, Wartbarkeit und effektive Zusammenarbeit fördert Konsistenz, Wartbarkeit und effektive Zusammenarbeit und effektive Klarheit, die es Ihnen ermöglicht, sofort zu kommunizieren, sowie deren Zweck und Funktion Konsistenz: Sie sollten in der Lage sein, sich innerhalb des Designsystems leicht zurechtzufinden , um Ihre Effizienz zu steigern. Sie sollten sich die Möglichkeit bieten das Designsystem einfach zu verwalten, sodass es auf längere Sicht leicht zu aktualisieren ist. In Bezug auf die Zusammenarbeit können Sie so eine bessere Kommunikation und Zusammenarbeit fördern . Wann immer ich meinen Tokens einen Namen geben möchte , verwende ich diesen . Ich beginne mit der Kategorie, dann mit Konzept, Eigenschaft und Modifikator Kategorie und die Eigenschaft bilden eine solide Grundlage für die meisten Konventionen für Token-Namen Beispiel: Primärfarbe, wobei die Farbe eine Kategorie und primär eine Eigenschaft ist. erweitern Im weiteren Verlauf wollen wir unsere Tokensammlung da auch unser Designsystem wächst. Daher müssen wir unsere Token in Teilmengen unterteilen. Das organisieren wir in den Konzepten. Und die Modifikatoren sind die letzte Ebene unserer Token-Benennungshierarchie Er kann unabhängig voneinander verwendet oder mit der Kategorie, dem Konzept und der Eigenschaft kombiniert werden , um unseren Tokens eine sinnvolle Bedeutung zu verleihen eine sinnvolle Bedeutung zu Benennung von Tokens kann eine Herausforderung sein, aber ich verfolge einen systematischen Ansatz , sodass Sie ihn an Ihre Bedürfnisse anpassen können Es gibt keine einzige Größe , die zu dem Format passt. Es liegt ganz bei Ihnen, je nach Bedarf, Sie können es skalieren. Solange Sie jedoch ein gemeinsames Verständnis innerhalb des funktionsübergreifenden Teams aufbauen ein gemeinsames Verständnis innerhalb , sind Sie auf dem richtigen Weg. Ich habe Kategorie, Konzept und Eigenschaft in einer Basis gruppiert , wobei Rolle, Variantenstatus, Maßstab und Modus als Modifikator dienen Um diese Sache zu lernen, werden wir ein kleines Spiel spielen. In diesem Spiel besteht Ihre Aufgabe darin, den entsprechenden Chip in einen entsprechenden Eimer zu legen. Dazu wähle ich zuerst die Farbe aus und füge sie der Kategorie hinzu, und füge sie der Kategorie weil ich auch eine Höhe als Kategorie habe , also füge ich sie dort ein. Ich habe jetzt also zwei Kategorien. Bei einer Oberfläche ist es eher eine Eigenschaft, ein Hintergrund, also werde ich es hier belassen. Das Gleiche gilt auch für diesen. Das wird wie eine Rolle gespielt. Also werde ich es an dieser Stelle platzieren, und Overlay kann auch als Rolle dienen, also werde ich es hier platzieren Und o ist eine Variante einer Oberfläche, die ich gerade erstellen werde Hier gibt es keine richtige und falsche Antwort. Es liegt ganz bei Ihnen, wie Sie es platzieren möchten. Aber im Laufe der Zeit wird es automatisch selbsterklärend, wird es automatisch selbsterklärend wie man es auf diese Weise benutzt In der vorherigen Version haben wir das Konzept nicht verwendet. Wir werden ein Beispiel mit Konzept nehmen. Ich werde an diesen speziellen Ort gehen. Jetzt habe ich hier eine Farbe, also ziehe ich sie und füge sie der Kategorie Farbe hinzu. Ich werde es in die Kategorie Konzept einordnen, und all diese Dinge kann ich ziehen und es unter die Eigenschaft stellen. Mein Ziel hier ist es, dass ich meinem Benutzer eine Feedback-Nachricht zeigen möchte . Aus diesem Grund gruppiere ich es in einem Konzept namens Feedback. Wir haben auch mehrere Texte auf unserem Bildschirm. Ein Text kann primär sein, anderer Text kann jedoch sekundär sein. Daher benötigen wir dafür zwei Tokens. Also auch hier kann die Farbe auch auf Text angewendet werden, ich werde das in eine Farbkategorie einordnen. konzentrieren wir uns nicht auf den Hintergrund, sondern Diesmal konzentrieren wir uns nicht auf den Hintergrund, sondern auf den Text, also werde ich ihn hier belassen. Die Rolle wäre primär und es würde eine weitere Rolle geben, die zweitrangig ist. Jetzt sieht unser Token ungefähr so aus. Zuvor war es primär auf der Oberfläche. Jetzt können wir es auf diese Weise aufschreiben. Farbe Strichoberfläche, Strich primär, Lo. 13. Variante und Sizing: Varianten sorgen für Kreativität beim Design gleichzeitig ermöglichen gleichzeitig Flexibilität und Skalierbarkeit innerhalb unseres Token-Systems. Wann immer Sie eine Variante erstellen, ist es wahrscheinlicher , dass es sich um einen dieser Modifikatoren handelt, der sich mehrfach wiederholt Wir haben eine Variante unseres Hintergrunds. Ich nenne Hintergrund generell eine Oberfläche, also habe ich als Oberfläche statt als Hintergrund geschrieben. Es gibt vier verschiedene Varianten. Eins ist das Tief, was standardmäßig ist, eins ist das niedrigste, Hi und das höchste. Lassen Sie uns dieses semantische Token in unserem System erstellen. Ich werde auf die lokalen Variablen klicken und anfangen, dieses Ding umzubenennen Farbe, die Oberfläche, dT ist der niedrigste Wert. Ich kann dieses Ding viermal kopieren oder duplizieren und ich werde es umbenennen. Eins ist der niedrigste, niedrigste, höchste und höchste Wert. Das ist hoch und das ist am höchsten. Für den niedrigsten Wert behalten wir 100. dieses Gamma 200 gebe ich 300, für dieses gebe ich uns eher 400. Lass uns X hier raus und versuchen, dieses Ding in unserem Design anzuwenden. Ich werde den ersten auswählen. Der Rahmen ist ausgewählt. B, damit ich hier den niedrigsten Wert anwenden kann. Hier kann ich versuchen, die Kreativität zu fördern. Ich kann nach unten scrollen und auswählen. Statt der niedrigsten können wir die niedrigste verwenden. Auch hier kann ich die grauen Farben auswählen und das Gleiche hier anwenden. Wahrscheinlich der höchste, und dieser wir machen können, ist einer der höchsten. Auf diese Weise können Sie Ihrer Kreativität freien Lauf lassen, indem Sie die Varianten verwenden. Lassen Sie uns die Größe im Detail verstehen. Hier ist eine einfache Analogie. Stellen Sie sich drei Kaffeetassen mit unterschiedlichen Größen vor Ihnen Auf jedem Etikett steht, wie viel Kaffee sie aufnehmen können : 250, 405, 100 ml. Wenn Sie jedoch jemals die Kaffeemenge ändern müssen, diese gedruckten Etiketten nicht funktionieren diese gedruckten Etiketten nicht, da sie nicht skalierbar sind. Wenn wir die Tasse stattdessen als klein, mittel und groß etikettieren, können wir die Kaffeemenge einfach ändern, ohne uns Gedanken über das feste Etikett machen zu müssen. Dies macht es viel einfacher, die Dinge im Laufe der Zeit anzupassen und zu verwalten. Dieselbe Analogie gilt für unser Designsystem. Sie können S, M und L anwenden, nicht nur auf die Schrift, sondern auch auf jedes andere Element in unserem Designsystem Zum Beispiel haben wir eine Schriftgröße wie 24, 28 und 32. Aber anstatt eine feste Größe anzugeben, wie wir sie unten haben, können wir unsere Analogie klein, mittel und groß verwenden Wir können die erste als Kategorie betrachten, diese als Eigenschaft und diese als eine der Varianten davon 14. Typografie-Token: Es gibt verschiedene Möglichkeiten, wie wir unsere Typografie-Token erstellen können Eine der Methoden ist manuell, während die zweite ein bisschen automatisch ist Du machst es manuell. Zunächst müssen Sie die auswählen, für die Sie eine Typografie erstellen möchten . Ich habe diese ausgewählt Und dann, nachdem Sie zum Bereich Typografie gegangen sind und auf dieses Symbol mit der Aufschrift Stil anwenden geklickt Klicken Sie auf die Plus-Schaltfläche , um einen Stil zu erstellen Hier können Sie es so schreiben, wie es oben steht , Schrägstrich Groß Durch das Einfügen eines Schrägstrichs wird automatisch eine Hierarchie erstellt Lassen Sie mich auf den Stil erstellen klicken, sobald er fertig ist Wenn ich darauf klicke, werden Sie sehen, dass der Stil groß als Stil im Anzeigebereich erscheint Sie können diese Übung einzeln für jedes Objekt durchführen, aber das ist ein TBS-Prozess Lassen Sie uns den Stil auf intelligente Weise erstellen. Zuallererst lösche ich den vorhandenen Stil, indem ich mit der rechten Maustaste klicke, und es ist ein Löschstil. Wählen Sie alle Stile aus, also klicke und ziehe ich , um eine Auswahl zu treffen. Ich werde dafür ein Plugin verwenden, gehen Sie runter und klicken Sie auf diese Aktionstaste oder drücken Sie Strg K, wenn Sie Windows verwenden. Gehen Sie zum Plug-in-Aufruf Text Style Generator. Sobald Sie fertig sind, wird automatisch ein Destyle für Sie erstellt Klicken Sie auf eine beliebige Stelle auf der Leinwand und unsere Textstile werden erstellt Öffnen Sie das Variablen-Dialogfeld. Gehen Sie dazu zur lokalen Variablen und klicken Sie darauf. Wir haben zwei Sammlungen. Eine ist primitiv, die zweite ist semantisch. Ich werde hier eine weitere Sammlung erstellen, indem auf diese drei Punkte und dann auf Sammlung erstellen klicke Ich werde einen Namen als Typografie angeben. X raus von hier. Jetzt werden wir Maßnahmen ergreifen. Ich gehe hier zur Aktionsschaltfläche, klicke darauf und ich werde ein Plugin namens Variableiz X Styles ausführen . Klicke darauf Ich wähle die Sammlung aus, die wir kürzlich erstellt haben, nämlich Typografie, und ich möchte, dass alle Parameter im Token gespeichert werden, und ich werde auf die Schaltfläche Erstellen klicken Alles erledigt. Lass X hier raus. Gehen wir zurück zu der Variablen und überprüfen sie noch einmal. Hier in unserer Sammlung , der Typografie, haben wir all den Wert, der geschaffen wird Lass uns X hier raus. Erstens, das Erstaunlichste dabei ist, dass es nicht nur die Typografie erstellt, die es für uns darstellt Stattdessen gilt es auch dafür. Wenn ich diesen, den Text, auswähle und auf die rechte Seite gehe, kannst du sehen, dass er nicht vom Stil kommt, sondern direkt vom Token selbst übernommen wird Wirklich, wirklich unglaublich. 15. Abstand-Token: Abstände im Design beziehen sich auf einen leeren Bereich zwischen Elementen wie Text, Bildern oder Benutzeroberflächenkomponenten. Es spielt eine entscheidende Rolle dabei, ein Design ästhetisch, ansprechend, lesbar und benutzerfreundlich zu gestalten. Lassen Sie uns unser globales Abstands-Token erstellen. Ich gehe zur lokalen Variablen. Und hier haben wir drei Sammlungen, primitive, semantische und typografische Also werde ich zum Primitiven gehen. Und darin wollen wir unsere primitiven Abstands-Token erstellen, und wir werden dieser Sammlung eine Unterkategorie namens Spacing hinzufügen dieser Sammlung eine Unterkategorie namens Spacing Anstatt es manuell zu tun, werden wir dieses Ding automatisieren Also lass X hier raus, gehe runter zur Aktion, klicke darauf und suche nach dem Plugin namens Bulk Variable Generator. Wir haben bereits unsere Sammlung, also wähle ich bestehende aus und wir wählen Primitive aus. Und der Variablenname, Sie auf der rechten Seite sehen können kommt auf sehr subtile Weise Aber wir wollen eine Unterkategorie erstellen, also verwende ich Leerzeichen als Namen und mache einen Schrägstrich Dieser Schrägstrich ermöglicht es Figma, eine Unterkategorie innerhalb der Sammlung zu erstellen Wir werden bei Null beginnen und hier die Änderung auf vier vornehmen, da wir hier mehr Möglichkeiten benötigen , damit wir hier mehr Möglichkeiten benötigen , damit sie in unserem semantischen Token verfeinern können Jetzt sieht alles gut aus. Wir wollen es bis 128 machen, ich denke, das ist in Ordnung. Und lass uns auf Generieren klicken. Sobald wir fertig sind, gehen wir zur lokalen Variablen, gehen wir erneut zum Primitiv, und hier haben wir den Abstand als unsere Unterkategorie Und der gesamte Wert oder alle Tokens, die wir wollen, sind einfach in kürzester Zeit da Ich habe hier einen Mehrwert geschaffen , den wir kürzlich geschaffen haben. Jetzt habe ich nicht alle hinzugefügt, sondern nur die Dinge, über die wir uns wirklich Gedanken gemacht haben. Also hier wollen wir unseren Tokens die Größe geben. Nehmen wir an, ich möchte so etwas dimensionieren. Ich möchte sagen, dass ich das Zeichen, das acht Abstände hat, klein angeben möchte. Wenn es weniger als das ist, möchte ich es als extra klein angeben, und für zwei werde ich extra extra klein angeben. gleiche Weise, wenn ich auf die obere Seite gehe , werde ich sagen, okay, für 16 würde ich das als mittelgroßen Abstand machen wollen . 24 ist groß, 32 ist extra groß. Und wenn ich noch ein bisschen weiter gehe und 64 doppelt Excel ist. Lassen Sie uns nun dieses semantische Token erstellen. Um das zu tun, gehe ich zu unserer lokalen Variablen, klicke darauf, gehe zur Semantik und hier werden wir versuchen, eine Unterkategorie darin zu erstellen Variable erstellen. Und dieses Mal wählen wir die Zahl. Wir wollen diesem eine Farbe geben. Entschuldigung, wir möchten hier Leerzeichen angeben, also werde ich die Leerzeichen extra klein setzen und die Eingabetaste drücken. Sie sehen auf der linken Seite, die Kategorie erstellt wurde. Klicke darauf. Rechts, klicken Sie auf diesen Wert und duplizieren Sie ihn. Sie möchten ihn also mindestens fünf bis sechs Mal duplizieren, also werde ich diese Übung schnell durchführen. Also hier haben wir extra kleine. Ich werde es zur Hauptstadt machen. Extra extra klein, dann haben wir extra klein, klein, mittel, doppelklicken, groß, extra groß. Und doppelt extra groß. Das ist ab sofort ausreichend. Sie können im Laufe Ihrer Designreise sogar weitere hinzufügen . Auf der rechten Seite gehen wir also zu diesem Symbol, wo wir unsere Variable auswählen. Also hier in der Liste für extra klein wollen wir zwei daraus machen, die wir momentan nicht haben, also lassen wir sie stehen. Für etwas Kleineres machen wir daraus vier. Das heißt, für klein haben wir einen Wert von acht. Für Medium haben wir einen Wert von 16. Bei Größe L werden wir diesen Wert auf 24 setzen. 32, ich glaube 32, lassen Sie uns das zuerst überprüfen. Im Großen und Ganzen haben wir also 24. Okay, geh auf die Rückseite. Deshalb machen wir diese Übung. 24, damit wir nichts verpassen. 32 ist also extra groß. Also hier ist 32, die extra groß wird. Und für doppeltes Excel machen wir daraus 64. Dieser ist jedoch noch da, also gehe ich auf die linke Seite, gehe zum primitiven Token, gehe zum Abstand und werde hier eines davon erstellen. Also gehe ich nach unten, klicke mit der rechten Maustaste, erstelle ein Duplikat, und das wäre 002, und die Zahl ist auch hier, ich werde sie als zwei eingeben. Gehen Sie zum semantischen Token und wir werden diesen Wert hier zuordnen. Also hier, scrolle nach unten und wir sollten 002 in der Liste haben, hier und da So erstellen wir also unser semantisches Token für unseren Abstand Lassen Sie uns also X daraus machen und wir werden es auf unser Design anwenden. Wählen Sie die Ausrichtung aus, in der Sie Abstände hinzufügen möchten. Also werde ich diese Karte auswählen. Und innerhalb dieser Karte gehe ich auf die linke Seite und wähle den Inhalt aus. Beim automatischen Layout haben wir hier einen gewissen Abstand. Wählen Sie dieses Symbol mit der Aufschrift Variable anwenden, klicken Sie darauf, scrollen Sie nach unten und wählen Sie 16. Auf die gleiche Weise werden wir diese Übung machen. Achten Sie darauf, dass Sie es nicht aus dem Primitiv auswählen. Ich werde dir in einiger Zeit erklären, wie du damit umgehst, aber scrolle nach unten und wähle hier 16. Und auf die gleiche Weise werden Sie hier in diesem ein Drop-down-Menü sehen. Klicke darauf. Und dann sehen Sie einen Wert namens Ople-Variable. Sobald Sie also auf Variable anwenden geklickt haben, scrollen Sie nach unten und wählen Sie hier Medium aus. Wenn Sie in Zukunft die Definition von Medium ändern möchten, nehmen wir an, ich gehe zurück, früher war dies das, was unser Medium war. Jetzt sage ich, wir wollen nicht sagen, dass 16 Pixel unser Medium sind. Wir wollen 20 als Medium sagen. In diesem Fall müssen Sie mich das nur ein wenig vergrößern lassen , damit Sie es klarer sehen können. Gehe zur lokalen Variablen. Ich werde es etwas von hier wegstellen , damit Sie tatsächlich sehen können, was passiert. Also, wenn ich auf Medium gehe, lass mich X aus dir raus. Und hier haben wir einen Wert von 16. Ich sage nur, dass man statt 16 als Medium 20 als Medium betrachten sollte. Und sobald ich dieses Ding mache, ändert sich das. Stellen Sie sich nun vor, Sie haben solche Dinge im gesamten Designsystem verwendet . Hier werden die Tokens sehr mächtig. Sie müssen es nicht manuell ändern. Sie ändern einfach die Definition dessen, was das Medium ist, basierend auf der Becheranalogie, und Sie können es problemlos im gesamten System ändern Also werde ich zu diesem Zeitpunkt zu den 16 zurückkehren. Sie können es sogar auch auf die Schaltfläche anwenden. Lassen Sie mich in diesem Fall also nach links und zur Seite gehen, die Schaltfläche auswählen, und auf der rechten Seite können wir einfach sagen: Okay, hier haben wir ihr bereits 16 Pixel gegeben. Das ist in Ordnung. Hier können wir schnell runtergehen und dieselbe Übung schnell machen. Und hier sind es acht, also scrolle ich nach unten und wähle diese Acht aus. 16. Token-Management: In der vorherigen Vorlesung haben wir unsere Abstände angegeben, aber wir wollen unsere Tokens effektiver verwalten. Schauen wir uns das anhand eines Beispiels aus der realen Welt an. Ich wähle die Karte aus, gehe zur enthaltenen und gehe dann zur rechten Seite in den Zwischenraum. Ich werde am Ende klicken. Sie werden sehen, dass der Cursor blinkt. Ich werde den Token-Wert, den ich angegeben habe, entfernen und einen festen Wert für Time Bean angeben Wenn ich jetzt auf diese Apply-Variable klicke, kannst du sehen, dass ich bereits Primitive und mein semantisches Token sehe Jetzt möchte ich, dass mein Teammitglied nur dieses semantische Token sieht, weil das Team in der Vergangenheit oft wissentlich oder unwissentlich einen der Werte von hier und den Dingen, oft wissentlich oder unwissentlich einen der Werte von hier und den Dingen, die wir geworfen haben, ausgewählt hat von hier und den Dingen das zu verhindern, gibt es eine der großartigen Funktionen von Figma, das sogenannte Scoping gibt es eine der großartigen Funktionen von Figma, das sogenannte Also lass mich draußen klicken. Gehe zur lokalen Variablen, gehe zum Primitiv, zu unserer Sammlung und wo wir Abstände haben. Jetzt, hier auf der rechten Seite, können Sie sehen, wenn ich mit der Maus drüber fahre, ein düsteres Einstellungssymbol erhalte, das eine Bearbeitungsvariable ist Wenn ich darauf klicke, erhalte ich einen Bereich und es wird angezeigt, wo diese Variable sichtbar sein soll Also lass mich X hier raus. Also wähle ich den ersten aus. Scrollen Sie nach unten, drücken Sie die Shift-Taste und wählen Sie den letzten aus. Und ich gehe hierher und klicke auf Variable bearbeiten. Derzeit wird es überall angezeigt, also werde ich es deaktivieren und sicherstellen , dass der Bereich überall ausgewählt ist Wenn ich jetzt nach oben gehe und den Bereich noch einmal überprüfe, sollte er abgewählt werden, und das ist Was wir also gerade getan haben, ist der Figma mitzuteilen, dass dieser Wert nicht angezeigt wird, wenn das Drop-down-Menü geöffnet wird, wenn ich meinen Abstand auswähle Schauen wir uns X von hier aus an, gehen wir zu dieser Karte und wählen den Inhalt Wenn ich nun versuche, hier den Variablenwert anzuwenden, siehst du, dass die einzigen semantischen Tokens kommen werden Es gibt kein primitives Token. Selbst aus Versehen können die Leute es nicht auswählen. 17. Radius-Token: Möglicherweise benötigen wir nicht so viele Token, die wir in unserem Abstand verwendet haben. Hier haben wir das Abstands-Token verwendet. Wir haben eins, zwei, drei, vier, fünf, sechs und sieben. Für den Radius glaube ich nicht, dass wir extra extra klein brauchen, also werde ich diesen entfernen und ich glaube nicht, dass ich diesen auch brauchen werde, doppeltes Excel. Ich werde diesen entfernen. Für unser Radius-Token sollten diese fünf Werte meiner Meinung nach ausreichend sein, aber Sie können ihn jederzeit ändern. Auf diesem Weg gibt es keinen harten Weg. Also gehe ich zu meiner lokalen Variablen und hier gehe ich zum semantischen Token Tschüss, ich werde kreieren. Also lass mich nach unten scrollen. Ich werde eine Variable erstellen, diesmal wieder eine Zahl, aber ich werde sie als extra kleinen Radius schreiben. Gehen Sie auf die linke Seite und klicken Sie auf diese. Klicken Sie nun mit der rechten Maustaste auf Duplizieren Sie diese WLAN-Zeit. Wir werden diese Sache schnell erledigen. Fein extra klein, extra klein, klein, mittel, groß und extra groß. Und wir können es so abbilden, wie wir es mit dem Abstand gemacht haben. Hier werden wir also dasselbe primitive globale Token verwenden , das wir haben. Also machen wir daraus vier. Dieser ist acht. Dieser hat 16. Das könnte am 24. sein. Dieser war 32. Wenden wir nun unseren Radius auf unsere Karte an. Dazu wähle ich die Karte gehe zum Alument mit dem Namen Foto Landscape Auf der rechten Seite sehe ich die Rundheit des Erscheinungsbilds und dort kann ich auf Variable anwenden klicken Aber dieses Mal kann ich sowohl den Raum als auch den Radius sehen. Um den Fehler zu vermeiden, möchte ich, dass das Leerzeichen hier nicht angezeigt wird. Lass uns das reparieren. Ich klicke irgendwo auf der Leinwand nach draußen, gehe nach oben und klicke auf die lokale Variable. Dieses Mal werde ich in die semantische Sammlung gehen. Hier ist unser Raum. Ich wähle sie alle aus, indem ich die Taste „Sieben“ drücke. Gehen Sie zum ersten Mal zum Ende, drücken Sie die Umschalttaste, wählen Sie die letzte aus und klicken Sie auf die Bearbeitungsvariable Und hier werde ich den Umfang definieren. Also das ist der zweite, klicken Sie darauf. Und ich möchte, dass dieser Wert nur dann kommt, wenn es eine Lücke gibt. In diesem Fall sollten also kurze Abstände angezeigt werden. Lass mich X hier raus. Das ist in Ordnung. Und für Radius werde ich dieselbe Übung machen. Und hier möchte ich, dass mein Radius nur auf dem Eckenradius angezeigt wird. Ich deaktiviere diese Option, zeige alle unterstützten Eigenschaften an und ich möchte, dass diese Variable nur in der Eckradiusliste sichtbar ist, und das ist erledigt Gehen wir zu unserer Karte. Wählen wir das erste Bild aus, Fotolandschaft und auf der rechten Innenseite Wenn ich zum Erscheinungsbild gehe und jetzt klicke, sehe ich nur den Radius. Jetzt sieht das Leben einfach aus. Ich werde hier 16 Pixel wählen, das sollte in Ordnung sein. Hier auf dieser Karte kann ich sogar 16 Pixel 2 machen. Lassen Sie mich noch einmal die erste Karte auswählen. Ich habe überall aufgetragen, 16 Pixel, gut, was nicht der Fall ist. Ich möchte, dass der Radius hier nicht 16 sein sollte, also ist er auch hier Null, er ist Null, damit wir diese Rundheit hier korrigieren können Lass mich hier raus und das sieht gut aus. Im Erscheinungsbild ist der Eckenradius jetzt gemischt. Lassen Sie mich dieses Ding öffnen, indem ich auf diesen symbolunabhängigen Pfeil klicke. Hier geben wir den Hardcode-Wert ein. Anstatt einen harten Code einzugeben, können wir das Token hier übergeben. Lassen Sie mich dafür diesen schließen und überprüfen, ob wir dieses Token zur Hand haben? Ich gehe zum Radius, wir haben kein Token als Null. Lass uns hier einen erstellen. Klicken Sie auf die Zahl, ich setze sie als Z als Null, und der Wert sollte von unserer primitiven Eins sein . Das ist die erste Eins Größe Null, Null, Null. Das klingt gut. Lass X hier raus. Wählen Sie die Fotolandschaft aus, gehen Sie nach rechts innen und gehen Sie zum Erscheinungsbild des Bereichs. Klicken Sie auf dieses Symbol, das eine unabhängige Ecke ist und hier wähle ich den Wert Null aus. Wenn ich es in Zukunft rund machen will , sollte ich das tun können. Das wird die Skalierbarkeit des Designs erheblich erhöhen . 18. Komponentendesign-Token: Was sind komponentenspezifische Token? Ein komponentenspezifisches Token speichert und repräsentiert explizit eine einzigartige und spezifische Designentscheidung mit einer bestimmten Komponente verknüpft ist. Auf dem Bildschirm haben wir zwei Komponenten. Eine ist die Suche, die zweite ist ein Dropdown. Jetzt können wir aufteilen, welche verschiedenen Komponenten ein bestimmtes Token kreativ sein kann Ein Platzhalterwert innerhalb der Komponente kann ein komponentenspezifisches Token sein Ein Rahmen, ein Symbol oder sogar ein unterstützender Text zu dieser bestimmten Komponente können ebenfalls Teil davon sein Ein Suchsymbol kann auch ein komponentenspezifisches Token sein. Wenn Sie auf der rechten Seite sehen, haben wir eine sehr ähnliche Struktur bei der wir einen Platzhalterwert haben Dieser kann sich auch innerhalb eines bestimmten Tokens befinden, es gibt einen Rahmen und auch ein Symbol ist Jetzt gibt es zu viele komponentenspezifische Token. Lassen Sie uns das in den nächsten Minuten rationalisieren. Bisher hatten wir zwei Dinge auf unserer Liste. Einer ist die Basis und der zweite ist der Modifikator. Da wir es mit dem komponentenspezifischen Token zu tun haben, habe ich der Hierarchie einen weiteren Wert hinzugefügt, nämlich den Namen als Objekt Innerhalb des Objekts haben wir Gruppe, Komponente und Element. Lassen Sie uns diese Sache anhand eines Beispiels aus der realen Welt lernen. Wie sollte der Tokenname lauten, der die Grenze für eine bestimmte Komponente definiert ? Lass es uns herausfinden. Ich werde der Suche einen Namen geben , damit wir auf die Suchkomponente abzielen. Bei der Suche zielen wir auf eine Farbe ab , auf einen Rand und auf einen Standardstatus. Die zweite Option erhält V, das ist ein Element in einem Formular, auf das wir eine Farbe, bis zu einem Rand, und eine Standardfarbe als Ziel auswählen. Nun, von diesen beiden, welches Sie für aussagekräftiger halten, machen Sie eine Pause und finden Sie es heraus. Die Antwort ist die zweite, und wir werden sehen, warum. Die erste ist sehr spezifisch für die Suche. Während die zweite Methode nicht nur spezifisch für die Suche ist, sondern auf alle Komponenten innerhalb des Formulars abzielt. Um tiefer in die Details einzutauchen, lassen Sie mich ein wenig herauszoomen und hier ein bisschen weiter gehen. Nun, der erste, bei dem wir eine Suche haben, also das ist eine Komponente. Innerhalb einer Komponente habe ich eine Kategorie namens Farbe. Ich habe eine Grundstücksgrenze im Visier und befinde mich in einem Standardzustand. Im zweiten Fall ziele ich auf eine Gruppe, ein Formular, eine Farbe und eine Eigenschaft als Rahmen und Standard ab. Nehmen wir ein anderes Beispiel dafür. Hier können Sie sehen, dass ich den Namen in Form, Eingabe, Farbe und Oberfläche angegeben habe. Hier sind nun zwei Bilder, die wir haben. Eine ist die Suche und eine andere ist eine Drop-down-Liste. Bei der Suche ziele ich darauf ab , dass ich der Suche einen bestimmten Hintergrund geben möchte. Ich kann dieses Ding auch auf diese Weise schreiben. Hier werde ich es als Suche eingeben. Und vorerst werde ich dieses Ding verstecken. Und was passiert jetzt? Wenn Sie es auf diese Weise tun, zielen Sie explizit nur auf die Suche ab, ganz bestimmtes Zeichen für die Suche. Aber anstatt es auf diese Weise zu tun, schreiben wir es wie ein Formular auf, sodass es nicht nur auf die Suche abzielt Wenn es irgendwo in diesem speziellen Formular ein Eingabefeld gibt , wird es auch auf diesen Bereich abzielen. Ihr Token, Ihre Stärke und Ihre Skalierbarkeit werden also drastisch erhöht. Also habe ich diese Übung für alle jeweiligen Eigenschaften durchgeführt für alle jeweiligen Eigenschaften die wir in diesem speziellen komponentenspezifischen Token abzielen . Also lass mich klicken und es ein bisschen weglegen und du kannst es auf dem Bildschirm sehen. Wenn ich auf einen Platzhaltertext innerhalb einer Komponente abzielen möchte , verwende ich eine Namenskonvention wie Fm. Wenn es in einem Formular eine MI-Eingabesteuerung gibt, die Platzhaltertext enthält, dann ist dies die Token-Namenskonvention ich verwenden muss, und so weiter Die Frage hier ist nun, was sind die spezifischen Komponenten-Label-Token , die Sie erstellen können? Hier ist ein Beispiel. Bei einer Suche habe ich hier ein Symbol. Nun, dieses Symbol stammt explizit nur aus der Suche und ich kann ein Token haben, das für dieses Symbol spezifisch ist. Wie ich dieses Ding machen kann, ist hier. Anstatt ihn einer Gruppenkategorie zuzuordnen, werde ich diesen Namen einer Komponente zuordnen , sodass er auf eine Suche abzielt. Innerhalb einer Suche möchte ich einer Icon-Suche eine Farbe geben und das auch noch. gleiche Weise haben wir auf der rechten Seite ein Symbol zum Abbrechen von Abfragen, das für diese spezielle Suche sehr spezifisch ist. Ich kann dieses Problem mit Suchen, Farbe und Abbrechen des Symbols anvisieren . Dieses Token wird also auf diesen Teil davon abzielen. Wann immer wir zu diesem Zeitpunkt mehrere Designsysteme haben, wird es Ihnen in Zukunft viel leichter fallen, es zu ändern, und es wird sich leicht im gesamten System ändern. So werden unsere feinen komponentenspezifischen Tokens aussehen. Also zuerst, hier sind die Suche, die Farbe und das Symbol. Wenn ich dieses Ding also entferne, zielt es auf eine Komponente ab , nämlich die Suche. Innerhalb des Surge zielt es auf eine Farbe ab und auch das auf eine Icon-Suchfarbe. Dies ist auch ein sehr komponentenspezifisches Token. Innerhalb der Komponenten zielen wir auf eine Farbe ab, und diese kann ich streichen. Die anderen sind jedoch etwas generischer, sind jedoch etwas aber immer noch mit der Komponente verbunden. Sie zielen auf die Gruppe ab. Innerhalb des Formulars zielen wir also auf jedes Element ab, das eine Farbe hat, und ich möchte einen Rahmen und den Standardstatus als Ziel angeben, und so sollte es sein. Dies zielt auf den Platzhaltertext für eine der Komponenten innerhalb des Formulars Es ist wahrscheinlicher, dass es auf den unterstützenden Text abzielt , der direkt unter diesem Text steht, also Gruppe Darin gibt es eine Eingabeausrichtung und ich habe eine Eigenschaft, die mit dem unterstützenden Text in Verbindung steht. Die letzte ist auch mit dem Formular verbunden. Innerhalb des Formulars habe ich mehrere Komponenten. Wenn die Komponente eine Eingabe hat, bei der ich etwas eingeben muss , gibt es in diesem Fall eine Hintergrundfarbe, die sich im Hintergrund befindet und auf die Farbe dieses bestimmte Token abzielt . Jetzt möchte ich, dass du diese Übung mit diesem machst. 19. Komponenten-Token erstellen: Erstellen Sie ein komponentenspezifisches Token. Wir gehen auf die rechte Seite und klicken auf unsere lokalen Variablen. Hier fügen wir eine Sammlung hinzu, indem wir auf Sammlung erstellen klicken, und wir werden dieses Ding als Komponente benennen. Darin beginnen wir mit der Erstellung unserer Variablen, die nichts anderes als das Token sind. Dieses Mal zielen wir auf die Farbe ab, also wähle ich die erste aus. Darin werde ich es als Formular aufschreiben , was ein Schrägstrich ist Lass mich das auf der linken Seite verstecken, damit es einfach ist. Doppelklicken Sie noch einmal, Farbe, Schrägstrich. Wir haben ein Formular, also suchen wir innerhalb dieser bestimmten Gruppen Form Bindestricheingabe, Klassenhaltertext Wir haben also innerhalb des Formulars das erste , das wir erstellt haben Und genauso werden wir alle anderen drei schnell erstellen. Klicken Sie weiß, um es zu duplizieren. Noch einmal duplizieren. Und ich glaube, wir brauchen vier davon. Also doppelklicken. Die zweite ist Eingabe, Entfernung dieses Dings, unterstützender Text. Der dritte ist mit dem Eingang verbunden. Da haben wir Farbe und dann haben wir Oberfläche. Und das letzte ist die Form, wir haben eine Farbe, das ist Rahmen, das ist Standard. Lassen Sie uns eine Variable erstellen, rechten Maustaste klicken und duplizieren. Wir wollen diese als suchspezifisch haben. Hier haben wir die Suche CH Sarge Color Icon Cancel Das ist der erste, also geht er in den Eimer. Innerhalb des Formulars gibt es eine Unterkategorie-Suche und das Ding noch einmal Wir brauchen Suchfarbe. Wir müssen nur das letzte Board ändern . Hier ist das Suchsymbol. Jetzt fügen wir den Wert hier auf der rechten Seite hinzu. Wir beginnen mit dem Suchsymbol. Für das Suchsymbol haben wir den Wert Grau 600. Lass uns auf die Farbe klicken und zur Bibliothek gehen. Ich gebe 600 ein, scrolle nach unten und hier ist der Wert. Für Icon Cancel haben wir einen grauen 800 ausgewählt. Lassen Sie mich hier klicken, zur Bibliothek gehen, 800 eingeben und diesen Wert auswählen. Jetzt können wir mit dem Formular fortfahren, und hier haben wir den Wert aus dem eingegebenen Text. Machen wir es ein bisschen groß, damit es leicht auszulesen ist. Fein. Wir haben Platzhaltertext Für Platzhaltertext haben wir die Note 900. Ich werde hier den Wert 900 als unterstützenden Text wählen, wir haben Grau 700 Ich werde 700 auswählen. Da hast du's. Für die Farboberfläche haben wir nun Primär 50. Jetzt geht's los. In der Grundschule brauchen wir 50. Randfarbe haben wir dann Grau 500. Hier wachsen wir und lassen Sie uns hier 500 hinzufügen. Wir werden das Textfeld auswählen. Gehe auf die rechte Seite. Wir werden die Auswahlfarbe sehen. Lass es uns erweitern. Jetzt werde ich all diesen Wert durch die Tokens ersetzen, die wir erstellen. Ich werde hier klicken und nach unten scrollen. Dies wäre unsere Eingabefarboberfläche. Gray 500, das wäre ein Rand, also scrolle ich nach unten und wähle den Rand hier aus. 600 ist wahrscheinlicher ein Symbol, also werde ich hier auf Weiter klicken, sodass wir das Suchsymbol, grau 700, auswählen. Grau 700 ist mit dem unterstützenden Text verbunden. Ich nehme den unterstützenden Text, grau 700, scrolle nach unten, unterstützender Text. Für Grau 800 haben wir unser Krebssymbol. Gehen Sie nach unten und wählen Sie das Krebssymbol aus. Hier ist er. Lassen Sie uns das mit dem grauen 900 überprüfen. Grau 900 ist für den Platzhalter. Lassen Sie mich nach oben gehen und hier ist eine graue 900 Wir scrollen nach unten und wählen den Eingabeplatzhalter Jetzt haben wir den gesamten Wert dieser speziellen Komponente mit den komponentenspezifischen Token-Variablen aktualisiert dieser speziellen Komponente mit den komponentenspezifischen Token-Variablen 20. Massenumbenennen: Um den sperrigen Namen Ihres Tokens zu verstehen, habe ich bewusst ein Token erstellt , das nicht genau dem Kontext entspricht Ich gehe zur lokalen Variablen und wenn ich hier zum Abstand gehe, siehst du hier die siehst du Nun, die Größe gibt im Allgemeinen an, wie klein und groß es ist, nicht wie weit es ist, oder es sagt auch nicht aus, wie rund es ist. Das ist in dem Zusammenhang irreführend , und wir werden versuchen, es in großen Mengen zu beheben Wir werden ein Plugin namens Variable Renail verwenden. Wenn Sie eine kleine Anzahl von Tokens haben, können Sie diese direkt umbenennen Wenn es jedoch viele Token gibt, müssen Sie zusätzliche Schritte unternehmen. In diesem Fall können Sie je nach Ihren Einstellungen entweder Google-Sets oder Excel verwenden . Navigiere zum Aktionsbereich unten, klicke darauf und versuche, ein Plugin namens Variable Rename zu finden . Klicke darauf. Sobald es geöffnet ist, klicken wir auf die Schaltfläche Variable neun exportieren. Es zeigt uns alle Token , die wir in dieser Figma-Datei haben uns jedoch nur der Abstand interessiert, werden wir nur den Abstandsteil von hier bis hier kopieren von hier bis hier Klicken Sie mit der rechten Maustaste auf Kopieren, wir werden zu dem Excel navigieren, das wir haben, und hier werden wir etwas einfügen. Jetzt möchte ich das ein bisschen generisch machen , damit wir es sowohl in Form, Größe als auch im Radius verwenden können . Ich werde einen kurzen Aufruf von Control F verwenden, um die Abstandsgröße zu ermitteln. Es wird also auf dieses Ziel abzielen, und ich möchte dieses Ding durch SRS ersetzen Das ist das Akronym, das ich für Abstand verwendet habe, R steht für Radius und das letzte S steht für Größe wenn ich dieses Token öffne, kann ich mich daran erinnern, wo es verwendet werden soll , und N steht für Zahl. Ich werde sie alle ersetzen und wenn ich fertig bin, klicke ich mit der rechten Maustaste oben und füge links eine Spalte ein. Lassen Sie mich zu unserer Figma zurückkehren und diesen Abschnitt noch einmal kopieren Kopieren Sie und kehren wir wieder zum Excel Pi zurück. Ich werde eine Paste machen. Jetzt haben wir auf der linken Seite den alten Wert und auf der rechten Innenseite haben wir einen neuen Wert Der letzte Schritt , den wir tun müssen, ist dieses Ding im CSV-Format zu exportieren Also Datei, exportiere das in die CSV-Datei, und sobald sie heruntergeladen ist, öffnen wir diese Datei. Das ist also die Datei, die wir haben. Ich werde mit der rechten Maustaste klicken und versuchen, dieses Ding in einem Notizblock zu öffnen Sobald Sie fertig sind, drücken Sie Strg A, klicken Sie mit der rechten Maustaste, machen Sie eine Kopie gehen Sie zu unserer Figma, wählen Sie auf der rechten Seite alles aus, machen Sie es und fügen Sie Das ist also unser alter Wert und dieser ist der neue Wert Klicken Sie nun auf die Schaltfläche Variablen umbenennen. Okay, sobald wir fertig sind, haben wir keinen Fehler mehr und alles sieht gut aus. Lass uns das Ding schließen. Gehe zur lokalen Variablen. Wenn wir nach unten scrollen, werden wir sehen, dass SRS erstellt wurde und alle unsere Token korrekt umbenannt wurden Ich sehe jedoch immer noch, dass hier ein Leerzeichen vorhanden ist , weil wir bei dieser Auswahl dieses Token übersehen haben Lassen Sie uns dieses Ding manuell hinzufügen. Um das zu tun, werde ich zunächst einfach das semantische Token einchecken Wenn wir dieses Ding irgendwo benutzen, ja, wir benutzen es hier in unserem Raum Gehen wir zurück zum primitiven Token. Gehe zum SRS, scrolle nach unten und ich erstelle ein Token, und ich erstelle ein Token, klicke mit der rechten Maustaste und dupliziere eine Variable Also werde ich N Null, 02 sagen und einen Wert zwei hinzufügen Gehe zurück zum semantischen Token und ich werde die Definition für extra klein ändern Anstatt Leerzeichen sollte es genau hier von n002 kommen. Ja. Jetzt sollte alles mit SRS beginnen und das sieht gut aus Schauen wir uns den Radius an, und das sieht auch gut aus Gehen wir zum primitiven Token. Jetzt können wir dieses Ding getrost löschen. Andernfalls kann es vorkommen, dass Sie es von hier löschen und der Token-Wert immer noch als defekt darin verbleibt 21. Vielen Dank: Danke Vielen Dank, dass Sie sich Zeit genommen haben. Ich schätze Ihr Engagement sehr und hoffe, dass die Fähigkeiten, die Sie erworben haben, Sie in die Lage versetzen, ein fantastisches skalierbares Design zu erstellen Üben Sie weiter und ich freue mich darauf, Ihr unglaubliches Projekt zu sehen, das Sie erstellen Wenn Sie Fragen haben, können gerne auf der Registerkarte „Diskussion“ eine Konversation beginnen. Ich helfe Ihnen gerne weiter und beantworte Ihre Anfrage. Sie können auch eine Frage stellen oder Ihr Projekt teilen. Lassen Sie uns das Lernen weiterführen.