Since the release of ChatGPT, there's been so much talk and excitement about the capabilities of what ChatGPT can and cannot do. I saw tremendous number of articles from the design and development community about how they'd been utilizing ChatGPT for tips and resources but mostly what intrigued me was that ChatGPT also helps with writing code. Now that was something, and hence I decided to give it a try as well!
Being a designer with only a few years of front-end development experience (and honestly, I wouldn't call myself a developer at all), I have always felt the pain of not being able to build my own ideas, try out new things, dabble with something new or exciting (and by the way, trust me, I have tried to learn and practice coding like a thousand times). I've always wished for being able to code but my brain just doesn't work that way. So, when I read articles of folks trying out ChatGPT for building Figma plugins, I had to give it a shot myself.
Introducing Smart Progress Stepper Creator with 240 users
And then...magic happened. All I had to do was come up with an idea of a plugin that would improve a designer's life, and a "prompt". More than the idea, to get the most value out of ChatGPT, you need to provide the right prompt.
The idea was to simply create a plugin that allows users to create a quick progress stepper with customizations. I decided to stick with vanilla JS only because of my lack of knowledge of all the amazing JS frameworks out there ☺️. It was also easy to not having to worry about any dependencies that could become challenging for my skill level.
On giving the prompt, ChatGPT threw up basic files and their code that makes a Figma plugin.
- manifest.json (crucial for plugin development as it contains the basic details)
- ui.html (to create a simple HTML user interface for the plugin)
- code.js (performs the functions)
Here's what all those files looked like:
What blew my mind was that ChatGPT in addition to helping with code, also provides explanation of what each file and code would do, along with the steps to testing and publishing.
From a UI perspective, the first iteration of code was very basic. If I really had to up the game for the plugin, I had to think out of the box with the ability to have more customization options along with intuitive and appealing UI. I started adding more prompts.
There was a lot of back and forth that happened as I had to test every single line of code within the Figma app to make sure the plugin worked as expected. What I loved about ChatGPT during this whole process was that it never lost the context of what I was building from the beginning. I could request it to discard the code, revert back to old code, debug coding errors, request UI updates, request full code if I had to confirm I made the right updates without ChatGPT getting frustrated with me and taking as much time as I needed to build a working plugin.
There were numerous times when I faced a lot of complex challenges with auto-layout and in those cases, I had to refer to Figma development API to really understand what I could be doing, but for most part of it, ChatGPT was able to help out. There are still issues that ChatGPT couldn't fix, and I've left them for now, but I hope when I give it a try again to release an update to this plugin, it may have evolved and helps me solve them without further challenges.
Voila, after 2-3 hours, I had a great working plugin that I was extremely happy and excited about. I decided to publish it a day later, and the interesting part is, I was able to also have ChatGPT help me with the logo for the plugin along with description that goes for the plugin public profile page.
Besides being able to build a plugin, I learned vanilla JS, debugging issues, getting better at prompts to get the right help from ChatGPT along with testing a plugin. I definitely feel more knowledgeable that I was before perhaps.
What's next?
I would love to up the game and actually test the capabilities of ChatGPT with coding by utilizing an advanced JS framework to build a plugin/widget. Let's hope for the best!
0 Comments