跳过导航

开发者交付

上次更新于 2024 年 9 月 17 日
阅读需 12 分钟

借助我们基于浏览器的交付工具,任何开发者都可以随时获取设计任何部分所需的信息。您可以邀请开发者免费检查您工作区中的设计 — 他们甚至不需要 Mac 应用程序(或 Mac),因为这一切都在 Web 浏览器中进行。

Sketch 开发者交付

观看课程

所有工作区成员都可以检查文档。您还可以邀请访客检查文档,方法是在文档的共享设置中设置其权限时启用“可以下载和检查”选项。

检查图层

检查文档

观看课程

要在 Web 应用程序中检查设计,请单击工具栏中的 检查 图标代码块以打开检查器。从这里,您可以选择画布上的任何图层来查看其属性和测量值。

打开检查器,然后单击画布上的任何图层以检查其属性

如果图层重叠,您可以按住 Control 键单击要选择的图层,然后从上下文菜单中选择它。无论您选择哪个图层,检查器都会更新以显示该图层的属性。

您可以通过按住 并将鼠标悬停在任何图层上来忽略检查图层时的组。这样,您可以专注于检查组内元素的属性。

按住 Control 键单击会调出图层选择菜单,您可以在其中选择重叠的图层

您在检查器面板中看到的属性将取决于您选择的图层类型以及该属性的值。例如,在检查边框时,我们将显示其基本属性,如颜色或位置,以及任何边框选项,如虚线、间隙、端点或连接样式。

为了简化操作,我们隐藏了默认值,例如 100% 的不透明度或 Normal 混合模式。

Mac 应用程序使用 macOS 坐标系统,该系统以磅为单位进行测量。在 @1x 显示器上,一个点等于一个像素。对于交付而言,Mac 应用程序中的点与 CSS px 测量值基本相同。了解有关 Sketch 中测量值的更多信息

查看带有网格和布局的设计

当您在打开检查器面板的情况下查看文档时,您可以从 缩放菜单 中切换 网格 (G) 和 布局 (H) 可见性,以便在检查设计时为您提供额外的参考点。

为此,请选择任何图层或画板,单击 检查 按钮代码块,然后打开 缩放 下拉菜单并选中或取消选中 显示网格 (G) 或 显示布局 选项 (H)。

如何在 Web 应用程序中切换网格和布局可见性

请记住,您可以在 Web 应用程序中查看网格或布局,但您只能在 Mac 应用程序中更改其设置

检查符号

检查设计

观看课程

当您选择属于符号的图层时,我们将在画板上突出显示该符号,并在检查器中显示该符号的卡片。要直接选择该符号(例如,测量其与其他图层的距离),请按住 Control 键单击该图层,然后从上下文菜单中选择该符号的名称。

如果您突出显示或选择的符号是工作区中资源库的一部分,或者位于当前文档本地,则您可以跳转到其符号源。为此,请单击画板上的符号名称或箭头图标 (→),或者从检查器中单击。

我们将始终向您显示符号源的最新版本,即使您正在查看文档的旧版本。

在此示例中,我们从上下文菜单中选择符号,跳转到其符号源并详细检查它

当您选择嵌套符号内的图层或嵌套符号本身时,我们将在画布上突出显示它,并在检查器面板中显示与嵌套符号或图层相关的信息。您可以从检查器面板中的符号卡片转到其符号源,或者单击画板上的名称或箭头 (→)。

在本例中,我们正在检查 User Circle,它是 Icon 4 符号的嵌套符号

如果某个符号不属于保存在您的工作区的资源库,您将无法检查其符号源。但是,您仍然可以看到符号的名称以及它所属的资源库的名称和路径。

完成查看或检查符号源后,您可以按浏览器的“后退”按钮返回之前检查的画板。

测量图层之间的距离

选择一个图层,然后将鼠标悬停在另一个图层上以显示显示它们之间相对距离的测量值。

当您选择一个图层时,您可以通过将鼠标悬停在其他图层上来显示与其相关的测量值

复制图层属性

选择一个图层,转到 检查器 面板,将鼠标悬停在该属性上,然后单击以将其复制到您的剪贴板。

如何从 Web 应用程序的检查器中复制图层属性

复制单个属性只会将值复制到剪贴板,而不会复制属性名称。例如

#000000

具有多个值的图层属性(例如具有不同颜色、不透明度、角度和渐变类型的渐变)将包括值和属性名称到剪贴板,例如

Type: Linear
Angle: 180˚

Color Stop 0
Color: #8763FF
Position: 0%

Color Stop 1
Color: #6236FF
Position: 100%

复制图层或文本样式会将名称和路径(它属于哪个资源库和组)复制到您的剪贴板。

复制颜色和颜色变量

将鼠标悬停在 颜色 标签上,然后单击以将其颜色值复制到剪贴板。要更改格式(例如,更改为 HSL 或 Objective-C),请单击当前值旁边的箭头,然后从列表中选择您喜欢的格式。

当您单击颜色变量时,您将看到它的整个路径(如果它是组或资源库的一部分),以及它的名称和颜色值。您可以通过将鼠标悬停在 颜色 标签上并单击它来复制颜色变量的所有值。查看和复制颜色变量或渐变的单个值的工作方式相同:将鼠标悬停在该值的名称上,然后单击它。

如何查看和复制颜色变量值

您还可以将颜色变量导出为设计令牌

您可以从 HEX、RGB、HSL、NSColor(Objective-C 和 Swift)和 UIColor(Objective-C 和 Swift)格式中进行选择。

