Weeks → days: a case for expert-led, AI-driven design engineering

First, here’s what we ended up with:

Let’s look at a few basic tasks and see exactly how AI tools helped the project team save time.

Task 1: picking the right chart type with Gemini

The client shared a Google sheet with around 100 rows of data and asked for ideas on how to visualize it. Normally, I’d open Figma, grab a few sample points, and mock up charts manually.

The client was open to creative approaches and asked for a few alternatives beyond a standard bubble chart. That meant simply mocking up charts with a handful of data points wouldn’t give us a clear picture of how each chart type would work with the full set. So, this time I realized I needed to work with the full dataset from the start.

Problem: Working with 100 data points in Figma would take a lot of time.

The designer’s solution: staying in Figma and draw everything by hand.

The design engineer’s solution: there are better tools for testing chart ideas.

To sketch some options, I turned to Jupyter Notebook and Google Colab, which are tools that let you upload a dataset and work with it using Python code. These platforms also support data visualization libraries like Matplotlib and Seaborn.

Problem: Although I know Python, I’m not very efficient with Matplotlib or Seaborn.

Solution: instead of learning the libraries from scratch, let an LLM guide me.

To my surprise, when I opened Colab, I saw that Google had already integrated Gemini—I didn’t even need to switch to my ChatGPT macOS app. Very cool!

I uploaded the CSV to Colab and used the built-in Gemini to generate a dozen different chart types. I even did some work on branding: I uploaded a color palette from the client’s brandbook and asked Gemini to use them across all plots. Once I was done, I simply shared the Colab file with the client as a starting point for our discussion.

How time was saved:

• To create dozens of charts would’ve taken a few days of manual work in Figma.
• Even though I can code in Python, it would’ve taken a couple of extra days to get comfortable enough with Matplotlib or Seaborn to manually create this many visualizations.
• Switching to the right tool for the task and using an integrated LLM allowed me to get a dozen of chart ideas in hours, instead of days.

Another bonus: working with the full dataset helped us make better design decisions early on. Since generating charts was quick and easy, I even tested a few bold chart types I’d never bother coding manually.

Task 2: automating Figma with ChatGPT

I then moved to Figma for the visual design. We chose a bubble chart, and I spent a few days fine-tuning data point layout and prototyping basic interactions.

Problem: I still needed to work with the full data set.

Working with a hundred circle objects on a timeline presented me with a few tasks that weren’t obvious at first glance.

For example, I once needed to proportionally redistribute the whole plot. I had a group of data point components which were circles of various sizes. Since we wanted to reduce the overlappings of the bubbles, I needed to expand the timeline width and proportionally expand the space between the bubbles to keep them matched with their place on the timeline.

The problem here is that, although Figma allows you to get proportional redistribution for objects in a group, it’s hard to make bubbles keep their precise position on the timeline.

Another example: I first had bubbles of one size before we then decided to make them different sizes. In this scenario, the size of a bubble would encode the amount of investment. But then, a week later once we’d actually decided against this idea, I was faced with the opposite task: making a hundred differently-sized circles the same size.

The nuance of bulk resizing is that the anchor points for objects in Figma are always upper left corners, but to keep the position it would be better to have the anchor point in the geometrical center of every bubble.

The designer’s solution: resize manually or reduce the data set.

The design engineer’s solution: scripting.

Figma provides a plugin ecosystem so everyone can run code over all (or only the selected) elements within a page. There’s also a cool plugin, Scripter, made by Rasmus Andersson, that allows running code without extra setup for arranging it as a separate plugin.

So I used ChatGPT to write scripts with the Figma API and ran them using the Scripter plugin over the bubbles in the chart. One script pixel-perfect-precisely redistributed all of the data components, thus addressing the first example. Another helped to bulk resize while keeping the bubbles’ positions unchanged.

How time was saved: over my career I’ve built around ten plugins for Figma and various design editors. I know the dev flow. Each script would’ve taken an hour or two to code and debug manually. But with ChatGPT, I got working scripts in minutes. Wow!

Bonus: Figma’s AI assistant can now autofill component props from simple data. I used it multiple times to fill out years every time I was redesigning timeline. Super handy!

Task 3: prototyping interactions with Bolt.new

Once we figured out the visual part of the diagram, the time came to enrich the interactivity—to make the diagram stand out while helping the user grasp the story behind the diagram.

Problem: how to design advanced interaction ideas?

Figma provides a pretty powerful prototyping engine. However, when you need to explore interactive ideas beyond moving through a screen flow or showing a popup, we need a more advanced tool. So I turned to Bolt.new.

During the project kickoff, we got the requirements for tech stack: the result should be a Vue component that fetches data via an API. Accordingly, my first prompt to Bolt.new was about setting up a Vue app and pulling mock data via API; I wanted to make sure that I’m building something that would (at least partially) align with where a frontend engineer would start their job. Looking back, I should note that was a key move in terms of saving time.

How time was saved: I used Bolt.new for two tasks. One was creating a real-life demo of the design that I had made in Figma and the other was exploring interaction ideas on top of that demo. The first task took 2 work days, the second 2 more days. Even though I’m familiar with Origami Studio and I could code a demo manually, honestly, I wouldn’t have gotten close to the amount of work I did with Bolt.new.

Task 4: handoff to a frontend engineer

Here’s the best part: when the frontend engineer joined, she started by… copying the code from my Bolt.new prototype! Many parts of the code were so good so it made perfect sense just to take them.

Our team shipped the v1 in 4 days, but we all acknowledge that without the demo that was created in Bolt.new, we definitely wouldn’t have finished that within 4 days.

Wrapping up

The v1 took 4 weeks, including a 3-week design sprint. And, good heavens, thanks to AI, the project team was able to:

• Kick off discussing a dozen plot types
• Explore more ideas in a shorter time and make better design decisions
• Ship meaningful updates twice a week
• Save weeks of work in total

After 15 years in product design, I’ve never felt this capable. AI didn’t just speed things up—it raised the bar.