Figma prototyping: now with transitions | Figma Blog (opens in new tab)
Figma’s 2018 update introduced transitions to its prototyping tool, allowing designers to create more realistic, communicative app experiences. Users could connect frames with dissolve, slide, or push animations, customize duration and easing, and preview results directly in the toolbar. The update aimed to reduce ambiguity among designers, engineers, clients, and other stakeholders.
Why Transitions Matter
- Prototypes help teams evaluate high-fidelity app experiences before development.
- Animation between frames can significantly affect how an interface feels.
- Adding transitions reduces back-and-forth by communicating interaction details more clearly.
- The feature was developed in response to extensive community feedback.
New Transition Features
- Apply dissolve, slide, or push effects between frames.
- Set animation durations down to a few milliseconds.
- Adjust easing so animations accelerate or slow down at different points.
- Preview frame transitions in the prototyping toolbar.
- Use transitions to reproduce platform-specific interactions, such as iOS-style motion.
Existing Prototyping Advantages
- Live design: Prototypes remain synchronized with the underlying web-based designs, eliminating the need to re-export after edits.
- Mobile presentations: Presentations can be controlled from Android or iOS browsers, while stakeholders can follow along from their own computers.
- Components: Prototype interactions assigned to a component automatically apply to its instances, making repeated navigation—such as a home button—easy to maintain.
Continued Product Development
- Figma positioned transitions as another step toward making prototyping faster and easier.
- The company planned to continue expanding prototyping to better support everyone involved in software development.
Transitions made Figma prototypes more polished and useful for communicating both static designs and interactive behavior before implementation.