Sketch to After Effects Workflow

9 years ago from Aubrey Johnson, VP Design & UX at Dosh. Led design: @scienceinc, @color, @twilio

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

Design my app/site/etc in Sketch.
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.

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
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

Zach Sherman, 9 years ago
Hey Aubrey, would you be interested in doing a Pixelcast, showing people first-hand how this process works? http://pixelcasts.io
3 points
- Aubrey Johnson, 9 years ago
  Yeah! Would love to. :) Send me an email so we can chat about details. hello at aubrey dot me
  1 point
Martin Halik, 8 years ago
This may be helpful https://vimeo.com/116902889 : )
1 point
Chris Slowik, 9 years ago (edited 9 years ago )
this is ok, but still not optimal. you get all the assets as png, but what if you need to change a shape or size? having vector paths/masks is a huge benefit. also, when import a psd, i get the entire screen with elements in position. with your method you have to reconstruct the screen in after effects.
i really want to like sketch.. but the sketch->ae workflow is so cumbersome right now it just doesnt make sense. one thing that would help IMMENSELY is if there was an eps export. and yes i know about the pdf export feature, but all the vector shapes become rectangles with clipping masks - huge pain to import to ae.
i'd probably love sketch if i didnt have to animate ui after design
1 point
- vmedium ..., 8 years ago
  You might be interested in this plugin.
  http://aescripts.com/explode-shape-layers/
  0 points
Gabriel Brodersen, 9 years ago
I would also suggest using Keynote, as an easy alternative.
1 point
- Aubrey Johnson, 9 years ago
  Yeah, they both take a pasted / drug in object pretty nicely. The nice thing you get from After Effects or Edge Animate is the really tuned easing controls. You get that creamy (or crisp!) look when you have those fine dials IMO. I haven't found Keynote delivers the same timeline:linear equation controls that those other tools do.
  That said, if you just want a quick communication to hand to someone: I agree! :)
  0 points
- Alasdair Monk, 9 years ago
  I love using Keynote for little animation stuff – I did this in Keynote with 20 minutes free http://dribbble.com/shots/1259954--gif-Welcome-dialog-animations?list=show
  0 points
Mark Stuckert, 9 years ago
I'm in motion so I don't know if you guys have access to motion curve "libraries" like inOutExpo and whatnot, but if you do… http://aescripts.com/ease-and-wizz/
0 points
Mark Stuckert, 9 years ago
I'm in motion so I don't know if you guys have access to motion curve "libraries" like inOutExpo and whatnot, but if you do… http://aescripts.com/ease-and-wizz/
0 points
Joshua Sortino, 9 years ago (edited 9 years ago )
Is text editable after it's imported into AE?
0 points

Designer News

Join Us

Sketch to After Effects Workflow

11 comments

Join Us

Login to Comment

Register Today