The rise of “vibe coding”

With the appearance of AI tools and low-code platforms, creating digital products has never been easier. You can go from idea to interface in hours if not minutes. 

On the surface, this feels like a revolution. And in many ways, it is. But there’s a catch. Just because we can build things faster doesn't mean the quality will be the same. Design has never been just about producing screens but  understanding users, context, constraints, and consequences. 

However, nowadays, with the rapid spread of AI driven design tools, high pressure, and company cultures where speed is expected, we UXR professionals need to be prepared that the time may have come that we need to use these solutions. This is exactly what happened to me. 

How and why I ended up vibe coding as a UXR

A couple of months ago, I had a conversation with a fellow UX researcher about the rise of AI design tools and “vibe coding.”

She had just gone through a job interview where she was asked something unexpected: whether she knew how to use vibe coding tools, and if not, whether she would be open to learning them. At the time, we both found this a bit unlikely.

In my day-to-day work, mainly with large organizations through an agency setup, roles are usually well-defined. There are established design systems, structured processes, and clear responsibilities. From this perspective, it was hard to imagine UX researchers stepping into design tasks, at least for me.

The only thing I could imagine is creating concepts, and testing them. But even then, a designer would still need to refine and formalize those ideas, which made it feel like duplicated effort rather than a real shift in how we work.

So my initial reaction was simple: I didn’t think this would actually happen in practice.

As it turned out, I was wrong.

Not even a week after this conversation,  I found myself in a situation where I needed to quickly learn how to vibe code design in Figma Make. 

Without going into too much detail, the situation was fairly straightforward: a project with urgent priority came up, but all design capacity was already allocated to other high-priority work. To keep things moving, my team lead suggested that I put together a concept that we could use for early usability testing.

I’m not going to lie, I was terrified and procrastinated to open Figma Make for days. It felt unfamiliar, and stepping into something so closely associated with design was outside my comfort zone. At the same time, I couldn’t ignore the thought that, as a UX researcher, I probably understood our users, their needs, and the problem space as well as anyone on the team.

Also, I realized that I had been working alongside designers for years. I had seen how they approach problems, structure their thinking, and iterate on ideas.

So instead of focusing on missing skills, I decided to rely on what I had already learned and try to follow a process I was already familiar with to create my first design concept.

My process as a non-designer

Before getting into tools, I reminded myself of a simple principle: this is a concept, not a final design solution. That distinction helped set expectations for myself and for others too.

1. Collect input from your stakeholders

I started the process by aligning with stakeholders to understand the context of this project:  

• Why is this project happening?
• Why is it happening now? What triggered it? 
• What assumptions or hypotheses do they have? 

2. Review previous research and recommendations (if you have any)

In this case, we already had previous research studies related to the page we wanted to redesign. I revisited these studies and gathered relevant insights and recommendations to make sure the concept would be based on existing knowledge about real user needs.

‍3. Do a competitor analysis

Next, I explored comparable solutions in the market, and collected insights on: 

• What patterns are commonly used? 
• Which competitors are solving similar problems well? 
• Where are we currently falling short?

4. Come up with and action plan related to your design concept 

Before designing anything, I wrote down a clear plan for myself. 

This included the:

• different sections
• elements on the page 
• and overall flow I wanted to see.

Having this structure made my life easier, and I could return back to it any time I felt unsure what I wanted to create. 

5. Jump into vibe coding alias Figma Make in this case

At this point, I had delayed the actual “vibe coding” as much as possible. But once I opened Figma Make, progress was surprisingly fast. Within 30 minutes, I had an initial version. Within a day, I had a complete concept ready, although it still required multiple iterations to refine after as well. Why? Because of the next step. 

6. Take your design to designers and/or co-design sessions

I didn’t treat the output as final. Instead, I shared it early and often:

• I gathered feedback from designers I work with
• I brought it into a co-design session
• I reviewed it with the team responsible for the product

Through these discussions and more iterations, we arrived at a solid and testable concept.

