Zum Inhalt springen
Projekte

TokenLab.

Von einem internen Figma-Plugin zur eigenen SaaS-Plattform für Design Tokens, Regeln und Ressourcen. Für Menschen, AI und automatisierte Systeme.

Projektart
Eigenes Produkt
Bereich
Design Systems · SaaS · AI
Beitrag
Produktstrategie · Product Design · Fullstack-Entwicklung · Go-to-Market & Betrieb
Jahr
2025/26
TokenLab Token-Editor auf einem Desktop-Monitor am Arbeitsplatz

Wir haben TokenLab konzipiert, gestaltet, entwickelt, integriert und vermarktet. Heute betreiben und erweitern wir die Plattform. Was als internes Figma-Plugin begann, wurde zu einer gemeinsamen Quelle für Tokens, Designkontext und Ressourcen. So können Menschen, AI und Automationen am selben System arbeiten, ohne die Kontrolle über Änderungen und deren Zusammenführung zu verlieren.

Scope

Projektverlauf
April 2025Fortlaufend
TokenLab Markenauftritt mit App-Icons und Anmeldung im Browser
Konstruktion des TokenLab Logos auf einem Gestaltungsraster

Der Ausgangspunkt war ein Problem aus unserer eigenen Arbeit: Zwischen Figma und Entwicklung entstand immer wieder Drift. Designs wurden übergeben und im Code verändert. Diese Änderungen wurden später nicht immer im Design nachgeführt. Mit jeder Kopie wurde unklarer, welcher Stand tatsächlich gilt.

Gleichzeitig fehlten uns in Figma Funktionen, die den Aufbau effizienter Designsysteme erleichtern. Deshalb entstanden bereits 2024 erste Versionen eines eigenen Plugins. Es löste konkrete Aufgaben direkt in Figma, blieb aber zunächst an ein einzelnes Werkzeug gebunden.

TokenLab Farbwerkzeuge mit Farbwähler und abgestuften Farbpaletten

Im April 2025 begannen wir, aus dem Plugin eine eigenständige SaaS-Plattform zu entwickeln. Der Fokus verschob sich von einer Erweiterung für Designer zu einer gemeinsamen Arbeitsgrundlage für alle Contributors: Design, Engineering, AI und automatisierte Systeme.

TokenLab verwaltet deshalb nicht nur Token-Werte. Die Plattform verbindet Tokens mit Designkontext, Regeln und Ressourcen. Diese gemeinsame Quelle hält fest, was gilt, wer etwas verändert und wie Änderungen kontrolliert zusammengeführt werden.

Expressions und Transformer machen Token-Systeme berechenbar statt rein manuell. Color Functions erzeugen nachvollziehbare Farbbeziehungen; mit der Alpha-Funktion lässt sich Transparenz aus einem Alias-Token ableiten, ohne die zugrunde liegende Farbe zu duplizieren. Solche Funktionen entstanden aus den Lücken, die wir in bestehenden Designsystem-Workflows selbst erlebt hatten.

TokenLab Transformer-Editor mit verbundenen Verarbeitungsschritten und Funktionen
Produktdarstellung der TokenLab Funktionen Transformer, Expressions und Aliases
TokenLab Design-Assets mit Figma-Dialog für eine Farbvariable

Technisch verbindet TokenLab eine selbst entwickelte Web-App mit einem Node-Backend und Supabase. Die Datenbank speichert Tokens und ihre Beziehungen, Supabase Storage die zugehörigen Ressourcen. Realtime synchronisiert parallele Arbeit direkt im System und schafft die Grundlage für Multiplayer-Abläufe, bei denen sich Beteiligte nicht gegenseitig Änderungen überschreiben.

Das Figma-Plugin und die selbst entwickelte CLI bringen dieselbe Quelle in die Werkzeuge von Design und Engineering. Dadurch muss kein Team eine vereinfachte Kopie pflegen. Menschen, AI und Automationen greifen auf dieselbe Plattform zu, während Herkunft, Berechtigungen und Zusammenführung kontrollierbar bleiben.

TokenLab Änderungsvergleich mit hervorgehobenen Unterschieden auf einem Monitor
TokenLab Workspace-Übersicht mit Bibliotheken und Werkzeug-Logos
Ausschnitt der TokenLab Produktwebsite mit Produktkommunikation
Dunkle TokenLab Bibliotheksansicht mit Gruppen und Token-Werten

TokenLab wurde vollständig bei minddraft aufgebaut: von Konzeption und Product Design über Figma-Integration, Web-App, Datenbank, Backend und CLI bis zu Vermarktung und Betrieb. Design, Entwicklung und Tests liefen nicht nacheinander, sondern in vielen gemeinsamen Iterationen.

Nach dem Plattformstart im April 2025 öffneten wir TokenLab im Mai 2026 als Beta. Seit August 2026 ist das Produkt live. Der Launch ist dabei kein Endpunkt: Wir betreiben die Plattform selbst und entwickeln Produkt, Technik und Positionierung mit den Erkenntnissen aus der Nutzung weiter.

Wirkung

1 Quellefür Tokens, Designkontext und Ressourcen über alle angebundenen Werkzeuge.
Realtimefür parallele Zusammenarbeit, ohne Änderungen gegenseitig zu überschreiben.
3 ZugängeWeb-App, Figma-Plugin und CLI verbinden Design und Engineering.

Willst du aus deiner Produktidee eine eigene SaaS-Plattform machen?

Anrufen
Marco Schär von minddraft

Marco oder jemand aus dem Team meldet sich bei dir. An Werktagen innerhalb von 24 Stunden.