组织 Widgets（元件） #

添加和移动 Widgets（元件） #

要在画布上添加一个 Widgets（元件），从 libraries（元件库） 面板中将元件拖到画布上即可。你也可以通过工具栏左边的的选项中插入更多类型的元件。

要移动一个 Widgets（元件），可以直接把它拖到合适的位置，或选中使用方向键移动它。你也可以使用顶部工具栏中的 X 和 Y 字段或在 Style（样式） 面板中定义精确的画布坐标。

当你在画布上拖动Widgets（元件）时，它们会与画布网格、你所设置的任何参考线以及附近的其他Widgets（元件）吸附。你可以在画布网格、参考线和吸附 (opens new window) 这篇文章中了解更多。

批量操作多个Widgets（元件） #

当你在画布上选择了多个Widgets（元件）时，你可以选择将它们作为一个整体来移动和更改样式，或者在选择中重新定位每个单独的 Widgets（元件）。

要重新定位整个选区，请使用顶部工具栏中的 X 和 Y 字段。这将把选择的元件作为一个整体移动到画布上的目标坐标，而每个元件将保持它与目标坐标的相对距离。

要重新定位每个单独的 Widgets（元件），使用样式面板中的 X 和 Y 字段。这将把选择中的每个元件移动到画布上的目标坐标。

注意

当选定的 Widgets（元件）位于画布上的不同位置时，样式面板中 X 或 Y 中的字段将是空白。

调整 Widgets（元件）的大小 #

要调整一个 Widgets（元件）的大小，在画布上选择它并拖动它的大小手柄。你可以在拖动的同时按住 SHIFT 键来保持Widgets（元件）的长宽比。

你也可以使用顶部工具栏中的 W 和 H 字段或在 Style（样式） 面板中为一个 Widgets（元件）选择精确的尺寸。要保持 Widgets（元件）的长宽比，点击 W 和 H 字段之间的 保持长宽比 图标。或者你可以在其中一个字段中输入一个新值后按下 SHIFT + 回车。

一次性调整多个 Widgets（元件）的大小 #

当你在画布上选择了多个元件时，你可以选择将整个选区按比例调整为一个整体，或者调整选区中每个单独的元件的大小。

要调整整个选区的大小，请使用顶部工具栏中的 W 和 H 字段。这将设置选区本身的宽度和高度，然后按比例调整所选元件的大小和位置，以适应所选尺寸。
要调整每个单独的 Widgets（元件）的大小，使用样式面板中 W 和 H 字段。这将把选择的尺寸应用于选择中的每个元件，例如，把每个元件的宽度设置为 150px。

注意

当选定的元件有不同的尺寸时，样式面板中 W 或 H 字段将是空白。

距离参考线 #

当你在画布上移动一个Widgets（元件）时，会出现红色的参考线，向你显示该 Widgets（元件）和附近其它 Widgets（元件）之间的距离。这些参考线也会在 Widgets（元件）沿着边缘或中点对齐时提示你。

你也可以查看 Widgets（元件）之间的距离参线，而不需要移动它们：

选择一个 Widgets（元件）。
在按住 ALT 键的同时，将光标悬停在第二个Widgets（元件）上。

命名 Widgets（元件） #

在默认情况下，Widgets（元件）是没有被命名的。在 Outline（大纲） 面板中或其它需要显示Widgets（元件）名称的位置中，未命名的 Widgets（元件）由其 Widgets（元件）类型来标识。 (Rectangle), (Image), 等等。

如果你在Widgets（元件）上输入文字 (opens new window)，它会被文本的前几个字所识别。例如，默认的段落 Widgets（元件）在 Outline（大纲） 面板中显示 Lorem ipsum dolor si。

要给一个Widgets（元件）一个名字，在Outline（大纲） 面板中缓慢地双击它。或者，你可以选择它并在Style（样式） 、Interactions（交互） 、或 Notes（笔记） 面板的顶部输入一个名字。

打组 Widgets（元件） #

你可以把Widgets（元件）分到不同组中 (opens new window) ，以便把它们作为一个整体来命名、定位和交互。要做到这一点，选择两个或更多的Widgets（元件），然后点击顶部工具栏的 Group 。要拆开一组 Widgets（元件），选择该组并点击 Ungroup 。

你可以在Widgets（元件）组 (opens new window) 这篇文章中了解更多。

图层顺序 #

当两个或多个Widgets（元件）相互重叠时，它们的图层顺序决定了哪个Widgets（元件）出现在前面。图层顺序较高的元件将出现在前面，而较低的元件将出现在后面。

图层顺序，或 “z-index”，也决定了可以在浏览器中用 TAB 键导航的Widgets（元件）的标签顺序，比如像文本字段 (opens new window) 和droplists (opens new window) 的表格Widgets（元件）。TAB 键首先关注最后面的Widgets（元件），然后逐步向前移动。

你可以在 Outline（大纲） 面板中查看一个Widgets（元件）的具体深度/z-index 位置。默认情况下，面板是从前到后排序的，所以面板顶部的Widgets（元件）在前面，底部的Widgets（元件）在后面。(如果需要，你可以通过点击 Outline（大纲） 面板右上方的 排序和过滤 图标来改变排序方向）。