Adobe XD 中的内边距

填充是容器边缘到其内容边缘之间的空间。为对象设置填充值将强制容器保持其内部的距离。通过定义固定的填充，我们可以创建可编辑的按钮、下拉列表、工具提示、模态和其他设计元素。

如果我们为一个组件定义填充，它不会在增加内容时破坏其形状。例如，我们创建了一个固定宽度的按钮组件，但没有定义填充。因此，在使用它时，我们希望增加按钮文本，那么它将扩展到按钮之外。在这种情况下，填充非常重要。如果我们为按钮组件定义填充，它将始终保持按钮内的间距。它将节省我们每次手动定义按钮宽度的时间，并在整个应用程序中保持一致性。

使用填充，我们可以轻松地为不同的组件（如按钮、下拉列表、工具提示或模态对话框）维护内容感知的布局。

填充也可以使用状态定义，并在内容更改时自动缩放背景。它将减少设计摩擦和认知过载，同时创建组件或对象。

作为一名设计师，您必须知道时间，因为创建一个完美的设计非常耗时。因此，使用一些智能技术和功能，您可以通过专注于其他方面来减少工作量和时间，使设计更加完美。填充是内容感知布局最出色的功能之一。

在本节中，我们将讨论如何在 Adobe XD 中使用填充来节省时间和精力，并在整个应用程序中保持设计一致性。此外，我们将使用固定填充来为不同的组件创建内容感知的布局。

使用填充

默认情况下，Adobe XD 会识别对象的背景，当

• 我们在组或组件图层中创建并定位一个形状或组到最底层。
• 当其他元素与最底层重叠时

但是，我们可以通过手动定义填充值来控制放置对象的背景空间。要使用填充精确控制背景大小，请按照以下步骤操作

步骤 1： 从属性检查器区域，打开填充切换开关；如果看不到填充选项，请确保选定的元素是一个组件，然后通过按 Ctrl+K 键将其制作为组件。

步骤 2： 您将看到以下填充选项

第一个选项定义了所有侧面的填充，第二个选项允许我们从对象的各个侧面定义单独的填充。

步骤 3： 现在，我们可以根据我们的要求定义填充值。要设置填充值，请选择组件并为所有方向或每个方向的不同填充输入填充值。

它将根据提供的填充值自动更新组件的空间。现在，在调整大小后，它将始终保持其与内容的填充。

仅当图层结构的背景元素放置在组中时，填充选项才可见，并且与其他对象重叠。否则，您将无法在布局部分中看到填充选项。

在调整组件内容的大小或移动内容时，XD 将识别其背景并计算填充值来更新它。

如果您没有任何视觉背景，则填充值设置为 0。

组件中使用状态的填充

组件遵循并继承其父组件的填充值；这意味着子组件将遵循其父组件在实例或状态中的填充值。

如果我们

• 更新子组件和主组件中的填充值。
• 或者子组件未更新其值，则它将覆盖这些值。

XD 中的填充限制

• 我们可以将组件和文本作为组或组件的背景。
• 在原型模式下，填充值不会使用组件内的悬停或点击效果进行动画处理。

填充提示

启用填充时，请记住以下几点

• 所有子组件和实例都从其主组件或默认状态继承填充值。
• 我们可以在画布中使用“发送到后台”选项，将组或组件中的任何项目定位到组背景的正上方。
• 响应式调整大小功能将应用于布尔组、蒙版和组件以调整对象的大小。
• 如果删除背景，XD 会通过评估下一个潜在图层作为背景并相应地更新组件及其空间来自动提升它。
• 如果没有背景图层，则填充值为 0。

在这里，我们讨论了 Adobe XD 的填充功能，以维护组件的空间和对齐。如果我们定义填充值，Adobe XD 将强制主组件在其内部保持间距。