Skip to main content
Solved

A way to export the animated interactions in the prototypes?

  • March 17, 2021
  • 8 replies
  • 40075 views

Robin_Fritig

Hi everybody,

Is there a way please to export the animated interactions settings (with all the ease settings and so on…) I have made in the “prototype” section of Figma ?
I mean through SVG + CSS with @keyframes, JQUERY or anything else ?

It’s too bad I have to recreate in HTML, JS etc… all the stuff out of Figma.
I would like to be more efficient and productiv in that part of the pipeline of production.

So : “Once you have validated your Figma animated designs, what are the best practices to keep ‘out of Figma’ the code applied for the animate part of the prototype ?”

Thank you very much,
Best Regards,
Robin

Best answer by Gleb

There are no ways to do that at the moment so feel free to edit your topic to turn it into a suggestion instead of a question and move it to #product-ideas (or create a new topic there if you wish). There is a suggestion for exporting prototypes to video, but not to code.

View original
This topic has been closed for comments

8 replies

Gleb
  • Power Member
  • 4707 replies
  • Answer
  • March 18, 2021

There are no ways to do that at the moment so feel free to edit your topic to turn it into a suggestion instead of a question and move it to #product-ideas (or create a new topic there if you wish). There is a suggestion for exporting prototypes to video, but not to code.


Robin_Fritig

Thanks Gleb,

That’s perfectly clear and it would be so amazing to add this feature, developers would appreciate 🙂

Best Regards,
Robin


Di11
  • 1 reply
  • April 9, 2021

I really hope that the new feature of “export interactive prototype into video or gif” cause once designer wants to insert the prototype into mockup file there is a lot of tedious steps that need to do with photoshop and ae.


Andrew8
  • 1 reply
  • June 16, 2021

There is an Anima app that exports the Figma design to HTML. But to create effects, animations, and interactions you (or your developer) can use https://toruskit.com This tool allows you to do everything right in your HTML without writing any CSS or JS.

From my experience, I know how easy it is to create a prototype in Figma, but when the developer sees what is required of him, he starts to go crazy. So tools such a https://toruskit.com helps him to get rid of the CSS styling and writing any JS.

In spite of everything, you should make prototypes in HTML 🙂


Alex_Buznik

I would also love to see this.

At least exporting some data - like durations, effect types, Bezier params, stuff like that.


Ryan_Mather

Just +1-ing this ! Using CSS Animations as a starting point would be great!


Lauren_Asazawa

+1 Been wanting this feature as well! 🙏🏽


Rohan_Singhvi

Hi everyone!

Rohan here. Really excited to share with you all today that we’ve launched our design to code tool beta, to convert interactive prototypes to quality code called Dualite.

We’re currently supporting linear-prototyping based conversion to HTML/CSS. Looking to expand furthermore.

Do check it out at here, and give your honest feedback on what more could be done on the same!


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings