A Coding Newbie Successfully Created 4 Figma Plugins with AI — I'm Sharing My Entire Process

Figma Plugins were among the first tools I attempted to create, primarily to help solve some design challenges I encountered in Figma.

Ultimately, I created 4 Figma Plugins. Below, I'll share my experiences, detailing the Prompts I used and the complete workflow through one of my case studies, including the difficulties I faced and how I solved them.

I hope to break down the process in detail and show everyone that the Prompts I wrote weren't complex at all. Some might even consider them poorly written, but if someone like me with less-than-perfect Prompts can succeed, I believe this should be encouraging for everyone.

Initial Preparation

Tools: Cursor AI + ChatGPT (or Gemini/Claude)

Resources: Official Figma Plugin tutorials: Sometimes these tutorials provide comprehensive and foundational guidance. Rather than jumping straight to asking AI, understanding the creation process first helps you communicate better with AI.

Goal: Create a Plugin that can export multiple images at once in Figma, with preview functionality and image positioning features.

Find References: Look for similar tools or Plugins to understand the logic. This helps clarify how to design our Plugin and communicate features better with AI. I referenced Adobe Illustrator's "Export for Screens" feature. You can also explore existing Plugins to see what features are available—if it exists, it's possible to build.

Watch Tutorials: I recommend watching Cursor tutorials because if you're new to programming, you probably won't be familiar with the interface. Watching how to operate it will help you get started.

These are the initial preparations. Once you're ready, you can begin creating.

1. List Detailed Plugin Features and Interface Descriptions

The first step isn't to start coding, but to detail your requirements.

For example, if I want to create a tool that can export multiple images at once, I need to list detailed requirements and confirm that the features are complete and clearly explained.

What I did was verbally list what the Plugin "needs to do," and roughly visualize the interface so I knew what it should look like. This gives direction for subsequent communication with AI.

Besides listing features, I recommend spending some time understanding the Figma Plugin creation and publishing process, so you'll be clearer during execution.

2. How I Communicated with AI

Below are the actual Prompts I used, and the tool was successfully created.

First Prompt: "I want to create a figma plugin that can quickly batch select files to export, with thumbnails and filenames, and export functionality like figma's export feature"

Result:

1. The exported images should be "Frames," but they didn't display correctly because I didn't specify Frames initially, so it failed.
2. The interface was too plain and unattractive.

Second Prompt: "Please help me display frames from the file in the UI, let me select which to export, with thumbnails and frame names, and make the UI use figma style and look better"

Result: Couldn't execute properly, threw an error.

Third Prompt: "An error occurred while running this plugin - showing error"

Result: When this error appeared, I pasted the error message to AI and told it "showing error," and it understood and fixed it.

Fourth Prompt: "Still error, also the code.ts content should be written in code.js"

Result:

1. I discovered it kept writing code in code.ts, but it should be in code.js. I found this out later—I don't understand why, but writing in .js made it work.
2. I could see the UI, and it indeed followed my requirements and made it look better with Figma styling.

Fifth Prompt: "Plugin should open when clicked, currently it prompts for batch Export selection which is annoying, also add select all function to select all frames at once, and add some space to the right of checkboxes"

Result: It opened successfully, but there were adjustments needed in the flow and interface, so I asked it to adjust according to my needs.

Sixth Prompt: "Export should let me choose export folder, currently this feature is missing"

Result: During testing, I found it couldn't select an export folder, so I asked it to add this feature.

Seventh Prompt: "Folder should be selected when clicking export"

Result: It added folder selection functionality, but required setting it up before exporting. I prefer selecting during export, so I asked it to modify.

Eighth Prompt: "I found I can't export, getting this error: Error saving file: window.showDirectoryPicker is not a function"

Result: Another error appeared, so I pasted the detailed error information to it, and AI understood and helped solve it.

Ninth Prompt: "I found only the first image exports, it should be able to export multiple at once"

Result: The situation was that I selected multiple images, but only the first one exported. It should export multiple, so I asked it to fix this.

Tenth Prompt: "Still seems like one image, try to help me package and download them, single images seem to still error"

Result: Export still had errors, possibly due to multiple files, so I changed my request to have it package all images into a "compressed file" for export. It completed successfully and fully met my requirements.

