当前位置：Our Sketch > 插件 > 布局 > Compo

Compo

一键生成自适应按钮及布局

安装

  1. 下载并解压 Compo.zip
  2. 双击 Compo.sketchplugin 完成安装

使用

  1. 选中目标图层
  2. 执行 Plugins > Compo > Create Component or Update Selected 或使用快捷键 command ⌘ + J

示例

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

  1. 根据内容自适应的按钮

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

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

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

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

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

  3. 自动边距的组件

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

基本信息

  • 收录版本 1.6
  • 更新时间 7年前
本地下载

标签

自适应 按钮 布局