• Stars
    star
    173
  • Rank 220,124 (Top 5 %)
  • Language
    JavaScript
  • Created almost 8 years ago
  • Updated over 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A Sketch plugin to export sketch file to Adobe After Effect

2.04 update - support Sketch v50

2.03 update - support Sketch v49

Google release another 'Sketch2AE' plugin, if you are looking for that one, visit . https://google.github.io/sketch2ae/

Sketch2AE v2.0 - Shape Export support!

Now you can export shapes! To AE Shape layer!  Then to Bodymovin or Lottie!  
将sketch中的矢量图层导入为AE形状图层,然后就可以接入bodymovin或者Lottie了!
中文版介绍点这里  

How to use:

In Sketch, put the shape you want to eport in an artboard, go to Plungin -> Sketch2AE -> Export Shapes

in the pop-up panel, choose the artboard, set the length and fps, then hit OK.

Open AE and run File -> Scripts -> Run Script File, select the ".jsx" file you exported.
Then you will see the magic :)

(image from https://dribbble.com/shots/3038928-Free-Download-Color-Vector-Characters)

Limitations

Unfortunately, this plugin has some limitations:

  • Gradient Fill and Stroke are not supported. AE dosent allow script to generate gradients automaticly.
  • Uderlying Masks. I will do it in the future.
  • Texts not supported. I will do it in the future.
  • Flip layer not supported.
  • Layer styles not supported.
  • Features that Sketch has but AE not. Stroke position, Arrow, etc.

How to install:

1.Download the Plugin File(hit me) and unzip.
2.Double click Sketch2AE.sketchplugin.


## SK2AE v1.0 introduction.

A Sketch plugin to export sketch slice to Adobe After Effect and potisition them automatically.
Whats more, you can use the Save Frame As Photoshop Layers inside AE to export contents to Photoshop!

How to use:

  1. Save your work on Sketch.
  2. Select the LAYERGROUPs your want to export on the layer list(group it if the layer is not a layergroup), Run Plugins -> Sketch2AE -> Generate ExportSlices.
  3. Run Plugins -> Sketch2AE -> Export Artboards, then on the popup panel set the composition length and FPS, pick artboards you want to export. Hit OK and choose a location to save the generated .jsx script file and slice folder.
  4. In After Effect,run File -> Script -> Run Script File, choose the .jsx file, it will generate compositions automaticly.
**NOTE: Keep the ".jsx" file and "slice" folder under a same parent folder if you want to move it.

Back to Sketch, you can run Plugins -> Sketch2AE -> Clear ExportSlices to clear exsiting ExportSlices.

## Known Issues: * Can not export vactor shapes, editable texts, layer styles.All flatten. * By default it generate 1x slices. If you need 2x or other you have to export by hand. * Rotating or scaling of a layer will result in a big rectangle of slice * If there are missed fonts in the file, the ExportSlices might be clipping.(Try my Plungin:[`Font Packer`](https://github.com/bigxixi/Font-Packer) to pack and achive your sketch files:) )

Shortcut list:

**Becareful of shortcut conflicting with other plugins
  • Control + Alt + S : Generate ExportSlices
  • Control + Alt + E : Export Artboards
  • Control + Alt + C : Clear ExportSlices
  • Control + Alt + H : Help

License

CC-BY-SA 4.0
Special thanks to Ashung's code.

Donation:

Thank you very much!

More Repositories

1

ae2css

Export AE animations to CSS
JavaScript
340
star
2

bodymovin_cn

bodymovin汉化版,同时修复「导出png图片带黑边」的bug
JavaScript
314
star
3

Font-Packer

A Sketch plugin to collect font files you used in your sketch file.
256
star
4

bodymovin

将AE制作的动画导出为json数据并在web端播放
153
star
5

webp_apng_exporter_for_AE

Export webp and apng aniamtion from Adobe After Effect
JavaScript
112
star
6

CSS-Sprite-Exporter

A script can help generate css sprite animation from AE comps.
JavaScript
112
star
7

TouchPoint-Pro

an AE script to make touch point effect easier
JavaScript
42
star
8

img2webp-and-apng-mac-automator

这是个帮助转换 png 序列帧为 webp 和 apng 格式动画的 Mac Automator 服务。
33
star
9

SaveFrameAsPNG-Plus

An Adobe After Effect script to save current frame as PNG file in two ways.
JavaScript
23
star
10

AE-Slicer

Save PNG slices in AE. Support multiple slice zones in one comp.
JavaScript
22
star
11

ffmpeg-mp4-and-gif-mac-automator

18
star
12

FoldandCurl

An Adobe After Effect script to make curling and folding.
JavaScript
13
star
13

aepexporter_plus

aep流程中的AE动画导出脚本加强版
JavaScript
7
star
14

PSDImporter

帮助导入PSD并自动裁切画板的AE扩展
JavaScript
6
star
15

bigxixi.github.io

HTML
4
star
16

tesla-cam-timer

轻量级的为特斯拉行车记录仪加时间水印的工具
HTML
4
star
17

img2webp-mac-automator

mac 下的序列帧转 webp 服务
4
star
18

AE-Script-Runner

An After Effect Script to help run and test your AE script.
JavaScript
2
star
19

bodymovin_fix

fix the 'png dark outline' issue
2
star