My Journey Building a Figma Plugin Using ChatGPT: Key Learnings...
AI tools are becoming increasingly popular and are being widely used in various professions. ChatGPT is one such tool that has gained significant recognition due to its capabilities. As someone who has transitioned from engineering to design and has minimal coding knowledge, I was curious to test ChatGPT's capabilities and limitations. I wanted to see if it could help me build a functional Figma Plugin with minimal coding knowledge.
The Idea
As a designer, I wanted to simplify the process of creating a 12-column grid in Figma, which requires multiple clicks and entering specific values. I wanted to build a plugin that would produce a grid with just a single click.
Getting Started
Although I had no idea how to get started with developing a Figma plugin, I looked online and found various sources that helped me with the process. However, I was not entirely clear with my prompt which resulted in many grammatical errors.
Testing the Plugin
After entering the prompt on ChatGPT, the code was generated accurately on the first try, but the plugin resulted in an error when executed in Figma. After going back and forth and re-generating the code multiple times, the plugin finally executed. Although it got a few things right, I thought there was still room for improvement.
Improvements
Since I had some experience in coding, I decided to take matters into my own hands. I searched online and found the Figma API documentation, which helped me make the necessary changes. I made the grid dynamic in size and occupy 75% of the width of any frame by adding a formula for offset instead of giving a constant value. I also changed the gutter to 24px, which is more widely used, and changed the color to Teal. After making these changes, I entered the required details and published the plugin to Figma Community, which was approved within two hours.
Key Learnings
My journey of building a Figma Plugin using ChatGPT taught me the following:
- If the code generated by ChatGPT does not work, try modifying it yourself.
- If you have some experience in coding, take matters into your own hands.
- The Figma API documentation is an excellent resource for making necessary changes.
- Adding a formula for offset instead of giving a constant value makes the size of the grid dynamic.
- Changing the gutter to 24px and color to Teal makes the plugin more widely used and visually appealing.
Overall, my experience of building a Figma Plugin using ChatGPT was challenging yet informative. I hope this blog has helped you in some way. Feel free to reach out to me in case of any queries, suggestions or feedback.
