Config details. Lovable + Builder.io. Figma as a draft.
What’s New
A first look at Config 2025: Two cities, one global community
If you’ve been waiting for more details to start planning your trip to Config 2025, now is the time. Azra Daniels, Director of Events at Figma, gives a first look at what the team is building for the community on both sides of the Atlantic. The conference will kick off on May 6 at Config Commons near Moscone Center in San Francisco, where you can grab the badge and meet other attendees. To avoid long registration lines, partner hotels will offer multiple check-in locations. 50+ sessions will take place in multiple tracks on May 7 and 8. The Maker Space will feature a dedicated stage where community leaders showcase their latest work. Config will continue in London the following week for a one-day event with 10 sessions.
Using Figma
Turn Figma Designs into Full Stack Apps Using Lovable and Builder.io
The new Lovable and Builder.io integration lets you turn Figma designs into full applications. Lovable is a full-stack AI software engineer and editing environment. It’s designed to let you quickly create and iterate on your projects so you can move from an idea to a real application, deployed live, without wrangling complex tools or environments. AI-Powered Figma to Code is Builder.io’s toolchain that 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.
So, by using the integration, you can convert Figma mockups into code with Builder.io and then open them in Lovable, where you can add new functionality or connect it to the real data from Supabase. Soon, you’ll be able to update your app in Lovable whenever designs change in Figma. AI will merge the design changes while keeping all your custom code intact. (Unrelated, this combo was most recommended in answers to this question about the best AI tool for turning designs into a website.)
Figma as a draft
Fons Mans now uses Figma mostly to translate ideas onto the screen quickly, then switches to a tool that lets him build or create the final product or visual. Cameron Moll also follows this approach.
It works really well when the designer is involved in the implementation. Figma is a fantastic tool for quickly exploring different directions, but after reaching an alignment, it’s time to polish the final version of the product, not its image. I was frustrated by wasting time whenever I spent hours prototyping an elaborate but disposable interaction in Figma. Modern AI tools make this final iteration even more accessible to less technical folks. That said, in most organizations, designers still can’t touch code — either that will change, or the final polish will still be happening in Figma for quite some time.
Opacity
Luis considers using opacity to decrease the volume of variables in the design system.
Made in Figma
Goldfish bowl pill
Blows my mind that this is made in Figma. See other cool experiments in Lee Black’s X profile.
Resources
FigUI3
Rogie King made a lightweight, customizable web component library that uses Figma’s UI3 style. Great resource for making plugins!
Tailwind v4.0 Colors
Marcus Farrell prepared a community resource with the new P3 color library used by Tailwind 4.
Plugins
Generative Gradients
Create complex gradients using simple tools such as color, radius, positioning, blur, and distortion.
Backstage
Designing The Future
Patrick O’Shaughnessy from the Invest Like The Best podcast interviews Dylan Field, covering “the hardest part of building in private, his principles for avoiding common design pitfalls, and why human creativity is still as relevant as ever despite the growing capabilities of AI models.”