Step-by-Step guide : Loveable.dev + Builder.io + Figma
Lovable.dev has partnered with Builder.io to launch a feature that directly converts Figma design right into Lovable. This step-by-step guide will help to use this integration along with my feedback.
Introduction
Lovable.dev has seen a significant rise over the last few months. I have tried it and used it and I must say it’s pretty awesome!! If you haven’t heard about Lovable.dev, below is a short brief about it.
Lovable.dev
Lovable is a full stack AI software engineer and editing platform to build your end-to-end application with only prompts. It offers you the flexibility to build the application in Nextjs or react and connect to a backend database - Supabase. Once you are satisfied you can publish it to the world or connect to github , or build more with Cursor or Windsurf
Builder.io
Builder.io is a visual development platform that integrates with Figma to translate the designs to code. It’s AI-powered Figma to code toolchain leverages AI models to convert Figma designs into React, Vue, Svelte, Angular, HTML, etc code in real-time. It can even reuse your existing components in the output and use any styling library or system you need.
Evolution of AI Powered - UI Platforms
My favourites have just been changing every time an amazing tool is just getting shipped. This is how my journey in UI development has changed
Claude—>V0.dev—>bolt.new—>lovable.dev
Each tool brought something new, making it exciting to witness how AI is transforming UI/UX workflows.
The Challenge: Converting Figma Designs to Code
Despite these advancements, one major challenge remained:
Replicating Figma designs into code seamlessly.
Most of the time, we paste screenshots and then ask the model to replicate. They were good but not a replica. They were a bit far from perfect.
V0.dev had launched a Figma integration in their paid plan, I couldn’t try it though. From the videos online it looked good but not great!!
I have tried to get my hands dirty on this one and would like to share my step-by-step guide. Does it stand out or bites the dust?
If you haven’t read my previous blogs, do check them out :
Step-by-Step Guide: Converting Figma Designs to Lovable.dev
If you want to streamline your UI development workflow, follow this guide to convert your Figma designs into a functional app using Builder.io and Lovable.dev.
Step 1: Open Your Figma Design
Open your own design or choose any design from the Figma Community that has a good web design, homepage, or dashboard.
Open it in Figma.
I have selected this for testing: https://www.figma.com/community/file/1156860863353724933/whitepace-saas-landing-page
Step 2: Use the Builder.io Plugin
Go to Figma Plugins and search for Builder.io.
Install and open the plugin.
Log in to Builder.io (or create an account if you don’t have one).
Step 3: Export the Design to Code
Click on the Frame you want to convert.
Click on the Actions button in the bottom navigation.
Select Builder.io → Export to Code.
Wait for the AI to generate the code.
Step 4: Open the Design in Lovable.dev
After the export is complete, click “Open in Lovable.dev”.
Watch the AI transform your Figma design into a functional UI.
Step 5: Review and Refine the Output
Examine the generated code.
Use Lovable.dev’s AI editing features to fine-tune the layout and styling.
Connect it to a backend (if needed) and deploy.
Final Output & My Review
The overall process and integrations between Lovable.dev and Builder.io and Figma is pretty good. I initially faced challenges with generation of code by the Builder.io framework but later it started performing fine.
The final output is not what the original design was however, with a couple of prompts we could get the design sorted.
Pros of the Integration
✔ Simplifies UI development with AI-powered automation.
✔ Supports multiple frameworks (React, Vue, Angular, etc.).
✔ Allows further editing using Lovable.dev’s prompt-based development.
Challenges & Limitations
❌ Struggles with large or complex landing pages.
❌ Doesn’t always capture all design elements accurately.
❌ Initial code generation can be inconsistent but improves with tweaking.
AI is rapidly evolving, and I’m confident that these tools will refine their output over time. While Builder.io is a great bridge, Lovable.dev’s prompt-based approach ensures further customization.
Reference: Official Company Video
I’m sharing the official company video here along with launch blog for more insights into the process.
Do check out and share your thoughts.