AI · Design ToolsFigma PluginSolo Project

Building a Figma Plugin That Keeps Designers in Flow

VoiceKeeper is an AI Figma plugin that helps designers fix their copy without leaving the canvas. Select a text layer, hit rewrite, and get brand-voice suggestions applied directly to the file — no tab switching, no copy-pasting into ChatGPT, no breaking your design flow.

TypeSide Project

My RoleDesign + Code (solo)

Timeline2 days · April 2024

OutputLive plugin + AI backend

What I Built

01A Figma plugin that reads any selected text layer and rewrites it instantly

02A one-time brand voice setup — the AI remembers your tone for every future rewrite

03A Vercel backend that handles the AI calls securely

04Built solo in 2 days with no prior Figma plugin experience

An AI assistant that lives inside Figma

For designers who don't want to leave the canvas just to fix a line of copy.

You're building a luxury e-commerce brand in Figma. The layout looks great but the copy is still placeholder — "Continue," "Shop Now," "Add to Bag." So you open ChatGPT, paste your brand guidelines, explain the context, copy the result, switch back to Figma, find the layer, paste it in. Then do the same thing for the next text layer. And the next.

You're not designing anymore — you're doing admin. VoiceKeeper fixes that by living inside Figma. Select a layer, hit rewrite, done.

Why a Plugin?

The whole point of this tool is to fix copy without leaving Figma. That constraint made the format obvious — but I still mapped out the alternatives to make sure.

A standalone web app would mean switching tabs. A chat interface has no idea what's on your canvas. A plugin lives exactly where the text layers are.

OptionWhy it doesn't workVerdict

Standalone web appForces you to leave Figma — the exact problem we're solving❌ Skip

AI chat interfaceHas no idea which text layer you're looking at❌ Skip

Figma pluginLives on the canvas. Reads the layer. Writes it back.✅ Built this

Interactive Demo

You're designing a luxury brand homepage. The subheading reads "New arrivals, crafted to last" — placeholder copy that needs a brand voice. In four clicks, still inside Figma, it becomes something that actually fits. Try it below.

Start by picking a voice preset in the plugin panel on the left

Step 1 — Pick a voice preset1 / 5

VoiceKeeper

Set your brand voice

You only do this once. VoiceKeeper remembers it for every rewrite.

Canvas preview

Homepage — Section Subheading

New arrivals, crafted to last

This simulates how the plugin reads and writes text directly on the Figma canvas.

How It Works

When you click Rewrite, the plugin reads the text layer you selected on the Figma canvas. It sends that text — along with your saved brand voice — to a small server I built. That server passes everything to Claude AI, which writes back new copy suggestions. The plugin shows you the options, and when you pick one, it writes it straight back onto the canvas.

The server in the middle exists for one reason: to keep the AI key safe. Plugin code is visible to anyone, so the key lives on the server instead.

Figma Plugin

Reads your text layer, shows suggestions, writes back to canvas

Vercel Server

Receives the request, holds the API key securely

Claude AI

Gets the text + brand voice, writes the new copy

Impact on Workflow

This is a side project, so there's no company dashboard to pull numbers from. But the impact is easy to feel — these are based on realistic design workflow estimates, not made-up stats.

saved per text layer~2 minSwitching to ChatGPT, pasting brand context, getting a response, copying it back — that's the time VoiceKeeper cuts out on every single edit.

tab switches needed0The entire rewrite flow — selecting a layer, generating suggestions, applying — happens without leaving Figma once.

brand voice setup1×Set your brand voice once at the start of a project. Every rewrite after that uses it automatically — no re-explaining, no copy-pasting guidelines.

text layers in a typical flow15–20A standard landing page or checkout flow has 15–20 text layers that need copy attention. At 2 min each, that's 30–40 minutes back in a designer's day.

What I Learned

How to ship an AI-powered product

This was my first time building a real backend for an AI product — setting up API routes, handling streaming responses, keeping the API key off the client. It taught me how the full stack actually fits together.

How Figma plugins actually work

I had no idea how Figma's plugin system worked before this. Building VoiceKeeper from scratch taught me how plugins read the canvas, communicate with an iframe UI, and write changes back to the file.

What's Next

Building VoiceKeeper taught me the full loop — plugin UI, Figma API, AI backend, deployment. Now I want to build something bigger with it.

I'm working on my next Figma plugin. Same world — copywriting inside Figma — but a concept that goes further than brand voice matching. Something that adds more value to the actual design process. I'm planning to publish it properly this time.

Next plugin — in progress

Stay tuned. Or get in touch if you want to see it early.

Want to try it?

Get in touch ↗

Check out other projects