Attempting to create My First Figma Plugin with ChatGPT: A code-illiterate’s Journey

In the vast world where design and code intersect, I, a designer with a burning passion for accessibility, set out on an ambitious mission: to create a Figma plugin that would enhance the accessibility of mobile products. As someone who had ventured into learning HTML, Flutter, and JavaScript without ever completing a coding course, the path ahead seemed daunting. However, my determination to bridge the gap between design and accessibility pushed me forward.

That's when ChatGPT, came to my rescue. Without realizing how powerful it was, I began asking the invisible AI questions like ” Could you write a code for me to create XYZ?” and to my surprise, the chat window started generating code snippets, right before my eyes. It became my trusted engineer, tirelessly providing code revisions and fixes at my requests. It led me to Replit, an online code editor that did not require any extra development environment setup from my end.

Together, ChatGPT and I set up the project with HTML and TypeScript files, and the initial lines of code were simply pasted in. As per the instructions, I started downloading the code zip files and deploying them in the Figma dev environment to test out how it works.

Whenever the expected results were not seen, I would simply paste the error code into the chat window and ChatGPT would reformat the code to remove the error. I was amazed to see how it introduced the monitoring code snippets so that I could actually see where the code went wrong, what information is being sent to the HTML file to render, and what is not being sent!

Through a series of iterations, my plugin started taking shape. With each successful code run, I started introducing newer features into the plugin code. I started off with a simple frame listing, then introduced the frame hierarchy, then introduced the button to mark certain frames as decorative (so that the accessibility features will ignore those). With each revision, my confidence in AI-enabled development grew, and I found myself embracing the challenge with excitement. It was a transformative journey that empowered me as a designer, allowing me to combine my creative instincts with my newfound coding buddy. After much perseverance, the moment of triumph arrived. My plugin, born out of the collaboration between a designer and AI, had evolved into a powerful tool that would make mobile products more accessible, fulfilling my vision of inclusivity.

There are a few limitations to this version of the plugin like the hierarchy has been set up with the use of '+' signs, and the 'navigate to' column does not capture any data.

The further steps include refining the plugin with the help of chatGPT-4 and making it more intuitive and focused on the task at hand. Once ready, it will be easy for every designer with accessibility in mind to communicate the ideas to the development team more effectively. Since the plugin will export all the data in a CSV file, it would also be helpful for the localization team to provide translations really fast.

In conclusion, my venture into creating a Figma plugin with the help of ChatGPT was a thrilling experience. It demonstrated that even without formal coding education, with the help of AI, it is possible to bridge the gap between design and development. This is very important when there is no budget/resources available for initiatives like these. This journey opened my eyes to the endless possibilities in the future with the help of AI.

Originally published at https://www.aakux.xyz/figma-plugin-with-chatgpt