I used AI to create a Figma plugin!
The plugin is called Cloner Pro. This Figma plugin can clone objects and manipulate the clones in organic ways to achieve the following.
Here’s what the plugin interface looks like.
How AI made this plugin possible?
I’m a not a developer and I don’t code. I do have a fundamental understanding of coding and had coded my own site about 10 years back.
I’m a Designer and I use Figma a lot. It’s increasingly becoming the go-to tool for me to quickly put together some graphic designs. For all what it’s capable of, I still feel it should do more.
I’m a big fan of the Cloner tool in C4D. I love its versatility and how powerful it is when it comes to procedurally creating clones and manipulating them with various effectors. The range of outcomes you can achieve with such a workflow was beyond what I ever thought possible.
I’ve always wished my 2D tools had that workflow.
With AI, I thought it might be possible to finally make it myself.
About a week back, I had no clue of how to create a Figma Plugin. My queries in Bing Search and Chat GPT will pretty much give you an idea of how I built the plugin.
Below are some of the actual queries I used, with typos and everything.
How do you create a Figma plugin?
How do I find out if I have typescript installed properly?
Give me some ideas of what could be a Figma plugin Designers would want.
I get error TS2322
Create a rectagle with gradient fill in Figma with javascript. Avoid error TS2322
figma GRADIENT_LINEAR syntax
Create a rectagle with gradient fill in Figma with javascript
what is hash when it comes to media in coding
how to define a 2 dimensional array in javascript and assign a value for every item in the array
how to round off a number to 2 decimal places in javascript
generate a random perlin noise in a html canvas using javascript
How to set focus to an input filed on load
As you can see, the range of questions vary from basic clarification of syntax to very advanced functions.
AI filled up the gaps in my skills/knowledge at both ends of this spectrum.
For many situations, there would be huge blocks of code I just copy with no idea how it works, and it just works. At other times I’m struggling to troubleshoot a missing semi colon.
Here are some remarkable instances that stood out to me in this journey.
Case 1: My original intent was to generate Luma map inside Figma itself and use it as effector to manipulate the clones. This would have been ideal but as I consulted more with Bing chat, I realized this might not be possible as Figma API won’t allow me to do what I need. I thought this was the end of the project.
The remarkable thing was that Bing chat understood what I was trying to do and suggested an alternate approach, and this approach worked. Remember, I didn’t ask it to suggest an alternate approach. 🤯
Case 2: AI gets temperamental sometimes. Sometimes it will start writing an answer and remove it and plain refuse to continue. 🤪
Case 3: AI hallucination is going to definitely send you on some wild goose chase if you are developing with AI 😊. Here, Bing chat very confidently suggested how I can add my own icon to the Figma plugin. It took some time for me to realize that it keeps changing the suggestions if I start over. Wasted a solid one hour trying to make this happen only to realize the real solution when I tried to publish the plugin.
Conclusion
Now that we have AI, I was curious if I can actually pick up and deliver a project like this. I’m happy to report…
Yes I can! but more importantly, yes You can!
This is part of a bigger personal project that I’m taking up to identify various ways to augment myself with AI. A Figma plugin fell under the category of “Now that you have AI, name some of the things/stuff/app that you wish you could create.”
Bonus content
For those who scrolled till the end. Here’s some really cool stuff you can do with the plugin. The clone layers are named in a systematic manner which makes it possible to make it work with smart animate to create stuff like what you see below.
With creating clones becoming so easy, you can also generate multiple random clones to create animation effects like the following.
