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, then 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 → 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 compares the JSON to Variables already in the file. 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. BYOT collections (for example Acme / 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.

The fix is the same loop: update CSS (or accept the Figma change by writing it back into CSS), re-export, then Update Figma. Do not treat Figma as the long-term source of truth.

Without the plugin

Section titled “Without the plugin”

No plugin required — drop four DTCG files by hand:

  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”