当您选择一种颜色格式时,检查器将保存您的首选项,因此当您复制不同的颜色属性时,您将看到它与您原始选择相同的格式。

复制共享样式

当您选择文本或图层样式时,您将在检查器面板中看到其详细信息代码块。在那里,我们将向您显示您选择的共享样式的完整路径,以及它是否属于您当前的文档或其他资源库。

您可以通过将鼠标悬停在 文本样式 图层样式 标题上并单击它来复制文本或图层样式。

如何复制文本样式

当图层或文本样式与原始样式不同步时,您将看到样式的名称以斜体显示,并在旁边显示一个 * 。我们还会向您显示哪些值不同步以及原始值是什么。

An image showing an out-of-sync text style in the web app Inspector

Web 应用程序检查器中不同步的文本样式

复制多个属性值

要同时复制多个属性值(例如,组成文本图层的所有值,或阴影的所有值),请将鼠标悬停在值组上方的标题上(例如,阴影、边框、文本),然后单击它。这将复制您选择的图层的与该属性组相关的所有值。

如何在检查器中复制多个属性值

复制文本

转到检查器面板中的 内容 部分,将鼠标悬停在内容上,然后单击以将其复制到您的剪贴板。

如何从 Web 应用程序检查器中复制内容

复制 CSS 属性

要将任何图层或文本样式和符号的 CSS 属性复制到您的剪贴板,请选择该组件,然后单击检查器右上角的 复制 CSS

如何从 Web 应用程序检查器中复制 CSS

设计令牌导出

如果您的文档或资源库具有颜色变量文本样式图层样式,您可以自动生成 CSS 或 JSON 格式的设计令牌导出,这些导出与您所做的任何更改保持同步。

要生成设计令牌导出,请单击右上角的文档详情 信息按钮 图标,然后在“文档详情”面板中单击导出设计令牌。或者,单击工具栏右上角的 三个点,然后从菜单中选择导出设计令牌

此外,您还可以从左下侧边栏的 组件 组件视图标签 视图中生成设计令牌导出。

如何在 Web 应用中生成设计令牌导出

设计令牌导出设置

导出设计令牌模式框中,您可以选择导出颜色变量、图层样式和文本样式。 使用下拉菜单在 CSS 或 JSON 格式以及颜色格式(RGB、十六进制或 HSL)之间切换。

您可以将颜色令牌下载为 CSS 或 JSON,但图层和文本样式仅适用于 JSON 格式。

更改导出设置时,您会在右侧面板中看到代码预览(如果您想立即使用,可以复制它)。

准备好导出后,单击下载令牌按钮以在本地保存您的设计令牌导出。

您只能将图层和文本样式导出为设计令牌导出。

使用 URL 共享设计令牌导出

如果您想为您的设计令牌导出生成公共 URL,以便您可以在开发项目中引用它们,请使用下拉菜单从三个选项中进行选择

  • 为最新的文档更新启用:始终链接到文档的颜色变量、文本和图层样式的最新更新
  • 为最新的星标版本启用:始终链接到文档的最新星标更新。 如果文档没有星标更新,它将链接到最新的更新
  • 禁用链接:您共享的任何链接将不再有效

如何使用公共 URL 共享设计令牌导出

只有编辑者和管理员可以启用或禁用链接,而查看者可以复制和查看任何已启用的链接。

如何将设计令牌导出与开发项目集成

您可以将公共设计令牌导出 URL 与 Storybook 之类的工具一起使用来引入最新的更改,但我们不建议将它们直接添加到生产环境中。

这是一个 示例项目,向您展示如何将设计令牌导出与您的开发项目集成。 您还可以找到有关使用 Amazon Style Dictionary 格式的更多信息,我们将其用于 他们的文档中的 JSON 颜色令牌。

导出资源

在 Mac 应用中导出

观看课程

导出资源

观看课程

除了能够在浏览器中检查文档外,开发人员还可以从 Web 应用中导出他们需要的任何资源。 任何具有查看权限的人都需要选中其 文档权限中的可以下载和检查选项才能导出资源。

导出单个资源

在 Web 应用中打开文档,然后单击检查图标 信息按钮。 在“检查器”面板中,单击任何图层以显示其属性。

单击导出为按钮以预览您的导出并选择分辨率、前缀/后缀和文件格式。 您可以添加多个导出选项并随时重置它们。 单击导出以下载资源。

在此示例中,PNG 导出以 1x、2x 和 3x 分辨率提供,因此它们会一起显示并在 ZIP 文件中下载

如果您选择了一个图层并希望看到导出选项,但在“检查器”中没有看到它们,则可能是可导出的图层隐藏在另一个图层之后或组内。 尝试按住 Control 键单击该图层以打开选择菜单,并查找带有切片 创建切片 图标的图层。 这表明该图层具有导出选项。

如何导出所有资源

要从 Web 应用中导出和下载资源,您首先需要在 Mac 应用中执行以下操作

要导出文档中的所有资源,请转到文档详情面板 信息 并选择导出资源。 这将生成一个包含资源的 Zip 文件。 准备好您的资源后,单击出现的下载资源 (ZIP XMB) 链接以下载它们。

如果 Web 应用中的“导出资源”按钮灰显或单个资源未显示任何导出选项,则是因为文档中没有任何图层或画板设置为可导出。 您需要先在 Mac 应用中添加切片或将图层、组或画板设置为可导出。

如何在 Web 应用中导出资源

根据您导出的资源的总大小,您可能无法立即下载所有资源 — 在这种情况下,您将收到电子邮件通知以及 更新页面中的消息,让您知道您的资源已准备好下载。