What I have learnt during vibe-coding 

What worked well: 

1. It’s easier than it seems
One of the biggest surprises was how quickly ideas could be translated into something tangible. Within minutes, I could make changes, and within a few hours, I had a complete concept ready for review.

2. It’s fast and to be honest, genuinely enjoyable
Although I initially felt intimidated by the task, the process turned out to be engaging and interactive. The speed of iteration made it easier to explore different directions without overthinking each step.

3. Usability testing was more seamless
Having a fully functional prototype made testing smoother in this case. Interactions worked as expected, which allowed participants to engage with the concept more naturally.

What was challenging:

1. High number of iterations
AI-generated outputs can be unpredictable. Achieving the imagined result often required multiple iterations, with lots of back-and-forth adjustments.

2. Limitations in mobile testing
At the time, testing on mobile devices was not entirely reliable. While performance seemed stable on some Android devices, results varied on iOS depending on the version. (This may have improved since, but it was a limitation during this project.)

3. Exporting Figma Make designs to Figma design files
When realising mobile testing is not reliable, we wanted to find solutions how we could still test the mobile design. One step was to try and export Figma Make designs into Figma design files and create a prototype there. However, transferring designs from Figma Make into standard Figma files was not seamless. Layouts and elements could break during the process, making it less suitable for usability testing.

Despite these challenges, one principle remained important throughout: the goal is to test ideas and concepts, not to deliver final design solutions.

After creating the concept

Once the concept was ready, the next step was to validate it. Since the goal was to gather insights, I conducted moderated usability testing on the prototype. Testing something I had created myself was a new experience. It gave me a much deeper appreciation for the work designers do, especially when it comes to receiving and processing feedback.

Hearing participants reviewing the concept was not always easy. However, it was really valuable. Overall, the concept was well received, and the sessions provided clear direction on what worked, and what didn’t. 

With these insights in place, we were able to move into the actual design phase. By that time, a designer had capacity again and could take over, translating the validated concept into a refined, production-ready solution.

And what happened to the original concept and research?

After handing over both the concept and the insights, parts of the solution have already been designed and implemented and are now live.

As for me, the experience pushed me outside of my comfort zone and gave me the opportunity to develop a new skill, something that initially felt scary, but ultimately proved to be both enjoyable and rewarding.

What has happened since? 

Since working on that initial project, I’ve had the opportunity to use Figma Make in several smaller initiatives, primarily to support testing of concepts created with the tool.

One of the most interesting use cases, however, was during an ideation phase for a new entry point for an AI-related solution the team had been exploring. In this context, I approached Figma Make less as a design tool and more as a generative partner, similar to how I would use an LLM.

I prompted it to generate multiple potential entry points for the feature. As an output, it created a range of ideas, and also structured them interactively within a single design. It created clickable elements that allowed me to navigate between different concepts in one place.

For me, this was a shift in how I perceived the tool. Previously, I had seen Figma Make primarily as something for execution helping to translate ideas into visual concepts. Using it for ideation had not really occurred to me, until this point. 

This experience changed how I see the tool. It encouraged me to use Figma Make not just for creating concepts, but also for communicating my recommendations more clearly coming from the research I conduct. By visualizing ideas, I believe, I can better support designers and make my insights easier to understand.

What’s next

Honestly, I don’t fully know.

But I do know that:

• I’m more open to vibe coding than I was before
• I’m less hesitant to try new tools or learn new skills
• I feel more confident stepping slightly outside my role

At the same time, in my mind, one thing hasn’t changed: designers are still essential.

What I created was a concept. A starting point. A way to move faster and test earlier. But great design still requires expertise.

Vibe coding didn’t turn me into a designer, but it made me a better collaborator. And I start to think that maybe that’s the real opportunity here as a UXR professional.

And here, on our blog? We will keep sharing practical examples, lessons learned, and evolving best practices. Subscribe to get a monthly newsletter with our latest posts! 

What to read next: A designer's journey into coding agents and how it reshaped the way we work