Advanced Prototyping (Framer, ProtoPie)

Figma prototyping is for wireframes and simple interactions (click → slide, scroll → trigger). Framer is for code-based components, React integration, CMS data, and complex animations — best for web design-to-development handoff. ProtoPie is for hardware integration (sensors, NFC, device shake), mobile-first prototypes, and gesture-heavy interactions. Start with Figma if you're learning design; move to Framer if your team uses React; choose ProtoPie for wearables, IoT, or mobile-first products. Most teams use Figma + Framer together: Figma for design systems, Framer for interactive demos.

Sketch/wireframe when the concept is unclear or you're exploring multiple directions (1-2 hours per direction). Prototype when you need to test user flows, show stakeholders, or validate interactions before building (2-3 days for mid-fidelity, 5-10 days for high-fidelity). Code directly when the prototype and final design are identical (rare; mostly design systems or mature products). Rule of thumb: if you're second-guessing a flow or interaction, prototype first — it's cheaper than fixing in code.

Low-fidelity (Figma basics, black-box wireframes, 1-2 days): test information architecture, flow, copy. Users focus on structure, not aesthetics. High-fidelity (Framer code components, real animations, 5-10 days): test interactions, micro-animations, feel, visual hierarchy. Users judge the final product's polish. Use low-fi for early validation, high-fi for stakeholder buy-in and dev handoff. Never jump to high-fi if the flow is unvalidated — waste of time.

Start with the 12 principles of animation (squash/stretch, anticipation, staging, timing, arcs, overlapping action). In Framer: use springs for natural motion (stiffness 300, damping 30 = bouncy; 500, 50 = snappy), avoid linear easing. For micro-interactions (button press, hover states, loading spinners): keep under 200ms, start from scale 0.9 not 0. Test with real users — many animations feel good solo but distract in context. Disable animations for `prefers-reduced-motion`. Tools: Framer (spring animations), ProtoPie (gesture + physics), After Effects (keyframe animation prototypes).

Export React components from Framer as standalone code, or share a live link + Framer design file. Document: (1) Component props (what states does this accept?), (2) Animations (stiffness, damping values), (3) Responsive breakpoints (how does it scale?), (4) API integration points (what data does this fetch?), (5) Accessibility (ARIA labels, keyboard nav). Ideally, the engineer builds on top of your Framer component — don't make them rewrite from scratch. Framer can generate Figma docs or Zeroheight specs. Engineers hate guessing; spec everything.

Yes. Framer handles 80% of web animations (springs, drag, scroll-triggered). For 2D motion graphics (dissolves, morphs, particle effects), learn Lottie (export from After Effects as JSON, embed in web). For 3D animations, use Spline (web-first, exports as glTF) or Three.js (code-only, steep learning curve). After Effects is overkill unless you're doing broadcast-quality motion design. Stick to Framer + Lottie for web; use After Effects only for video/marketing content.

You need React basics (components, props, state, hooks), CSS (flexbox, grid, animations), and TypeScript. You don't need to be a full-stack engineer. Framer abstracts most of the boilerplate — you write small logic snippets (if this state, show that component). Start with Framer's code tutorials, then build 3-5 components (button with loading state, modal with animations, form with validation). Once comfortable, branch into connecting to APIs (fetch data, pass to a component). Most designers pick this up in 2-3 weeks with 10-15 hours/week.