Summary
Highlights
Victor introduces himself and the topic of 'Prototyping the Future,' emphasizing the role of prototypes in conveying messages and imagining new horizons, especially within complex business environments. He contrasts Elon Musk's unfulfilled promises with Apple's visionary 1987 prototype that foreshadowed Siri, highlighting the difference between false promises and inspiring future directions.
Victor stresses the importance of 'craft' in design, connecting it to form and function. He outlines three main purposes of prototyping at Muse: invalidating concepts through UX research, proving feasibility, and influencing strategic direction. He states his focus will be on the third point, demonstrating how to craft compelling demos using Figma.
He showcases an interactive onboarding vision built entirely in Figma, demonstrating how simple interactions and animations can convey a self-service and quick onboarding experience. Key to this is properly renaming layers for Smart Animate to function effectively, and detaching components to clean up hidden layers and ensure animations work smoothly.
Victor delves into the core techniques of Smart Animate and Variants, focusing on three crucial parameters: delay, custom Bezier curves, and timing. He presents another Figma example of a dashboard with floating panels and in-app communication, illustrating how basic animations can effectively communicate ideas to stakeholders. He advises on testing and feeling for the right animation values, suggesting curves for basic interactions and spring for more realistic, detailed movements.
He explains a technique for changing component positions by adjusting opacity and X/Y coordinates, again emphasizing the importance of layer naming. Victor then proposes a step-by-step process for creating an animation library: rename, animate, test repeatedly, create a component, and then turn it into a single variant. This approach fosters consistency and keeps design files lightweight, similar to a design system for components.
Victor introduces 'auto-animate,' a technique for creating animations that run automatically in the background during a presentation. He demonstrates a complex example built in Figma, highlighting the ability to create different transitions and delays for various parts of the prototype, allowing the presenter to control the narrative while the animation unfolds.
He discusses the benefits of these Figma techniques: presenter control, ability to integrate data, and lightweight execution. However, he also acknowledges the downsides, such as quality limitations due to the absence of a timeline, the 'Macgyver' nature of some workarounds, and occasional bugs. He reiterates that while it takes time, it's not magic and becomes simpler with practice.
Victor summarizes his main takeaways: prioritize creating great solutions, follow with a polished craft to differentiate designers, and then use sufficient prototyping to deliver the message. He stresses that prototyping is a tool, and storytelling and data are crucial to avoid creating 'terrible posts.' He concludes by asserting that prototypes are more effective than slides and inspire action, leading the way to execution rather than just ideas, urging designers not to be like Elon Musk with unfulfilled promises.