# Bridge the design to development gap with Builder.io and Firebase Studio

DevFeed: [Bridge the design to development gap with Builder.io and Firebase Studio](<https://devfeed.tech/articles/bridge-the-design-to-development-gap-with-builder-io-and-firebase-studio-16628.md>)

Original publisher: [Read original article](<https://firebase.blog/posts/2025/09/firebase-studio-builder-io-design-development>)

Author: Kirupa Chinnathambi; Alice Moore

Published: 2025-09-29T00:00:00Z

Content type: article

Language: en

Sources: [Firebase Blog](<https://devfeed.tech/sources/firebase-blog.md>)

Topics: [Firebase](<https://devfeed.tech/topics/firebase.md>), [Figma](<https://devfeed.tech/topics/figma.md>), [Artificial Intelligence](<https://devfeed.tech/topics/ai.md>), [App](<https://devfeed.tech/topics/app.md>)

Tags: [ai](<https://devfeed.tech/tags/ai.md>), [code](<https://devfeed.tech/tags/code.md>), [design](<https://devfeed.tech/tags/design.md>), [development](<https://devfeed.tech/tags/development.md>), [figma](<https://devfeed.tech/tags/figma.md>), [firebase](<https://devfeed.tech/tags/firebase.md>), [firebase-studio](<https://devfeed.tech/tags/firebase-studio.md>), [gemini](<https://devfeed.tech/tags/gemini.md>), [integration](<https://devfeed.tech/tags/integration.md>), [workflow](<https://devfeed.tech/tags/workflow.md>)

## AI overview

Firebase Studio integrates with Builder.io to connect Figma designs with code through an AI-assisted, browser-based workflow. The article explains how the integration aims to reduce design drift and generate production-ready, backend-connected applications by reusing structured design information such as tokens, components, and layout rules.

## Source excerpt

Bridge the gap between design and development by going from static visuals in Figma to a fully working application in Firebase Studio.