Figma to Lovable Review - Testing the New Import Feature
Going from Figma to code has been a massive pain for, well, quite a while now. Before Figma, it was Sketch to code, and before that, Photoshop to code. The tools change, but the headache remains the same.
Lovable's been hyping up their new Figma import function lately, so I thought I'd give it a proper test. Let's see how it handles different designs and if there are any tricks to make it work better.
Quick Overview
The import process is surprisingly straightforward - just three steps that pop up when you hover over the import button. I've got the plugin set up, so let's dive into some testing.
Testing Three Designs
Design 1: Keeping It Simple
Started with a basic design - nothing fancy, not much auto layout. The plugin gives you two options: easy and precise. Easy mode is more flexible and works with most designs, while precise mode needs your Figma file to be properly set up with components and auto layout.
What's nice is you get multiple versions to pick from, including a mobile layout. The first test was actually pretty spot on - the preview matched our design well, everything was responsive, and you could easily edit elements in Lovable. Solid start.
Design 2: Adding Complexity
The second design had a bit more going on - more moving parts, some auto layout elements. Hit a small snag initially, but that's where having multiple variations really helped. Even with low auto layout usage, easy mode produced decent results. Takes a bit of time to process, but considering how much time it saves overall, can't really complain.
Design 3: The Tesla Dashboard Challenge
Thought this one had loads of auto layout - turns out it didn't. Went with easy mode again, and well... the results were interesting. Not the best output we've seen, but it maintained some resemblance to the original.
What Works Well
The ability to choose your preferred version is brilliant. Actually, more AI tools could learn from this approach. Instead of waiting ages for one result that might disappoint, you get options. Much better user experience.
The workflow integration is quite nice too - you can take a Figma file, create the component in Lovable, then bring it into your main project in Cursor or WindSurf.
Room for Improvement
Does it completely solve the Figma to code problem? No, not yet. But it's a solid step forward, and these tools are only going to keep getting better.
The Verdict
After spending some time with it, I'm genuinely impressed. Through trial and error, you'll get better results as you adjust how you set up your Figma files. For quick component creation or simpler designs, the easy mode works surprisingly well.
I can see myself using this going forward, especially for specific components or simpler layouts. It's not perfect, but it's a useful addition to the toolkit.
If you found this helpful, check out the newsletter link in the description for more content like this. Cheers!