编者按：今天推荐两款神器，一款是谷歌设计团队开发的Sketch2AE，可以帮你一键导入AE动画效果，另一款可以让你是非常方便在浏览器上查看网页注释样式的扩展插件，赶快来体验吧！Sketch2AE随着Sketch的日益普及，越来越多的UE设计师将日常的设计工具从Photoshop换成了Sketch，因为Sketch轻量、高效、插件扩展丰富。但是对于动效来说，Principle虽然和Sketch结合的很好，但是还是比AE略逊一筹，这就导致你在Sketch中做好界面之后需要导出图片在AE中使用。为了解决这个问题，谷歌设计团队推出了一款一键导入Sketch的Sketch2AE插件——Sketch2AE，先来看一段官方的预览小视频：从视频中我们可以看出导入过程是非常流畅快速，层次清晰完整。我下载了官方包安装，双击Sketch插件安装，将Sketch2AE.jsx文件放入Applications/AdobeAfterEffects/Scripts/ScriptUIPanels，即可正常调用插件面板.然后进入Sketch，打开我做的一个小练习，试试导入是否同样顺利：（赠1/2）另一种方法是先将Sketch中选中的图层保存为_SketchExport.sketchae文件，然后通过OpenAE中的.sketchae形式导入：实际体验非常流畅，图层分离非常完整，非常好。不过，谷歌团队也提醒了几点需要注意的地方。一起来看看吧：最好把要导入AE的画板放到一个新的文件中。简单理解，就是因为导入算法需要遍历文件中的Symbols等各种符号。元素，这将大大减少导入时间。在Sketch中需要设置画板（Artboard）的大小，因为这样会限制导入AE后的实际大小。通过选择Sketch层，可以有选择地导入到AE中，也可以直接选择画板本身进行导入。导入AE的方式可以是复制图层数据或者打开.sketchae文件。导入时可选择1x/2x/3x尺寸。总的来说，这真的是一个非常不错的插件功能。再次感谢谷歌设计团队对设计师的贡献。有兴趣的朋友可以自行研究使用。传送门：Sketch2AE官网欢迎关注作者的知乎专栏：Sketch和UE设计你知多少Web风格标注Chrome扩展网页设计师通常使用Chrome或Firefox，为什么？不仅仅是因为它易于使用，而是为了使用按F12出现的Web开发人员工具“查看网页元素”。然而，这个工具真的没有替代品吗？是的，可视化查看器VisualInspector非常易于使用。建议设计师尝试一下。VisualInspector是Chrome的扩展。可以轻松查看页面的字体、颜色、框模型、元素间距等，所有这些都直观地显示出来。这比F12工具以代码展示的形式更容易看。是网页设计师必备的辅助工具之一。扩展名称：VisualInspector扩展主页：https://www.canvasflip.com/visual-inspector/安装扩展（搭梯子）：https://chrome.google.com/webstore/detail/visual-inspector-by-canva/efaejpgmekdkcngpbghnpcmbpbngoclc?hl=enView/ModifyStyles,Labels点击“INSPECT”按钮（第二个）可以实时查看box模型，样式，和其他元素的标注，特别是相邻元素的距离标注功能.相当容易使用。而且，除了查看，还可以实时修改！颜色点击第三个图标（水滴图标）可以查看当前网站风格的所有颜色。图像查看和导出是实用的。如果有些网站禁止右键复制图片，那么这个功能可以轻松导出图片。我们只需要点击第4个拍照按钮，就可以查看当前页面的所有图片，并分别导出！虽然我有100种方法可以从网页中提取图片，但是这个工具太方便了！使用理由可视化查看元素的结构样式，还可以修改查看元素间距的功能（超级实用）图片导出功能不只是导出图片，有时你还想导出图标。有了这个，可以使用F12吗？不，F12有很多强大的功能，但很少被设计师使用。所以最好相互配合使用VisualInspector。
