Figmotion

Animation tooling right in Figma

1 follower

Animation tooling right in Figma

1 follower

Figmotion is an animation tool built right in Figma. This makes the entry into animation easier and more convenient as there is no need to switch to a completely separate motion tool such as Principle, Haiku or After Effects.

Launch tags:Design Tools

Launch Team

AWS Activate CreditsCredits that fuel your startup’s next milestone

Promoted

Any tutorials on how to use the JSON export? I was hoping I could just throw it into Lottie and it would just work but sadly not :(

Report

7yr ago

Unsplash for Figma

Maker

@harry_aldian Sorry for the late answer, only just saw the comment. At this time the JSON export is mostly a reference to your developers so they have a good understanding of how the animation is created (better than just guessing from a visual). It has been requested to create a runtime for the JSON export but that is something for later.

Report

7yr ago

@liammartens this would incredibly helpful! Looking forward to it, congrats for the plugin, thank you!

Report

7yr ago

@harry_aldian @liammartens Please what is the update on this topic because it giving me and my team a lot of headache as to how to make the JSON file work. Thanks for bringing Figmotion to Figma.

Report

6yr ago

Great plugin, but unfortunately when I click RENDER button I get an ERROR (button Render changes to Error) and nothing will happen... Anyone else has the same problem?

Report

7yr ago

Unsplash for Figma

Maker

@viacheslav_danishevskiy yea I kind of underestimated the amount of traffic I would be getting which meant the render server went down. I scaled it up and it is online again.

Report

7yr ago

@liammartens Render is working :) but I've found another strange thing in plugin work. When I click Play (several times), then one of the objects moves to the right side of frame and disappears... Here is a short video from the screen: https://youtu.be/x4qQxVJsyuM

Report

7yr ago

Unsplash for Figma

Maker

@viacheslav_danishevskiy that looks to be a caveat with how animation works within figma, especially with the rotation. By default a element will rotate from the top left, to not affect the positioning of the element. As I have implemented rotation, it will rotate from the center, as this is more in line with what is expected from rotation, however when you are also rotating width, this can cause some strange behavior as your x,y position will change unexpectedly due to the width changes. One way to work around this is separate the rotation animation from the width animation by, for example, putting the rectangle inside a frame. Then you use the frame to apply the rotation and you apply the width/height animation to the rectangle itself. This way the width of your rotating element (your frame) is consistent. Secondly when animating like this you should also keyframe your x and y positioning to get the most consistent results. You can read more about these caveats here https://freighter.gitlab.io/figm...

Report

7yr ago

@liammartens @viacheslav_danishevskiy I have a problem whit it

Report

7yr ago

bunny.money

Really good idea to bring detailed animation to Figma. Great Start. Is there any way to make it work within a full app or website prototype as well? Maybe i'm missing something here but iI can't trigger the animation outside the plugin itself.

Report

7yr ago

Unsplash for Figma

Maker

@florian_cordier this is only possible by using a GIF in the prototype

Report

7yr ago

Could someone tell me how to render GIFs with a transparent background? Because I cannot make this work (my background for the GIF stays white, whatever I do in figma/figmotion). Thanks already!

Report

7yr ago

Unsplash for Figma

Maker

@jip_asveld hey, I have actually disabled transparency in GIFs because it results in very "hard" edges, because GIF can only be fully transparent or fully opaque (no half transparency)

Report

7yr ago

@liammartens thats too bad, I was actually not aware of that aspect of GIFs. However, it might still be better to have a circle with a hard edge, then a circle with a white square behind it animated in front of e.g. an image. Could you reconsider allowing the feature, as I think in some situation it is preferable over what we have right now. By the way, thanks for the tool anyway! The only reason I am asking these things here, is because I really love your plugin (more than any other) and see great potential !

Report

7yr ago

A very necessary plugin, nice and aesthetic interface Is it planned to be able to run animation on a prototype, for example by clicking on a frame?

Report

7yr ago

Fantastic plugin, now I don't waste time on recreation elements to make an easy interaction in AE, and built-in feature to render in gif with Loop/No Loop feature is working just great! Figmotion save me a lot of time. Would be great if there was an option to change the position of more then one keyframe at a time, other then that, all work right.

Report

7yr ago

I just found, that Figmotion renders a transparent gifs 😍

Report

7yr ago

Unsplash for Figma

Maker

@bariilich will definitely be looking into moving multiple keyframes at a time etc

Report

7yr ago

@bariilich Could you tell me how you do this because I cannot make this work (my background for the GIF stays white, whatever I do in figma/figmotion. Thanks already!

Report

7yr ago

How do i download the animation GIF/VID render?? When i click on render, it renders up to 100% and then nothing happens.. no link an no nothing :/ - i can only see the render if i check "auto download and insert"... but how do i save it locally? where's the link? help... This is a cool plugin though 👍

Report

7yr ago

1 2 3 4

Reviews