Export und Code
Ihre Tokens müssen nicht nur in Figma leben. Exportieren Sie sie aus der Web-App in dem Format, das Ihre Codebasis tatsächlich nutzt – ganz ohne Plugin –, oder lassen Sie Build- und KI-Tools die neuesten Tokens als Code abrufen.
Aus dem Web exportieren
Öffnen Sie in der Projektliste das ⋯-Menü einer Projektkarte und wählen Sie Exportieren – oder klicken Sie innerhalb eines Projekts mit der rechten Maustaste auf eine Sammlung in der linken Seitenleiste (oder auf eine Zeile im Raster) und wählen Sie Diese Sammlung exportieren. Es öffnet sich ein Dialog mit:
- Umfang — die zu exportierenden Sammlungen: Haken Sie Alle Sammlungen an oder wählen Sie einzelne aus. Wenn Sie den Dialog von einer Sammlung aus öffnen, ist diese Sammlung bereits angehakt.
- Format — eines von sechs (siehe unten).
- Referenzen in Werte auflösen — ersetzt Aliase wie
{Primitive/blue/500}durch ihren Endwert. Plattform-Code-Formate lösen immer auf; für sie ist das Häkchen gesetzt und gesperrt.
| Format | Ausgabe |
|---|---|
DTCG (.tokens.json) | Format der W3C Design Tokens Community Group |
| JSON | Rohe Variablen, ein Eintrag pro Token |
| CSV | Eine Tabelle – eine Zeile pro Variable, eine Spalte pro Modus |
| CSS | Custom Properties – Standardmodus in :root, andere Modi in [data-theme="…"] |
| SwiftUI | Ein Typ pro Sammlung, eine statische Instanz pro Modus |
| Jetpack Compose | Kotlin – eine Klasse pro Sammlung, ein Wert pro Modus |
Plattform-Code zum direkten Einfügen
Wählen Sie CSS, SwiftUI oder Jetpack Compose, und Sie erhalten Code, den Sie direkt in Ihre App übernehmen können. Die Umwandlung läuft auf dem Server und ist deterministisch – dieselben Tokens ergeben immer dieselben Bytes, sodass Diffs sauber bleiben und Caching gut funktioniert. Eine Sammlung mit den Modi light und dark sieht so aus:
/* CSS custom properties */
:root {
--colors-button-background: #18181b;
--colors-radius-md: 8px;
}
[data-theme="dark"] {
--colors-button-background: #fafafa;
}// SwiftUI — one instance per mode
struct ColorsTokens {
let buttonBackground: Color
let radiusMd: CGFloat
static let light = ColorsTokens(buttonBackground: Color(vjHex: 0x18181B), radiusMd: 8)
static let dark = ColorsTokens(buttonBackground: Color(vjHex: 0xFAFAFA), radiusMd: 8)
}// Jetpack Compose (Kotlin)
class ColorsTokens(val buttonBackground: Color, val radiusMd: Dp)
val ColorsTokensLight = ColorsTokens(buttonBackground = Color(0xFF18181B), radiusMd = 8.dp)
val ColorsTokensDark = ColorsTokens(buttonBackground = Color(0xFFFAFAFA), radiusMd = 8.dp)Referenzen werden immer zu Endwerten aufgelöst; lässt sich eine nicht auflösen, bleibt sie als Kommentar stehen – nie als erfundener Wert.
Tokens wieder importieren
Das ⋯-Menü einer Projektkarte enthält außerdem Importieren. Legen Sie eine JSON- oder DTCG-Datei ab, und Sie sehen eine Vorschau – Anzahl der Sammlungen, Variablen und Modi sowie Warnungen –, bevor etwas angelegt wird. Nach dem Bestätigen wird sie als neue Sammlung hinzugefügt (Farben werden großzügig erkannt: 3- oder 6-stelliges Hex, rgb() und hsl() funktionieren). Die Änderung wird im Verlauf als Import festgehalten.
Werte, die sich nicht abbilden lassen – zusammengesetzte Tokens wie Typografie oder Schatten, Maße in anderen Einheiten als px, nicht lesbare Farben oder Werte, die nicht zu ihrem Typ passen –, werden übersprungen statt geraten; die Vorschau zeigt, wie viele und welche. Wenn Sie dieselbe Datei erneut importieren, kommt eine weitere neue Sammlung hinzu.
Per API und MCP abrufen
Für CI-Pipelines und KI-Coding-Tools exportieren Sie nicht von Hand – Sie rufen ab. Dieselben Plattform-Formate gibt es über die REST-API mit ?format=css|swift|compose, und der Server @variablejar/mcp stellt ein get_tokens-Tool bereit, mit dem Agenten in Ihrer IDE die neuesten Tokens als Code abrufen. Ein Projekt-API-Token funktioniert für beides.