# Importing ASK tokens into Figma

Two ways. Use **A** for first-time setup, **B** for updates.

---

## A — First-time setup (recommended)

1. **Open a Figma file** (any file, fresh or existing).
2. Open **Tokens Studio for Figma** (right-click → Plugins → Tokens Studio, or run from the plugin menu).
3. On the first screen, click **"Start with one set of tokens"** or **"Skip onboarding"**.
4. In the plugin, top-right gear icon → **Tools** → **Load from file or folder** → **JSON file**.
5. Pick `design-tokens/figma/tokens-studio.json` from this download.
6. You should see a **`global`** token set appear in the left sidebar with categories: color, fontFamilies, fontSize, typography, radius, spacing, etc.
7. In the bottom-left of the plugin, click **"Create styles"** and/or **"Create variables"**. Tokens Studio will write them into your Figma file:
   - **Variables** for color, fontFamilies, fontSize, lineHeights, letterSpacing, radius, spacing
   - **Text styles** for the seven `typography/*` composite tokens (display-xl, heading-1, body, etc.)
8. Done — close the plugin and your Figma library is wired up.

## B — Paste-into-editor (for updates)

1. Open Tokens Studio → top-right gear icon → **Tools** → **Show JSON editor**.
2. **Select all** in the editor pane and **paste** the contents of `tokens-studio.json`.
3. Click **Save JSON** (top-right of the editor).
4. Bottom-left → **Update styles** / **Update variables** to push changes to the Figma file.

> The "Unable to load schema from 'https://schemas.tokens.studio/...'" warning in the editor is **harmless** — it's just the Monaco editor trying to fetch an autocomplete schema. It does not block the import.

---

## Troubleshooting

**"Nothing happens" when I import**

- Your file might have a `$schema` or `$comment` field at the top — Tokens Studio sees those and silently bails. The version in this folder (as of v1.1) has them stripped. If you regenerated it yourself, delete them.
- Make sure you're loading **`figma/tokens-studio.json`**, not `tokens.json`. The DTCG-format `tokens.json` is for downstream tooling (Style Dictionary etc.) and uses `$value`/`$type` keys — Tokens Studio expects `value`/`type` without the `$` prefix.
- Check the plugin version: Tokens Studio v2.0+ has slightly different UI labels. The flow above is for v2.x.

**Colors imported but variables not created**

You need to explicitly click **Create variables** (or **Create styles** in older Tokens Studio versions). The plugin loads tokens into its own store first; it doesn't push to Figma until you tell it to.

**Typography tokens don't apply**

`Archivo` and `Archivo Black` must be available in Figma. Either:
- Install them on the system if you're using the Figma desktop app, or
- Enable them via Figma's font picker (they're in Google Fonts, served by Figma).

**Want a different prefix?**

Tokens Studio → gear icon → **Settings** → set a **prefix** like `ask-` so variables become `ask-color-brand-red` instead of `color-brand-red`. Then re-create variables.

---

## What about pushing back to git?

Tokens Studio supports a [GitHub sync mode](https://docs.tokens.studio/sync/github) — designers commit changes from Figma back to `tokens-studio.json` via PR. That's the round-trip workflow once you have the file in a real repo. Until then, keep `tokens-studio.json` as the source and treat Figma as a downstream consumer.