Is Palette Importer free?

Yes. The plugin is completely free on the Figma Community. I built it to solve my own workflow problem and published it because every designer working with Tailwind or CSS codebases faces the same friction.

What color formats does it support?

CSS custom properties, hex codes, RGB values, HSL values, Tailwind config objects, and unstructured JSON fragments. The parser uses regex to extract valid color data from whatever you paste, regardless of formatting.

Does it work with Figma's local variables system?

Yes. It generates proper Figma local variables, not just color styles. This means your imported colors integrate with Figma's variable modes, design tokens, and the broader variable ecosystem for prototyping and handoff.

Can I import colors from an existing codebase?

That's exactly what it's designed for. Copy your CSS variables, Tailwind config, or any code containing color values. Paste it into the plugin's text area. The parser handles the rest, no reformatting required.

How is this different from other color import plugins?

Most plugins require strict JSON formatting or only work with Tailwind's default palette. Palette Importer accepts raw, unstructured text. Paste messy code straight from Slack, a pull request, or a config file. The regex engine extracts valid colors from the noise.

Was this plugin really built with AI?

Yes. I used Anthropic's Claude Code to develop it. As a Filipino web designer and developer with 15 years of experience, I understood exactly what the tool needed to do. Claude Code translated that domain expertise into working Figma Plugin API code. This is what AI-assisted development looks like when a practitioner drives the vision.

Palette Importer: How I Built a Figma Plugin with Claude Code

Free Figma Plugin Built with Claude Code Raw Code Parsing

Trusted Web Design Service Worldwide

Every designer who's tried importing colors from a codebase into Figma knows this pain. You've got a Tailwind config, a block of CSS variables, or a messy JSON snippet from a developer. You just want those colors in Figma as local variables. Instead, you're saving code to a file, cleaning up the formatting, making sure the JSON structure matches the plugin's proprietary schema, uploading it, watching it fail because of one wrong bracket, fixing it, re-uploading. All to import a handful of colors. And if you skip the plugins entirely? You're creating each Figma variable by hand, copying hex codes one at a time, naming them manually. A 20-color palette becomes 15 minutes of mind-numbing data entry.

As a web designer and developer who operates across both disciplines daily, this friction was costing me real time on every project. So I built a tool to fix it. Using Anthropic's Claude Code, I developed the Palette Importer Figma plugin in a single weekend.

Palette Importer in action: pasting raw color code and generating Figma local variables

The Color Workflow Problem Nobody Talks About

Figma has over 13 million monthly active users. Tailwind CSS surpassed 20 million weekly npm downloads. These are the two dominant tools in modern product design and front-end development respectively. And their color systems don't talk to each other.

The Dev Mode Tax

When Figma monetized Dev Mode, they moved CSS code inspection behind a paywall. Developers lost the straightforward Inspect tab they relied on. The workarounds involve convoluted right-click menus that export deeply nested, unoptimized CSS. This created an immediate rift between designers sharing colors and developers consuming them. It's a problem I see constantly as a web developer in the Philippines collaborating with international design teams.

The JSON Trap

Most existing Figma color import plugins require perfectly structured JSON files. In theory, clean. In practice, a developer never sends you a pristine JSON array. They paste a raw `tailwind.config.js` snippet into Slack. They share a block of CSS custom properties from a pull request. They copy hex codes from a brand guidelines PDF.

Forcing that messy, real-world data into a rigid schema before a plugin can process it defeats the purpose. The plugin should adapt to humans, not the other way around.

When Developers Forget CSS

Tailwind's dominance created an unexpected side effect documented across developer communities. Engineers are literally forgetting standard CSS. They default to `hover:bg-blue-600` instead of writing `:hover { background-color: }` because utility classes have rewired their muscle memory. When these developers receive a Figma file with arbitrary hex codes, the mental translation penalty slows everything down.

Why Existing Plugins Weren't Enough

I tested every color import plugin in the Figma Community marketplace before building my own. The landscape breaks down into three categories, and all of them fail the same test.

Preset-only plugins like Tailwind Color Palettes inject Tailwind's default color scales. Useful if you're using vanilla Tailwind. Useless if you have a custom brand palette, which is every real project.

JSON-dependent importers require strict, proprietary formatting. One misplaced bracket and the import aborts entirely. These tools were designed for design system architects managing enterprise token libraries, not for the 90% of us who just need to get colors from code into Figma quickly.

Code generation plugins like Codify solve the Figma-to-code direction. But they completely ignore the code-to-Figma requirement. When you're building bespoke websites and need to sync an existing codebase palette back into your design files, these tools offer nothing.

The market was saturated with schema-dependent tools and starved of parsing-resilient tools.

How I Built It with Claude Code

Here's where this story diverges from the typical "I built a thing" narrative. I didn't spend months learning the Figma Plugin API from scratch. I used Anthropic's Claude Code, an AI coding agent that runs directly in the terminal.

