Designing with Code: Lessons from Building Figma Plugins as a UX Designer
⚡TLTR:
In this article, I take you on a personal journey from December 2023 to today—a four-month time warp during which I dove back into JavaScript after almost 15 years. Why start programming again now? And what unexpected hurdles did I run into along the way?
The Foundation of Our Work as UX Designers: Structure
It’s all too easy to forget the basics. There I was, full of enthusiasm, ready to present my first plugins to the world. After completing the initial Indexly prototype, I found myself trapped in an endless cycle of refactoring and restructuring. As with most personal projects, it was a sobering reminder of how important solid planning and our beloved design process really are.
Naturally, I thought: "Hey, I know exactly what I want to build—no need for a concept, design, or any kind of roadmap. It’s all in my head!" As the process unfolded, I would quickly learn how wrong I was—and how much extra work I had created for myself. From experience (and as a note to my future self): Before you charge into battle, take the time to build a solid foundation. That includes both the concept and the design. These are your anchors to stay on course, instead of getting lost in every rabbit hole.
Whether you're working with an MVP mindset or following the YAGNI principle ("You Aren’t Gonna Need It"), the point is: set boundaries and focus on what you actually want to implement. Once your base is in place, you can always build on top of it. But don’t overload your project with too many “coulds” and “shoulds” that only weigh it down unnecessarily. Save those for later—if they’re even needed.
Figma’s Limits
At first, I naively assumed that Figma plugins were written in plain JavaScript, meaning I could use all the usual tools and methods. That turned out to be a major misjudgment. The data structure is fairly restrictive—at its core, you’re working with just code.ts and ui.html. Adding additional HTML or simple CSS isn’t straightforward.
This made developing (and waiting for) my code unnecessarily tedious, especially since I’d committed to writing everything in Vanilla JavaScript—no third-party libraries or frameworks (TypeScript aside). OOP and microservices? Forget it, at least not with the structure I originally envisioned.
With the release of Notely, I restructured things. I began modularizing my plugins so they could be more easily maintained. I created my own boilerplate, which lets me reuse a consistent codebase across plugins while keeping the UI unique and not just another cookie-cutter interface.
Data Privacy
Securing my plugins was a real challenge. Using a web service or any kind of third-party integration was out of the question. Everything had to be "vanilla"—every line of code under my full control. So I set a few ground rules right from the start:
- No third-party code.
- Everything in Vanilla JS, CSS, and HTML whenever possible.
- No internet communication—user data should stay local.
That decision came with plenty of trade-offs. Anything that could’ve been made easier with third-party tools was off-limits. Data storage, in particular, became a big hurdle.
Indexly and its settings had to work completely offline. To meet this goal, I ran some experiments. Indexly doesn’t use local storage or send data to a web service. Instead, it stores settings inside Figma itself—using the Table of Contents layer as a cache. Whenever a user selects a specific index sheet, Indexly re-applies the corresponding settings.
I now have three plugins in the Figma Store—all built by those same principles. Sometimes I "abuse" invisible Figma layers for data storage, or I use encrypted local storage, all depending on what the plugin needs.
Gaining Visibility
Getting my plugins into users' hands was way harder than expected. In my head, I had pictured it like this:
- Build awesome plugins.
- …
- ??
- Profit (or at least users)!
But reality hit differently. Early on, I hoped Figma’s official channels would pick up and repost my work after a few tweets—yeah, that didn’t happen. Without a hundred thousand followers or Twitter Premium, your chances are slim.
Still, I noticed more and more users interacting with and actually using my plugins. Sure, growth was slower than I’d imagined, but every new user and hard-earned follower on X/Twitter still puts a smile on my face.
Ages ago, I created @RaikenStudio for side projects and reactivated it to promote the plugins. But yeah—gaining traction organically is tough. So I shifted to using X/Twitter more like a mini dev log. Still no real reach, and it didn’t seem to improve over time. Eventually, I figured out why.
A few weeks in, I got this charming message from X/Twitter: "Your tweets will now be visible to others—after 60 tweets!"
Seriously, what the hell? That pretty much confirmed what I already suspected: Organic reach on X/Twitter is next to impossible unless you’re paying to play. I’ll probably experiment with Premium in the future—just to see if it’s worth it. I’ll keep you posted.
Lesson Learned
My ambition acted like gasoline on the tiny spark of free time I had left, burning through my evenings and weekends. The lack of planning and design only added fuel to the fire. I found myself stuck in an endless loop of refactoring and rebuilding.
You’d think I’d know better—after all, this is literally what I do professionally: helping clients and partners optimize their internal development processes (and occasionally giving them a much-needed reality check). But optimism is a powerful drug.
I genuinely believed that this solo flight would go differently. I’m a pro, right? I have a clear vision! What could go wrong? (Famous last words.)
So yes, I’ve learned my lesson and I’ll try to start with a stronger foundation in future personal projects—before recklessly throwing my precious time and energy at them... or maybe not.
As I write this article, I’m facing the same issues again with my latest plugin, Notely. Even though the technical concept is solid, the lack of a proper design turned it into yet another time-eating monster. Who needs design, right?
Yup, fooled myself again. That shortcut I hoped for turned out to be a detour.
Fast forward—my plugins are live! If this post sparked your curiosity, feel free to check them out. I’d love to hear your feedback:
Have you had similar experiences or want to exchange ideas? Maybe you’ve got feedback for me?
I’d love to hear from you in the comments.
