借助我们基于浏览器的 交付 工具,任何开发者都可以随时获取他们需要的任何设计部分的信息。您可以邀请开发者免费检查您工作区中的设计——他们甚至不需要 Mac 应用(或 Mac),因为所有操作都发生在 Web 浏览器中。
所有工作区成员都可以检查文档。您还可以邀请 访客 检查文档,方法是在设置文档的 共享设置 中启用“可下载和检查”选项。
检查图层
要在 Web 应用中检查设计,请点击工具栏中的检查图标 以打开检查器。从这里,您可以选择画布上的任何图层以查看其属性和尺寸。
打开检查器,然后点击画布上的任何图层以检查其属性
在图层重叠的地方,您可以按住 Control 键并悬停在要选择的图层上,然后从上下文菜单中选择它。无论您选择哪个图层,检查器都会更新以显示该图层的属性。
通过按住 ⌘ 并将鼠标悬停在任何图层上,您可以在检查图层时忽略组。这样,您可以专注于检查组内这些元素的属性。
Control 点击会调出图层选择菜单,您可以在其中选择重叠的图层
您在检查器面板中看到的属性将取决于您选择的图层类型和该属性的值。例如,在检查 边框 时,我们将显示其基本属性,如颜色或位置,以及任何 边框选项,如虚线、间隙、端点或连接样式。
为了简化操作,我们隐藏了默认值,例如 100% 不透明度或 Normal
混合模式。
Mac 应用使用 macOS 坐标系,以点为单位进行测量。一点在 @1x
显示屏上等于一个像素。对于交付,Mac 应用中的点与 CSS px
测量值基本相同。 了解有关 Sketch 中测量单位的更多信息。
查看具有网格和布局的设计
当您在打开检查器面板的情况下查看文档时,您可以从缩放菜单切换网格(⇧G)和布局(⇧H)的可见性,以便在检查设计时提供额外的参考点。
为此,请选择任何图层或画板,点击检查按钮 ,然后打开缩放下拉菜单并选中或取消选中显示网格(⇧G)或显示布局选项(⇧H)。
如何在 Web 应用中切换网格和布局的可见性
请记住,您可以在 Web 应用中查看网格或布局,但只能在 Mac 应用中 更改其设置。
检查符号
当您选择属于符号的图层时,我们将突出显示画板上的符号,并在检查器中显示其卡片。要直接选择符号(例如,测量其与其他图层的距离),请按住 Control 键点击图层,然后从上下文菜单中选择符号的名称。
如果您突出显示或选择的符号是工作区中的 库 的一部分,或者特定于当前文档,则可以跳转到其 符号源。为此,请点击画板上的符号名称或箭头图标(→),或从检查器中点击。
我们将始终向您显示符号源的最新版本,即使您正在查看文档的旧版本。
在此示例中,我们从上下文菜单中选择符号,跳转到其符号源并详细检查它
当您选择 嵌套符号 中的图层或嵌套符号本身时,我们将突出显示画布上的它,并在检查器面板中显示相对于嵌套符号或图层的信息。您可以从检查器面板中的符号卡片中转到其符号源,或点击画板上的其名称或箭头(→)。
在本例中,我们正在检查用户圆圈,它是图标 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)格式中选择。
当您选择颜色格式时,检查器将保存您的首选项,因此当您复制其他颜色属性时,您将以与原始选择相同的格式看到它。
复制共享样式
当您选择文本或图层样式时,您将在检查器面板中看到其详细信息 。在那里,我们将向您显示您选择的共享样式的完整路径,以及它属于当前文档还是其他库。
您可以通过将鼠标悬停在文本样式或图层样式标题上并点击它来复制文本或图层样式。
如何复制文本样式
当图层或文本样式与原始样式不同步时,您将看到该样式的名称以斜体显示,并在其旁边显示一个 *。我们还将向您显示哪些值不同步以及原始值是什么。

