"I built a Figma plugin using AI and saved a week of work"

The Lightbulb Moment: AI to the Rescue

This adventure started with a simple realization: I was spending too much time on repetitive design tasks. I’d been following AI news and chatting with colleagues about the latest AI tricks, and I even saw some demos at a Design Innovation (internal company event) where people used AI to generate UI code. That got me thinking... why not use AI to handle some of my design documentation chores?

The idea clicked when I was neck-deep in defining those Figma design tokens. Writing descriptions for each token one by one felt like reinventing the wheel hundreds of times. I thought, “Hey, I talk to AI bots every day for fun and research. Maybe one of them can help me describe these tokens?” At the same time, I knew if I had all those descriptions, I could script a solution to update the tokens in Figma automatically. That’s where the second AI came in: an AI pair-programmer to help me write a Figma plugin.

So the plan was set: Claude would generate the content (token descriptions) and Cursor AI would help me code a Figma plugin to apply that content. It was time to put this plan into action.

Step 1: Let Claude Write the Boring Stuff

First up, I enlisted Claude (Anthropic’s AI assistant) to handle the tedious writing. If you’ve never used Claude, it’s similar to ChatGPT - great at understanding context and generating text, but also capable of processing images and files if needed. My goal for Claude was straightforward: scan my design components and generate descriptive text for each token (for example, a color token might get the description “Primary brand color used for call-to-action buttons”).

How did I do this? I literally showed Claude what my UI looked like. I uploaded a few screenshots of design components and prompted Claude in plain English, something along the lines of: “Here are various UI components with color, spacing, and border tokens. Please generate a short, clear description for each token you identify.” Claude took it from there, analyzing the visuals and my request. After a bit of back-and-forth (tweaking prompts, clarifying here and there), Claude produced a list of token descriptions that felt spot-on.

I then asked Claude to format those descriptions into a CSV file (since I knew the plugin would need to read a CSV). In no time, I had a neatly organized CSV containing all ~200 tokens and their shiny new descriptions. To put it in perspective, with Claude, I accomplished in 1 hour what could have taken me 4 to 5 days of writing. I was already feeling the excitement — and a bit of relief 😅. With the content ready, it was time to tackle the next part: creating the Figma plugin to use this data.

For those interested in the nitty-gritty of my conversation with Claude, I had a full chat transcript (see gif above), where it generated the token descriptions. It was like pair-writing with an AI – pretty cool!

Step 2: Setting Up the Figma Plugin Project (in Minutes, Not Days)

Now that I had the token descriptions in hand, I needed a way to quickly update the tokens in Figma. Enter Figma Plugins. If you haven’t made a custom Figma plugin before, don’t worry – it’s not as scary as it sounds. Figma actually makes it super easy to get started with a template. Here’s how I set up my plugin project:

1. Create a new plugin – In Figma (desktop app), go to the top menu and select Plugins → Development → New Plugin. This is how you start any custom plugin.
2. Choose a template – Figma will ask what type of plugin you want. I picked “With UI & browser APIs” (sometimes called “Custom UI”). This gives you a boilerplate project with both a UI file and the main code, which is perfect since I needed a custom interface (to select the CSV file) and full access to the Figma API.
3. Name your plugin. I gave mine a meaningful name (something like “Token Descriptions Updater,” which is not very catchy, I know, but it does what it says!). You can also add a short description of what it does.
4. Choose where to save – Figma then asks for a folder to save the plugin files on your computer. I chose a convenient location and hit Save. Figma generated a project with some starter files for me.
5. Review the boilerplate – The template comes with files like manifest.json (contains metadata), ui.html (the plugin’s interface HTML), code.ts or main.ts (the plugin logic code), etc. At this point, I had all the pieces I needed to start coding the real functionality.

That’s it! In just a couple of minutes, I had a basic plugin structure ready to go. No coding yet — Figma handled the initial setup and gave me a foundation to build on. The next step was to actually write the code that would read my CSV and update all those tokens. And as a designer who writes code just occasionally, I was more than happy to let an AI assistant help me with the heavy lifting here.

Quick note: If you attempt this, remember you must use the Figma desktop app to develop plugins; the web app won’t work for testing local plugins.

Step 3: Meet Cursor AI – My AI Pair Programmer

With the plugin structure in place, it was time to write some code. Now, I can write JavaScript/TypeScript and have built basic plugins before, but writing a script to update 200 tokens correctly can get tricky. I figured, why not use an AI co-pilot to speed this up and avoid mistakes? This is where Cursor AI comes in.

