DRP Palette Importer: Paste Colors Into Figma. Skip the File Upload.

Most color import plugins pick one format and force you into it. JSON-only importers reject your CSS variables. CSS-only tools can't read a Tailwind config object. You end up reformatting the same color data into whatever schema the plugin demands, which is the exact manual work the plugin was supposed to eliminate.

Here's what makes bad imports expensive: most plugins import blindly. You don't see what you're getting until the variables already exist in your file. If the parser misread a value or the naming is wrong, you're manually deleting variables one by one. There's no undo for bulk variable creation in Figma.

This one hits hardest when you already have a working Tailwind config or design tokens in code. Maybe you generated them with a tool like Runable, or your developer already built a custom palette. Those colors work perfectly in the codebase. But the moment you need to move those tokens into Figma to build out a proper design system, the handoff stalls. You're back to manually creating each variable, copying hex codes one at a time, hoping nothing gets transposed. And when the config changes? You get to do it all over again. Keeping Tailwind configs and Figma variables in sync manually is a nightmare that scales with every color you add.

You paste HEX values, but your CSS also uses HSL for theming and OKLCH for perceptual uniformity. Once those values become Figma variables, the alternative representations disappear. You lose context that was useful in your codebase.

Open the plugin and paste your color code directly into the text input. No file uploads. No saving to disk first. Just paste.

The plugin auto-detects whether you've pasted CSS custom properties or a JavaScript/JSON color object and routes to the right parser.

Supported JavaScript/JSON formats:

• Tailwind config color objects: `'primary': { '50': '#f0f9ff', '100': '#e0f2fe' }`
• Named objects: `supernova: { 50: '#fffee7', 100: '#fffec1' }`
• Standalone objects: `{ "500": "#3b82f6" }`
• Nested objects: `{ "brand": { "500": "#3b82f6" } }`
• With or without quotes on keys and values

Supported CSS formats:

• CSS custom properties: `--color-primary-500: #3b82f6;`
• With `:root` wrapper or standalone declarations
• Auto-groups variables by name prefix

Supported color values within those formats:

• HEX (3-digit, 6-digit, 8-digit): `#3b82f6`, `#fff`
• RGB/RGBA: `rgb(59, 130, 246)`
• HSL/HSLA: `hsl(217, 91%, 60%)`
• OKLCH (CSS parser): `oklch(62% 0.21 255)`

One thing to note: the plugin parses structured color declarations, not scattered hex codes in random text. Your input needs to be in recognizable JS object syntax or CSS variable syntax.

After parsing, the plugin shows a scrollable list of every extracted color. Each row displays the variable name and a color swatch. You can toggle the display between HEX, HSL, and OKLCH to verify values in whatever format you prefer.

This is the step most other plugins skip entirely. You see exactly what will be created before anything touches your Figma file. No surprises. No bulk-deleting variables because the parser misread your input.

Before importing, you set a few options: - Collection name: Auto-populated from your palette name, or type your own

• Overwrite toggle: If variables with the same names already exist, choose to update them or skip
• Include descriptions: Each variable can store a description with all three color formats: `HEX: #3B82F6 | HSL: hsl(217, 91%, 60%) | OKLCH: oklch(62% 0.21 255)`

Hit import. The plugin creates organized Figma local color variables using slash naming (e.g., `primary/500`, `norway/50`), which Figma automatically groups into clean visual hierarchies. The conflict checker warns you about name collisions before anything is written.