Hi DN, I haven't find the right process to create and handoff developers with ui animations (i'm using: AE, pixate rip, principle). Please share your process:
Mitya can export to HTML so it gives developers a live animation specs file. As you navigate the HTML prototype, the specs data will automatically update to show all the animation details of that screen. You get the animation property, time, duration and easing for each layer. Give it a try and let me know if it helps!
Hey!! I can't believe I haven't heard of this tool! Just played around with it and it look soooooooo nice! Versions! (what a nice Idea) Timeline scrubbing! Framer integration!
Man, this is awesome. A bit buggy on scolling stuff, but otherwise, it seems to step up Principles!
Thanks Benoit! Glad you like those ideas in there :). I've been low key on marketing for now until I get the bugs ironed out. BTW, what bug did you hit on scrolling? If you can share more details, I'll fix it up.
This is very very interesting. I loved the onboarding, it's the first time I try one without wanting to skip steps.
The Specs.html may be the most unique and valuable idea in Mitya when compared against other tools. I see there's a Framer integration but, could I import a Framer file and then export it to get its specs file?
Awesome work man.
Thanks Juan! Very happy you enjoyed the onboarding :) For Mitya's Framer integration, the idea is to let Mitya handle all your layout and animation, but allow you to customize any behavior and handling when you need something beyond the current UI. So, if you're planning to copy paste code between Framer Studio and Mitya to get specs, that may unfortunately not be possible. But, if you build it inside Mitya and customize just what you need, then it will of course work :)
Looking really promising! Are you planing to support iOS and Android as well?
Yes definitely! I assume you're talking about the viewer app for iOS and Android? They're in the works.
I just downloaded it and went through the onboarding. Awesome. I'm looking forward to seeing this progress.
This is pretty awesome. Is the Sketch plugin still available? Hitting a 404 when I click the link from the email.
Yes, it's available now. It was down for some time but you should be able to get again from within the app. Or, the direct link is: http://mitya.com/assets/plugins/MityaSketchPlugin.zip
Looks very interesting, will give a try and let you know :)
Looking forward to your feedback!
This is great stuff, Suresh. I remember trying this out in an early phase of the product. It has evolved beautifully.
I'm asking my team of designers to try this out.
Versions and Specs are killer!
Thanks Vinay! I remember our quick chat on the earlier announcement too :). It's great that you're getting your team to try it out. Ping me at suresh at mitya dot com if you need anything!
I use Framer, so I can send them the animation code in CoffeeScript with timing, easing, spring values, etc. They basically just have to copy paste the values.
This only works on web? What if the devs are doing iOS or Android? For example the easings and velocities could be different etc...
It works on both web and mobile. But the code is CoffeeScript.
I've been working on iOS and Android for the last few years - and since Framer released, I've found it to be incredible for handing off animations to both devs.. The feedback I receive from the devs on my team is usually incredibly positive.. If there is a better way - I'm all ears - but the guys on my team seem to absolutely love it, and I love using Framer :)
The question is basically if any of the existing prototyping tools allow designers to export the animations in Java (for Android) or Swift (for iOS). For the web, js (but framer does it like that already).
Do you have a demo to show us how to use the Framer spring in Swift?
www.animaapp.com does it for iOS (export to Objective C or Swift)
It depends on the item and the output. If its a png sequence i export it from after effects drop the pngs in [image optim] (imageoptim.com) then check it with a sqchecker
For interactions i work with the devs to match a prototype.
Hope this helps.
I usually make a prototype in Principle, send it to them and explain all details like timing, curves,.. but i think it is not best workflow. Final animation looks slightly different, developers have to waste their time to recreating animation and complex animations has to be exported to gif or pngs. It would be great to make animation and export it directly to code, send it to developers...ta da finished. If you know tool like this, please let me know. :)
I wish :) i was hoping someone out there have a better workflow than what you described (witch is exactly how i do things) or get some cool insights
FramerJS is the tool you're after
I'll test it soon, what is the learning curve for FramerJS?
Steep - but the payoff is incredibly worth it
I'm really surprised that there aren't more FramerJS advocates for handing off animations to developers.. It's just such a no-brainer for me! FramerJS makes it incredibly easy to create and specify animations by using things like auto-code:
The fact that you can define the animations in code just means that your developers are able to look at something and physically see the properties that make up that animation.. No guess-work required..
In terms of being hard to learn, sure - there is a learning curve.. But the community that exists on Slack and the Facebook group is beyond incredible, and are ready to help you out with anything, from super basic beginner stuff, all the way to highly complex API driven stuff.
Seriously - FramerJS is the perfect tool for this.
I usually show them my prototype in Principle ( that's what I've used most ) - usually they get it without explaing and all I have to do next is tell them the timing and what effects I used.
I'm looking for more efficient way to export my animation setting - timing, size, opacity etc.. Something like what png express or zeplin did to style guides
no one does that (atleast for now)
Found this talk, you might find it useful!
Use this for AE https://github.com/bodymovin/bodymovin
Does it work good? I used a few plugins like this and they export really bad :)
This tool is rock solid for complicated animations, but not for the purpose OP is asking about. Using something like this for UI interactions would be overkill.
Haven't used it in a commercial context but Flinto has built in animation curve presents (RK4 & UIKit) which are more easily translatable into code.
Video of the motion and AE Project file, PDF doc that includes timing + easing curves and stills of start/end of key elements/transitions. HTML/CSS Prototype if there's extra time/needs to be detailed further
Working alongside them and showing them the intention of the interaction using whatever tools necessary.
I build it myself. CSS / Swift both have some of the easiest animations paradigms / frameworks there is to work with. Takes the same amount of effort to get into as any prototyping tool avoids the overhead of having to sit and explain or try to convey and I get exactly the thing I was aiming for. OH and as an added bonus, if it can't be built then it can't be done!
I'm experiencing the same issue Adi and asked a similar question on the Pixate (RIP) Facebook group a while back: https://www.facebook.com/groups/pixate/permalink/1394171800882397/?match=cm9uIGJlc3NlbGluZw%3D%3D . We switched from Pixate to Flinto, so we still have the same problem. Right now, I manually include all relevant animation details in an ascii art format and post it on GitHub together with a video of the prototype. It's far from ideal.
Anima App exports animations to native ObjC/Swift and creates a framework that can be installed via Cocoapods/Carthage.
For example this repo is completly auto-generated: https://github.com/orarbel/animation-demo-ui-kit
and here is the animation code in it: here
So basically you hand-off native code that developers can integrate in seconds
And here is how you create animation with the timeline:
Here is the hand-off: