Prototype Playfully
summary
Hands-on walkthrough of prototyping inside Figma that shows exactly what gets built and how it behaves: uses smart animate, component instances, masks, variants and interactive components wired with after delay to tween frames; students collaboratively assemble an ABC book and dozens of mini labs in two to three hours; demos include a clickable shutter made from component pieces that opens and closes, GIFs and drag-driven shelves, and a published component library — all working live in the shared file.
AI-written summary · about
chapters (16)
- 0:00Start
- 0:43Prototyping
- 4:24Smart Animate
- 6:38Animated Gifs
- 11:50Student Examples
- 18:13Interactive Components
- 23:21Create a Frame
- 30:47After Delay
- 33:20Change the Background Color
- 33:32Prototype Mode
- 35:02Create a New Page
- 39:33Design Mode
- 44:55Is It Possible To Make One Component Change Shapes
- 51:30How To Add an Asset to a Project
- 52:59Publish Styles and Components
- 58:06Combine as Variants
related talks
38mCreating Powerful Prototypes with Figma
23mPrototype Everything
23mProtoypes, failures, and unexpected breakthroughs
43mDesign Beyond Breakpoints
25mUnexpected places: Figma as a space for anything and everything
24mPrototyping for the physical world
20mWhat if it all started in Figma?
19mFrom brief to live prototype using a design-to-code tool