Drop

About this plugin

Export your Figma design system as a standards‑ready token file in a single click. The plugin reads every Figma Variable and generates a JSON payload that follows the stable Design Tokens Community Group (DTCG) 2025.10 specification.

Why use it?

1. Zero‑guesswork: The output matches the official DTCG 2025.10 schema, so you can drop it straight into your build pipeline, style‑dictionary, or design‑token manager.
2. Native Figma Variables: Full two‑way integration with Figma’s variable system. All color, typography, etc tokens are captured with their mode values and aliases.
3. Single source of truth: Keep design and code in sync without manual mapping or copy‑pasting.

How it works

1. Open a file that uses Figma Variables.

2. Run Drop from the Plugins menu.

3. In the modal click "Download Tokens"

4. Download a zip archive with tokens.

Token Hierarchy (how the exported file is organised)

1. Top‑level: Variable Collections: Each Figma Variable Collection becomes a first‑level object (color, spacing, border, typography, …).

2. Second‑level: Modes: Inside each collection the plugin creates a sub‑object for every mode defined in that collection (light, dark, high‑contrast, mobile, desktop, ...).

3. Third‑level and deeper: Sub‑groups: If you have organized your variables with folder‑style names (e.g., brand/primary/base, brand/primary/hover), those segments are turned into nested objects. The hierarchy can be arbitrarily deep, faithfully mirroring your naming scheme.

The exported token tree is structure‑agnostic. Each object can be mapped to a folder, a file, or a property in a single JSON file.

Example output (JSON, simplified):

Supported token types

Dimension

Only in px. No special naming requirement – just give a clear, descriptive name such as spacing/small or border/radius.

Color (rgba)

In RGBA. Name can be anything meaningful, e.g., brand/primary/base or background/overlay.

FontFamily

The variable’s name must contain the word "font" (case‑insensitive).

Example: a Figma variable called fontPrimary becomes "font-primary": { "$value": "Inter, Helvetica, Arial, sans-serif" }.

FontWeight

The variable’s name must include a "weight" word such as fontWeightThin.

Value can be either number or string (700 or thin). String values translates to kebab case.

Requirements

1. Figma account with Variables enabled (Figma >= 2023.2).
2. Edit permission for file.

Resolver file – not generated (intentional)

The plugin deliberately does not create a token‑resolver file (e.g., a frontend.resolver.json that automatically feeds the JSON into Style Dictionary, Terrazo, or other pipelines). This design choice gives you full control over how the exported tokens are consumed:

1. Tool‑agnostic: every design‑system build process is different. By leaving the resolver out, the plugin avoids imposing a one‑size‑fits‑all solution.
2. Custom logic: you can implement the exact mapping, naming conventions, or transformations your project needs (e.g., converting rgba to hsla, merging tokens with design‑system overrides, generating TypeScript types, etc.).

What you need to do

1. Export the token JSON with the plugin.

2. Write your own resolver file that imports that token file and feeds it to the tool of choice.

3. Integrate the resolver into your CI/CD or local build process.

Because the resolver is completely user‑defined, you can keep it in the same repo as the design tokens, version it alongside your code, and adapt it as your workflow changes.

Links

- Specification: https://www.designtokens.org/tr/2025.10/

- Figma Variables Guide: https://help.figma.com/hc/en-us/articles/15339657135383-Guide-to-variables-in-Figma