Why Claude Code Over Cursor

Both are AI coding tools, but their architectures produce fundamentally different outcomes for someone like me: a designer who codes, not a full-time software engineer.

Claude Code operates as an autonomous CLI agent. I described what I wanted in plain language: "Build a Figma plugin that accepts raw, unstructured text input containing color codes in any format, parses them with regex, shows a live preview grid, and generates Figma local variables on click." Claude Code ingested the entire Figma Plugin API documentation within its 200,000-token context window and generated the working codebase.

Independent benchmarks show Claude Code completing complex tasks using roughly 33,000 tokens with near-zero errors, compared to alternative tools requiring up to 188,000 tokens with multiple error states requiring manual debugging. For a domain expert who needs working software, not a coding tutorial, that efficiency gap is everything.

The "Scratch Your Own Itch" Philosophy

This approach to building tools isn't new for me. I built Content Dimension CMS because WordPress was too bloated and insecure for my clients' needs. I built UnitShift, a Firefox DevTools extension for bulk CSS unit conversions, because manually converting px to rem across large codebases was tedious. The pattern is consistent: encounter a real friction point in your daily work, build a precise tool to eliminate it, move faster than everyone still enduring the friction. AI coding agents like Claude Code just removed the last barrier. Now the people who feel the pain most acutely, practitioners, are the ones building the solutions. Not product managers guessing at feature priorities from three meetings removed. If you're looking to hire a web developer from the Philippines who builds custom tools instead of relying on off-the-shelf plugins, this is the difference. This is also why I reject bloated platforms like WordPress. The same precision engineering I apply to client sites in SvelteKit, I apply to every tool I build.

What Palette Importer Actually Does

The plugin does one thing well: it turns messy color data into clean Figma local variables, instantly.

Paste anything. CSS custom properties (`--color-primary: #1a202c;`), Tailwind config objects, raw hex lists, disorganized JSON fragments. The parser strips out the noise and extracts every valid color code.

Live preview grid. Before committing anything to your Figma file, you see every extracted color rendered in a visual grid. No guessing. No undo-ing corrupted variable sets.

One-click variable generation. Hit the button. Your colors exist as Figma local variables, ready to bind to components, prototype with, and hand off to developers in a format they actually recognize.

No file uploads. No JSON formatting. No schema validation errors. Just paste raw code and get your colors.

Install Palette Importer from the Figma Community

What This Means for How I Build Client Sites

The engineering precision behind this plugin is the same precision applied to every client project. When I build premium interactive websites, the design-to-code pipeline has zero friction because I built the tools that eliminate it.

My workflow: design in Figma, use AI to translate designs into pixel-perfect code via Figma MCP servers that provide exact node context and design data, then iterate fluidly between design and development at a speed that traditional handoffs can't match. The Palette Importer is one piece of that system.

This matters for clients because it means faster delivery without sacrificing quality. No design-developer miscommunication. No colors getting lost in translation. No "that's not quite the right shade" back-and-forth that burns billable hours. Companies that outsource web development to the Philippines get this level of tooling built into the workflow. For businesses evaluating agencies versus solo professionals, this is what working with someone who operates across both disciplines looks like. I don't hand off designs to a developer and hope for the best. I am both sides of the equation, and I build the tools that connect them. Explore the full range of web design packages or start a project conversation.

Let's work together

Transform your website into a revenue-generating asset

Partner with an award-winning web designer and web developer from the Philippines, delivering world-class websites to global brands. 15+ years of experience creating sites that convert visitors into customers.

Book Free Consultation View Portfolio

Frequently Asked Questions

Yes. The plugin is completely free on the Figma Community. I built it to solve my own workflow problem and published it because every designer working with Tailwind or CSS codebases faces the same friction.
CSS custom properties, hex codes, RGB values, HSL values, Tailwind config objects, and unstructured JSON fragments. The parser uses regex to extract valid color data from whatever you paste, regardless of formatting.
Yes. It generates proper Figma local variables, not just color styles. This means your imported colors integrate with Figma's variable modes, design tokens, and the broader variable ecosystem for prototyping and handoff.
That's exactly what it's designed for. Copy your CSS variables, Tailwind config, or any code containing color values. Paste it into the plugin's text area. The parser handles the rest, no reformatting required.
Most plugins require strict JSON formatting or only work with Tailwind's default palette. Palette Importer accepts raw, unstructured text. Paste messy code straight from Slack, a pull request, or a config file. The regex engine extracts valid colors from the noise.
Yes. I used Anthropic's Claude Code to develop it. As a Filipino web designer and developer with 15 years of experience, I understood exactly what the tool needed to do. Claude Code translated that domain expertise into working Figma Plugin API code. This is what AI-assisted development looks like when a practitioner drives the vision.