安装

下载并解压 Compo.zip

双击 Compo.sketchplugin 完成安装

使用

选中目标图层

执行 Plugins > Compo > Create Component or Update Selected 或使用快捷键 command ⌘ + J

示例

在设计流程中通常会设计各式各样按钮且会不同的边距。当按钮内容更改后,不得不手动的去调整边距以适应新内容。Compo 帮你轻松的解决该场景问题,甚至解决更复杂的一些情况、或配合 Symbol 使用

根据内容自适应的按钮

新建一个文本层并选中,执行 Plugins > Compo > Create Component or Update Selected 或使用快捷键 command ⌘ + J 创建组件

更改文本层内容后再次执行命令即可对新内容自适应大小

对文本层命名,输入目标边距以冒号分隔 上:右:下:左 再次执行命令同样会自适应

16a9192f929ae72190bc66f916c28eba.gif

1d9e8221a8a88121b7d5ba7ef0700bb8.gif

根据内容自适应带 Icon 的按钮

当按钮带 Icon 且需要与边保持一定边距,如:需距右边距 12,则可选中该 Icon 层后重命名在名称后加上 r:12(t:上、r:右、b:下、l:左),最后再执行同上命令即可

ec3a4c217816f742c7ce71088d66bc95.gif

自动边距的组件

当需要内容与边缘保持一定边距,如:需与底边保持边距,修改内容后超出预期边距,则可选中该图层后重命名在名称后加上 b:10,最后再执行同上命令即可

98ff8e7376b7d2eab53a95b9f2dc66e8.gif

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