Where the design community meets.
I'm discussing this with several users to understand what is required before committing resources to it. Can you share more about what you're looking for in iOS/Android export? Do you mean animation export or code export?
Sure. So, as an example, right now when i prototype, I use one of three things:
Principle: its great for quick prototypes and gives me alot of options for 'realistic' behaviors and animations. Downside is no code export. Id also like to see some better timeline animation tools and logic from them (EG you cant scrub through a timeline etc)
Framer: framer is a good mix between design and code especially with their new Studio app. I can export code for most applications- works best for web/web app stuff. Downside is there is a bit of coding knowledge required (the more you use CoffeeScript the easier it gets however). There is also no timeline based animation, so things you'd expect to have logic in one program operate a bit differently in Framer. EG if you wanted to expand a card to a full screen takeover, it wouldnt use two artboards- it would use one, and just expand it. While i dont mind this logic, i also get confused sometimes 'when is the best time to use multiple artboards vs just one'
After Effects: i dont really 'prototype' with this- i use it for animations. I create the animation, then use BodyMovin.js to export the json. The Json then goes into Lottie (which is amazing if you havent used it yet) and we can control the json (svg and img) objects on a native level. This saves developers a huge amount of time trying to animate complex things, paths, curves etc and is dev ready. I do like the AE timeline tools, but the program really isnt designed for mobile/web, its for animation.
Ive also tried Haiku- this aims at combining an AE like timeline with Framer like code parameters. Thusfar, i havent been impressed. Lots of users complain about bugs and the complexity of either importing their Sketch templates, or animating elements within the program. Im going to hold off on this because it seems like more work than its worth right now and they need to improve the software.
WIth all of these above, we normally hand off assets from Sketch or PS through InVision (static comps) which are the specs. For prototypes, sometimes we will give them a prototype file to replicate (if its simple enough) and sometimes I will make it in Framer or AE (animations, transitions etc) but there are times when additional front end work is needed to tweak those. We are on IOS and Android as well as mobile web (webapp).
All in all, we use Photoshop/Sketch day to day here at Wag!...so having this plugin do the work of AE while keeping Sketch like mobile/web centric tools would be great.
Im really excited to see how robust you are going to make this thing :) Thanks!
"I can export code for most application"
What do you mean with this? Framer doesn't export any native code, and all the JS you can produce there is far from production ready. The only re-usable things you can get from Framer for production use are animation values.
Ah ok! So that's what I suspected too!
There's a bit more than animation values that we use when exporting from Framer. I never said native code, what i meant was code we can work with on some level. i wouldnt say 'far' from production ready.
Thanks for the detailed explanation, Anthony!
I’m not too familiar with code export for Framer, but afaik, they export the parameters of your animation, right? As in, they don’t actually export a code module that your developers can plug into their iOS/Android code?
If it’s animation parameters you are looking for, then Diya exports “Animation Specs” for iOS, Android and Web. When you hit ‘Export’ on Diya’s bar, you’ll get 2 HTML files - one is for the prototype and the other is for your animation specs. At the bottom, you’ll see options for Apple SDK, Android SDK and Web.
Would that help your scenario?
Lottie keeps coming up in discussions very often with users, so I’m looking into this to see if it is feasible.
Anyway, this is just the start. Lots of things planned in the future for Diya :)
If it’s animation parameters you are looking for, then Diya exports “Animation Specs” for iOS, Android and Web. When you hit ‘Export’ on Diya’s bar, you’ll get 2 HTML files - one is for the prototype and the other is for your animation specs. At the bottom, you’ll see options for Apple SDK, Android SDK and Web.<
Ah ok. i wasnt sure what the output specs were without using this yet. I saw HTML and thought you had initially only made this for web or web app output of some kind. Good to know :)
That would definitely help the day to day yes. As far as Lottie, i replied to a users comment re: exporting Json. I think having those animations (or at least the more complex ones) with the ability to inject them into js is what most people are aiming for (id assume anyway).
Excited to see where this goes.
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.