“Vibe Designing” the Asset Allocator

About ten years ago, I designed an investment comparison tool for Blue Rock Real Estate that let users compare alternative asset returns against a standard 60/40 portfolio in real-time. The original web application served as a promotional tool on their website, allowing clients to adjust inputs and immediately see how an alternative investment allocation could outperform a traditional mix. The first version I built (using Angular and a charting library) introduced a dual-slider interface – one slider controlled the percentage split between stocks and alternatives, and another refined the breakdown of alternative assets. This interactive design was a big leap from the previous static form; as users adjusted the sliders, the on-screen charts updated instantly via bidirectional data binding, letting them visualize portfolio changes in real time. I even developed two iterations: one that closely matched Blue Rock’s branding with custom-styled sliders, and a second, more refined prototype that further improved responsiveness (though it wasn’t fully brand-polished). Together, these early versions demonstrated an innovative interaction pattern for financial data visualization – something that felt ahead of its time in user engagement.

Five years later, I revisited this project to experiment with a more futuristic interface: a radial dial control inspired by Apple’s iOS clock and timer. The idea was to let users “dial in” their desired portfolio allocation using a circular dual‐pie chart, which could be especially intuitive on touch devices. I pursued this as a personal R&D exercise (and a bit of self-promotion for my portfolio) to push the design further. I rebuilt the interface in Figma and prepared it to be visioned into a 3D environment using Cinema 4D for promotional visualizations – essentially turning the flat design into an interactive 3D model. In that prototype, the dual pie charts were responsive: adjusting the dial in the virtual reality demo would simultaneously update the visualized allocation, creating an immersive real-time experience. This experiment brought the concept to life in a novel way, but it remained more of a visual demo than a deployable application. At the time, implementing such a radial, touch-friendly control on the web was still a challenge without significant custom development, and it wasn’t something that made it into the production website.

Now in 2025, Figma Make recently rolled out to me – and it allowed me to rebuild this interactive concept in mere minutes through AI-driven prompts. Naturally, I chose the trusty old Blue Rock asset allocator design as my test case. My goal was simple: could I quickly create a working version of the dual-slider (radial dial) interface using Figma Make, and maybe even scaffold the rest of the page, without writing code manually? I imported my original design file into Figma and fired up the Make tool. Using the guided prompt system, I described the interactive behaviors I wanted. Surprisingly, within about 20 minutes I had a functional dual-slider prototype on screen – with very minimal prompting required. A few iterative tweaks to the prompts were enough to refine the behavior to exactly match my intended interactions. The result was essentially the modern radial dial interface I’d imagined: the two sliders on the circular chart could be grabbed and adjusted to set the percentage of stocks vs. alternatives, and as one moved, the charts animated smoothly to reflect the new allocations. Even better, the prototype was touch-capable out of the box – on a phone or tablet, you could use your finger to rotate the dials, not just a mouse cursor, making it feel as natural as using the native iOS clock wheel.

The success of this Figma Make experiment left me both impressed with the tool and reflective about how it can change the design workflow going forward. In the past, bringing an unconventional UI idea (like a radial allocation dial) to life meant either hand-coding a proof-of-concept or writing lengthy specification documents for developers – both time-consuming approaches. Now, AI tools can skip some of those steps. Here are a few key takeaways from this project refraction:

• Rapid Prototyping – I achieved a working interactive prototype in about 20 minutes of prompt-driven development. Previously, crafting something similar might have taken days of coding or back-and-forth with a development team.
• Bridging Design & Development – Having a functional prototype that demonstrates the exact interaction (e.g. a radial dual pie-chart slider) is invaluable. It communicates the design far more clearly than static mockups or written specs ever could. This is especially useful for non-standard components that are hard to describe in words.
• Empowering Creativity – With tools like Figma Make, I can revive ambitious ideas that were shelved due to technical constraints. Features that large organizations might shy away from as “too different” or difficult to implement can now be explored and proven out in prototype form first, potentially making the case for their inclusion.

Not everything is plug-and-play perfect, of course. Even though Figma Make generated clean, working code for the prototype, organizations will still want to review and refine that code before using it in production environments. Standards and consistency matter in deployed software. But the heavy lift of getting a concept to work interactively is now largely handled by the AI – which is a game changer. As a designer who also codes, I find this capability hugely freeing: it lets me focus on the idea and user experience, then quickly materialize it, closing the gap between imagination and execution.

This journey of revisiting an old project with modern AI tools shows how far technology has come and how it enables us to reimagine our past ideas in new ways. The Blue Rock investment tool was always one of my favorite self-initiated projects, and seeing it refactored (or “refracted”) through Figma Make’s lens has been tremendously satisfying. The core concept – intuitive, interactive control for complex data – remains as relevant as ever, but now I have a viable prototype that I can share, test, or even build upon further with a fraction of the effort.

It’s exciting to think about what’s next. The capabilities of Figma Make and similar AI-driven design tools are evolving rapidly. They already extend beyond simple sliders and forms into areas like 3D graphics (WebGL), advanced visual effects, and potentially much more. I plan to continue playing catch-up on old projects, resurrecting other concepts that I had once put on hold due to technical limitations. Each revisited project is an opportunity to finally realize those early visions with the help of today’s technology. In essence, old ideas can shine in a new light when modern tools make the once-impossible possible.