Yo! I Built My First Figma Plugin

#figma #learning #design #ai

It’s still a bit surreal to me — like, I never actually thought I’d create a Figma plugin. Let me tell you how this whole thing started. So there I was, just scrolling through Twitter, when this tweet caught my eye.

Some guy was going on about how he’d only hire designers who could code. Sigh — Not this debate again! I’ve seen this argument pop up like a million times before.

So I quoted that tweet with my thoughts. Like, honestly? I think it’s such an outdated question, especially now that we’ve got all these AI tools making it easier for creators to actually build stuff. These tools are literally bridging the gap, letting designers do way more than just push pixels.

Man, you wouldn’t believe what happened next! My quote BLEW UP. Comments started flooding in from both sides of the argument.

I tried explaining my point to people — I’m just saying AI and new tools are helping designers build more without needing to be hardcore coders, you know? But nah, people started twisting my words real quick. They thought I was out here saying designers should never code, which wasn’t my point AT ALL!

Then came that one person, you know, the one that gets under your skin? They challenged me — “Have you ever actually built anything using AI?”.

Now, I’m not usually one to do Twitter banters cause I don’t give a f*ck, but something about that comment just hit different. Not because I needed to prove anything to some random internet stranger, but because deep down, I’d always wanted to build something useful for the community outside of client works and I guess this was the push I needed.

Deciding what plugin to build 🤔
Coming up with what plugin to build? That part was actually pretty easy. I had this whole list of things I wanted to build to help with my personal design workflows. But check this — while I was browsing through Figma’s community looking for some resources, I found this plugin that was getting dragged in the comments. Users were going off about bugs, lack of updates, and it was a paid tool too! That’s when it hit me: why not create something similar but make it way better, with more functionality? That’s how Text Bender was born — a tool that lets you curve or bend text however you want.

The building adventure begins 🚀
The actual building part? Whew, that taught me so much about perseverance and the straight-up excitement of creating something from scratch. I started with the design first (obviously), sketching out exactly what I wanted the plugin’s interface to look like — preview area, space for the logo, sliders to control the radius and angle of the curve. I even tried adding some extra features like flipping text vertically or horizontally. But real talk? That flip functionality was being super buggy and complex. Had to strip it back and focus on making the core features actually work first.

Once I got the design locked in, I open VS Code and got to work. I had my AI assistants, Claude and ChatGPT, by my side, plus my engineering background.

If you didn’t know, I’m a first-class Computer Science graduate with solid coding experience 👩🏽‍💻. Yes baby, I will flex that BSc degree cause I worked super hard for it 😏 . On top of that, I also earned a distinction in my MBA, but let’s get back to the story.

Even though it sounds simple in writing, it was low-key super frustrating building this plugin. Like, my CSS would look PERFECT in my browser, but the moment I copied it into Figma’s plugin setup? Everything started breaking! 🫠 . Instead of having a separate file for my CSS I ended up just throwing everything in the HTML file cause honestly? I don’t like stress. The BIGGEST headache? Getting that text to curve right in Figma.

My preview would be looking clean, but hit that “apply” button to paste it in the Figma editor? Text would come out looking all kinds of wrong — skewed, facing backwards, doing everything except what it was supposed to do.

I spent three days just debugging this one thing. But each time something failed, I learned something new (even if I wanted to throw my laptop out the window). When I finally got it working? THE RELIEF!

The Launch Day Jitters 🥶
I ran like 14 different tests just to make sure everything was solid. Checked the curve, the placement, what happened if someone hit cancel — everything. It wasn’t 100% perfect, but you know what? I told myself: “We’re shipping this!”. Submitting the plugin to Figma for review had me NERVOUS. Like, what if they don’t approve it? Made a Twitter post about it too, just putting it out there that I was waiting.

Then, less than 24 hours later — IT GOT APPROVED!🎉

Being the perfectionist I am, I immediately went to test it live and found some tiny bugs. That little voice in my head started screaming “FIX IT NOW!” but I reminded myself that this was just V1. Rome wasn’t built in a day. I can keep improving it over time. Had to take a deep breath, celebrate the Win, and share my plugin on Twitter.

Link to the plugin in figma community

I also created a Youtube Tutorial on how to use the figma plugin.👇

The Takeaway 🤗
Building this whole thing taught me that I can do anything I put my mind to. Looking back, I can say sometimes — Twitter drama can lead to actual growth (who knew?). Now I’m super pumped to build more tools and keep learning along the way. That’s the story of how Text Bender came to be, and trust me, this is just the beginning!