January 28th, 2025

Figma to Lovable and other small improvements

Figma to Lovable: Turn Designs into Code in Minutes

We’ve partnered with Builder.io to make turning Figma designs into fully functional apps seamless.

Reminder on how it works:

1. Design in Figma using Auto Layout.

2. Use the Builder.io plugin to select your design.

3. Click “Open in Lovable” to instantly generate your app.

4. Enhance and customize your app with natural language prompts in Lovable.

This integration bridges the gap between design and development, helping you build and ship faster.

See the full announcement here: https://x.com/lovable_dev/status/1882102791960977785

Other small improvements

We’ve made several updates to enhance functionality, reliability, and ease of use:

  • We’ve improved the visibility of reverts in the interface after discovering users weren’t aware they could easily revert to a past working version.

  • Lovable’s support for Replicate has improved. It now uses the Replicate Node package and unversioned models, ensuring smoother integrations and better scalability. To test, try something like : “Use replicate to generate image from the text provided by the user.”

  • Support for Resend has been enhanced with the transition to the Node SDK. Additionally, Lovable now supports React Email, making it easy to design email templates using React components.

  • When creating signup and login flows, Lovable no longer defaults to deprecated auth packages. Instead, it builds custom authentication UIs tailored to match your app’s design, while also simplifying the addition of optional attributes. Try this for example: “Create a custom signup form with an optional "username" field”

  • Managing roles in a Supabase-powered application is now more reliable, as Lovable follows best practices to avoid circular RLS (Row Level Security) issues. Example prompt: “Set up an admin user role that should be able to edit projet.”

  • Lovable now supports building on top of Realtime OpenAI using RTC (Real-Time Communication) for faster, more reliable interactions. Example prompt: “Create a real-time chat interface using OpenAI’s Realtime API with RTC for live message updates.”