Skip to content
Airframe

Figma plugin

Keep brand colours aligned between the live app and Figma. CSS in the project is the source of truth.

Export a Variables payload with the CLI, then create or update Figma Variables with the Airframe plugin.

Workflow: Update CSS → Export JSON via CLI → Import into plugin → Update Figma

Product overview: Airframe → Figma. Token pipeline and CLI flags: Theme package.

Workflow

Section titled “Workflow”
  1. Update brand tokens in CSS (:root, [data-theme], [data-brand]).
  2. Export JSON with the Airframe CLI.
  3. Open the Airframe plugin in Figma and load that JSON.
  4. Review the summary and drift score — nothing writes until you confirm.
  5. Update Figma.
npx af theme export

That writes .airframeui/figma.variables.json (and the DTCG pack under tokens/). Share the JSON with design — they do not need the repo. Add .airframeui/ to .gitignore.

RoleStep
DeveloperBrand in CSS → npx af theme export → send figma.variables.json
DesignerInstall Airframe → drop the JSON → review summary → Update Figma
EitherAfter Figma-only edits, load the same JSON again — the plugin flags drift

af figma export writes the Variables payload only. Prefer af theme export unless you do not want the DTCG pack.

Install the plugin

Section titled “Install the plugin”
  1. Install Airframe from the Figma Community.
  2. In a file, open Plugins → Airframe.
  3. Choose or drop figma.variables.json.

On load, the plugin validates the payload and compares it to Variables already in the file. Invalid JSON is flagged — it is not applied. Update Figma creates or updates collections, modes, and variables. Collections look like Airframe / default with modes light, dark, hc-light, and hc-dark. Extra brands ([data-brand]) become separate collections. BYO Tokens collections (for example Demo / default) are included when the JSON has them.

Four modes need Professional or higher. Starter syncs light only — the plugin warns on open.

Drift

Section titled “Drift”

When someone changes Variables only in Figma, the next load (or Check drift) compares the open file to the loaded JSON and flags mismatches — drifted, missing, or extra.

Two ways back to green:

  1. Code wins (default) — update CSS to match the intended brand, re-export, then Update Figma.
  2. Promote a Figma edit — copy the accepted value into CSS (or Theme Studio), re-export, then Update Figma so git and Figma agree again.

Do not treat Figma as the long-term source of truth.

Without the plugin

Section titled “Without the plugin”

No plugin required — drop four W3C DTCG files by hand (same format Tokens Studio and Style Dictionary understand):

  1. Get a pack from Theme Studio or npx af theme export.
  2. In Figma, drop the four files in tokens/default onto one collection.
  3. Each file becomes a mode. A second brand is a second collection with the same four filenames.

Use --no-figma when you only need the DTCG pack:

npx af theme export --no-figma
Section titled “Related”