I Built a Figma Plugin That Doesn't Need an API Key

There are a lot of AI tools for Figma now. Most of them have the same onboarding flow: sign up, enter your credit card, generate an API key, paste it somewhere, and then — maybe — get to the actual design work. Before you have seen a single output, you have already paid something: time, friction, money, or all three.

I kept running into this and it bothered me for a specific reason. The AI capabilities these tools are selling access to — GPT-4, Gemini, Claude — are tools I already have open in a browser tab. Every day. For free. Or at a subscription I already pay.

There is a gap between "AI I have access to" and "AI that works inside Figma," and every existing tool was charging money to close it. I wanted to close it without charging anything.

The observation that unlocked the plugin was simple: designers do not need AI in Figma — they need AI output in Figma. The generation can happen anywhere. What matters is what ends up on the canvas.

Browser AI tools — ChatGPT, Gemini, Claude — are excellent at generating structured data when you give them a well-formed prompt. If that structured data describes a Figma layout in a format the plugin can parse, the plugin can build the actual frames. The AI does not need to be inside Figma. It just needs a way to hand its output to the plugin.

That is the entire idea behind DesignGen. The plugin writes the prompt for you, you copy it, paste it into whatever browser AI you already use, copy the JSON response, paste it back — and the plugin builds your Figma frames. No API key. No account. No per-token billing. Just a copy-paste bridge between tools you already have.

You describe what you want to design — a card component, a settings screen, a modal — in natural language. The plugin converts your description into a structured prompt that asks the AI to return a specific JSON schema: frames, text layers, rectangles, auto-layouts, fills, typography, spacing. Everything Figma needs to build the component programmatically.

You hit Copy, switch to your browser AI, paste the prompt, hit send. The AI returns a JSON object. You copy that, switch back to Figma, paste it into the plugin's input field, hit Generate. The plugin parses the JSON and calls the Figma API to build real, editable components — not images, not locked groups. Actual text layers you can double-click, colours you can change, auto-layouts you can extend.

The output is rough — it is a starting point, not a finished design. That is intentional. The plugin is not trying to replace design thinking; it is trying to eliminate the blank canvas problem. Getting something on the canvas that you can react to is faster than designing from nothing.

I tested it across three AI tools: ChatGPT, Gemini, and Claude. Each handles the JSON schema slightly differently, so I built normalisation logic into the parser to handle variations. The prompt explicitly asks for JSON with no markdown fencing, and includes fallback instructions for common failure modes.

Building a Figma plugin as a designer was a different kind of education. I wrote it in TypeScript using the Figma Plugin API, which means I was reading documentation for a tool I use every day but had never touched programmatically. The gap between "I know how Figma works as a designer" and "I know how Figma works as code" was larger than I expected — and more interesting.

The most important lesson was about parsing tolerance. AI models do not always return exactly what you ask for. Sometimes the JSON has extra keys. Sometimes a colour comes back as a hex string, sometimes as an RGBA object. Sometimes the model wraps the JSON in a markdown code block even when told not to. The plugin had to be defensive enough to handle all of these without breaking — and clear enough in its error messages that I could fix prompts when they failed.

I also learned that the copy-paste step, which seemed like a limitation when I started, is actually an advantage for many users. It keeps the AI interaction visible and controllable. You can see exactly what the plugin is asking the AI, you can modify the prompt before sending it, and you can inspect the JSON before pasting it back. That transparency is harder to preserve with a fully automated API integration.

The hardest design problem was the plugin's own UI. A Figma plugin lives in a small, constrained panel — typically 300px wide and as tall as you make it. Getting the prompt display, the output field, and the action buttons to coexist in that space without feeling cramped took more iteration than the actual generation logic.

The copy-paste step is the only friction left. Everything else is seamless — the prompt is generated automatically, the parser handles the JSON, the canvas update is instant. But requiring the user to manually switch tabs, paste, wait, copy, and switch back breaks the flow.

The next version adds a Chrome extension that communicates directly with the Figma plugin. When you hit Generate, the extension detects which browser AI tab you have open, injects the prompt, captures the response when it arrives, and sends it back to the plugin — all without you touching the clipboard. The copy-paste bridge becomes invisible.

This approach is more complex technically — it requires message passing between the Figma plugin sandbox, the Chrome extension background script, and the browser page context — but it preserves the key property of the current version: no API key required. The AI still runs in your browser, under your account, on your subscription. DesignGen just stops making you do the manual relay.

The goal has always been democratising AI-assisted design. A junior designer in any city, with no credit card for API billing, should have access to the same AI generation capabilities as a designer at a well-funded company. The tool is free. The AI is already there. The only job left is getting out of the way.