Turning Figma into full stack apps - Blog

Turning a Figma design into a fully functional web app might sound like a fantasy … but with today’s AI tools, it’s already a very real possibility.

Steve Sewell, CEO and co-founder of Builder.io, joined us for a deep dive into how his platform seamlessly transforms Figma designs into full-stack applications. We saw how Builder.io is revolutionizing the design-to-code workflow, bringing in AI and automation to make the process faster, smarter, and more scalable.

If you’re a designer frustrated with the back-and-forth of handing off designs to engineers, a developer looking to streamline your workflow, or a product team needing greater agility, this workshop is a must-watch.

Here’s a taster of what Steve covered for us:

Builder.io: Solving the design-to-code bottleneck

At ShopStyle, where Steve led web engineering, the marketing team constantly needed new landing pages, A/B tests, and personalized experiences. But engineering backlogs meant even small updates took weeks.

“We had this totally bespoke tech stack,” Steve explained, but the team was always frustrated. The engineers didn’t understand the point of some of the changes that resulted from A/B testing, like adjusting button color.

Steve’s team turned to Webflow and built a page for themselves. Unfortunately, it wasn’t compatible with ShopStyle’s website. As Steve explained:

“They came to me and they're like, ‘Hey, we made this page, you don't have to make it. Can you just put it in the ShopStyle site?’ And I unfortunately had to explain, you can't just embed one website in another. A webflow site doesn't just plug into our ShopStyle site.”

But it was clear the marketing team needed a tool that let them build their own pages, freeing up the engineering team to “do more fun, challenging engineering stuff” rather than just changing colors on the website.

That insight led to Steve quitting his job and creating Builder.io: a headless, visual development platform that integrates seamlessly with any tech stack, allowing teams to build and edit directly in their existing codebases.

Once large language models like Anthropic Claude came on the scene, Builder.io was able to integrate with these and offer a drag-and-drop design system alongside prompting, so users could build any interactive elements they wanted.

From Figma to code: How it works

Steve walked us through a live demo, showing just how seamlessly Builder.io converts Figma designs into fully functional, editable code. Here’s how it works, step by step:

Step 1. Import the design

Bringing a design into Builder.io is as simple as selecting a Figma frame. Steve demonstrated how the platform instantly pulls in a Figma file, preserving its structure and styling.

“Sometimes, we’ll give you warnings,” Steve noted, explaining that Builder.io works best with Figma files that follow best practices like auto-layout. Even if a design isn’t fully optimized, the system can still process and convert it efficiently.

Step 2. Automatic conversion to structured code

Once imported, Builder.io analyzes the design and generates clean, structured code. Unlike other design-to-code tools, which often produce rigid, uneditable output, Builder.io creates fully functional components that developers can modify and reuse.

Steve highlighted how Builder.io uses “a tech agnostic visual editing system” and how it has “a couple different code output modes” to allow as much flexibility as possible.

Step 3. AI-powered, real-time edits

Once the code has been created, it can be edited via a GUI (drag-and-drop interface) or through AI prompting. Users can:

Visually edit layouts, colors, and content using an intuitive drag-and-drop editor
Use AI to make functional updates—for example, connecting a table to a live API with a single prompt
Modify the raw code if they prefer a developer-first approach

Steve gave a live example by selecting a placeholder element in the UI and simply prompting the AI to “replace this with a table of our users.”

With just that instruction, Builder.io instantly created the table, drawing on a custom API that it knew Steve had. With the additional instruction to “Make these buttons work”, Steve could add pagination buttons.

Builder.io offers seamless integration with existing workflows

Unlike standalone no-code tools, Builder.io can reuse what you already have, working with the code you’ve got.

Steve demonstrated a live code update workflow:

After finalizing a design update in Builder.io, he exported the latest version to his codebase with a single CLI command.

Instead of regenerating everything from scratch, the system only applied the necessary changes—preserving existing components and logic. As Steve explained, “it's going to go in piecemeal [and] figure out what is the minimum set of updates it can do.”

The modified UI appeared instantly in his live development environment without breaking any functionality.

Wrapping up

Steve’s energy and passion for making design-to-development seamless were infectious. Want to see it for yourself? Watch the full recording of Steve’s demo (available to Pro Ben’s Bites members).

Liked this post? You may be interested in these: