Figma integration

Connect your Figma library to preset AI. Sync token values from Figma. Review drift before anything changes.

Designers move fast in Figma. Engineers ship in code. The gap between them is where design systems decay. A hex value updated in Figma never reflects in the codebase. A spacing scale tightened in code drifts from the design source. preset AI's Figma integration closes that gap without forcing either side to abandon their tools.

What this connects

Two surfaces, one design system.

Figma holds the visual structure: the actual color values, the spacing scale, the radius scale.
preset AI holds the design system contract: the canonical names, the allowed variants, the rules your team enforces in code.

The integration moves token values from Figma into preset AI on demand. It does not move them back to Figma. It does not change anything in your design system without your explicit confirmation.

Connect a Figma file

In the dashboard, open Connect, then Figma. Paste:

The URL of your Figma library file.
A Figma personal access token with file_variables:read scope.

Choose which token types to pull from this file: colors, spacing, radius. Typography sync is not yet available.

preset AI does not store your PAT on the server. The connect modal asks for it to verify the file is reachable; the sync modal asks for it again at every sync and discards it once the sync completes. Tokens are redacted in all logs.

What syncs

preset AI reads from the Figma Variables API:

Token type	What gets pulled	Modes
Color	`COLOR` variables, RGBA converted to hex	Light and dark modes are detected and mapped
Spacing	`FLOAT` variables whose names suggest spacing	Single-mode
Radius	`FLOAT` variables whose names suggest radius or corner	Single-mode

Variables that do not match any of those classifications appear in the drift report as "unmapped." You can map them by hand or ignore them.

Components, published styles, and typography are not pulled by this integration. Component-level workflows flow through the MCP path described in Figma MCP integration.

The sync workflow

The first sync is one action. Subsequent syncs add a drift-review step in between.

First sync. Click Sync Now on the connection card. Paste your PAT in the modal that appears, confirm the token types selected, and run. preset AI imports the matching variables and records the result to sync history.

Subsequent syncs. Once you have sync history, a drift panel renders below the connection card with the latest comparison. It exposes three actions.

Check for drift. preset AI re-fetches the current Figma state and compares it against your design system. The result is a fresh drift report: added tokens, removed tokens, value changes. Nothing has been applied yet.
Preview changes. Pick which differences to apply. The preview shows what your design system will look like after the apply, with exact values. You can scope by token type, by individual token, or by strategy (apply all additions, apply value changes only).
Apply. Confirm. preset AI writes the selected changes to your design system. Every apply is recorded in the sync history with its before and after snapshot.

Sync history persists. If a colorist edits a token in Figma overnight and the next morning's drift report surprises you, you can scroll back through previous syncs and see exactly when the value changed.

Authority and drift

The model is asymmetric on purpose.

Concern	Authority
What hex value a color resolves to	Figma
What spacing or radius values exist	Figma
The canonical name for a token	preset AI
Whether a token is allowed in a given context	preset AI
Whether to apply a Figma change to the design system	You

When Figma proposes something preset AI has not seen, a renamed token, a deleted variable, or a new color, the drift report flags it and waits. preset AI does not silently rename, soft-delete, or import. A rename in Figma reads as a delete plus an add in the drift report. If you want to treat it as a rename, you map the two manually.

This is the deliberate trade. Bi-directional auto-sync is faster and wrong more often than not. Drift-with-confirmation is slower and stays correct.

Requirements

Figma plan. Token sync uses the Variables API, which Figma scopes to its higher-tier plans. If your account does not include Variables API access, the drift check returns a clear error and the integration degrades to "not available on this plan."
Personal access token scopes. file_variables:read is the minimum. Writing back to Figma needs file_variables:write plus edit access on the file.
preset AI plan. Any plan supports the integration. There is no separate gating on the preset AI side.

Troubleshooting

Symptom	Likely cause	Fix
`Token invalid or expired`	The PAT was revoked, regenerated, or its scopes changed	Generate a new PAT and re-enter on the `/figma` connection card
`Variables API not available`	The file's Figma plan does not include Variables API access	Upgrade the Figma workspace, or sync values through a different source
`File not found`	The file was moved, deleted, or the PAT no longer has access	Re-connect with a current file URL, or confirm sharing permissions in Figma
`Rate limited, retrying`	Figma's per-tier rate limit was hit	Wait. The sync queue retries automatically with backoff
Drift report includes unfamiliar tokens	The Figma file has variables outside the colors, spacing, and radius scope	Ignore them in the preview, or rename in Figma to match your conventions

For agent workflows that read live Figma context inside Claude Code or Cursor, see Figma MCP integration.

For the broader import path (one-off token imports from JSON, Style Dictionary, or scanned codebases), see Importing design systems.