Sketch is a widely used tool for UI designs. It implemented the

Sketch是用于UI设计的广泛使用的工具。 它实施了

atomic design methodology and made the workflow of UI design much more efficient. You can create a Symbol in Sketch and use it everywhere in your design, which gives you a great advantage to keep “a single source of truth. “原子设计方法，并使UI设计的工作流程更加高效。 您可以在Sketch中创建一个Symbol并将其在设计中的任何地方使用，这为您保持“单一事实来源”提供了很大的优势。 “

However, it’s painful to create a slightly complex Symbol before Sketch introduced the Smart Layout and Resizing features. All Sketch users experienced how the contents inside a symbol were stretched not as intended and had to “detach” it. In this article, I want to share my experience of creating better Symbols to gain more flexibility and reduce the detaching.

但是，在Sketch引入智能布局和调整大小功能之前，创建一个稍微复杂的Symbol是很痛苦的。 所有Sketch用户都体验了如何将符号内的内容拉伸到超出预期的程度，并不得不“分离”该符号。 在本文中，我想分享我创建更好的Symbols的经验，以获得更多的灵活性并减少分离。

引入智能布局 (Introducing Smart Layout)

Smart Layout is a feature introduced in Sketch 58. You can select the Layout when you create a Symbol. Smart Layout gives you more possibility to customize the Symbols for different Scenarios.

Smart Layout是Sketch 58中引入的功能。创建符号时可以选择Layout。 智能布局使您可以为不同的场景自定义符号。

Let’s take a navigation menu for example. First, I created a simple Symbol called “Menu item” and then used it in another “Menu” Symbol:

让我们以一个导航菜单为例。 首先，我创建了一个名为“菜单项”的简单符号，然后在另一个“菜单”符号中使用了它：

For the “Menu” Symbol I applied the horizontal “Left to Right Layout”:

对于“菜单”符号，我应用了水平的“从左到右布局”：

When I use the “Menu” Symbol in the page design, I can easily hide one element in it and the following elements will be automatically “pulled”:

当我在页面设计中使用“菜单”符号时，我可以轻松地在其中隐藏一个元素，随后的元素将被自动“拉出”：

It’s often that different pages on the same website have different navigation items. With Smart Layout you can design a menu with all possible items and hide the unnecessary ones in different scenarios.

同一网站上的不同页面通常具有不同的导航项。 使用Smart Layout，您可以设计一个包含所有可能项目的菜单，并在不同情况下隐藏不必要的菜单。

To learn more about Smart Layout, you can visit this page on Sketch’s website.

要了解有关智能布局的更多信息，请访问Sketch网站上的此页面 。

调整大小简介 (Introducing Resizing)

Resizing is a feature to control the positioning and stretching of the element when its parent (a Symbol or a Group) get resized. There are two options: “Pin to Edge” and “Fix Size”:

调整大小是一项功能，可以在调整其父项(符号或组)的大小时控制元素的位置和拉伸。 有两个选项：“ Pin to Edge”和“ Fix Size”：

With these two options you can make an element stay in its position or keep its size while its parent element get stretched.

使用这两个选项，可以使元素保持其位置或在其父元素被拉伸时保持其大小。

Let’s say you have a simple button with an icon. The icon will be resized according to the button if you don’t set up the Resizing:

假设您有一个带有图标的简单按钮。 如果您未设置调整大小，则图标将根据按钮调整大小：

To fix this we can make the icon pin to top-left and keep its size:

为了解决这个问题，我们可以将图标固定在左上角并保持其大小：

Here is the result:

结果如下：

结合智能布局和调整大小 (Combining Smart Layout and Resizing)

Smart Layout plus Resizing can help you create powerful and configurable components and dramatically ease the pain of maintaining a design system.

智能版式和调整大小可以帮助您创建功能强大且可配置的组件，并大大减轻维护设计系统的麻烦。

Now let’s try to create a notification component which could contain

现在让我们尝试创建一个通知组件，其中可能包含

1. an indicator icon, a “close” button, or a “Dismiss” link.
   指示器图标，“关闭”按钮或“关闭”链接。
2. multiple-line text.
   多行文字。

As you can see in this image:

正如您在此图中看到的：

Yes, we can do it with just one Symbol!

是的，我们只用一个符号就能做到！

First, we have to create simple Symbols for the “info” button, the “close” button, and the “Dismiss” link so we can hide them if it’s necessary, because we can only hide Symbols in Sketch.

首先，我们必须为“信息”按钮，“关闭”按钮和“关闭”链接创建简单的符号，以便在必要时可以将其隐藏，因为我们只能在Sketch中隐藏符号。

After that we can set up the Resizing for each element:

之后，我们可以为每个元素设置“调整大小”：

1. “info” button: Fixed width, Fixed height, Pin to top-left.

   “信息”按钮： 固定宽度，固定高度，固定在左上角。

2. “close” button and “Dismiss” link: Fixed width, Fixed height, Pin to top-right

   “关闭”按钮和“关闭”链接： 固定宽度，固定高度，固定在右上角

The text content part is a little bit tricky. You have to first select the “Fixed Size” in the Alignment section:

文本内容部分有些棘手。 您必须先在“对齐”部分中选择“固定大小”：

Then under Resizing unselect all “Fix Size” and make it pin to all four edges:

然后在“调整大小”下取消选择所有“固定大小”，并将其固定到所有四个边缘：

The whole configuration is as below:

整个配置如下：

Then you can use the symbol in the page design, hide the elements when you want to, or resize it to make a multiple-line dialog:

然后，您可以在页面设计中使用符号，在需要时隐藏元素，或调整其大小以形成多行对话框：