如何将AI绘制的icon批量导入sketch

Sketch用于UI设计是很方便的,但是图形设计在illustrator(AI)里面操作更方便。所以两者之间的配合与互通,可以使工作变得更高效。

我之前都是通过复制粘贴或者拖拽,将AI文件转移到sketch里面,颜色、尺寸也得单独改动,费时且费力。

哪里有困难哪里就会有大神伸出援助之手,所以,一个图标批量导入的sketch插件就诞生啦。

插件链接:AMoreaux/Sketch-Icons​

其实作者在GitHub上已经介绍很详细了。下面就说一下我在安装与使用过程中遇到的一些需要注意的点吧。

安装好插件后,就开始试手了。

第一步:

首先要准备SVG文件。注意哦,在用AI绘制图标时,每一个图标一个画板,且在导出SVG之前(用文件-->导出,勾选画板,而不是快速导出),要检查图层命名是否都为英文名称,出现中文名称的话可能在导入sketch时会出现错误哦。


图层命名为英文


第二步:打开sketch,导入图标。

依次选择“  Plugin --> Sketch icons --> Import icons;



导入SVG图标

之后就会出现这样一个弹窗

Artboard size 就是设置导入图标时设置的画板大小;

Artboard padding 就是边距;

勾选  Convert to symbol的话,导入的图标就会自动转成Symbol;

Mask  这一选项是用来给图标替换颜色的。可以自己制作一份color mask,很简单,在当前文件中画几个不同颜色的矩形,分别转成symbol 就可以了。


设置导入参数

导入成功后就是这样的


导入图标成功

想了解更多关于这个插件的高阶功能的童鞋可以打开这个链接

https://blog.prototypr.io/introducing-sketch-icons-2074d9dc9ed2

感谢阅读,欢迎留言交流~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本书讲了什么 Sketch3基本操作介绍。 作者什么来头 郑成云,社会化媒体营销实践者,专注网络社交领域。从业6年...
    少穻阅读 2,458评论 0 1
  • 扩展Sketch 入门插件基础您的第一个插件开发环境调试ActionAPI发布插件 高级插件捆绑插件,脚本和命令插...
    iOSDevLog阅读 17,572评论 0 34
  • Sketch作为一个为UI设计而生的工具,全矢量、轻量级、像素级精准,非常适合做移动端应用类的界面设计和简单的扁平...
    Luna不停阅读 16,067评论 13 96
  • 一月一起北国跨年/轻狂不知疲倦,却乐此不疲 二月你还没有出现/苔藓漫过墙壁覆盖了我们的唇迹 三月仿佛你睡在隔壁/鸟...
    产小品阅读 200评论 0 1
  • 也许很多人知道焦糖玛奇朵,因为他的甜可以让你忘却咖啡存在于舌尖的苦味,却在鼻腔中留下了迷人的香气。焦糖玛奇朵是忠实...
    呆牛阅读 2,706评论 4 16