Building Prototypes with AI - Figma Make Live Demo

Tired of dragging prototype noodles around Figma? This hands-on demo shows you how to build interactive, clickable prototypes using AI—complete with animations, hover states, and real functionality—all in a fraction of the time. In this presentation from Startup Wisconsin Week, Brianna Shappy (Design Lead at Headway) walks through her complete AI prototyping workflow using Figma Make. You'll see a live build of an Instacart search experience, including the exact prompts used, mistakes encountered, and how to integrate your design system for better results. No theory—just real examples of what works and what doesn't. Key Topics Covered → Essential AI terms every designer should know (LLM, AI agents, MCP) → Tool comparison: Figma Make vs Cursor vs Claude Code → Live demo: Building an interactive Instacart search prototype → How to prep Figma files and integrate design systems → Crafting effective prompts for AI prototyping tools → Handling errors, inconsistencies, and AI limitations → When to use AI prototypes with clients and stakeholders → Code quality considerations for developer handoff → Real use cases: client demos, user research, team collaboration → Desktop vs mobile limitations in current AI tools → Q&A: Team workflows, production integration, troubleshooting ✦ About Brianna Shappy ✦ Brianna Shappy is a Design Lead at Headway with 15 years of experience working with startups and enterprise organizations. She's led global design teams and specializes in building B2B SaaS applications and mobile experiences. Headway's design system (Shipwright Pro) is available on Figma Community. Segments: 00:00 - Intro: AI Workflows for Designers 02:02 - About Brianna & Headway 03:10 - Key AI Terms: LLM, AI Agents, MCP 05:58 - Tool Overview: Figma Make 06:44 - Tool Comparison: Figma Make Pros 08:36 - Tool Overview: Cursor 10:33 - Tool Overview: Claude Code 12:24 - Demo Setup: Instacart Example 14:32 - Prepping Figma Files & Components 17:01 - Connecting Design Systems to Figma Make 18:52 - Layer Naming Best Practices 21:13 - Starting the Prototype Build 23:57 - Crafting Effective Prompts 26:32 - Iteration: Fixing Issues & Adjusting 31:10 - Demo Results & Troubleshooting 37:28 - Limitations of AI Prototyping 40:04 - Use Cases: Client Demos & User Research 43:20 - Recap & Key Takeaways 44:11 - Q&A: Code Quality & Developer Handoff 49:01 - Q&A: Design Systems & Workflow Integration Connect with Headway: Website: https://headway.io #aidesign #figma #aifordesigners