Eleventh Prompt: "Please modify the image preview, I want the preview images to not fill completely but maintain their original aspect ratio"

Result: It had already completed the functionality I wanted, this was a minor adjustment. The preview used fill mode, but since previews were square, some images got cropped. I had it modify this so I could preview the complete image appearance, and the final result perfectly met expectations.

Twelfth Prompt: "Please help me create a feature where clicking the preview image directly moves to that frame's position on the figma canvas and zooms to show the complete frame"

Result: This feature was decided after using it a bit, because preview images are small, and when I found errors and wanted to fix them, being able to click the preview and have the view position to that location would be very convenient. It successfully completed this!

Final Prompt: "Please help me organize in text the introduction, feature description, and interface explanation for this tool"

Note: This wasn't actually related to coding, but after finishing, I had AI write this content, giving me a detailed and well-structured tool introduction.

This is the complete detailed process. At this point, it could run locally on my computer, but publishing took more time.

I wanted to present it this way to show everyone the real picture of a "non-engineer" creating a Plugin, and to let you know it's not as difficult as imagined. The Prompts I used were super casual and simple.

3. The Real Challenge is Publishing—Solving Errors Takes More Time Than Coding

Next is "publishing." Without publishing, only you can use it on your computer. After publishing, it can be shared publicly, so I'll share how I handled this.

First: Publish and Fill in Information

Next to Figma Plugin, there's a "Publish" option. Clicking it requires filling in basic information and uploading a cover image and Plugin icon. When I didn't know how to fill something in or had questions, I would "screenshot and send to AI," and it would give answers. I just operated and copy-pasted.

Second: Encountering "Red Text"

During the process, you might see some red error text. Don't worry too much, just ask AI.

However, I strongly recommend one thing: ask it to tell you "what this red text problem is and how to solve it," not just give you the solution.

This way you can learn something, and next time you create and publish, you'll have more experience. I encountered a situation worth sharing during this process.

When publishing, three red error messages appeared, and for convenience, I screenshot all three and asked it to solve them at once.

Later the "red text disappeared"—these three problems were solved, but then a new problem appeared. I discovered "one feature stopped working," and no matter how many times I asked it to rewrite, it couldn't restore it successfully.

Later, restoring to the pre-publish code made it work again, so I thought "maybe fixing those three errors affected the code."

Then I separated the three problems and gave them to AI one by one, asking it to tell me the reason and how to solve each. I read the content carefully to understand, testing the previously broken feature after solving each one.

Finally, I discovered one of the modifications caused the issue—it made my original program unable to run properly.

Initially, the two kept conflicting and couldn't be resolved. Eventually, I found a link to official documentation next to the red text with a specification document. Figma had updated their specifications, and AI might not know the latest specs, so it couldn't solve the problem.

So I directly copied the specification content to show it, and also explained why the previous attempts failed, letting it understand the new specifications before solving the problem and finally completing the publication.

Here's what I learned:

① Don't let it solve too many problems at once—errors are harder to find ② Ask AI to tell you what it changed and why—you can learn a lot ③ Really don't rush—AI is already fast, sometimes slower is better

Finally, here's my successfully published Plugin, feel free to try it out.

Want to learn how to publish? Check out this article: How to Publish a Figma Plugin

Batch Export Frames Tool Overview:

① Can read Frames from your document at once, allowing batch export with select all and multi-select functions. ② Can export PNG and JPG formats, output becomes a compressed file package. ③ All Frames can be previewed, and clicking preview images positions to the location in the file. You can modify filenames before export without affecting original Frame names.

My Figma page with all published Plugins ▶︎ https://www.figma.com/@creatorhome

Finally, let me explain why I created this tool. I was recently working on a project with multiple image export needs, and selecting and exporting one by one was so tedious. I wondered if there was a Plugin to solve this, but after searching, I couldn't find one that met my needs.

So I decided to write a Plugin myself to solve it, and it really didn't take much time. There were some minor issues that got rejected later, but they were quickly resolved. I can only say that in the future, creating simple tools yourself might be faster than finding a suitable Plugin.

In this new era, being able to customize tools yourself is truly a blessing.

If you want to learn Vibe Coding, check out the Vibe Coding resources website I've compiled. If you're interested in Vibe Coding, you can explore the resources I've organized.