Paddy：在草图中添加自动填充和间距

在这个快速提示中，我将向您展示一种非常简单的方法，可以在Sketch中为您的设计添加填充和间距。

观看截屏

Sketch中常见的UI设计问题

首先让我向您展示在使用Sketch时可能会遇到很多问题。 假设您要创建一个简单的按钮； 您可以从画板上的矩形开始，给它适当的颜色，然后在另一层上添加文本。 最后，您要对齐对象，将它们分组在一起，然后就可以完成。

现在假设您要创建另一个按钮； 相似，但文字不同。 您可能会复制已经制作的内容，然后更改文字。

假设您要在每个边框上保留相同的横向填充，然后根据希望矩形的显示方式更改矩形的宽度。 手动过程：

这似乎是一个简单的任务，但是如果您必须一遍又一遍地执行此操作，则实际上会非常耗时。

解决方案：稻田

所以让我介绍帕迪 ; Sketch的插件，可以节省您的时间。

设置填充

首先安装插件，然后在画板上选择一些文本，然后转到“ 插件”>“ Paddy”>“输入padding进行选择” 。 在弹出的对话框中，您可以像在CSS中一样设置填充。 例如，输入值10 20将使您在顶部和底部有10px的填充，向右和左侧有20px。

然后，Paddy将自动创建一个大小与您想要的大小完全相同的backround矩形。 但这是很酷的部分：当您更改文本时，背景矩形将保留您先前设置的填充尺寸。

将图层名称从“ 背景（10 20）”编辑为例如“ 背景（20 20）”将更改填充以反映新值。

设定间距

在对象之间增加间距时，这也适用。 假设我们有两个按钮，我们想在它们之间增加50px的间距。 我们选择两个按钮，然后转到“ 插件”>“ Paddy”>“ Spacing”进行选择 ，然后我们可以输入所需的值。 我们将使用v单位定义垂直间距，或使用h单位定义水平间距。

在这种情况下，我们使用了50v ，以便将两个按钮在垂直方向上精确地间隔50px。

如您所见，按钮组已包装在另一个组中，该组包含间距值。 如果我们要在该组中添加另一个按钮，它也将继承相同的间距。 而且，如果我们要更改填充值或这些按钮之一中的文本长度，则会为我们重新计算并重新放置整个内容。

结论

Paddy是一个很棒的插件； 我建议您下载它，并查看它可以执行的其他一些操作。 肯定会节省您的时间！

翻译自: https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-add-automated-padding-and-spacing-in-sketch--cms-30936