Using Sketch2AE to overcome your fear of After Effects as a designer
A brief how-to of Google’s Plugin “Sketch2AE”
I’ll admit it — just about a month and a half ago, I was terrified of using After Effects. The immense and complex interface it presented, as well as its frictional workflow with Sketch turned me off greatly. After discovering a plug-in for Sketch made by Google, however, I found that it efficiently bridged the gap for product designers wanting to try After Effects. In this article, I’ll walk through putting together a simple prototype, as well as discuss the pros and cons of using After Effects as a product designer and how you might successfully leverage the tool in your own workflow.
Here’s the link to download the plug-in: https://google.github.io/sketch2ae/ Once you’ve downloaded the plugin and installed it for both Sketch and After Effects, you’re ready to get going.
Step 1: Design!
You’re already familiar with this as a product designer. In this example, I’ll be creating a simple “Pull-to-refresh” prototype. Below are my mockups (designed for the iPhone X).
As you can see, I’ve created two states: a default state, and a loading state. Some people will create all states on one screen and just change the opacities to hide layers, but I’ve found it easier to keep the states separate and keeping all layers visible.
I’ve also grouped appropriate layers and renamed them, which helps keeps things organized once in AE.
Step 2: The Import
Once you’ve finished your designs and have organized the layers accordingly, select and artboard and go to the plugin:
Plugins → Sketch2AE → Save Selected Layers
It should pull up something like this:
Create a new folder and save the file (it automatically names it _SketchExport.sktchae).
Step 3: Into AE!
Now open up AfterEffects and select:
Window → Sketch2AE.jsx
It should pull up a little window that looks like this:
Select “New Comp” and it usually defaults to importing it at 3x, which is the setting I usually choose. Then select the blue button (yes, it is in fact a button), and then it pulls up another window:
This should be the file that you exported out of Sketch earlier. Select it, and watch the plug-in perform some magic. Once all the layers have imported, it should look something like this:
Step 4: Animating the pull-down interaction.
It’s okay if you know zero after effects. I’ll try to break everything down step by step so you know what’s going on.
The bottom left should look something like this. This is your layer panel in After Effects. You should see the light blue pound symbol above your layers — this is a null layer that essentially acts as a group for those items. Selecting those layers with the light blue pound symbol will allow you to manipulate whatever properties as an entire group.
For this example, we’ll want to interact with those groups. If you want to create more complex interactions, like expanding the horizontal length of the content in the card, then you’d go into the individual layer that is parented to the light blue pound symbol layer.
I changed the position of those parent layers collectively by adding both an initial and second position keyframe (keyboard shortcut ‘p’). Drag your time selector over the second keyframe and change the y-position of all of those parent layers. If you’re familiar with using Principle, or other motion design tools, the manipulation of properties via keyframes should feel familiar.
For a bit more of an “elastic” feel, I added a third keyframe shortly after the second and bumped the Y position of those parent layers by about 10 pixels (shift + up arrow key).
A key thing to look for here is the timing and easing of your interaction so that it feels natural — prototyping tools like Principle, Flinto or Framer allow users to interact with prototypes which allows them to feel more like real apps. Your prototype, as of now, probably feels a bit linear, but luckily there’s a plug-in to help with that.
https://aescripts.com/ease-and-wizz/
Install the plug-in above. Once that’s done, select the position keyframes of your parent layers and apply some new easing effects. I usually go with “Quart” or “Quad” for the easing, since these two most closely parallel the timings of interactions you find on most mobile operating systems.
Step 5: Adding the loading state
It’s time to add the loading state animation to your AE file. Go back into your Sketch file and go into your second artboard. Find the layers that correspond to the loading animation. For me, it’s these two:
Once you’ve selected these two layers, go back into your Sketch2AE plug-in and selected “Copy Selected Layers”. Once you’ve copied the layers, go back into AfterEffects and open up your Sketch2AE plugin there. Select the red button on the left, and make sure the “New Comp” checkbox is unchecked (opposite of the photo below) so it pastes onto the current comp you’re already working in.
A long string of code should be pasted into the text field, and select build layers and let the plug-in do it’s magic.
Once the layers have been pasted, it should look like this:
Step 6: Collapse the loading state initially
The layers that you just pasted should be at the top of the layer panel. We’ll want to hide the loading circle, which means that the Menu and NavBar layers should be above. Go into your layer panel, select those layers, and drag them to the top of your layer panel as you would in Sketch.
Once that’s done, we can collapse the loading state. There are a few ways to approach this — I usually construct these animations backwards so that I don’t need to go back and re-position the final position, since it’s already at the final position once I’ve pasted it.
Your time navigator should still be at the last keyframes of your parent layers. Select the “LoadingCircle” parent layer that you just pasted and hit cmd + p to pull up the position property, and add a keyframe. Now drag your time navigator all the way left so that it lines up with the first keyframes of the tile parent layers, and add another position keyframe to that layer. Now change the y position of that parent layer so that it moves up until it’s hidden underneath the “NavBar” layer.
Do the same thing with the “LoadingBG” layer, but instead of manipulating the position property, you’ll want to change two things: Scale and Anchor Position. Usually the anchor positions are at the center of pasted layers, but if you try to manipulate the scale, it will scale to that anchor point, which we don’t want.
To change the anchor position, select the layer and hold down Y, which should reveal the anchor point of that layer. Select the anchor point and drag it to the middle of the top of the “LoadingBG” layer. Once you’ve done that, tap the ‘S’ key on your keyboard to reveal the scale (should be in x, y%). Add a keyframe, then move your time navigator all the way to the left. There’s a little chain icon to the left of the scale percentages — uncheck that to remove the proportional scaling. Now select the y% and change it to 0%.
Step 7: Create your loading state animation
You should now have the first default to preloading state done. Now we’ll want to create a little circular loading animation once the user has pulled down.
Go to your third keyframe and select the “OuterCircle” layer and click the dropdown, which should reveal “Contents” and Transform. Select the “Add” button next to “Contents”, and select “Trim Paths”. This property trims that paths of any vector layer without a fill.
Select the “Trim Paths 1” dropdown and add a keyframe for “end”. Drag the percentage down to 0. On your composition, you should see the path trim around the border until it’s completely hidden.
Now drag your time navigator over maybe a second (30f) and create another keyframe, this time changing the “End” property to 100%.
Again, if the easing feels weird, use the “Ease and wizz” plug-in to change the easing of the effect. We’re almost done!
Step 8: Return to default state
Once the loading animation is done, we’ll want it to revert back to the default state. Add another keyframe after the “End” key frame for all of the layers that you had previously changed, and change the properties back to what they originally were. I won’t go through this process since hopefully it should be pretty straightforward by now.
Step 9: Polish
Now that you’ve got the full animation, go back and polish your animations, whether that’s timing, easing, or other properties that you might want to manipulate. I added a pull gesture interaction just to give it something extra.
Tradeoffs of using AfterEffects vs. other design tools for prototyping interactions.
AfterEffects was never really meant for product designers — it’s a tool meant for motion designers and artists to create really, complex interactions. It’s got a ton of powerful plugins, and it even has 3D capabilities. In more recent years, however, it’s been picked up by product designers everywhere to create more complex interactions that might not be achievable in prototyping-specific tools like Principle, Framer or the like.
The difference between AfterEffects and other prototyping tools mentioned above is that a user can’t actually interact with the prototype — so it’s not the most effective when it comes to in person user testing.
Another tradeoff is the time necessary to prototype. This prototype didn’t take me too long, but to create something similar in Principle would have taken about a quarter of the time.
The final tradeoff is the designer to developer handoff. More likely than not, if you’re using AE to prototype an interaction, it might be too complicated/time-consuming for a dev to implement, especially if it’s only a single interaction. This is not to be confused with animations that leverage Lottie, which produces a .json file that developers can use for specific animations rather than interactions (kind of like GIFs).
Thanks for taking the time to read this! Hopefully you’re less scared of AE now :)
AfterEffects source file (AEP):
Sketch source file (.Sketch):