Web 应用检查器中不同步的文本样式
复制多个属性值
要同时复制多个属性值(例如构成文本图层的所有值或阴影的所有值),请将鼠标悬停在该组值上方的标题(例如,阴影、边框、文本)上,然后点击它。这将复制与您选择的图层的该组属性相关的所有值。
如何在检查器中复制多个属性值
复制文本
转到检查器面板中的内容部分,将鼠标悬停在内容上并点击将其复制到剪贴板。
如何从 Web 应用检查器复制内容
复制 CSS 属性
要将任何图层或文本样式和符号的 CSS 属性复制到剪贴板,请选择组件,然后点击检查器右上方的复制 CSS。
如何从 Web 应用检查器复制 CSS
设计令牌导出
如果您的文档或库具有 颜色变量、文本样式 或 图层样式,则您可以自动生成 CSS 或 JSON 格式的设计令牌导出,这些导出会随着您所做的任何更改而保持最新。
要生成设计 token 导出文件,请点击右上角的**文档详情** 图标,然后在“文档详情”面板中点击**导出设计 Token**。或者,点击工具栏右上角的
,然后从菜单中选择**导出设计 Token**。
此外,您还可以从左下角侧边栏的**组件** 视图生成设计 token 导出文件。
如何在 Web 应用中生成设计 token 导出文件
设计 token 导出设置
在**导出设计 Token** 模态框中,您可以选择导出颜色变量、图层样式和文本样式。使用下拉菜单在 CSS 或 JSON 格式以及颜色格式(RGB、十六进制或 HSL)之间切换。
您可以将颜色 Token 导出为 CSS 或 JSON 格式,但图层和文本样式只能以 JSON 格式导出。
更改导出设置时,您会在右侧面板中看到代码预览(如果需要立即使用,可以复制)。
准备好导出后,点击**下载 Token** 按钮将设计 token 导出文件保存到本地。
您只能将图层和文本样式导出为设计 token 导出文件。
使用 URL 共享设计 token 导出文件
如果您想要为设计 token 导出文件生成一个公共 URL,以便例如在开发项目中引用它们,请使用下拉菜单从三个选项中进行选择
- **启用最新文档更新**:始终链接到文档的颜色变量、文本和图层样式的最新更新
- **启用最新加星版本**:始终链接到文档的最新 加星 更新。如果文档没有加星更新,它将链接到最近的更新
- **禁用链接**:您共享的任何链接将不再有效
如何使用公共 URL 共享设计 token 导出文件
只有编辑者和管理员可以启用或禁用链接,而查看者可以复制和查看任何启用的链接。
如何将设计 token 导出文件与开发项目集成
您可以将公共设计 token 导出 URL 与 Storybook 等工具一起使用,以引入最新的更改,但我们不建议将其直接添加到生产环境中。
这是一个 示例项目,向您展示如何将设计 token 导出文件与您的开发项目集成。您还可以在 其文档 中找到有关使用我们用于 JSON 颜色 Token 的 Amazon Style Dictionary 格式的更多信息。
导出资源
除了能够在浏览器中检查文档外,开发人员还可以从 Web 应用中导出他们需要的任何资源。任何具有查看权限的用户都需要在其 文档权限 中选中“可以下载和检查”选项才能导出资源。
导出单个资源
在 Web 应用中打开文档,然后点击**检查**图标 。在“检查器”面板中,点击任何图层以显示其属性。
点击**导出为**按钮以预览导出并选择分辨率、前缀/后缀和文件格式。您可以添加多个导出选项并在任何时候重置它们。点击**导出**下载资源。
在此示例中,PNG 导出以 1x、2x 和 3x 分辨率提供,因此它们会一起显示并下载到 ZIP 文件中
如果您选择一个图层并期望看到导出选项,但在“检查器”中没有看到它们,可能是因为可导出图层隐藏在另一个图层后面或组内。尝试按住 Control 键并点击图层以打开选择菜单,并查找带有切片 图标的图层。这表示图层具有导出选项。
如何导出所有资源
要从 Web 应用导出和下载资源,您首先需要在 Mac 应用中执行以下操作
要导出文档中的所有资源,请转到**文档详情**面板 并选择**导出资源**。这将生成一个包含资源的 Zip 文件。资源准备就绪后,点击出现的**下载资源(ZIP XMB)**链接下载它们。
如果 Web 应用中的“导出资源”按钮呈灰色或单个资源没有显示任何导出选项,则表示文档中没有设置任何图层或画板可导出。您需要先在 Mac 应用中添加切片或将图层、组或画板设置为可导出。
如何在 Web 应用中导出资源
根据您要导出的资源的总大小,您可能无法立即下载所有资源——在这种情况下,您将收到电子邮件通知以及 更新页面 中的消息,通知您您的资源已准备好下载。