Sketch to After Effects Workflow

over 3 years ago from , Freelance Software Designer. Led design: @scienceinc, @color, @twilio

Someone asked a question about this so I wanted to share how I do it:

  1. Design my app/site/etc in Sketch.

  2. Go to the export panel and draw my slices on the elements I want to export to AE.

2a. If I plan to separate things really granularly, I'll create a "background" and then I'll individually slice all the rows, icons or whatever I'm going to animate on a smaller level.

  1. I take elements directly from Sketch into AE by dragging them into the project panel. I drop the larger groups in from Finder after exporting from Sketch. Screenshot: http://d.pr/i/AtUB

  2. Once in AE, it's just like it is in Photoshop. Animate away! http://d.pr/i/WnKJ

AfterEffects has a pretty forgiving import flow which makes this all super easy.

11 comments