Sketch library 如何拆分组件库

用户头像
上海/UI设计师/7年前/1732浏览
Sketch library 如何拆分组件库

组件库内容越来越多,为了更好的使用组件,将部分组件剥离出来独立成库,一方面减小组件库的体积,另一方面方便不同项目随时调用

🔌下面详细介绍下具体操作步骤,将会用到两个sketch插件

  1. Automate

  2. Symbol Swapper

………………………………………………………………………………………………………………

假设要把所有图标icon从“移动端组件”中独立出来,复制“移动端组件”重命名为“图标组件”。这时虽然看上去是两个不同名字的组件库,但是当中包含的组件库ID和各个小组件的ID是完全相同的,所以第一步我们要改变它的id


👉STEP 1
导入“移动端组件”和“图标组件”


👉STEP 2
打开Automate插件 > Library > Fix Library ID Conflict,检查组件库ID冲突


👉STEP 3
改变其中一个组件库的ID,Change ID,然后关闭即可


👉STEP 4
ID号改完了还没完,你会发现它并没有起到什么作用,所有的组件还都默认链接着第一个导入的组件库。所以我们接下来要做的是把组件库对应上,要用到的是“Symbol Swapper插件”

把所有组件连接到正确的组件库上,所有的都要连上。按name或者ID你就自己看着办吧

之后会给到一个报告,共有多少组件成功连上了,可以查看具体是哪些组件“View Report”,也可以忽略“Dismiss”。

完事后,记得点右上角紫色“组件库有更新可用”


👉STEP 5
好了,大部分组件已经对应上了,但是仍然会发现部分组件链接的不对。如下图,这个小按钮应该是在移动端组件里,由于我剥离组件之后又修改了她的名字,这样他就找不到之前对应的链接(二级目录里没有☑️),所以接下来我们要手动批量把它连上。


👉STEP 6
选中一个组件,然后还是利用Symbol Swapper插件

分为3个区域:

  1. 选择该组件应该对应的目标组件库

  2. Swap with symbol of same name(通过组件名称匹配,若存在会在3区域默认显示出来)    

    Swap with symbol of same ID(通过组件ID匹配,若存在会在3区域默认显示出来)

    Swap with symbol of same ID(通过组件ID匹配,若存在会在3区域默认显示出来)
    Let me choose...(最保险的是手动选择,然后在3区域选择)

  3. 选择对应的组件名称


👉STEP 7
大功告成,让我们在检查下这个组件,二级目录前的☑️出来啦!✌️

⚠️另外需要注意:
这个方法只适用于一级组件,嵌套的内部组件仍需要手动去关联,我能做的就这么多了。。。。



如何检查是否还有组件未成功链接组件库?

还是利用“Automate插件”

默认显示的是所有组件,选择第三个“show only symbols that symbol is not found in library”当页面中组件全部链接完之后,这里就一也不会显示啦!


23
举报
|
29
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
【新年UI图标】体育icon
【新年UI图标】30个图标
新能源APP应用UIKit
3D卡通UI界面图标可爱插画免扣素
盲盒APP UI设计
手表表盘UI系列
UI通用设计素材1
钱包ui模板
【新年UI图标】秒杀icon
Security Camera UI kit
APP/小程序商业项目UI模板|99个高保真UI+79个原型
智能家居中心 简约 UI设计组件库
高级感金属拟物 UI设计组件库
我的钱包-UI界面设计-app
UI 登录界面设计模板包
【新年UI图标】钱包icon
【新年UI图标】汽车icon
户外旅行飞机情侣假日出行
高级表盘系列UI源文件
新拟态风格 UI设计组件库
【新年UI图标】旅行icon
【新年UI图标】会员icon
科技医疗透明柜UI界面设计
你可能喜欢
相关收藏夹
大家都在看
登录注册