Skip to content

Figma Plugin Guide.

Install the DesignVerse Figma plugin, authenticate with your workspace, and push token changes from inside Figma without ever touching the CLI.

Figma Plugin Guide

The DesignVerse Figma plugin connects your Figma file directly to your DesignVerse workspace. When you update a color, spacing, or typography token in Figma, the plugin pushes the change to DesignVerse, which can trigger a generation job automatically.

Installing the plugin

Open Figma and navigate to Plugins in the top menu, then select Browse plugins in Community. Search for DesignVerse and click Install. The plugin is free to install; using it requires a DesignVerse account.

After installation the plugin appears under Plugins in the main Figma menu and in the right-click context menu when you have frames selected.

Authenticating with DesignVerse

Open the plugin via Plugins then DesignVerse. On first launch the plugin shows a Connect account screen. Click the button to open a browser window where you log in to DesignVerse. After approving the connection, the plugin stores your session token and returns to the main screen.

Tokens are stored in Figma's secure plugin storage and are only accessible to the DesignVerse plugin.

Connecting a workspace

Once authenticated, the plugin lists your DesignVerse workspaces. Select the workspace that matches this Figma file. If you have no workspace yet, create one at app.deisgnverse.com first, then return here.

The plugin then prompts you to link a design system within that workspace to this Figma file. One Figma file maps to one design system.

Selecting frames to export

Select one or more top-level frames in your Figma canvas that contain your component definitions. Components must use Figma local variables for tokens (not hardcoded hex values) for DesignVerse to resolve token references correctly.

The plugin scans selected frames and shows a preview of detected:

  • Color tokens (local variables from color collections)
  • Typography tokens (local variables from text styles)
  • Spacing and sizing tokens (local variables from number collections)
  • Component variants (Figma component properties with named values)

Configuring token mapping

The plugin infers a default token mapping, but you can adjust it before pushing. The mapping screen lets you:

  • Rename tokens to match your existing CSS custom property naming
  • Exclude tokens you do not want in the generated output
  • Set the target framework for each component (React, Vue, or HTML)

Saved mappings persist for this Figma file, so future pushes use the same configuration without re-mapping.

Pushing to DesignVerse

Click Push to DesignVerse on the summary screen. The plugin packages token values and component definitions, sends them to your workspace, and displays the job ID. You can follow generation progress in the DesignVerse web app or poll the job via the API.

Plugin push response 
{
  "job_id": "job_9f3a2c",
  "system_id": "sys_4e8b1d",
  "status": "queued",
  "components_queued": 14,
  "tokens_updated": 38
}

Automatic generation on push

In your workspace settings you can enable Auto-generate on push. When turned on, every Figma plugin push immediately triggers a generation job without a separate API call. Results are available in your workspace and can be downloaded or forwarded to a webhook endpoint.

Troubleshooting

Plugin shows "No local variables found"

This means the selected frames use hardcoded values instead of Figma local variables. Switch your color and spacing properties to local variables in the Figma Variables panel, then try again.

Push fails with 401

Your session token expired. Open the plugin and click Reconnect account to refresh it.

Variant count looks wrong

Only Figma component properties (defined in the Properties panel, not manual frame naming) are recognised as variants. Rename your component properties to match the expected variant names in your design spec.

Need more help? See the Quickstart for the full CLI flow, or reach us at [email protected].