• Natural Language Chat: Cursor has a chat interface where you literally talk to it about your code. I could ask, “How do I parse a CSV in TypeScript?” or say, “The plugin needs to load this CSV and map values to Figma tokens, can you help with that?” – and it would answer in plain language or generate the code steps for me. It felt like having a senior dev looking over my shoulder, ready to help
• Integrated Workflow: It wasn’t some weird isolated tool; Cursor fit right into my workflow. I could still use Git for version control, and it supports common languages and frameworks. Plus, there are options to keep everything local for privacy (important when working with proprietary design data). For me, on this personal project, I didn’t mind using the cloud AI, but it’s good to know there are privacy controls.
• Debugging Superpowers: Perhaps my favorite part – when I encountered errors (and I certainly did 🙃), I could copy the error message and paste it into Cursor’s chat, basically asking, “Why is this happening? How do I fix it?” Nine times out of ten, it would pinpoint the issue and suggest a fix right away. It saved me from lots of head-scratching and Googling.

In short, Cursor AI became my pair-programmer, patiently helping me build this plugin. I was still writing the code, but with Cursor’s assistance, it was faster, and I felt more confident that I wasn’t introducing silly bugs. Now, let’s talk about how the actual coding session went down with Cursor by my side.

Step 4: Building the Plugin with AI Guidance

I had my mission laid out: use the CSV from Claude and update the Figma tokens through the plugin code. Here’s how the development process unfolded, almost like a conversation between me and the AI:

• Setting the stage: In Cursor, I opened the chat (sometimes called the “Composer” tab when you want it to write code). I told it we’re working on a Figma plugin and described the goal: “We have a CSV of token names and descriptions. Let’s create a plugin that, when run, reads this CSV and updates each token’s description in Figma’s Variables.” I was as detailed as possible, basically explaining the task like I would to a human collaborator.
• Choosing the AI model: Cursor allows switching between AI models (like GPT-4, GPT-3.5, or Anthropic’s Claude). Since I’d had a good experience with Claude generating the data, I decided to use Claude here as well for code generation.

• Reviewing and tweaking: I read through the generated code. It was mostly on point, but I tweaked a few variable names and added a bit of error handling (with Cursor’s help when needed). For instance, I asked, “How do I handle tokens in the CSV that might not exist in Figma?” and the AI adjusted the code to skip or warn about those. This felt like a collaborative jam session with the AI—like pair programming where I brainstorm, and it writes a first draft, and then I refine.
• Multi-file edits: At one point, I needed to ensure the UI (HTML) could send the file data to the code (TypeScript). I wrote a prompt in the composer: “In ui.html, add an <input type=file> and in code.ts, listen for when a file is selected and process it.” Cursor went ahead and modified both files at once – it added the file input and also adjusted the code to handle a file change event. Seeing multiple files get updated simultaneously felt a bit like having an octopus assistant with extra arms coding everywhere. But it worked like a charm.
• Understanding the AI’s output: Another nice touch – after generating a chunk of code, Cursor’s AI would often explain what it just wrote. For example, it would say, “I added a function updateTokensFromCSV which does X, Y, Z... and I updated the UI to include a file upload, which on change reads the file and sends its text to the code.ts via postMessage.” This was great because it ensured I understood the solution, and it doubled as documentation for later. It’s like the AI was commenting on its code for me.

In a surprisingly short time, we (my AI buddy and I) had a first version of the plugin ready to test. The real moment of truth had arrived: running the plugin in Figma to see if it actually worked.

Step 5: Debugging – When at First You Don’t Succeed… Fix It!

I fired up Figma, loaded my development plugin, and ran it. And then… nothing visible happened. Uh oh. Actually, behind the scenes, something did happen: I got a Figma notification saying there was an error. First run, first bug – not unexpected! This is where Cursor AI truly shone in the development process.

Here’s how debugging went down, step by step:

• Catching errors: I clicked on “Show Console” in the Figma plugin development mode to see what went wrong. Sure enough, there was an error message (some undefined variable or a typo, I don’t recall the exact text, but let’s say it was something like “Cannot read property ‘find’ of undefined”). Rather than manually combing through code, I copied the error text and flipped back to Cursor’s chat.
• Asking the AI for help: I literally pasted the error into Cursor and typed: “I got this error when running the plugin. What did I do wrong?” In seconds, Claude (through Cursor) analyzed the error and pointed out the issue. It explained that I was probably trying to access something that wasn’t initialized, and suggested adding a check or ensuring the Figma variables were properly fetched before trying to update them. It even pinpointed the line in code that might be the culprit. Pretty neat!
• Applying fixes: I followed the AI’s advice and fixed the code. In one case, I had misnamed a field (like using tokenName vs name), and the AI caught that. In another case, I needed to add await figma.variables.updateAsync(...) (just an example) because the Figma API was asynchronous. Cursor’s suggestions were on the money, and I applied them one by one, then ran the plugin again.

