This article walks through a design sprint at a fictional cooking app (Trivet) using Figma's AI tools and interactive prototyping to optimize a referral program banner.
- •Three UX directions were tested: a modal with glass/blur effects, an in-feed card with a vectorized hand-drawn illustration, and a full-screen overlay with AI-extended photography
- •Figma AI tools (Remove background, Vectorize, Erase object, Expand image) were used to adapt assets directly within the design surface
- •Figma Make converted designs into interactive prototypes quickly using shared templates with built-in styles and structural guidelines
- •Prototypes were embedded in FigJam for collaborative critique, enabling behavior-based feedback rather than purely visual reactions
- •The workflow demonstrates an integrated path from problem to production using Figma Design, Figma Make, Dev Mode, and Figma MCP
Figma Blog | Shortcut