Firebase Studio offers a streamlined way to import existing web app projects into a Firebase Studio workspace, letting you continue to work on your existing projects with Firebase Studio's AI-powered assistance and streamlined development, deployment, and monitoring capabilities.
You can import projects from a source repository (GitHub, GitLab, or Bitbucket), from Figma with the Builder.io Figma plugin, or from a local archive file. Firebase Studio supports importing gzipped tar files and zip files under 100 MiB.
You can also duplicate an existing project to create a copy of it.
Get started
If you use the Builder.io Figma plugin, you can automatically generate code (React, Next.js, and Tailwind CSS) from your Figma designs and import it directly into Firebase Studio.
To convert a Figma design to code and export to Firebase Studio:
Open your project in Figma and, after installing the Builder.io Figma plugin, select the Builder.io plugin from the Plugins menu.
Select the components you want to export to Firebase Studio and then click Export design.
When the plugin finishes generating code, click Open in Firebase Studio.
In the Firebase Studio import dialog, add a name for your workspace and click Import.
Firebase Studio launches and, after your workspace loads, your generated code and UI elements appear and you're ready to continue iterating on your app in your Firebase Studio workspace.
Learn more about the Builder.io Figma plugin at Import from Figma.
Next steps
- Learn more about Firebase Studio workspaces.
- Customize your Firebase Studio workspace.
- Discover how Gemini in Firebase can assist and accelerate your app development with its ability to help answer questions, generate and edit code, fix bugs, and run tools.
- Turn your project into a custom template.