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

Видео Building Prototypes with AI - Figma Make Live Demo канала Headway