Sketch2AE

from Google SUMux Motion Design
motiondesign@google.com

Sketch2AE download

Live After Effects layers straight from Sketch artboards

Sketch layers may now be imported into After Effects without redrawing everything in Illustrator. Avoid the startling realization that you have to repeat the whole import process simply because you forgot to split one element out onto its own layer or that type has to be converted into live text as an additional process per layer.

Quickly export selected layers or a whole artboard from Sketch with type metrics, transform data, images, symbol hierarchy, and grouping intact. It's little bit better than the native Illustrator => AE import. Hooray.

Built by Adam Plouff for the SUMux Motion Design Team at Google.

Install


The system consists of a Sketch plugin and an After Effects script that will stringify and parse a JSON version of the layer data. The system is open source and also available on GitHub (change log).

v0.53 is the current version

    Sketch

  1. Double click the Sketch2AE.sketchplugin file
  2. Sketch should open and tell you that Sketch2AE is installed
  3. Navigate to the Plugins menu up top. You'll see Sketch2AE and its submenus

    After Effects

  1. Close After Effects
  2. Drag the Sketch2AE.jsx file into Applications > Adobe After Effects [version number] > Scripts > ScriptUI Panels
  3. Fire up After Effects again
  4. Navigate to the Window menu up top. At the bottom you'll see Sketch2AE.jsx

Workflow


1. Copy to new Sketch File

Select your artboard, create a new Sketch file, paste artboard into new file.

**This step is optional but recommended.**
Why? Complexity within a Sketch file can vary from user to user. In order to find all the symbols in a file, the plugin has to run through all the symbols to find the right one. This can take long time from a stickersheet or similar heavy file.

2. Setup the artboard

Inside of Sketch, assets are allowed to float loose within the file without an Artboard (like in a stickersheet). This is totally cool for working in Sketch, but in order for Sketch2AE to know how big to draw everything within an AE comp, we need an artboard. The size of the artboard will be the bounds of the comp, so set this size correctly.

Keyboard shortcut A in Sketch allows you to define a new artboard if needed.

3. Select layers

Drag a bounding box over all the art within your artboard to select all visible layers, or select specific layers for export. Selecting this way will skip non-visible layers that may only exist in the artboard for reference.

Or select the artboard itself to select all the layers (hidden or visible). That's your call, dude.

4. Sketch2AE Export

  • Copy Selected Layers
    Creates a list of all selected layer data and copies it to the clipboard to reduce extra files*.
  • Save Selected Layers
    Saves the list of all the selected layer data to a file: _SketchExport.Sketchae. Helpful for handing off to an After Effects user without Sketch.

*Images within your selected layers (along with gradients) will be exported for import into After Effects.

5. Import into AE

With the Sketch2AE panel open, select one of the two import options to paste data from Sketch or open and export a .Sketchae file. Images will be imported (if applicable), symbols will be built as reusable precomps (if applicable), and a whole lot of layers will be built based on the Import Options.

6. Import Options

Data from sketch will be imported with a couple simple options.

  • A new comp can be created for each import at 1x, 2x, or 3x.
  • Data may also be added to an open comp. The imported artboard (and all layers) will be scaled to fit the open comp horizontally.

SKETCH FEATURES in AE


Grouping

Groups aren't exactly a thing inside of AE, but they really should be. To support the grouping of elements, Sketch2AE will create a bounding box layer as a parent to the grouped layers. This parent layer will be inactive and set as shy to keep the comp from cluttering. Manually activate these layers (click the eyeball), or click the Group Visibility button to toggle all of these grouping layers.

Symbols

One of the most powerful Sketch features is Symbols. An element can exist in multiple locations and artboards and point back to a single reference for quick updating. Hmmm... that sounds a lot like a precomp. Sketch Symbols will be created as precomps at their native size, scaled as needed and reused in master comps.

Gradients as images

Great care has been taken to import as many editable (and animatable) properties as possible. One property that AE doesn't import well is gradients (the gradient edit panel is not scriptable). To get around this, Sketch2AE will export gradient fills, gradient strokes, image fills, and textures as image of the layer.

Supported Features


Workarounds

Image Rendering and Position Offset

Image effects like Blur and Color Adjustment will be rendered with the exported images to preserve their design in Sketch. Sometimes these effects can increase the bounds of a layer larger than the metrics say it is. This leads to a position offset of the layer, pushing it down and to the right. Some manual adjustment will be required in AE to correct this.

Thick strokes on rendered images (with gradients and textures) will also result in this position offset – Something to be aware of.

Text Misalignment

It happens. Sorry about that. The math that sorts the differences between Sketch and AE can't catch everything (especially multi-line text strings). The good news is that the text is live and can be easily edited and realigned.

Shape Rotation

