Figma → Meridian workflow

1. Export tokens from Figma

Open your design file, select the Variables panel, and export as JSON. Meridian accepts the standard Figma Tokens format — no plugins required. Drop the file into your project root as tokens.json.

2. Run the sync command

A single CLI command ingests your token file and generates Tailwind config extensions, CSS custom properties, and typed constants. Every color, spacing value, and typography scale lands exactly where your components expect it.

npx meridian sync --source tokens.json

3. Use tokens in components

Generated utility classes map directly to your Figma variable names. No translation layer, no manual mapping. Change a color in Figma, re-sync, and every component updates automatically.

<div className="bg-brand-violet text-brand-pink">
  Synced from Figma
</div>

4. CI integration

Add the sync step to your build pipeline. Meridian exits non-zero when tokens drift from the design source, blocking PRs that would ship stale styles. Design stays the source of truth.