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 ?”
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.
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.
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
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!