• Iterating: This cycle repeated a couple of times. Each time I ran the plugin, I uncovered another edge-case bug or a small logic mistake. Instead of pulling my hair out, I went back to Cursor, described the new issue, and it guided me to a solution. At one point, the plugin UI was closing immediately after I selected the CSV (which meant the code ran and shut itself down before I could see any results). That was obviously not ideal. I asked Cursor why that might be happening. It figured out that I hadn’t told Figma to keep the plugin open (Figma plugins can close themselves after execution unless you tell them not to). The fix was to add a simple Figma.ui.onmessage handler to know when to close, or keep the UI open until done. I implemented that as advised, and voila – the plugin stayed open as needed.
• Success! After a few rounds of fix-and-test, the plugin finally ran without errors. I looked at my Figma design tokens panel and saw all the descriptions neatly updated from “(empty)” to the rich text Claude had generated. To double-check, Figma showed a little success notification in the corner, indicating the plugin finished its job. I literally did a little happy dance at my desk. It worked! The 200 tokens now had consistent, clear descriptions, and I didn’t have to type them all out manually. Mission accomplished.

Throughout this debugging phase, I actually started to enjoy the process. It wasn’t frustrating; it felt like a collaborative problem-solving session. Each error was just a puzzle to solve with the AI’s help. In the end, the plugin was not only functional but also free of obvious bugs, thanks to the iterative refinement.

The Result: A Handy Plugin and Big Time Savings

When all was said and done, I had a fully functional Figma plugin that automated a once-painful task. What used to threaten a week’s worth of design time was now reduced to a quick operation I could run anytime. Here’s what the plugin does, in a nutshell:

• It lets me upload a CSV of token names and descriptions.
• It finds the matching tokens in our Figma design system (Variables) and updates their description field with the text from the CSV.
• It gives a confirmation when done, so I know everything went through correctly.

Using this plugin is a breeze. Next time we introduce new tokens or need to update descriptions, I can regenerate the CSV (maybe with Claude’s help again if needed) and run the plugin. Boom — all updates done in a flash. No more tedious manual editing of each token’s description in the Figma UI.

Not only did this save my time, but it’s also going to help others. In fact, I shared the plugin with our UI UX Design team. Our company uses a design system and maintains it across several teams. Those teams can use this same plugin to manage their tokens. Even if their token set is different, they just need to feed in their own CSV and let the plugin do its thing. In a way, this little AI-assisted project of mine has multiplied productivity across the board.

Reflections: AI and the Future of Design Workflow

This journey was an eye-opener for me. I went from dreading a boring, repetitive task to enjoying the process of solving it creatively with AI tools. A few takeaways and thoughts:

• Storytelling & Humor: I found that approaching the task playfully (like treating the AI as a collaborator) made the process less daunting. I literally chatted with Cursor as if it were a colleague: “Oops, that didn’t work, let’s fix it.” This humanized the experience and kept me engaged.
• Empowering, not Replacing: As a designer, I’m not a coding ninja, but with AI help, I was able to create a pretty sophisticated tool. AI didn’t replace my role in this—it augmented it. I still made decisions, provided context, and verified the outputs. The AI just took care of the grunt work and answered my questions on the fly.
• Speed and Efficiency: The time savings are undeniable. What used to take days now takes hours or minutes. This means I can focus more on actual design and creative problem-solving, rather than mundane update tasks. It’s like having an intern who works at superhuman speed and never complains (except this “intern” sometimes needs explicit instructions).
• Learning Curve: I also learned a ton in the process. By reading the code Cursor generated and the explanations it gave, I picked up new tricks for Figma’s API and better coding practices. It was like on-the-job training. Next time, I’ll be even more prepared (and I know I have an AI safety net if I get stuck).

To wrap up, building this Figma plugin with AI was not just a one-off hack, but a glimpse into how our workflows might evolve. I genuinely felt like I had a partner working with me—one that can handle both creative and technical tasks. It’s exciting to think where this could lead: designers empowered to create tools without waiting on developers, and developers automating away the boring parts of their work to focus on innovation. The lines between roles blur a bit, and collaboration (human-AI collaboration in this case) becomes the superpower.

If you’ve read this far, thanks for coming along on this journey with me! I hope my story gave you some insight (and maybe a few laughs or “aha” moments) about integrating AI into design workflows. Whether you’re a designer, a developer, or just AI-curious, give these tools a try in your own projects. You might be surprised at just how much you can accomplish when you pair up with a helpful AI.

Happy designing, and don’t be afraid to let robots do the boring stuff!