So funktioniert es

Diese Doku wird noch finalisiert und kann sich weiter ändern, während das Produkt weiterentwickelt wird.

TokenIgnite ist eine Live-Validierungsschicht zwischen Figma Variables und deinem laufenden Frontend. Der Zweck ist klar: Design-Tokens in die echte UI bringen, während du entscheidest, ob das Ergebnis gut genug zum Export ist.

Der Loop

Designer:in öffnet das TokenIgnite Figma-Plugin, meldet sich an und hält den Stream aktiv.
Das Plugin veröffentlicht Variablen-Updates auf dem Live-Sync-Stream.
Entwickler:in verbindet das SDK in einer lokalen oder Closed-Staging-Umgebung.
Die Runtime injiziert native CSS Custom Properties in ein <style>-Tag (context-scoped über data-ti-context).
Du siehst die Änderung in der echten UI — auch während KI-Agenten Layout ändern — und exportierst CSS erst nach Freigabe.

Live-Token-Lieferung ist stream-direkt: Plugin schreibt Updates; SDK wendet sie im Browser an. Bootstrap und Auth nutzen den Server; der Live-Token-Pfad geht nicht über HTTP Request/Response pro Tweak.

TokenIgnite schreibt kein JSX/TSX um. Komponenten sollten CSS-Variablen bereits nutzen (z. B. color: var(--color-brand-accent)). Vordefinierte Figma-WEB-Code-Syntax hat absolute Priorität bei der Benennung.

Zwei Wege für Entwickler:innen

Pfad	Wann	Bootstrap
A — Lokal	Alltag in der Entwicklung	`initTokenIgnite()` + aktives `tokenignite run <name>`
B — Closed Staging	Zugriffsbeschränktes, produktionsgebautes Staging	`runTokenIgnite(target, config)` — kein Terminal-Run nötig

Pfad A bleibt hinter einem Development-Guard, damit öffentliche Production-Builds sauber bleiben. Pfad B darf diesen Guard nicht nutzen — Closed Staging ist produktionsähnlich (NODE_ENV ist meist "production"); von öffentlicher Production über Deploy und Zugriffskontrolle fernhalten.

Details und Code: Entwickler-Doku.

Wer macht was

Rolle	Verantwortung
Designer:in	Plugin installieren → anmelden → streamen → TokenIgnite File-ID kopieren → an Entwickler:innen senden
Entwickler:in	`npm i -D tokenignite` → `npx tokenignite init` → File-ID setzen → Pfad A oder B bootstrappen → im Browser prüfen → bei Bedarf exportieren

Entwickler:innen brauchen kein TokenIgnite-Konto, um einen Live-Stream zu konsumieren. Sie brauchen die File-ID und einen aktiven Plugin-Stream.

Glossar

Begriff	Bedeutung
TokenIgnite File-ID	ID im Plugin (oft `tokenignite-…`). Kein Figma-File-Key. Gehört in `files[].id`.
Continuous Injection	Streaming von Figma-Variablen-Änderungen in einen bereits laufenden Browser ohne Rebuild pro Tweak.
Run Mode	Aktive Live-Session für einen konfigurierten Stream (`tokenignite run <name>` und/oder `runTokenIgnite`).
Context	Ein `collectionName:modeName`-Wert auf `data-ti-context` (normalisiert, z. B. `color-modes:dark-mode`). Mehrere Werte erlaubt, Leerzeichen-getrennt.
Mode	Der Mode-Teil eines Contexts (`collectionName:modeName`).
Validated Export	Native CSS Custom Properties erst nach Runtime-Freigabe auf die Festplatte schreiben — nicht bei jedem Live-Tweak.
Zero Footprint	Pfad A: Development-Dependency + Init nur in Development. Pfad B: TokenIgnite von öffentlicher Production über Deploy/Zugriffskontrolle fernhalten — nicht über einen `NODE_ENV===development`-Guard.

Public-Beta-Limits