Figma prototyping: now with transitions
By: Rudi Chen
Tags: UX Design, Technology, Tech, UX, Product

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?

Learn how to prototype in Figma with these two videos

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.

What makes Figma prototyping faster and easier?

For the unfamiliar, Figma prototyping has super powers that other tools lack (💪).

Live design: Because we’re a web-based platform, your prototypes automatically stay up to date. They’re tied to your designs, so when you make a few tweaks to your frames, there’s no need for you to re-export them to your prototype. Figma TED talk: You can use your phone’s web browser on Android and iOS to navigate presentations via mobile. It’s Figma TED talk— allowing you to casually walk around the room guiding the demo from your phone. This is particularly useful during client meetings. Stakeholders can click your avatar in the Figma prototype (observation mode), then follow along with your design flow from their own laptops. Components + prototyping: Use Figma components in your prototypes to save a ton of time. When you set a navigation from a component once, it will automatically populate through all instances. For example, your home button will always bounce you back to your home screen.

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.

What’s next?

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. 😉