Design involves far more than just the designer these days. Engineers, marketers, project managers, and other stakeholders collaborate until the best product emerges. To do this efficiently, teams rely on prototypes — high-fidelity representations of an app — to communicate about a mockup before it’s shipped to engineers.
The feel of an app can be completely changed by something as fundamental as the animation between frames. Without those details in place, stakeholders are at risk of becoming thrashed with incessant back and forth. Who has time for that?
That’s why we’re excited about today’s news: We’re introducing transitions for Figma prototyping. As you build a clickable prototype of your design, add a dissolve, slide, or push effect to link frames to each other. This will make the prototype’s transitions feel more realistic to the viewer, whether that person is a developer, prospective client, or a relative who still doesn’t understand what you actually do for a living.
Want to “slide” from one frame to the next over a duration of a few milliseconds? Now you can. Need to mimic the animated motion of an iOS app to bring it to life and impress a new client? Handled.
These transitions are essential for getting your ideas across, and you have been clamoring for them with a flood of feedback via Spectrum and Twitter. Our community has requested this functionality nonstop since we first announced Figma 2.0 with prototyping.
As we promised back then, we will continue to build prototyping in Figma to meet the needs of everyone involved in the software development process.
For the unfamiliar, Figma prototyping has super powers that other tools lack (💪).
In addition to the existing prototyping features, we hope our new transitions will add an extra layer of polish to your work. You can choose the duration of the animation, and play around with how one frame will ease into another. This means you have control over when an animation is slightly faster at the beginning, or at the end.
Lastly, the prototyping toolbar has a preview box, so designing the transitions between frames is a snap. (Or a slide.)
Be sure to check out this video to learn the basics of prototyping in Figma. And when you’re ready to introduce transitions to your prototypes head over here.
We hope this continuation of our prototyping tool helps designers communicate their vision easier, faster, and with more joie de vivre.
Much like with our recent workflow launch of @mentions and file sorting, we’re constantly noodling on how to save all team members time. Have an idea for a new Figma feature? Give us a shout over at Spectrum or on Twitter. We’re always listening.
And stay tuned for more prototyping announcements. 😉