Why?

Design Tokens erleichtern die Konsistenz der Corporate Identity. Es werden nicht nur Farben und Schriftarten in einer Single Source of Truth gespeichert, es werden weiterhin über semantische Namenskonventionen Designentscheidungen festgehalten. Damit die Design Tokens für alle Abteilungen an einer Stelle verfügbar gemacht werden, bietet sich das Tool Style Dictionary an. Hier können alle Token in JSON-Dateien gespeichert werden und in andere Formate exportiert werden, z.B. in SCSS-Dateien für die Webentwicklung, XML-Dateien für Android, aber auch für ios(-swift)-Nutzung.

Figma Plugin

Das Figma Plugin "Figma Tokens" kann genutzt werden, um in Figma Design Tokens zu erzeugen und zu nutzen. Die Design Tokens können in Figma im JSON-Format exportiert werden. Die Datei kann danach über ein Tool umformatiert werden.

Dieses kann global installiert werden:

npm install -g token-transformer

Über folgenden Befehl lässt sich die exportierte JSON-Datei von Figma Tokens umformatieren:

node token-transformer input output sets excludes

Den Dateinamen der Figma Tokens gibt man als input ein, als output entsprechend der Name der umformatierten Datei. Als sets können die verschiedenen Design Themes angegeben werden, die zusammengefasst werden sollen, so z.B. ein Light Theme und ein Dark Theme. Excludes gibt die Sets, die aus der Formatierung ausgeschlossen werden sollen wieder.

Die Datei wird dann so umformatiert, dass sie vom Style Dictionary gelesen werden kann.

Style Dictionary

Man kann daraufhin also Style Dictionary installieren und mit dessen CLI ein Projekt aufsetzen.

npm install -g style-dictionary

style-dictionary init basic

In dem Projekt können im tokens-Ordner die zuvor umformatierten JSON-Dateien abgelegt werden.

In der config-Datei des Projekts kann konfiguriert werden, welche Dateien in welches Format exportiert werden sollen, z.B. nur in SCSS-Variablen für die Webentwicklung.

Die Formatierung der Token erfolgt dann über den Befehl

style-dictionary build

Naming Convention

Style Dictionary empfiehlt die Namensstruktur Category/Type/Item (CTI, z.B. color-background-button).

Nach der Umformatierung über Style Dictionary wird Camelcase durch Bindestriche getrennt. Token mit mehreren Eigenschaften werden nummeriert, z.B. werden aus einem Token für einen mehrdimensionalen Schatten u.a. die Variablen "$card-shadow-0-blur" und "$card-shadow-1-blur".

Quellen:

• Dokumentation Figma Tokens: https://docs.tokens.studio/sync/gitlab
• Tool zum Formatieren von exportierter Figma Token Datei: https://www.npmjs.com/package/token-transformer
• Dokumentation Style Dictionary: https://amzn.github.io/style-dictionary/#/
• GitHub Repo Style Dictionary: https://github.com/amzn/style-dictionary
• Blogpost zu Design Systems & Style Dictionary: https://blog.logrocket.com/design-foundational-reusable-components-style-dictionary/