Designer-Doku

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

Deine Aufgabe ist klar: das Plugin streamen lassen und Entwickler:innen die TokenIgnite File-ID geben. Sie verbinden ihre laufende UI; du arbeitest weiter in Figma. Für den Gesamt-Workflow und das Glossar ist So funktioniert es der passende Einstieg. Für die Entwickler-Seite siehe Entwickler-Doku.

1. Voraussetzungen

• Figma-Datei mit Variablen (Collections / Modes)
• Zugang zum TokenIgnite Figma-Plugin (Public Beta / Early Access)
• Eine Entwickler:in, die ihre Runtime mit deiner File-ID verbindet

Du musst keine Code-Syntax vorher in Figma setzen. TokenIgnite kann Namen erzeugen und bei Bedarf nach Dev Mode zurückschreiben. Hast du WEB-Code-Syntax bereits definiert, behält sie absolute Priorität.

2. Quick Start

1. TokenIgnite Figma-Plugin installieren.
2. Design-Datei öffnen und das Plugin starten.
3. Registrieren oder anmelden (Figma, Google oder E-Mail).
4. Am Status und an den Sync-Flammen prüfen, dass gestreamt wird.
5. Die TokenIgnite File-ID kopieren (Form wie tokenignite-096149).
6. Die ID an deine Entwickler:in senden — nicht den Figma-File-Key, nicht den Share-Link.

3. Was im Alltag zählt

4. So entstehen die Namen

Contexts

Collection- und Mode-Namen werden zu normalisierten Segmenten (lowercase kebab-case; führende Nummern-Präfixe wie 1- entfallen; Emojis/Sonderzeichen entfallen):

collectionName:modeName

Beispiel: Color Modes + Dark Mode → color-modes:dark-mode. Plugin-Filter zeigen dieselben Labels, die Entwickler:innen in data-ti-context einsetzen.

CSS-Variablennamen

Ohne WEB-Code-Syntax baut TokenIgnite --{gruppenpfad}-{variablenname} (Collection und Mode gehören nicht zum CSS-Namen). Pfadsegmente mit -, normalisiert zu kebab-case. Explizite WEB-Code-Syntax gewinnt weiterhin.

--spacing-gap-2xl: 32px;

Variable 2xl unter Gruppen Spacing → Gap → --spacing-gap-2xl.

5. Alltag im Workflow

1. TokenIgnite-Plugin während der Arbeit geöffnet lassen.
2. Variablen wie gewohnt bearbeiten (Werte, Modes, Collections).
3. Current Tokens und Sync-Status prüfen.
4. Entwickler:in bitten, die Änderung in der laufenden UI zu bestätigen.
5. Iterieren, bis es stimmt — danach exportiert die Entwickler:in.

Wenn etwas hängt: Refresh in der Hinweiszeile. Force-Hard-Reconcile aus Figma plus Backfill fehlender WEB-Syntax im Hintergrund (in Batches, damit das Plugin responsiv bleibt). Bei großen Dateien kann Syntax an einer gerade geöffneten Variable kurz noch fehlen; der Live-Sync in den Browser wartet nicht auf dieses Figma-Write-back.

6. Variablenanzahl (Public Beta)

Mehr Tokens aus Pflegegründen: Dateien trennen (z. B. Foundations vs Product) und jeweils mit eigener TokenIgnite File-ID verbinden.

7. Plugin-Interface

8. Accounts und Handoff

Eine Designer:in braucht ein Konto, um sich im Plugin anzumelden und den Stream laufen zu lassen. Der Handoff an Entwickler:innen ist einfach: die TokenIgnite File-ID teilen. Diese ID verbindet die Figma-Datei mit der Entwickler-Runtime. Die Workspace-Mitgliedschaft ist separat und wird nicht allein über die File-ID gewährt.

9. Troubleshooting

Links

• Das ist TokenIgnite
• So funktioniert es
• Entwickler-Doku