Figma is a powerful tool for designing and prototyping interfaces, but it can also be extended with plugins to add custom functionality. Creating these plugins can be a tedious and time-consuming process, but with the help of ChatGPT, a large language model trained by OpenAI, it is possible to generate code for plugins by using just a description of the result you want to achieve.
In this article, I will demonstrate the use of ChatGPT to generate code for three different plugins. The code for these plugins will be used as-is, without any manual editing. So, the first plugin will collapse all expanded layers in the layers list. The second one will generate a QR code with the ability to download the result. The third plugin will search for the old product name and replace it with the new one in every text block on the page. Sounds interesting? Let’s do this!
The first plugin I want to demonstrate is one that can collapse all nodes such as INSTANCE, FRAME, GROUP, etc. when the user runs the plugin. Of course, Figma has a shortcut (ALT+L) that performs the same action, but we’ll explore ChatGPT’s ability to create simple plugins for Figma to see how it would work and how long it would take.
Show an example of the Figma plugin that finds frames on the current page and collapses children frames, groups, instances on all nesting levels. Then collapse parent frames placed on canvas. Then close the plugin and display a notification with the text “Task is complete”.
30 minutes to receive the working result and then test it in Figma.
40 minutes to receive optimized code.
I have simply reused the generated code and it works flawlessly! Below is an example of the code generated by ChatGPT:
As you can see, ChatGPT is generates a solution that is not optimal, with a lot of unnecessary code. Nevertheless, the code above works out of the box and can solve specific issues in Figma without additional editing.
As an extra exercise, we can also try asking the AI to optimize the code, and after several tries, the code will look like this:
The result of the optimization is awesome! AI has removed all unnecessary parts of the code and left only the important ones that provide the same result as the originally generated code.
But, it is important to keep in mind that asking AI to optimize code without providing its context and purpose may result in code that only partially works or doesn't work at all.
The second plugin is one that opens the Figma UI window and generates a QR code with the possibility to download the result as a .png file after the user clicks on the “Generate” button. This plugin is a bit more complex than the first one and requires a clear understanding of what you want to achieve. Essentially, if you ask ChatGPT to generate code, it will typically propose a complex solution that may require a deeper understanding of the development process. The initial code generated by AI required splitting the code into JS and HTML files, installing npm packages with JavaScript libraries, and using bundlers such as Webpack or Babel. If you are not familiar with these tools, you may become stuck and may abandon the idea of generating a working solution. So after several attempts, I asked ChatGPT to provide a code example that uses only one HTML file.
Show an example of the JavaScript code for the Figma plugin that uses only a ui.html file to generate a QR code after the user adds the URL to the input field and presses the “Generate” button. The plugin should use the “qrcodejs” library as a link to CDN. Generated QR code should be shown in the same Figma UI window with the possibility to download the result.
2 hours to yeld a working result. Most of that time I spent trying to figure out which library I should use to generate the QR code.
As a first result, I got a plugin with a non-working “Download” button. This is common when ChatGPT makes mistakes, such as using expired or non-existing links to external resources or generating code that does not work, or you have to do a lot of manipulation of the code before it starts working. However, we can ask AI to fix the problem, and in most cases, it can be solved within a few attempts.
It works! The only things requirements here are a clear understanding of the desired outcome, the ability to construct proper requests, and taking into account all important aspects that should be reflected in the final solution. Below is an example of the code generated by ChatGPT:
One more additional exercise. Let’s ask AI to beautify the existing UI and apply some CSS styles to our plugin.
Below is an example of the CSS styles generated by ChatGPT:
And this is the final result with the styles applied.
The third plugin searches for instances of an old product name and replaces them with a new one. While not particularly noteworthy from a development perspective, it serves as an example of how AI can be used to troubleshoot and improve non-functional code by using errors description from the console to identify and resolve issues.
Show an example of the JavaScript code without “require” for Figma plugin that will do the following: Don’t use async functions, Find all the nodes (frame, group, instance, symbol, etc.) on the current page with text nodes that contain “Acronis Backup” characters, Replace “Acronis Backup” by “Acronis Cyber Protect”, Close plugin, Show notification.
20 minutes, including troubleshooting, to get a working result.
The above code does not work. This is a common occurrence when using AI-generated code, and it can be challenging to determine the next steps. In my case, I got an error message in Figma and utilized ChatGPT to help improve the generated code and resolve the issue.
The second attempt was also unsuccessful. I got another error in Figma and asked AI to improve the code again.
After the second request, AI recommended altering the plugin’s logic by incorporating a Figma UI call and an event listener function. The event listener function implies that a specific event must occur in, for example, the ui.html file before the function is executed. This was starting to look like an unnecessarily complex solution that would likely involve a significant amount of time for troubleshooting and achieving functional code.
Then, to not complicate the solution, I asked AI to not use the event listener function. And finally, ChatGPT generated code that works as expected.
Below is an example of the code generated by ChatGPT:
Developing plugins for Figma using ChatGPT can be a powerful tool for automating low-level tasks and generating specific parts of code. However, it’s important to have a clear understanding of your goals and the steps necessary to achieve them in order to use ChatGPT effectively. It’s also important to keep in mind that the AI-generated code can be overly complex and may require optimization. Additionally, the lack of context provided to the AI may lead to generating code that does not work as expected or not working at all.
Also, ChatGPT is great for troubleshooting because it can quickly generate code based on specific inputs and requirements. Moreover, this can save a significant amount of time and effort compared to manually writing or rewriting the code, or googling the possible solutions somewhere on Stackoverflow.
