How to turn Figma prototypes to SVG or Lottie animations?

Ask the community
1

Hello, I’m trying to add a video of a Figma prototype in a web page. Ideally I would like to record directly the prototype video and embed it in the web page.
To see what I’m trying to achieve, look at this website: https://www.tryfabric.co/

So far I tried recording the prototype using CMD+Shift+5 to record the screen and embedding the video using Vimeo Pro, but it’s nearly impossibile to get it to autoplay correctly and hide the player controls at the same time. Also, some browsers block autoplaying videos, so it’s quite a headache to get it to work.

The other way would be creating a svg animation using Lottie, but the workflow to do so really sucks, since you need to go through AE, Bodymovin, Lottie. Also, I would lose the interactive components behaviours that make the prototype realistic, and it would take ages to reanimate everything by hand.

It seems like there is a gap between Figma and svg animations. Maybe an idea for a plugin here? In any case, does anyone know what’s the best workflow to create a svg animation starting from Figma?

Thanks!

1 Like
2

Hey there, did you ever get anywhere with this? I’m looking to do the same thing but it seems the gap is still there

1 Like
3

At the end I used the recording of a video in the web page. If you want to create an svg animation I think you still need to go through After Effects and Lottie.

5

Hey, you can use https://gifcap.dev/. But if you want to export it as Lottie (SVG format animation) Jitter plug-in in Figma can work. If you guys found anything else would be great to share.
Thanks

2 Likes