Prototyping legacy: the Figma phase
I used to spending weeks drowning in Figma—mockups bloated with dummy data, impossible to maintain, edit, or navigate. Every tweak feels like a surgery, and handing it off to anyone else? A nightmare.
Explaining ideas to developers meant rounds of revisions, breaking workflows into separate files, and untangling spaghetti logic from variables and conditionals. Even advanced features like interactions and component states were hidden in mystery layers. Figma's lack of system transparency always drove me mad.
We came a long way, but still
Way before Figma, I would to rely on paper prototypes— literal sketches taped to a wall or shuffled around a table. In limited settings, they kind of worked. You could map out an experience or get quick feedback.
Then came Cursor
Just as I was ready to dive into Origami (a design editor made by Facebook, can read and display API results, has support for native iPhone functions), a new opportunity showed up: a client needed an energy modelling scenario prototype. While the data team was deep in algorithms, I knew that no matter how brilliant their logic was, we’d still need to present it in a compelling, intuitive way.
I mocked up a flow in Figma to visualize the concept for the next customer call. The client nodded and gave polite feedback—but their body language said it all. These were data people. They weren’t about to critique my font choices or spacing; they needed substance, not surface.
We must showcase the data
I’ve also worked with Tableau, and while it was useful for quickly visualizing data, the experience often felt low-effort but also low-reward. It was great for making charts fast, but I constantly felt limited in how much I could tailor the experience to the narrative I wanted to tell. Everything looked polished on the surface, but it lacked the flexibility and depth I needed to build truly interactive, story-driven prototypes.
Lightbulb moment: what if I actually build front-end for the data?
That’s when it hit me—we needed to show this model in the context of our own product, not just as a static design. A perfect excuse to try out Cursor with Claude and GPT-4o.
I jumped in, naive but excited. Very quickly, I learned:
- You need to install a few dependencies first.
- You must set proper context to get meaningful AI help.
- You actually need to understand what AI is feeding you.
- And, clicking “accept all” won’t magically solve your problems.
A return to react, a thrilling reality
I was dusting off my old React skills. That’s when I hit a wall: my CSV reader service didn’t even exist. Instead, each data card was reading the full file on every click.
A few hours of painful refactoring and learning, polishing up the graphs, and finally—the data told a story. It wasn’t perfect, but it was real. And it was usable!
It worked!
That customer call? We walked them through their own scenario. It clicked., they asked the right questions. We gave the right answers. The rest is history 🤫
And the static days of Figma mockups? Gone.
Valeriia zub
