跳过导航

数据

上次更新于 2023 年 9 月 20 日
6 分钟阅读

使用数据工具,您可以将不同的图像和文本添加到您的设计中,以创建逼真的模型和原型。

Sketch 默认提供几种类型的数据源,包括

  • 文本数据:姓名和城市。
  • 图像数据:一组多样化的头像和图块的个人资料图片。
  • 链接数据:一组包含图片和简短个人简介的用户资料。

Sketch 预装了 Unsplash 插件,您可以使用它来搜索和插入来自 Unsplash 图库的图像或随机图像。您也可以使用第三方数据插件的数据源。

向图层添加数据

要快速将数据作为新图层添加到画布,请打开工具栏中的插入 + 菜单,然后选择数据 dataset,或者从菜单栏中选择插入 > 数据。 然后,选择您要添加的文本、图像或链接数据。

要将数据直接添加到现有图层中,首先选择您的图层,打开菜单栏中的图层 > 数据,然后选择文本图像数据类型(Sketch 始终会将链接数据作为其自己的图层组插入)。

请记住,您只能将图像数据添加到现有的形状或图像图层。 同样,您只能将文本数据添加到现有文本图层。

您可以使用数据工具快速添加或更新图像和文本数据

默认情况下,我们将显示来自数据源的随机数据。 但是,您可以取消选中数据菜单中的随机插入数据复选框,以按与源文件中相同的顺序显示数据。

An image showing the Insert Data at Random checkbox

取消选中“随机插入数据”复选框以按与数据源相同的顺序插入数据

刷新和断开数据

要从数据源刷新图像或文本,请选择一个或多个数据图层,打开工具栏中的插入 + 菜单,然后选择数据 > 刷新数据。 或者,在菜单栏中选择图层 > 数据 > 刷新数据,或按 D(87 及更早版本:>D)。

要断开数据源,请选择一个或多个数据图层,打开工具栏中的插入 + 菜单,然后选择数据 > 断开与数据源的连接。 或者,在菜单栏中选择图层 > 数据 > 断开与数据源的连接

请记住,断开图层与数据源的连接不会恢复其原始内容。

将数据与符号一起使用

您可以将多个数据源添加到 符号中的不同图层。

要刷新已在符号中的所有图像或文本数据,请选择它,然后转到菜单栏中的图层数据,然后选择图像文本

您还可以使用检查器中每个符号覆盖中的数据 Circle data button 按钮在符号中添加或刷新文本数据。

如果符号中有多个图像,但只想刷新它包含的单个图像,请在图层列表中展开符号,然后选择图像(或按住 Command 键单击它),然后单击检查器中的“覆盖”面板中的数据 dataset 图标。 或者,在符号中选择图像,然后在菜单栏中转到图层 > 数据 > 从符号源刷新数据

如果您的符号中有多个图像,您可以通过检查器中的“覆盖”一次性刷新它们,但不能一次刷新一个。 要刷新单个图像,请在图层列表中选择它(或按住 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 数据文件中使用的完全相同的名称命名组或符号中的图层。 完成后,选择您的组或符号,然后从工具栏中的数据 dataset 中或通过 Control-click 选择时的上下文菜单中选择您的新 JSON 数据源。

如果您选择一组图层或多个符号,您将无法从检查器中应用链接数据。 相反,请使用工具栏中的数据或上下文菜单(Control-click)应用链接数据。

如何向现有设计添加链接数据

在空白画布上使用链接数据

您还可以使用链接数据将一组新图层直接添加到画布。 从插入菜单中,选择数据并选择您要使用的链接数据源。 然后,您可以 将您的链接数据排列为网格以添加更多条目,并选择刷新数据以使用新信息刷新每个图层。

如何向空白画布添加链接数据

与数据插件链接

您还可以像安装常规插件一样安装数据插件,这将为您打开全新的数据源范围以供使用。

如果您有兴趣创建数据插件,请查看此便捷指南和我们的开发者文档