3

I am currently working on redesign on for both android and iOS. I wanted to use small animations and feel confident that I can prototype them using principle, flinto or after effects. However how can I transfer the results to the developers whom might not be animation specialist. This is primarily small interactions and motion design for a custom loading animation.

I am new in the ui/ux team and I don't want to spend time and effort on something that we cannot implement in the end, however we really need some animations :)

closed as primarily opinion-based by Midas, JonW Oct 11 '17 at 14:32

Many good questions generate some degree of opinion based on expert experience, but answers to this question will tend to be almost entirely based on opinions, rather than facts, references, or specific expertise. If this question can be reworded to fit the rules in the help center, please edit the question.

  • 3
    You should really speak with your developers to find out how they prefer to receive deliverables like this. You shouldn't impose something on them - you're a team; work together, find something you can both work with. – JonW Feb 21 '17 at 11:00
  • It might also be worth learning a little about the transitions and animation tools are available in whichever platform the developers are using to build the apps. – Andrew Martin Feb 21 '17 at 11:57
2

Depending on the complexity of your animations, and the methods in which you used to create them, you'd be surprised as to how easy hand off can be.

Since it's just micro interactions and a loading animation, you should be good with Bodymovin (https://aescripts.com/bodymovin/ - it's a "name your price" plugin, so you can try it for free and contribute later if you want). Bodymovin generates JSON code from your After Effects animation. JSON can be used directly on the web or mobile (using Airbnb's Lottie for mobile). There are however limitations, there aren't many Effects & Presets that Bodymovin can recognize. So no particles and other such fancy effects. Bodymovin also works best with shapes than anything else.

Another great plugin for After Effects, Inspector Spacetime (https://google.github.io/inspectorspacetime/) creates motion specs for reference videos in one click.

I do not have much experience with Principle and Flinto so do not have any recommendations if you're planning on using either of them for animating.

-1

You can convert your animations into gif format from any animation program like Principle, After Effects, etc.) and insert your gifs into any Development Software like Rally or Jira for your developers.

By the way my article about micro-interactions - http://www.diatomenterprises.com/interaction-design-and-micro-interactions/

Thank you.

  • 3
    This seems more like spam of your article than an answer. Why is converting an animation into GIF the best way to hand animations over to developers? Is a GIF demonstrably easier for them to work from to create animations? If the recipient isn't an animation specialist then just giving them an animated GIF isn't really going to help them. – JonW Feb 27 '17 at 12:07

Not the answer you're looking for? Browse other questions tagged or ask your own question.