sketch 教你一键换肤【图标篇】

sketch Icons 一键换肤

一、安装插件

1.下载并解压 Sketch Icons.zip

2.双击 Sketch Icons.sketchplugin 完成安装  【附件中可下载插件和图标库】

二、具体教程如下

1.导入图标

1. 画个矩形，填充颜色随意，去掉边框（B）——创建组件，命名自定义，双击进入组件，可再复制两个，颜色自定义

2. 导入图标：执行插件（plugins）> sketch icons > import icons 或使用快捷键command ⌘ +  shift ⇧ + I，弹出对话框设置对应参数：画板尺寸（如40-2）、边距、是否转化为symbol、是否添加颜色掩码（部分版本没有）、颜色源，设置完成后点击continue进入下一步，选择要导入的SVG格式图标，图标最终的命名就是你导入进来的命名 

注意：图标一定要是SVG矢量格式（可以下载或者导入自己设计的SVG图标也可以下载SVG图标库，像阿里巴巴，Font Awesome）

【 画板大小和画板内边距关系说明 】

2.换肤

点击组件（symbol）里面的矩形，改变其填充颜色，可自定义，你会发现刚才的图标颜色全变了

3.导出图标

       图标设置好后，我们就开始准备导出：鼠标从空白区域开始框选要导出的图标，全中后点击右侧下方的➕，创建要保存的文件夹位置，可创建多层

      这里要说下插件（plugins）>sketch icons >设置里面的文件路径（add prefix）icons/XX/**.icon,相当于在导出时要选择的文件夹里面再常见一个文件夹卫icons/XX的两个文件夹，类推，所以这个位置可以为空，导出的时候需要几个文件夹分类就直接创建几个

4.创建图标组件库，每个项目都可以用

保存创建好的图标——sketch——首选项——组件库，点击左下方添加到组件库，你会看到刚才创建的图标已经显示在组件库了

切换到其他页面，点击工具栏中组件中下拉找到自己的图标库就可以随便应用了

如果想更换颜色，只需要在图标源文件中，点击颜色源（组件symbol的矩形更改填充颜色为想要的颜色，保存后图标就会自动更改了）

5.其他

重新组织图标：执行 Plugins > Sketch Icons > Organize icons... 允许重新选择同 导入图标 的相关选项以再次组织图标

替换一些图标：该功能允许替换或更新已导入到库的图标，执行Plugins > Sketch Icons > Repalce Icons

在图标上添加颜色掩码

如果想将颜色遮罩应用于单个或一组图标，则选中要更改的一个或一组图标，执行 Plugins > Sketch Icons > Apply a color mask... 或使用快捷键 command ⌘ + shift ⇧ + M 在弹出的对话框中选择其他颜色源即可（颜色想再次修改，只需找到对应的组件symbol，改变填充颜色即可）（来自 Symbol、来自颜色拾取器）、文档源、颜色后提交添加

 

替换 / 删除颜色掩码：执行 Plugins > Sketch Icons > Replace / Remove color mask...

其他不懂的可以私信我，视频暂时没录，以后再完善