Wie können Icons als Design Token implementiert werden?

Obwohl sie weniger Aufmerksamkeit erhalten, wenn es um Design-Tokens geht, können Icon-Tokens sehr mächtig sein.

Wie jeder andere Token-Typ müssen Symbol-Token Level 1 und Level 2 haben, wobei Level 3 optional ist.

Es gibt mindestens 2 erwähnenswerte Hauptvorteile, wenn es um Symbol-Token geht:

1. Strengeres Nachdenken über die Rolle jeder Ikone.
2. Besser strukturierter, skalierbarer und wartbarer Icon-Satz.

Stellen Sie sich vor, wir wählen diese Symbole für das Produkt, das wir gerade entwickeln.

Wie würden Sie sie nennen?

Ich schätze, dass zumindest einige von Ihnen ihre Semantik/Rolle/Funktion auswählen würden, also: Startseite, Favorit/Gefällt mir, Papierkorb, Bearbeiten und Benachrichtigungen.

Dies ist zwar überhaupt nicht falsch, aber es ist nicht der symbolische Weg, dies zu tun.

Schauen wir uns also die erste und zweite Ebene der Design-Token an:

1. Referenz-Token

Wähle zuerst deine Waffen, Monster kommen später.

Hier legen wir unsere Auswahl fest, z.

• Ich wähle dieses Rot #ff0044 und werde es „color.chills“ nennen.
• Ich wähle Comic Sans und nenne es „font.lovely“.

• Ich wähle dieses Haus und werde es „icon.100“ nennen.

• Ich wähle dieses Haus und werde es „icon.house“ nennen.

Wie Sie sehen können, gibt es zwei „Schulen*“ für die Benennung bestimmter Referenz-Tokens wie Farben oder Symbole.

*Tatsächlich gibt es keine solchen Schulen, ich wollte nur den zwei Arten, die ich oft verwende, um Referenzsymbole zu benennen, eine raffiniertere Note verleihen.

Die „ semantische“ Schule:

• Ich wähle dieses Haus und werde es „icon.house“ nennen.
• Ich wähle dieses Herz und werde es „icon.heart“ nennen.
• Ich wähle diesen Mülleimer und werde ihn „icon.trash-can“ nennen.
• Ich wähle diesen Bleistift und werde ihn „icon.pencil“ nennen.
• Ich wähle diese Glocke und werde sie „icon.bell“ nennen.

• Ich wähle dieses Haus und werde es „icon.100“ nennen.
• Ich wähle dieses Herz und werde es „icon.120“ nennen.
• Ich wähle diesen Papierkorb und nenne ihn „icon.155“.
• Ich wähle diesen Bleistift und werde ihn „icon.156“ nennen.
• Ich wähle diese Glocke und werde sie „icon.172“ nennen.

Vor-und Nachteile

Wenn „ agnostisch “ zu abstrakt ist, um kommuniziert und auswendig gelernt zu werden, widerspricht „ semantisch “ dem Wurzelagnostizismus von Referenztoken (AKA-Basistoken, Primitive, globale Token).

Referenz-Token heißen normalerweise „font-weight.100“ oder „space.400“. Farben und Symbole „color.blue“ und „icon.house“ zu nennen, würde nicht in die Taxonomie passen, oder?

Während „icon.100“ es mir erlaubt, jedes Symbol hineinzuwerfen, ist „icon.house“ 1000-mal intuitiver zu bedienen. Trotzdem bevorzuge ich die erste Option, den „ Agnostiker “. Hier ist der Grund:

Ich möchte, dass meine Referenztoken leere Kästchen sind. Was auch immer ich hineinlege, sollte die Schachtel nicht formen. Wenn ich heute eines dieser Kästchen mit einem Herzsymbol fülle, möchte ich es morgen ohne Namenskonflikte in einen Stern ändern können.

„Bedeutung“ beginnt auf der zweiten Token-Ebene, den „System-Token“.

2. Systemtoken

Hier wird es interessanter: Die Entscheidungen.

Mit Entscheidungen meine ich:

• Ich entscheide mich, „ rt.icon.house “ oder „ rt.icon.100 “ (rt = Referenz-Tokens) als mein Icon für Home zu verwenden , also „ st.icon.home “ (st = System-Tokens).
• Ich entscheide mich, „ rt.icon.heart “ oder „ rt.icon.120 “ als mein Symbol für Favoriten zu verwenden , also „ st.icon.favorite “.
• Ich entscheide mich, „ rt.icon.trash-can “ oder „ rt.icon.155 “ als mein Icon für Delete zu verwenden , also „ st.icon.delete “.
• Ich entscheide mich, „ rt.icon.pencil “ oder „ rt.icon.156 “ als mein Icon für Edit zu verwenden , also „ st.icon.edit “.
• Ich entscheide mich, „ rt.icon.bell “ oder „ rt.icon.182 “ als mein Symbol für Benachrichtigungen zu verwenden , also „ st.icon.notifications “.

