How it works

This documentation is still being finalized and may change as the product evolves.

TokenIgnite is a live validation layer between Figma Variables and your running frontend. Its purpose is simple: keep design tokens flowing into the real UI while you decide whether the result is good enough to export.

The loop

Designer opens the TokenIgnite Figma plugin, signs in, and keeps it streaming.
Plugin publishes variable updates onto TokenIgnite’s live sync stream.
Developer connects the SDK in a local or closed-staging environment.
The runtime injects native CSS custom properties into a <style> tag (context-scoped via data-ti-context).
You see the change in the real UI — including while AI agents edit layout — then export CSS only after you approve it.

Live token delivery is stream-direct: the plugin writes updates; the SDK applies them in the browser. Bootstrap and auth use the server; the live token path does not go through HTTP request/response for each tweak.

TokenIgnite does not rewrite your JSX/TSX. Components should already use CSS variables (for example color: var(--color-brand-accent)). Predefined Figma WEB code syntax has absolute priority when naming those variables.

Two ways developers connect

Path	When	Bootstrap
A — Local	Day-to-day development	`initTokenIgnite()` + active `tokenignite run <name>`
B — Closed staging	Access-controlled, production-built staging	`runTokenIgnite(target, config)` — no terminal run required

Path A stays behind a development-only guard so public production builds stay clean. Path B must not use that guard — closed staging is production-like (NODE_ENV is usually "production"); keep it off public production via deploy and access control.

Details and code: Developer Docs.

Who does what

Role	Responsibility
Designer	Install plugin → sign in → keep streaming → copy the TokenIgnite file id → send it to developers
Developer	`npm i -D tokenignite` → `npx tokenignite init` → set file id → bootstrap Path A or B → validate in the browser → export when ready

Developers do not need a TokenIgnite account to consume a live stream. They need the file id and an active plugin stream.

Glossary

Term	Meaning
TokenIgnite file id	Id shown in the plugin (often `tokenignite-…`). Not a Figma file key. Goes in `files[].id`.
Continuous Injection	Streaming Figma variable changes into an already running browser without rebuilding for each tweak.
Run mode	An active live session for a configured stream (`tokenignite run <name>` and/or `runTokenIgnite`).
Context	A `collectionName:modeName` value on `data-ti-context` (normalized, e.g. `color-modes:dark-mode`). Multiple values allowed, space-separated.
Mode	The mode half of a context (`collectionName:modeName`).
Validated export	Writing native CSS custom properties to disk after runtime approval — not on every live tweak.
Zero footprint	Path A: development dependency + development-only init. Path B: keep TokenIgnite off public production via deploy/access control — not via a `NODE_ENV===development` gate.

Public Beta limits