Skip to main content

Export the code of the animated interactions in the prototypes

Robin_Fritig

Hi everybody,

I have a suggestion for a ‘developer oriented feature’ to add in FIGMA.
As for now it doesn’t exists, there is something we would appreciate I think :
Having an option to export the animated interactions settings (with all the ease settings and so on…) we made in the “prototype” section of Figma…
I mean through SVG + CSS with @keyframes, JQUERY or anything else !

It’s too bad to have to recreate in HTML, JS etc… all the stuff out of Figma.
We would love using this feature to be more efficient and getting a better productivity in our pipeline of production!

In one word : “Once we have validated our Figma animated designs, we want to be able to export the code applied for this animate part of the prototype”

Thank you very much,
Best Regards,
Robin

10 replies

ShawnZeng
  • ShawnZeng
  • 1 reply
  • September 23, 2021

Same requirement here. Just vote you up!

Christian_Brandt

That would be very nice!

// Christian

Louis_Cancedda

That would be so nice…

GABRIELE_MOTTER

Yes please!

lepdev
  • lepdev
  • 57 replies
  • April 19, 2022

Do you have a simple example animation ?

Peter_Arthur

Great feature request!
Here is an example animation that looks simple, but would be VERY difficult to code blindly. Widths and heights are changing, but the button is anchored on the center point, so position values would also need to animate, as well as the shadow.
figma-animation-example

Kenneth_Kawamoto2

Widths and heights are changing, but the button is anchored on the center point, so position values would also need to animate

You’d use CSS Transforms, which by default the origin is the centre 😀

D

I spent so longgggg looking for something, a tool, a plugin, something… & then finally, I stumble upon this. What a relief that I can now get some sleep knowing there is no solution, still, years later but also disappointing since its been a week of using Fig for the first time & mainly for this feature in which is useless besides Visualization. Why would I want to create something I can only look at. This platform is only for data visualization I guess.

W
1 person likes this
  • W
    Will30
megaroeny
  • megaroeny
  • New Member
  • 68 replies
  • August 1, 2023

I’ve been wondering about this for a long time, and in the new Dev mode, it shows this. But how does that translate to code? I’d love to have this be JS or CSS animation properties.

image

Rohan_Singhvi

Recently launched Dualite to do exactly that. Do check it out, and let me know your feedback!

Regards,
Rohan

Reply


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