Designtokens, Ions, Subatomics – diese Begriffe begegnen uns immer häufiger, wenn es um Design Systeme geht. Aber Hand aufs Herz: Ist das Thema wirklich neu? Oft fehlt ein klares Verständnis davon, was Designtokens überhaupt sind und warum sie in modernen Designprozessen unverzichtbar sind.
Was sind Designtokens?
Ein kleiner Spoiler vorab: Designtokens sind keine Variablen. Vielmehr handelt es sich um Designentscheidungen, die in einem Schema wie JSON festgehalten werden.
Dieses JSON dient dann als Ausgangspunkt, um in verschiedene Zielsysteme zu exportieren – sei es CSS, Swift, Kotlin, TypeScript oder andere Plattformen.
Der Schlüssel heißt „Style Dictionary“
Schon 2017 hat Amazon eine Open-Source-Lösung veröffentlicht, die speziell für den Umgang mit Designtokens entwickelt wurde. Style Dictionary nimmt die in Tools wie Figma oder UXPin definierten Designtokens (das JSON) und transformiert sie in die gewünschte Zielapplikation.
Der Einstieg ist einfacher, als viele denken:
💬 „Designtokens aufzusetzen dauert viel zu lange?“
Mit Style Dictionary gelingt die Konfiguration in wenigen Schritten. Bereits mit paar JSONs kannst du starten und langfristig enorm Zeit sparen.
💬 „Meine Themes (Light, Dark, High-Contrast) sind zu komplex.“
Gerade hier zeigen Design Tokens ihre wahre Stärke. Unterschiedliche Themes können zentral verwaltet und flexibel angepasst werden – Änderungen werden automatisch auf alle Plattformen übertragen.
💬 „Wie integriere ich Designtokens in TypeScript?“
Ganz einfach: Style Dictionary unterstützt TypeScript! Du kannst die generierten Tokens direkt in deinem TypeScript-Projekt nutzen. Check! ✅
Sind Designtokens jetzt unverzichtbar?
Variablen zu erstellen und loszulegen, ist schnell gemacht und reicht für kleinere Applikationen auch oft aus. Aber in großen Unternehmen, die mit mehreren Softwarelösungen arbeiten und deren Designvorgaben sich im Laufe der Zeit ändern, braucht es mehr als nur einzelne Variablen. Hier kommen Design Tokens ins Spiel: Sie schaffen eine Single Source of Truth, die Designentscheidungen zentral ermöglicht.
💡 Bereit, loszulegen?
Auf GitHub findest du eine Basis-Implementierung, die dir den Einstieg erleichtert:
👉 Style Dictionary mit Dark-Mode-Unterstützung
Blogbeitrag auf Medium👉 https://medium.com/@artur.sopelnik93/how-to-use-design-tokens-with-style-dictionary-and-dark-mode-fdb53f675977
Hier geht’s zu unserem kostenlosen E-Book zum Thema Design-Systeme:
👉 E-Book: Design-Systeme
Noch Fragen? Weitere Infos gibt’s in unserem Solutions-Bereich.