使用数据工具,您可以将不同的图像和文本添加到您的设计中,以创建逼真的模型和原型。
Sketch 默认提供几种类型的数据源,包括
- 文本数据:姓名和城市。
- 图像数据:一组多样化的头像和图块的个人资料图片。
- 链接数据:一组包含图片和简短个人简介的用户资料。
Sketch 预装了 Unsplash 插件,您可以使用它来搜索和插入来自 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 数据文件中使用的完全相同的名称命名组或符号中的图层。 完成后,选择您的组或符号,然后从工具栏中的数据 中或通过 Control-click 选择时的上下文菜单中选择您的新 JSON 数据源。
如果您选择一组图层或多个符号,您将无法从检查器中应用链接数据。 相反,请使用工具栏中的数据或上下文菜单(Control-click)应用链接数据。
如何向现有设计添加链接数据
在空白画布上使用链接数据
您还可以使用链接数据将一组新图层直接添加到画布。 从插入菜单中,选择数据并选择您要使用的链接数据源。 然后,您可以 将您的链接数据排列为网格以添加更多条目,并选择刷新数据以使用新信息刷新每个图层。
如何向空白画布添加链接数据
与数据插件链接
您还可以像安装常规插件一样安装数据插件,这将为您打开全新的数据源范围以供使用。