Skip to main content
Solved

A way to export the animated interactions in the prototypes?

  • March 17, 2021
  • 8 replies
  • 40180 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
  • 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.

Ani
1 person likes this
  • Ani
    Ani
Robin_Fritig

Thanks Gleb,

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

Best Regards,
Robin

Ashley1
cesno
Tom40
6 people like this
  • Ashley1
    Ashley1
  • cesno
    cesno
  • Tom40
    Tom40
  • Felipe_Almeida
    Felipe_Almeida
  • Nico_Tzogalis
    Nico_Tzogalis
  • Santiago_Mansilla
    Santiago_Mansilla
Di11
  • 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.

cesno
1 person likes this
  • cesno
    cesno
Andrew8
  • 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 🙂

S
1 person likes this
  • S
    Sushmita_Narayana
Alex_Buznik

I would also love to see this.

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

Nathalia_Xavier
chaeyeon.jo
Soo-Sie
6 people like this
  • Nathalia_Xavier
    Nathalia_Xavier
  • chaeyeon.jo
    chaeyeon.jo
  • Soo-Sie
    Soo-Sie
  • Nika_Polosina
    Nika_Polosina
  • Luis9
    Luis9
  • S
    Sonia_Nimmer
Ryan_Mather

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

Michael_Yagudaev
1 person likes this
  • Michael_Yagudaev
    Michael_Yagudaev
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!

J
Lisa_Pallini
2 people like this
  • J
    Jim18
  • Lisa_Pallini
    Lisa_Pallini
Terms & ConditionsCookie settings

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