🚀 Building a Backend Platform Prototype with AI - Figma Make
10/06/2025 - This article was originally posted on LinkedIn.
Since then, Figma Make has continued improving its AI features and tools — including connections between Figma Make projects and design files directly within Figma.
——-
Over the past 2 weeks, we set out to quickly build a backend platform for our existing e-commerce frontend website. Our goal: streamline product, contract, hero photos, and order management while experimenting with Figma Make (AI tools by Figma) can accelerate design-to-code workflows.
📌 What we prepared before starting:
A PRD (Product Requirements Document) — defined by AI, refined by us
(p.s. A Figma design file also works well as input for Figma Make)
✅ What we achieved:
We produced an interactive platform (4 key modules):
1️⃣ Order Management – search, filter, customer details, contracts & files
2️⃣ Product Management – create, edit, activate products, adjust orders
3️⃣ Contract Management – create, edit, delete contracts
4️⃣ Hero Image Management – upload, arrange, edit hero images
This covered design, navigation, and interaction in just 2 weeks. The AI-generated code was later refined in tools like VS Code and Cursor.
💡 What we learned about AI in design-to-code:
Good:
Directly generate interactive versions from PRD/Figma → saves frontend development time
Rapid visual style swaps → sparks design inspiration and saves design time
Editable AI code → allows flexible iterations
Designers gain more control over real product interaction, testing flows directly without being blocked by technical restrictions
⚠️ Challenges
As I experimented with the whole process — directly designing and vibe coding through Figma Make — here are a few challenges I encountered:
AI agents sometimes hallucinate → layouts or interactions may change unexpectedly, even when no such instruction was given
Previous fixes can get overwritten after making new changes → which means work can be lost if not backed up manually
It's hard to merge AI-generated designs with manually created ones
Hard to merge AI-generated design with our own manual design
🧩 Essential Features Still Missing
🔁 Reliable redo & version save
While Figma Make does have a redo button that lets creators go back to a previous version, it doesn’t always show the correct result after manually editing the code — unlike code editors such as VS Code or Cursor. It costs extra time and effort for creators to prompt the AI and wait for the agent to make minor changes.
🔄 Easier mix of AI + human-created design
It would help if the code output could also generate a Figma file — similar to an early “stitch” design. That way, designers could rework the design directly in Figma and feed it back into Figma Make. (Cursor handles this by providing a Figma link through MCP to update designs directly.)
🛡️ Stronger guardrails to prevent unwanted changes
Sometimes, the AI modifies layout that are already finalized — even when explicitly instructed not to change them. If we could lock or save certain versions and clearly instruct the agent not to overwrite finalized designs, it would be much more helpful.
🔍 Why Evaluation and Control Matter
During the redesign process, I sometimes experienced situations where I told the AI not to change certain regions or features that I had already manually updated. I only allowed adjustments in specific parts, yet the AI still altered other areas — and even responded that it had followed the instructions.
The result: unintended layout changes or a completely different structure.
After reading the “Agent” chapter by Chip Huyen, I found something that really clicked: she mentioned one of the causes of planning failures is “errors in reflection — where the agent is convinced it’s accomplished a task it hasn’t.” That was exactly what I saw. It made me realize: Figma still need better improvement to evaluate the results generated by their AI agents.
💡 Tip from Experience
As I was recording the final result, I noticed the version I had finalized had changed unexpectedly — a reminder of why it’s important to save a local copy as a finished version.
I highly recommend exporting the code to a local editor (like VS Code or Cursor) to avoid surprise changes. Thankfully, I had already passed the final version to our frontend RD and saved a copy on my computer.
👉 Curious to hear from others:
How do you handle AI hallucination during co-working with AI — especially when we already know it may alter things we didn’t allow, and still respond that it “followed our instructions”?
🚀 Final result:
The final result was refined after two weeks of collaboration with our internal team.
