新增:智能动画 — 为您的原型添加动效。 了解更多

跳过导航

数据

上次更新时间:2023 年 9 月 20 日
阅读时间:6 分钟

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

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

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

Unsplash 插件预装在 Sketch 中,您可以使用它从 Unsplash 库中搜索和插入图像,或随机插入图像。您还可以使用第三方数据插件来使用数据源。

将数据添加到图层

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

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

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

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

默认情况下,我们将显示来自您的数据源的随机数据。但是,您可以切换关闭**随机插入数据**复选框,以在**数据**菜单中按数据源中的相同顺序显示数据。

An image showing the Insert Data at Random checkbox

切换关闭“随机插入数据”复选框以按数据源中的相同顺序插入数据

刷新和断开数据连接

要刷新来自数据源的图像或文本,请选择一个或多个数据图层,打开工具栏中的**插入** + 菜单,然后选择**数据** > **刷新数据**。或者,在菜单栏中选择**图层** > **数据** > **刷新数据**,或按 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 键单击)应用关联数据。

如何在现有设计中添加关联数据

在空白画布上使用关联数据

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

如何在空白画布上添加关联数据

与数据插件链接

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

如果您有兴趣创建数据插件,请查看此实用指南,以及我们的开发者文档