Introduction

Nowadays it's easy to generate a set of design tokens with Claude or ChatGPT, and it's incredibly helpful when you're starting a design from scratch. In a minute or two you can have a full color palette, a type scale, and sensible naming, all in one tidy JSON file.

The catch is what happens next. Framer can't read that file. It wants Color Styles and Text Styles in the Assets panel, so you end up with the JSON open in one window and Framer in the other, re-creating every color and every text style by hand.

Drop closes that gap. Drag a tokens file onto the plugin, confirm what it found, and the styles appear in your project, grouped and named exactly as they were in the file.

The name carries the idea twice: you drop a file in, and each token becomes a drop of color in your project.

Features

Drag, drop, done

The whole interface is a single drop zone. Drag a .json file onto it, or click to browse. Drop shows you what it found ("12 color styles and 4 text styles"), then one click creates them all in your Assets panel.

Works with the files you actually have

AI tools and token pipelines don't agree on one shape, so Drop doesn't ask you to pick a format. It recognizes three automatically:

• Drop's own simple format, with support for dark-mode color variants

• W3C Design Tokens, the closest thing the token world has to a standard, used by tools like Tokens Studio and Style Dictionary

• A plain list of names and colors, for when all you have is a palette

Flexible color input

Colors can be written however the file's author preferred: hex (including shorthand and transparency), rgb(), hsl(), or common color names like coral. Drop converts them all for Framer, and tells you exactly which value is wrong if one can't be read.

References between tokens

If a token points to another (a "body text" color that references your brand blue, for example), Drop follows the reference, including chains of them, so the final style gets the real value.

Organized from the start

A / in a token name becomes a folder in the Assets panel. Brand/Primary and Brand/Secondary land together under Brand, with nothing extra to configure.

Honest results

Drop never fails quietly. After an import you see how many styles were created, which ones failed and why, and which tokens were skipped because Framer has no matching style type for them (spacing or shadows, for example). One bad entry never stops the rest.

Focused on what Framer supports

Drop creates Color Styles and Text Styles, the two style types Framer lets plugins create as reusable assets. It does those well rather than imitating the rest.

A calm, responsive interface

A loading state while styles are created, clear result summaries, and a layout that follows Framer's light and dark themes.

Branding

Identity

Drop's identity is built around a confident cobalt blue and a single sharp accent.

The wordmark is a heavy, rounded geometric lettering set in white on Vivid Blue, with the counters of the "o" and "p" doing quiet work as the "drops."

Interface

The UI is built for the cramped, utilitarian setting of a plugin window:

• The drop zone is the whole interface. A dashed, soft-tinted area that turns solid blue while a file is dragged over it, so the gesture is acknowledged before the file lands.

• Lime is reserved for success. The result banner is the one place the accent color appears, so it reads as a reward rather than decoration.

• It follows Framer's theme. The plugin switches between light and dark along with Framer itself instead of forcing its own look.

Why I built it

AI solved the blank-page problem for design systems. Getting a complete set of tokens used to take hours of deliberate work, and now it takes a prompt. But it created a smaller problem right behind it: the output is a text file, and the design lives in Framer.

The step in between, copying each value across by hand, is exactly the kind of work a tool should do. It's repetitive, it's easy to get wrong, and it has to be repeated every time the system changes. A mistyped hex code or a missed text style is the sort of small drift that quietly makes a design system unreliable.

I wanted that step to take seconds, and I wanted it to work with whatever tokens someone already has, whether they came from an AI assistant, a token tool, or a palette pulled out of a brand guide. That is why Drop accepts several formats, explains every result, and sticks to the styles Framer can genuinely create.

The goal is simple: go from "I have my tokens" to "my design system is live in Framer" with one gesture.

Drop is an independent project and is not affiliated with Framer.