Simplifying Figma plugin development with ChatGPT assistance
As a product designer, I always look for tools and methods to make my workflow more efficient.
While working with Figma, I encountered a problem when swiping icons. The color changed after swiping the icons if the layers didn’t have the same name, which slowed down the design workflow. To fix it, all layers needed to be named the same.
With a small icon kit, changing layer names is relatively quick, but if you have a design system with a large icon library and the layers aren’t named correctly, selecting multiple layers one by one can be tedious.
Because I’m not a developer, developing a useful plugin that can do this wasn’t possible in the past, but with ChatGPT and other AI tools, it’s possible now.
Here I am sharing how my wife Laura and I developed a plugin that allows you to change layer names with just one click. I hope this post will inspire you and other UX designers to create Figma plugins using ChatGPT.
Why we did it
The idea to develop a Figma tool came when Laura asked me if I needed a Figma plugin.
Laura is an expert in improving and automatizing processes with Zapier, Pabbly, and Google Workspace. Because she wanted to increase her abilities, she studied Google Apps Script so she would be able to automate processes in the Google suite (Google sheets, Google Docs, etc.).
Her first step in understanding code basics was taking a JavaScript course. To gain some experience with javascript, she offered to help me create a Figma plugin.
When I asked her how she would write code after two weeks of the Udemy course, she said, “I will be able to use GPT chat; I won’t have to write all the code myself.”
Two days later, I told her I had an idea for a Figma plugin. Because I needed to change all the layer names in a large icon kit, but I didn’t have the energy to do it one by one, I would be happy to develop a tool that could change the many layers names in one click.
She agreed, and we both started working on the project.
ChatGPT and Youtube helped to understand how to build the Figma plugin
The first step was opening ChatGPT and asking a simple question.
“I am a developer that wants to develop a Figma plugin. What do I need to do to build the plugin?”
Although the results were generic, they were a great starting point. We continued to ask the chat to clarify the steps, for example:
“Can you explain step one in more detail?”
Besides asking ChatGPT how to build a Figma Plugin, Laura watched several videos on the Figma YouTube channel and this video to better understand the technical steps involved.
Building the environment
After learning more about developing a Figma plugin, it became clear that the first step was to build the environment.
To build the environment, you need to download the Figma desktop application, the Visual Studio Code app, and the typescript. This way, you can develop the plugin locally and test it before uploading it to the Figma community.
You can select a kit with an interface or a kit that does not support an interface. This means you can build plugins that only perform actions without an interface.
Here I will give you another tip. You need to log in with the user who will upload the plugin. Changing the user after that is not difficult, but working organized from the beginning is better.
I explained what I wanted the plugin to do
When Laura asked what I wanted the plugin to do, my idea was to create a plugin that selected all the child layers and changed their names.
We wanted to keep the plugin simple and easy to use. Therefore, we focused on creating a basic function that would change the name of all the layers that are not the first layer.
This was a helpful starting point for us, and it allowed us to understand the basics of developing a plugin and the potential for more advanced plugins in the future.
First iteration and help from another AI tool
Laura began by asking ChatGPT for a clear prompt, and it gave her the code. She pasted it into Visual Studio and executed it. Unfortunately, the plugin selected all layers and changed their names.
She had to improve the code from this point on and ensure that only the child layers were selected. To do this, she used an app called AskCodi. This app uses the GPT-3 model.
It is not easy to write the correct prompt, but after some experimenting, she succeeded, and, to our surprise, the plugin only selected the child layers. Her biggest surprise was that she could create an application without writing a single line of code and using only natural language.
I wanted to add the prompts to this article, so I asked her what prompts she used, but she didn’t recall, but she said the format was something like:
“I am developing a Figma plugin. Can you write me a code that selects all the layers from the selected frames apart from the first one and change the names of the selected layers?”
The importance of clear communication and my mistake
As we continued working on the plugin, I realized I had made an error. Figma lets you make plugins with and without interfaces, and I didn’t explain to Laura which kind of plugin I wanted.
Therefore, she started with a plugin without an interface. Because of that, the user couldn’t change the layer’s name, and it changed after execution to a specific name.
I asked Laura to change it, and she created a new plugin, this time with an interface. After starting from scratch, she copied the code into the new plugin. The interface would allow the user to set the layer’s name in the input text, making the plugin much more user-friendly.
It was a valuable lesson for me and reminded me of the importance of clear communication when working on a project. Further, it is always better to create a clear Figma prototype than explain things with text or talking, even if it is a tiny plugin. Or, as I heard in the past, an image is worth 1000 words, and a prototype is worth 1000 images.
Designing the plugin to match Figma visual style
Since I am a designer and have experience with CSS, I was in charge of the visual design aspect of the plugin.
As a first step of the design process, I opened a Figma design file and used the HTML to Design plugin to learn the Figma color palette, the fonts, and the sizes used in Figma. This allowed me to design a professional plugin that looked like a natural part of the Figma interface.
Once I understood the design elements used in Figma, I designed the plugin in Figma itself.
My next step was to change the visual design using ChatGPT. The process was easy. I copied the code, pasted it into ChatGPT, and asked in normal language what changes I wanted to make in the visual design. After that, I copied the code from ChatGPT and pasted it into Visual Studio.
In some cases, ChatGPT couldn’t assist me. For example, I couldn’t figure out how to change the modal size by asking ChatGPT, and I asked it in the Figma forums.
I wonder if the Chat didn’t understand what I wanted or didn’t have the answer, but writing a clear prompt is an art, and when we don’t do it right, we may not get the results we want.
The importance of design QA
Although the plugin has limited functionality, I conducted design QA to ensure it works correctly.
During testing, we discovered two bugs:
- We didn’t have a disable button when the input was empty. Therefore, if the user clicked on it while it was empty, the name changed to the old layer name.
- It only worked after executing it on a regular frame, not on a component.
Laura took the code to ChatGPT to make the changes. The process was not straightforward, and she had to change and tune the prompt every time until the plugin worked.
Once again, the magic was to utilize natural language, which was then converted into code by ChatGPT. The main issue was writing the correct prompt to get the desired results.
In this design QA process, we ensured the plugin was polished and ready for use. We thought the process was complete, but there was still one more task before releasing the plugin.
Overcoming compilation challenges and publishing the plugin
The next step was compiling the code before uploading it to the Figma community (The compiling process ensures the code is safe and bug-free.)
We tried compiling it, but it gave us errors. The solution was to copy the code and the error message to ChatGPT and ask for help. It took time to write the correct prompt that gave us the right results. After a few tries, the code compiled correctly, and the plugin was ready to upload to the Figma community.
Before submitting the plugin to the Figma community, we had to write a description explaining what it does and create the plugin icon.
In five days, our plugin was approved. Seeing our hard work pay off was great, and we were excited to share it with the Figma users. It was a great learning experience, and we were proud.
Main takeaways from the process
- Writing a clear prompt is a challenging task; you have to try over and over again until you succeed.
- The prompt must be super accurate. For example:
If you want to generate code for each file, you should ask ChatGPT to generate code for each file (code.js, ui.html…)
In addition, You should add additional information. If you develop a Figma plugin, it is better to include this information in the prompt:
“I am developing a Figma plugin and want to select only the first layer….” - Because ChatGPT has a history, each time you ask to change the code, it remembers what you asked. Therefore, it will write the following answer based on the previous answer.
- It’s important to understand the code, or at least read it, as it will help you to write a correct prompt. Furthermore, sometimes the changes you need are too small, and you can make them yourself.
- In order to understand the basic rules of developing Figma plugins, you need to watch some videos or read some articles before starting.
- A great feature of ChatGPT is that you get an answer to your question and an explanation of why it is the answer. This can help you understand better the reasons and the code.
Would you like to use the plugin?
If you’re interested in trying the plugin, check it out on the Figma community page. It can help you rename all the layers for your icon library, whether a custom library, an open source, or known libraries like material design icons library.
To summarize
With this article, I wanted to share how my wife Laura and I built a Figma plugin using AI tools.
We started the article by explaining why we developed the plugin and how we studied the basics of Figma plugin development.
After that, we focused on how you can write your code with artificial intelligence tools. I demonstrated two tools, ChatGPT and AskCodi, which you can use to make the “brain” and the CSS.
Furthermore, I discussed how we overcame some challenges and the importance of writing a good prompt.
I hope the article will inspire more designers to use AI tools and build Figma plugins.
Thank you for reading the article. I hope this article helped you understand how to create Figma plugins with the help of ChatGPT. Please feel free to share it with your friends or team members, and if you have any questions, please let me know.
If you enjoyed my article, I suggest you follow me and subscribe so you’ll receive an email whenever I post.