Animation styles to speed up prototyping

It would be so great if I could just add in some CSS to do some simple animations.

I just tried “From CSS” (the figma plugin)

It worked with static CSS like border-radius or transform: rotate(45deg); but didn’t worked for animations.

Does anyone has some experience to add in some css-animation lines?

Systematizing animation styles is as important as any other attribute of a design system to ensure consistency and should definitely be a feature figma adds in.

I was about to request the same thing. It’s great to have a tool like figma to experiment with animations. But as the number of transitions increases, there is a natural disincentive for further optimization. For example, if I have 40 transitions in my project with the same animation, adjusting just the duration requires that I search all the pages and frames to find each animation then make the individual edits. Support for reusable animation styles would encourage designers to optimize animations even as their project grows. It would also make it much easier to apply existing animations to new transitions.

I had this same idea back in October and reached out to Figma about it. Being able to create and set custom animation styles seems like a no brainer, especially when designing a system. I want all of my modals to come in and go out using the same settings and sometimes the boiler plate Ease In needs to be adjusted to my taste. Also, being able to just select from a set of user-defined curves with a click would speed up my prototyping workflow.

from my email

Is there a way to save animation and transition settings as a style?

Similar to Grid Styles, Color Styles, Effects Styles and Type Styles?

I often find myself repeating my transitions and animations to try and get a similar look acroos an app or website. But having to go back into previous prototype settings to see my timing and beziers can get very tedious.

It would be great to be able to define a transition as, for example, My Popover, then just apply that to similar elements.

I know you have bezier settings like Ease In, etc but there are also delay settings and duration settings that are not part of that.

Would love to hear if this exists and if not would be a great feature add.