Figma brand kit vs design tokens

Figma brand kit vs design tokens is the modern version of "who owns the source of truth?" Designers default to Figma. Engineers default to code. Indie teams need one answer.

What each stores

| | Figma brand kit / library | Repo design tokens | | --- | --- | --- | | Strength | Visual exploration, layout | Runtime truth for the product | | Consumers | Designers, some PMs | App, CI, agents, docs | | Drift risk | High if code not synced | Low if Figma is export-only | | Agent access | Weak unless exported | Strong (Markdown/CSS/JSON) |

Tradeoffs

Figma-first works when a designer owns every screen and developers only implement. That is rare for solo founders using Cursor, v0, or Lovable. Repo-first works when the product is the brand surface that matters most.

Hybrid that works: explore in Figma, publish tokens to the repo, treat Figma as a consumer of those tokens — not the other way around.

Evaluation for Majico's ICP

• Shipping weekly without a full-time designer → repo tokens win
• Agency designing a marketing site only → Figma kit may be enough short-term
• AI agents editing UI → they need guidelines in-repo

Migration path

1. Extract hex and type from Figma into CSS variables or design.md
2. Replace hardcoded values in the app
3. Keep logo SVG in public/
4. Optionally re-import tokens into Figma variables for designers
5. Document the rule: repo wins conflicts

See put brand in the repo and export and use in code. Generate the first token set with create your first brand.

Day-to-day workflow that avoids fights

Designer explores three accent options in Figma. Team picks one in a 15-minute call. Engineer commits tokens the same day. Designer updates Figma variables from that commit when they next open the file. Product PRs that hardcode hex get rejected in review.

If you have no designer, skip the loop: set tokens in the repo, optionally mirror them into Figma later. The Figma brand kit vs design tokens debate is settled by who ships the UI — for Cursor-heavy teams, that is code.

Add a one-line POLICY in design.md: "Repo tokens win. Figma is a mirror." That sentence ends most arguments.

When freelancers insist on working only in Figma, export a clean variable set for them, then re-import their finals into tokens before merge. Never merge a marketing page that introduces a fifth gray. The brand kit file in Figma is a convenience; the CSS variables are the contract.

Screenshot regressions help: store a reference homepage PNG next to tokens. After palette PRs, compare. Humans notice drift faster on screenshots than in hex diffs.

Tooling tip: even a flat tokens.css beats a perfect Figma library that never reaches production. Start ugly, sync later.

Sources

1. Design system vs brand guidelines (Proof of Work Studio) — systems as code dependencies.
2. Design System vs Style Guide vs Brand Guidelines (Digital Polo) — design systems are imported into code.