Import Google AI Studio-Generated Pages to Figma

Google AI Studio offers two common ways to generate pages, Chat and Build, with a matching import method for each:

Method 1: Download an HTML file from an AI Studio conversation and import it directly

Generate and preview a page in Google AI Studio Chat, then download the HTML file and import it through the plugin:

1. Follow the prompts in Google AI Studio Chat to generate a page
2. When the page is ready, open the preview, then download and save the HTML file
3. Open the plugin in Figma and switch to the AI-Generated HTML tab
4. Drag the downloaded HTML file into the plugin
5. Click the Interactive Import button and check the page preview
6. Click import — done

For more details (multiple files, Interactive Import, etc.), see Import AI-Generated HTML Pages to Figma.

Method 2: Capture and import pages generated with AI Studio Build

This mode usually generates a complete frontend project, so you cannot obtain a complete HTML file and import it directly with the Refore HTML to Figma plugin. Use the browser extension to capture the page before importing it.

Google AI Studio Build can generate interactive apps with multiple pages. Open and capture each page you need, then import them together from the plugin:

1. Open Google AI Studio Build and enter a prompt to generate an interactive app
2. When the app is ready, open the corresponding preview page
3. Open the Refore HTML to Figma browser extension and capture each page
4. Open the Refore HTML to Figma plugin in Figma and switch to the Captures tab
5. Select the captured pages and import them