Learning Timeline
Key Insights
Benefits of Exporting via AI Studio
This is the simplest way to get a website up, as the AI handles rebuilding the code structure based on your design's visual layout without requiring manual coding.
Export Format Flexibility
In addition to AI Studio, you can export to native Figma formats if you are a designer, or bring the code to other AI tools like Claude or ChatGPT for further editing.
Step by Step
How to Export Your Design to a Live Website
- Go to the top-left corner of the screen and click on 'Prototype' mode.
- Click the 'Export' button located within that menu.
- Select 'Build with AI Studio' from the list of available export formats.
- Wait for the import process to complete, during which Google AI Studio will automatically pull all your design's code and visual elements.
- Click the confirmation button in Google AI Studio (e.g., 'Build' or 'Publish') to rebuild the application and make it live on the internet.
- If you only want to share a preview, click the 'Copy Link' function to get a link that others can open in various views.
