Figma integration

Three ways to send from Figma to DesignVault, ordered by how often you'll use them.

1. Import via URL (recommended)

The simplest: copy a Figma frame URL, paste it into the Import Asset modal. Works for any file accessible with your token (PAT or OAuth).

We support /file/, /design/ and /proto/ URL formats, with or without the node-id query param. If node-id is missing, we take the first frame of the first page.

2. Figma plugin

The official DesignVault plugin (available in the Figma Community) lets you batch-upload several frames without leaving Figma. Ideal for designers producing at volume.

Authentication uses an OAuth device-flow: an 8-character code is shown in the plugin, you enter it in DesignVault, and the plugin receives a dedicated API key. No need to copy-paste your Figma token.

3. Programmatic via API

For automations (Zapier, CI scripts, nightly exports), use the POST /api/v1/assets endpoint with a source_url pointing at the Figma frame. The server does the equivalent of a manual import but without a login.

Figma token — PAT vs OAuth

Personal Access Token (PAT)

Easiest to set up (one click in Figma → Settings → Personal access tokens)
Grants access to everything you can see as a user
Recommended for solos and small teams

OAuth

Cleaner: limited scope, revocable from Figma
Works at the workspace level (useful if the Figma org has a strict policy)
Coming soon — we currently support PAT only

Token security

The token is encrypted with AES-256-GCM before storage using a server key (ENCRYPTION_KEY, 32 bytes hex). Never logged, never returned to the client once entered. If you change tokens, the previous one is overwritten immediately.

Figma rate limits

The Figma API has a global per-account limit (~5,000 reads/min). Our own limits are tighter (30 imports/min/user via the Upstash expensive bucket) to avoid draining your Figma quota. If you get a 429, we retry with exponential backoff (1s, 2s, 4s).

Thumbnail refresh

When you open the detail view of a Figma asset, we compare Figma's last_modified with the one we stored at import. If Figma has a newer version, we re-fetch the PNG in the background and update the thumbnail. You always see the latest version with no manual action.