Since Sketch has no concept of an anchor point, shape rotation is based purely on the object center. This means that shape rotation is possible to support and retain accurate positioning. Layers > Combine > Flatten all paths to ensure correct importing.

Sketch Shape AE Shape Layers Notes
Vector Path Layer with appropriate strokes and/or fills
Pencil Path Layer with only stroke
Line Path Layer with only stroke
Arrow Unsupported Since AE doesn't support end shapes, it cannot drawn an arrow. Instead the shape will be drawn as a simple path line.
Rectangle Rectangle Primitive shape with top-left anchor point
Oval Ellipse Primitive shape with top-left anchor point
Rounded Rectangle Rectangle Primitive shape with corner rounding
Star Path Layer with appropriate strokes and/or fills
Polygon Path Layer with appropriate strokes and/or fills
Triangle Path Layer with appropriate strokes and/or fills
Sketch Text AE Text Box Allows multi-line and justification
Options Unsupported Decorations (underline, strike-through), Lists, and Text Transform are not supported in AE
Color Text Color
Size Size Comes across native and the layer itself is scaled to compensate for the comp size
Alignment Paragraph justification
Width (auto/fixed) Unnecessary With text boxes, this setting is not needed
Character Spacing Tracking
Line Spacing Text animator line spacing Applied with text animators since Leading is not scriptable
Paragraph Spacing Unsupported Not scriptable in AE
Fill Color Text animator color Additional Fills are applied with text animators. Fills override base color. Fill blending modes are not supported.
Stroke Color Text stroke One stroke is available in Sketch and translates to the text layer's stroke
Additional Layer Types
Combined Shape (Boolean) Shape Layer Multiple primitive shapes and paths may be combined in Sketch with Union, Subtract, Intersect, and Difference. These shapes will be combined into one shape layer with Merge Paths.
Image Imported Image Images, gradients, and textures are all rendered from Sketch and imported into AE. See sidebar.
Symbol Precomp Created once and reused in multiple comps
Group Hidden guide layer Used as a parent for grouped layers. Group parent may be used to reposition and scale all nested layers.
Masks Set Matte Effect When layers are masked inside of a group, the lowest layer will be used as the Matte for all other layers in the group
Transforms
Position Position - Comp size multiplied Layer anchor points set to top-left and positioned relative to the comp size
Size Unnecessary Scale is set to 100% for all layers (except text) and this value is used to define the layer's bounds to help draw it in AE
Rotation Unsupported Sketch uses the top left for position and scaling, yet uses the layer geometric center for rotation. Setting a rotation and position value becomes pretty tricky, so remember to Flatten the before export layer to maintain the appearance.
Opacity Opacity One of the few properties from Sketch that doesn't require crazy math to make work. yay
Blending Mode Layer Blending Mode Blending on the layer itself, not to be confused with a Fill's internal blending mode
Fills
Color Shape layer fill Multiple stacked fills may be exported. To lighten the complexity, fills must be enabled to be exported.
Blending Mode Shape fill blend mode This blend mode affects how the stacked colors affect one another, not how the layer interacts with other layers
Opacity Opacity This opacity affects how the stacked colors affect one another, not how the layer interacts with other layers
Borders/Strokes
Color Shape layer Stroke Multiple stacked strokes may be exported. To lighten the complexity, strokes must be enabled to be exported.
Position Unsupported AE cannot set the stroke position (inside, center, outside) and will default to Center
Thickness Stroke Width This value comes across identical. The scaling of the layer to the comp size is done in the shape's group transform.
Ends Line Cap Butt, Round and Projecting cap
Joins Line Join Butt, Round and Projecting join
Start/End Arrow Unsupported AE doesn't support end shapes. dang.
Shadows
Shadow Drop Shadow effect Multiple stacked drop shadows may be exported. To lighten the complexity, shadows must be enabled to be exported.
Color Shadow Color
Color Opacity Opacity Opacity is split out as a separate property in AE.
X, Y Direction and Distance Offset values are "trigonomitrized" into something AE understands.
Blur Softness
Spread Unsupported
Inner Shadows
Inner Shadow Inner Shadow layer style Only one inner shadow layer style is available in AE, so the first enabled Inner Shadow will be recreated
Color Shadow Color
Color Opacity Opacity Opacity is split out as a separate property in AE.
X, Y Direction and Distance Offset values are "trigonomitrized" into something AE understands.
Blur Softness
Spread Unsupported
Blur
Gaussian Blur Unsupported Do it in AE. It's a lot easier to control.
Motion Blur Unsupported Do it in AE. It's a lot easier to control.
Zoom Blur Unsupported Do it in AE. It's a lot easier to control.
Background Blur Unsupported Do it in AE. It's a lot easier to control.
Image Color Adjust
Hue Unsupported Effects will be exported with images
Saturation Unsupported Effects will be exported with images
Brightness Unsupported Effects will be exported with images
Contrast Unsupported Effects will be exported with images