AI Studio Build Mode

Figma to Interactive Prototype with AI Studio

Ammaar Reshi

Developer Advocate, Google AI Studio

30 minutes to 1 hour

Beginner

FigmaGoogle AI StudioGemini

Learn how the Google AI Studio team uses their own tool to go from Figma designs to interactive prototypes in minutes, enabling rapid iteration and user testing before committing to full builds.

Open in YouTube at 4:37:43

Prerequisites

Figma account with designs
Access to Google AI Studio
Basic understanding of UI/UX concepts

Build Steps

Create Your Design in Figma

Start with a basic Figma design of your UI. The Google team was exploring a new AI Studio homepage with an omnibar, recent builds, and charts. Figma helps you think through the layout but can only go so far.

Screenshot and Paste into AI Studio

Copy a screenshot of your Figma design and paste it directly into AI Studio's build mode. For more precision, use the Figma plugin that exports JSON with exact styles, typography, and colors.

Code

// Two methods:
// 1. Simple: Screenshot + paste
// 2. Precise: Figma plugin exports JSON with exact styles

Prompt for Interactions and Edge Cases

Ask AI Studio to add interactions and handle edge cases. Ammaar asked 'What does the new user experience look like?' and it generated a complete flow he hadn't designed yet.

Build Interactive Prototypes

The result is a fully interactive prototype - Ammaar's new homepage let users click into features, pick models, create API keys, all simulated but feeling real. Great for user testing before building.

One-Shot Complex Apps

For more ambitious projects, you can one-shot entire applications. Logan demonstrated a multiplayer FigJam clone built from just 'make me this app' - including real-time collaboration where everyone on the stream could join.