设计稿哼哧哼哧搞完了，终于要切图了，可是......

东一个西一个icon......太乱辣，不开森...>-

也有隔壁分享经验的小伙伴提议，把需要切图的icon拷贝出来，整理在一个画板上。

其实笔者起初也是这么干的，后来发现了“创建组件”功能决定来这里安利一发儿

- 1 -

把“创建组件”、“组件”放在工具栏常用的地方

工具栏空白处右键单击鼠标—自定义工具栏

将“创建组件”、“组件”分别拖拽到工具栏上方便使用

- 2 -

开始整理切图啦～

icon编好组，命好名，选中待切icon，然后点击“创建组件” 按钮

此时，页面管理里面自动新建symbols／组件页面

再随手把其他icon一样的操作。这样就可以把icon收集到“symbols／组件页面“里啦！每个icon被自动放在单独的画板上，这个特别有用，后面会讲到！

这样“被创建成组件的icon”在设计稿中不能直接编辑，但双击icon后可以在组件页面编辑，我把它理解成PS中的“智能对象”，设计页面和设计icon互不干扰。

组件在设计稿中变成不可编辑状态

在组件页面可编辑

从设计稿中跳转过来编辑完icon后，左上角可以返回到原来的设计页面继续设计。

- 3 -

库的功能

组件有除了类似“智能对象”的功能还有库的功能。创建为组件后，这些icon形成一个库，并可以在“组件列表”中随时调用。

值得注意的是“组件”就像模版一样的存在，icon在组件里做了修改，则icon在设计稿中被调用过的地方也会相应地修改。

点击需要调用的icon

把icon放在想放的位置，单击鼠标左键放下

- 切图 -

在组件页面切图，既不影响设计还可以确保切图的精确度。

小伙伴们是不是会出现，肉眼看去44*44的icon，切图出来却是45*44。像笔者这种懒鬼23333......切完不会再去检查尺寸对不对，经常出现这个问题。在组件里面切图可以避免这个问题。

往往在设计稿中直接切icon，上下左右调切片大小蚂蚁线，各种烦，最后切完还是可能出现多出1px的现象..............这个就要说回前面把icon自动陈列在单独的画板上的功能了。icon创建为组件后，被放在单独的画板上，问题就直观了。

通过导出画板来切图，不管icon本身有哪些隐藏的东西 , 调整好画板的尺寸就能确保输出的尺寸正确啦～

调整好尺寸后就可以放心切图了！

。

。

。

以上，仅仅是笔者一些小经验，如果觉得有些帮助的话多多点赞支持哟～谢谢观看！