使用数据工具,您可以将不同的图像和文本添加到您的设计中,以创建逼真的模型和原型。
Sketch 默认包含几种类型的数据源,包括
- 文本数据:姓名和城市。
- 图像数据:一套用于头像和图块的多样化人物图片。
- 关联数据:一组包含图片和简短个人资料的用户资料。
Unsplash 插件预装在 Sketch 中,您可以使用它从 Unsplash 库中搜索和插入图像,或随机插入图像。您还可以使用第三方数据插件来使用数据源。
将数据添加到图层
要快速将数据作为新图层添加到画布,请打开工具栏中的**插入** + 菜单,然后选择**数据** ,或者从菜单栏中选择**插入** > **数据**。然后,选择要添加的文本、图像或关联数据。
要将数据直接添加到现有图层,请先选择图层,然后打开菜单栏中的**图层** > **数据**,再选择**文本**或**图像**数据类型(Sketch 始终将**关联**数据作为其自己的图层组插入)。
请记住,您只能将图像数据添加到现有的形状或图像图层。同样,您只能将文本数据添加到现有的文本图层。
您可以使用数据工具快速添加或更新图像和文本数据
默认情况下,我们将显示来自您的数据源的随机数据。但是,您可以切换关闭**随机插入数据**复选框,以在**数据**菜单中按数据源中的相同顺序显示数据。

切换关闭“随机插入数据”复选框以按数据源中的相同顺序插入数据
刷新和断开数据连接
要刷新来自数据源的图像或文本,请选择一个或多个数据图层,打开工具栏中的**插入** + 菜单,然后选择**数据** > **刷新数据**。或者,在菜单栏中选择**图层** > **数据** > **刷新数据**,或按 ⇧⌃D(版本 87 及更早版本:⇧⌘>D)。
要断开数据源的连接,请选择一个或多个数据图层,打开工具栏中的**插入** + 菜单,选择**数据** > **断开数据源连接**。或者,在菜单栏中选择**图层** > **数据** > **断开数据源连接**。
请记住,断开图层与数据源的连接不会恢复其原始内容。
将数据与符号一起使用
您可以在一个符号中将多个数据源添加到不同的图层。
要刷新符号中已有的所有图像或文本数据,请选择它,然后转到**图层**、**数据**,然后在菜单栏中选择**图像**或**文本**。
您还可以使用检查器中每个符号覆盖中的**数据** 按钮在符号中添加或刷新文本数据。
如果您在符号中有多个图像,但只想刷新其中一个图像,请展开图层列表中的符号并选择图像(或使用 Command 键单击它),然后单击检查器中的覆盖面板中的**数据** 图标。或者,在符号中选择图像,然后在菜单栏中转到**图层** > **数据** > **从符号源刷新数据**。
如果您在符号中有多个图像,您可以通过检查器中的覆盖一次性刷新它们 - 但不能一次刷新一个。要刷新单个图像,请在图层列表中选择它(或使用 Command 键单击图像),然后在菜单栏中转到**图层** > **数据** > **从符号源刷新数据**。
您可以轻松地通过符号覆盖添加或刷新数据
添加新的数据源
您可以创建自己的数据源并通过**Sketch** > **设置** > 数据 将其添加到 Sketch 中。
如何在设置中添加新的数据源
创建新的数据源
要创建您自己的文本数据源,请创建一个纯文本 (.txt) 文件,并在每行上添加一个数据值,例如
Afghanistan
Albania
Algeria
Andorra
Angola
...
对于新的图像数据源,您只需创建一个包含所有要使用的不同图像的文件夹,然后通过设置中的**数据**选项卡将其添加。
您可以使用 JPG、PNG、TIFF、GIF 和(从 v90 开始)WebP 文件格式作为图像数据。
将您的数据源保存在不会更改的位置。如果您将数据源移到其他位置,则需要使用更新的位置再次将其添加到 Sketch 中。
使用关联数据
对于关联数据,您可以使用 JSON 文件以有意义的方式组合不同的数据集,从而更容易更真实地对您的设计进行压力测试。
使用关联数据一次更新不同类型的数据
使用关联数据创建 JSON 文件
要开始,您需要一个包含以这种格式格式化数据的 JSON 文件
[
{
"Photo": "baobab.jpeg",
"Location": "Menabe, Madagascar",
"Title": "Avenue of the Baobabs",
"Trees": "20 trees",
},
{
"Photo": "laurel.jpeg",
"Location": "Madeira, Portugal",
"Title": "Laurel Forest",
"Trees": "300 trees",
},
{
"Photo": "bamboo.jpeg",
"Location": "Kyoto, Japan",
"Title": "Sagano Bamboo Forest",
"Trees": "2000 trees",
}
]
您还可以在 JSON 文件中包含嵌套的数据结构,并在符号和组中使用它们。使用组名作为 JSON 结构中的嵌套组。嵌套数据将显示在每组数据中的组内。
[
{
"name": "Anje Keizer",
"avatar": "/Faces/109.jpg",
"location": "Bangkok",
"bio": "Dog lover 🐕, mahjong champion 🀄️, and traveler 🗺 ",
"social": {
"handle": "@akeizer01",
"bio": "Loving life and living in Dallas, go Mavs!"
}
},
]
通过**Sketch** > **设置** > **数据** > 添加数据 添加您的 JSON 文件,就像添加任何其他数据源一样。
将您的 JSON 文件保存在 Mac 上的本地位置 - 并且将 JSON 文件和图像放在同一个文件夹中。我们还建议调整图像大小,以提高性能。
在现有设计中使用关联数据
在图层列表中,将组或符号中的图层命名为与 JSON 数据文件中使用的名称完全相同。完成后,选择您的组或符号,然后从工具栏中的**数据** 中选择新的 JSON 数据源,或者通过在您使用 Control 键单击选择时出现的上下文菜单选择。
如果您选择一组图层或多个符号,则无法从检查器中应用关联数据。相反,请使用工具栏中的**数据**或上下文菜单(Control 键单击)应用关联数据。
如何在现有设计中添加关联数据
在空白画布上使用关联数据
您还可以使用关联数据将新的一组图层直接添加到画布。从**插入**菜单中,选择**数据**并选择要使用的关联数据源。然后,您可以将关联数据排列为网格以添加更多条目,并选择刷新数据以使用新信息刷新每个图层。
如何在空白画布上添加关联数据
与数据插件链接
您还可以像安装常规插件一样安装数据插件,这将为您打开更多可用的数据源范围。