草图:对象相对于符号中的另一个对象/文本移动

平面设计 文本 素描应用 符号
2022-01-13 09:42:27

当我更改前面/“附加到”的文本时,如何使对象自动移动?

我试图弄清楚这个默认符号是如何工作的(下面包含 gif)并复制它。

当我在覆盖中键入“”时,wifi 符号会移动到接收点旁边。当我输入更长的字符串(见 gif)时,wifi 符号会自动移动到文本之后。

就好像 wifi 符号锚定在“载体”文本框(没有固定宽度)的 END 上,并根据文本框的长度移动。这在 Sketch 中是如何完成的?


演示更改符号中的文本,对象根据符号的长度移动

实际的画板没有任何特别之处:

画板图层

有什么解决办法吗?请&谢谢!

4个回答

非常感谢推特用户@kieranpblack!

文本层和第二层之间必须至少有 1px 的距离才能正常工作。适用于任何调整大小选项,包括默认拉伸!

(甚至不记得我是否在 Sketch 41 更新之前尝试过这个?现在看起来很简单。)

通过一些试验和错误,我缩小了要求。

  • 文本的对齐方式需要设置为自动
  • 文字与其他图层的水平间距需≥0且≤19px
  • 文本框顶部到另一层顶部和文本框底部到另一层底部的距离需要≤8px

文本可以在移位图层的左侧或右侧。

对于 Sketch 44+,这变得非常简单。

  1. 创建自动宽度文本图层
  2. 在该图层的右侧放置一个对象(如矩形)
  3. 选择文本层和对象
  4. 从图层面板中选择“创建符号”
  5. 在创建符号对话框中,在符号名称输入下方的下拉列表中选择“↦从左到右布局”

现在,当您覆盖新创建符号中的文本值时,右侧的对象将保持其相对于文本宽度的位置

创建符号时显示布局选项的屏幕截图

显示带有覆盖文本的符号结果的屏幕截图

我找不到有关此的任何文档,但如果您仍然感兴趣,我已经想出了如何重现该行为。

  1. 创建一个背景矩形,该矩形顶部的一段自动宽度文本,以及一个距文本右边缘最多20 像素的较小矩形。
  2. 选择文本和较小的矩形并创建一个组。让我们称之为'group1'
  3. 确保小矩形出现图层列表中的自动宽度文本之后。
  4. 选择背景矩形和 group1,并创建一个符号。
  5. 在符号编辑页面上,选择 group1 并指定“pin to corner”作为调整大小的方法。检查所有其他元素(两个矩形和文本)是否具有“拉伸”作为其调整大小的方法。
  6. 创建一些实例并覆盖文本,它应该可以工作。

从实验中推断出完整的规则集是很棘手的。我希望有手册之类的。