Wahrscheinlich verwenden Sie zur Information von Entwicklern oder anderen Designern die Systemtoken, die Entscheidungen: „Hey John, please use st.icon.close for the modal“.

1. Strengeres Nachdenken über die Rolle jeder Ikone.

Nun zurück zu meinen beiden Hauptvorteilen, und nach dieser kleinen Übung können Sie sehen, dass die Auswahl und Zuordnung von Symbolen einen außerordentlich präzisen und sorgfältigen Prozess durchlaufen hat.

Sie werden nicht nur die Symbole, die Sie in Ihr Set aufnehmen möchten, sorgfältig auswählen, sondern ihnen auch eine einzige semantische Funktion zuweisen und dadurch Redundanz und Inkonsistenz reduzieren und zu effizienteren Auswahlmöglichkeiten und Entscheidungen führen.

2. Besser strukturierter, skalierbarer und wartbarer Icon-Satz.

Um diesen Vorteil zu erklären, erinnern wir uns an einige wiederkehrende Situationen:

Problem 1: Das Kreuz-Symbol gefällt Ihnen nicht und Sie möchten es durch ein dünneres ersetzen.

Lösung: Du öffnest deinen Referenz-Token und tauschst/passt die innere Form an.

Ergebnis: Alle Systemtoken , die auf dieses Referenztoken verweisen, werden nun aktualisiert, nämlich:

• Löschen (für die Aktion zum Löschen eines Elements)
• Entfernen (für die Aktion zum Entfernen eines Elements)
• Schließen (für die Aktion des Schließens eines Elements).
• Fehler (zusammen mit einer Fehlermeldung)

Lösung: Sie erstellen ein neues Referenz-Token „ icon.trash “ und aktualisieren dann das System-Token „ icon.delete “, um auf das neue „icon.trash“ abzuzielen . Dadurch bleiben Entfernen, Schließen und Fehler intakt.

Ergebnis 1: Jede Komponente, die „ icon.delete “ verwendet, zeigt jetzt einen Papierkorb an.

Wie Sie sehen können, wird sich all diese potenzielle Flexibilität irgendwann als nützlich erweisen. Auf der anderen Seite sind die Kosten für Vorarbeiten nicht erheblich.

Zur Erinnerung…

Sie können ein rt.icon ändern und alle System- und Komponenten-Tokens beeinflussen, die auf dieses Symbol abzielen. ZB ändere ich ein Herzsymbol in einen Stern.

Sie können ein st.icon ändern und alle Komponenten-Tokens beeinflussen, die auf dieses semantische Element abzielen. ZB Der „Favorit“ wird jetzt durch einen Stern dargestellt, während das Herz für „Gefällt mir“ verwendet wird.

Sie können ein ct.icon ändern und nur eine ganz bestimmte Komponente beeinflussen. ZB verwendet die Kartenkomponente im dunklen Modus einen gefüllten Stern anstelle des umrandeten Sterns, der im hellen Modus für „Favorit“ verwendet wird.

Figma-Token

Das Figma-Tokens-Plugin unterstützt seit kurzem „Assets“. Damit können Sie Ihr Logo, Ihre Bilder und Ihre Ikonografie ganz einfach in einem Remote-Repository speichern und über das Plugin darauf verlinken. Auf diese Weise können Sie mit einem Klick ein Bild zu einer Form in Figma hinzufügen und gleichzeitig sicherstellen, dass ein Living Style Guide den Speicherort angibt.

Laut dem Team von Figma Tokens könnte es jedoch noch zu früh sein, die Funktion zu nutzen, da noch daran gearbeitet wird:

„Derzeit muss die Bildquelle über eine eigene CORS-Validierung (Cross-Origin Resource Sharing) verfügen. Einige Websites haben das bereits implementiert (z. B. Unsplash), aber ansonsten können Sie dies hinter einen CORS-Proxy stellen. Weitere Informationen zu CORS finden Sie hier . Wir werden in einer zukünftigen Version einen CORS-Proxy hinzufügen.“ Hier ist der vollständige Artikel.