Wechsel zu nativen Figma Variables

Bisher verwaltete Shield seine Design Tokens über das Figma-Plugin Tokens Studio (ehemals Figma Tokens). Das hat uns früh eine strukturierte Token-Sprache gegeben – war aber immer ein optionaler Layer über Figma, kein Teil davon. Mit zunehmender Reife der nativen Figma Variables migrieren wir jetzt den gesamten Token-Stack.

Was ist der Unterschied?

Token Studio (bisheriger Ansatz)

Token Studio speichert Tokens als JSON in einem Figma-Plugin, das separat installiert und gepflegt werden muss. Die Tokens werden über das Plugin auf Figma-Styles gemappt. Vorteile:

• Komplexe Token-Strukturen (Aliase, Composite Tokens, Math-Expressions)
• Sync mit Git-Repository über den eigenen Export
• Multi-Tier-Hierarchien (Global → Semantic → Component)

Nachteile:

• Plugin-Abhängigkeit: ohne Token Studio sieht niemand die Token-Struktur in Figma
• Kein nativer Dev-Mode-Support – Entwickler sehen Rohe Werte, keine Token-Namen
• JSON-Sync erfordert manuelle Schritte oder CI-Hooks

Native Figma Variables (neuer Ansatz)

Figma Variables sind seit 2023 in Figma eingebaut und mittlerweile produktionsreif. Sie unterstützen:

• Modes: ein Token, mehrere Werte (Light / Dark, Tenant A / B) – nativ, ohne Plugin
• Dev Mode Export: Entwickler sehen im Inspect-Panel direkt den Token-Namen als CSS Custom Property
• Scoping: Tokens können auf bestimmte Ebenen (Color, Number, String, Boolean) eingeschränkt werden
• Kollektionen: saubere Trennung von Global Tokens, Semantic Tokens und Component Tokens

Was ändert sich für den Figma-to-Code-Workflow?

Der bisherige Weg sah so aus:

Token Studio (JSON) → style-dictionary → CSS Custom Properties → Webcomponents

Der neue Weg:

Figma Variables → Figma REST API / Export → style-dictionary → CSS Custom Properties → Webcomponents

Der Export aus nativen Figma Variables bildet .json-Dateien, die Style Dictionary direkt verstehen kann – ohne den Umweg über das Token Studio Plugin-Format.

Was bleibt gleich?

• Die Token-Namen bleiben konsistent (--shield-color-brand, --shield-space-3 etc.)
• Style Dictionary bleibt das Build-Tool für die Ausgabe in CSS, JS und weitere Formate
• Der Tokens-Build-Step im Monorepo (packages/tokens) ändert sich intern, aber nicht in seiner Schnittstelle

Was fällt weg?

• Das Token Studio Plugin ist keine Abhängigkeit mehr für Designer in Figma
• Kein manueller JSON-Export-Schritt mehr notwendig
• Keine inkompatiblen Token-Formate zwischen Plugin-Version und Style Dictionary

Was wird besser?

Für Designer: Token-Werte und Modes sind direkt in der Figma-UI sichtbar – ohne Plugin-Overlay. Änderungen an Token-Werten werden sofort in allen verknüpften Frames reflektiert.

Für Entwickler: Im Dev Mode erscheinen Token-Namen direkt neben Hex-Werten. Das reduziert Rückfragen und macht Figma zur verlässlicheren Single Source of Truth.

Für das System: Weniger bewegliche Teile. Die Token-Pipeline ist stabiler, weil sie auf einer Figma-First-Infrastruktur basiert statt auf einem Third-Party-Plugin.

Rollout

Die Migration läuft iterativ. In einem ersten Schritt werden Color- und Spacing-Tokens migriert. Typografie und Radius folgen im nächsten Sprint. Token Studio bleibt während der Übergangsphase parallel aktiv.