Figma’s 15-Day Prototyping Challenge: A Recap

High-fidelity prototypes are essential for testing, developer handoff, and design critiques. To help the community master Figma’s newer prototyping features—such as interactive components—Figma Designer Advocate Ana Boyer ran a 15-day challenge. The exercises progressed from basic transitions to complex, multi-layered interactions. Below is a recap of each day’s focus, complete with links to the community files used in the series.

Week 1: Foundations and Interactive Components

  • Day 1 – Smart Animate: The series starts with the basics of smart animate. This transition is ideal for high-fidelity prototypes and works by preserving layer names between screens, allowing Figma to interpolate changes.
  • Day 2 – Matching Layers: Smart animate can be combined with preset transitions like slide or push. This is particularly useful for building prototypes with tab navigation, where some elements animate while others move.
  • Day 3 – Interactive Components (IC): IC allows you to define interactions between variants within a component set. This makes instances interactive directly in the prototype, reducing the number of separate links needed and simplifying complex flows.
  • Day 4 – Nesting Interactive Components: Building on Day 3, nesting ICs lets you create components with multiple built-in interactions—like list items with individual actions—while further minimizing the number of prototype connections.
  • Day 5 – Inheritance in Action: This challenge combines the week's concepts into a mobile prototype with an interactive bottom navigation. It demonstrates inheritance, where larger components and screens automatically inherit the interactions of nested components.
  • Day 6 – Auto Layout and Responsive Design: Combining IC with auto layout results in more realistic, responsive designs. This example builds an auto layout carousel where interactive cards maintain equal spacing as they resize.

Week 2: Drag, Animation, and Effects

  • Day 7 – Dynamic Scroll: Using the on drag trigger with a matching layers transition creates a dynamic scroll effect, moving beyond simple button clicks to drive prototype states.
  • Day 8 – Drag-to-Delete: This exercise uses the previous concepts to create a drag-to-delete interaction. Buttons or list items become ICs with delete actions, and thanks to auto layout containers, the remaining items shift smoothly upwards.
  • Day 9 – Cyclic Animations: Interactive components can be connected cyclically to their own variants to create infinite animations, such as loading spinners or recording indicators.
  • Day 10 – Parallax Effects: By applying smart animate to elements with different travel distances over the same duration, you can create a parallax effect where some layers move faster than others to simulate depth.

Week 3: Building a High-Fidelity Map

  • Day 11 – Scroll To: The final week begins putting together a complex map prototype, starting with Figma’s scroll to feature to navigate within a frame.
  • Day 12 – Map Zoom: The challenge combines on drag and smart animate to create a zoom-in and zoom-out effect for the map.
  • Day 13 – Overlays for Info: Overlays are highlighted for modals, menus, and tooltips. A map location pin uses an overlay to display a tooltip on hover.
  • Day 14 – Full Map Integration: The previous three prototypes are unified into a single, high-fidelity map prototype with multiple points of interaction.
  • Day 15 – Interactive Illustration: The challenge closes with an open-ended prompt: creating an interactive illustration. This final example uses mouse enter triggers and smart animate to bring a character to life.

All 15 challenges and their starting files are available in the Figma Community, offering a structured path from basic animation to advanced interactive components.