Skip to content

Airframe → Figma

Design where you work. Keep your team in sync.

Define your tokens in CSS, then sync them to Figma.
Designers get the same brand, variables and styles, with no drift.

Use the plugin → Drop a token pack →

What you get

One palette. Four modes. Same tokens as the app.

Variables

Name
Light
Dark
HC Light
HC Dark
Color
primary
#0876dd
#1678d4
#0058b0
#7ec8ff
background
#ffffff
#0d1117
#ffffff
#000000
surface-secondary
#f8fafc
#1d2434
#f5f5f5
#2a2a2a
text
#0d1117
#f8fafc
#000000
#ffffff
Light, dark, and two high-contrast modes on one collection. Switch brand for another collection. Same names as the live app.

Preferred

Airframe plugin

One JSON file → native Variables. Install, drop, update.

  1. Run npx af theme export in the project (writes figma.variables.json).

  2. Send the JSON to the designer — they do not need the repo.

  3. Install Airframe from Figma Community. Drop the file in the plugin.

  4. Review drift (runs on load) → Update Figma.

Figma Desktop. Four modes need Professional+. Token pack fallback below. Docs: Figma plugin. Product-owned tokens (BYO Tokens) export as a second collection family — BYO Tokens.

Airframe → Figma

Variables sync

Check drift Update Figma

Alternate

Token pack

Four JSON files. One Figma collection. No plugin.

  1. Run npx af theme export or use Theme Studio.

  2. Drop the four files from tokens/default onto one collection.

  3. Each file is a mode — light, dark, hc-light, hc-dark.

Theming docs

Stay in sync. Export from code. Design with the same palette.

Use the plugin → Drop a token pack →