20

How to animate interfaces using Sketch and After Effects

6 years ago from , Digital Designer

Hi guys,

Some days ago I asked a colleague of mine to join me on a project. Me as a product designer and him as a motion designer. Being a remote designer, sometimes I find it difficult to explain to my clients how transitions and animations will work so I decided to hire my colleague to reduce this gap.

The thing is that he never worked with Sketch and After Effects before so we already spent some hours researching but still the process looks too difficult and complex.

My question his: How do you guys animate using Sketch and After Effects?

Thank you so much!

8 comments

  • Daniel De LaneyDaniel De Laney, 6 years ago

    If you want to jump on a screen share I can walk you through it. We could record and post here afterward.

    hello@danieldelaney.net

    16 points
  • Abhimanyu RanaAbhimanyu Rana, 6 years ago

    https://google.github.io/sketch2ae/

    6 points
  • G Lukacs, 6 years ago

    Having used Sketch with Framer and After Effects for the past 6 months or so, I think there's a pretty clear divide (at least in my mind) between the two.

    I use Framer for prototyping anything related to UI/UX, having the ability to upload things to the cloud quickly, letting people click around a prototype, actually being able to feel out the solution you're proposing, these are all essential pieces that help validate a particular solution to a problem. Contrary to what others have said in this thread, I find the workflow to be intuitive, the animation curves are nice and simple, states are relatively easy to grasp, scroll components take a few seconds to set up, parent-child relationships are simple, everything seems to make sense (a basic understanding of HTML/CSS/JS is probably helpful now that I think about it). With Framer, it only takes a few minutes to make something smooth, importing Sketch files takes a couple of seconds, translating animations to front-end is simple.

    I use After Effects for things like product videos, ads, anything that needs to be rendered super-smooth. I found that exporting video from Framer at 60FPS to be painful (even though I prefer the Framer workflow, I can't seem to get smooth video with screen recording software and haven't found another workable solution), so it would seem less useful for creating high-quality video assets, this is where After Effects does an excellent job. All this being said, I think it's easier to translate a Framer prototype to the web than the same in After Effects. Granted, I don't work with iOS/React often, so I have less need for things like Lottie and exporting animations as video assets. Depending on the medium, it might make more sense to use something like Framer.

    If After Effects is what you need, Sketch2AE is useful, you might need to move some things around and make a few adjustments after importing, but the workflow is much better than anything that has existed before. People recommend UXinMotion, they have a bunch of good videos on their YouTube channel, but paying for access to their tutorials is quite expensive. If you know what you're trying to do, watch a few videos that cover "expressions" and "keyframes" and you'll be on the way to figuring it out in no time.

    3 points
  • Ktrn DsrsKtrn Dsrs, 6 years ago

    Eros ally I would take a look at Principle, Or Kite which are more user friendly and made for that kids be of job. They are also fully in symbiose with sketch and far less expensive than Premiere!!!

    1 point
  • Craig Keeling, 6 years ago

    I'm going to be checking out Lottie for this ability: https://airbnb.design/lottie/

    1 point
  • Lucian .esLucian .es, 6 years ago

    You should also check this article. It may help you in your journey to animate UI.

    https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc

    0 points
  • Artur Eldib, 6 years ago

    uxinmotion.net

    0 points