Cloud Inspector 简介 — 浏览器中免费的开发者交付

在我们的 2020 年预告片中，我们宣布开发者交付将于 2020 年 1 月上线 Cloud。 今天，我们很高兴通过 Cloud Inspector 的 Beta 版发布来实现这一承诺。

Cloud Inspector 使开发人员可以轻松获取将像素转换为代码所需的信息 - 全部在浏览器中，最重要的是，**免费**。 这是我们为团队构建出色的协作工具的旅程中的又一步，也是我们帮助人们设计更好产品的使命的重要组成部分。

随着今天的发布，Cloud Inspector 的第一个版本正式进入 Beta 版。 我们一直在内部使用它，并与真实用户一起测试了一段时间，我们很高兴将其应用到更多人手中。 以下是您今天可以期待的内容，以及接下来的计划。

每个人都可以免费使用

Cloud Inspector 的全部内容都是团队中的交付和协作，但我们知道，单个设计师也经常与开发人员合作。 因此，我们使每个人都可以使用 Cloud Inspector。

如果您在 Cloud 上拥有团队工作区，则您共享的每个设计都将立即准备好进行检查。 对于您保存到个人工作区的设计，您可以在其文档设置中启用 Inspector。

熟悉的 Inspector，就在浏览器中

要启动 Cloud Inspector，请单击 Cloud 上任何画板旁边侧栏中的新 **Inspect** 选项卡。 完成此操作后，您将看到一些希望让人感到熟悉的东西 - 该画板属性的类似 Inspector 的视图。

就像 Mac 应用程序中的 Inspector 一样，Cloud Inspector 会更改以显示相关信息，具体取决于您选择的图层或画板。 我们还确保它隐藏任何不必要的内容，例如圆角半径设置为 0、混合模式设置为普通或不透明度设置为 100%。 换句话说，Cloud Inspector 隐藏了默认值，并在开发人员需要时立即呈现他们最需要的信息。

一键复制属性

如果您正在检查文件并且需要复制属性，您只需将鼠标悬停在其上并单击复制图标即可。 现在，我们将复制该属性的简单纯文本版本到您的剪贴板，但在将来，我们将允许您设置要复制到的语言（例如 CSS）。

对于具有多个属性的图层，例如不同的填充和混合模式或文本属性，您可以单击节标题以同时将它们全部复制到您的剪贴板。 以下是复制一组文本属性的示例

Typeface: SF Pro  
Text Weight: 500  
Size: 16  
Style: normal  
Character: -0.32  
Line Height: 24 (1.5)  
Color: #000000  
Horizontal: Left  
Vertical: Top

复制多种格式的颜色

将属性复制到剪贴板很有用，但对于颜色，我们决定更进一步。 将鼠标悬停在任何颜色上，然后单击出现的箭头以调出格式菜单。 从这里，您可以复制 HEX、RGB 和 HSL 格式的颜色，以及 Objective-C 和 Swift 的 NSColor 和 UIColor 格式。

当您选择颜色格式时，我们将保存该首选项以供您在浏览会话的其余时间使用，因此您复制的任何其他颜色都将采用相同的格式。

我们认为，选择用于复制颜色属性的格式的选项在交付期间非常方便，我们迫不及待地想将更多以开发为中心的详细信息引入未来版本的 Cloud Inspector。

简化图层测量

当您选择要检查的图层时，将鼠标悬停在画板上的任何其他图层上都会显示相对于它的测量值。 结合 Inspector 中的位置和大小属性，调整设计大小应该很容易。

Cloud Inspector 的下一步是什么？

Cloud Inspector 的第一个 Beta 版只是我们开发者交付工作的开始，我们已经在努力开发下一组功能，包括

• 更好地支持设计系统，提供清晰的方式来浏览符号、覆盖和文本样式
• 可用于生产的资源导出 - 从单个图层到整个设计
• 更多代码和颜色格式首选项（包括 CSS 和其他语言）
• 语言保存（就像颜色格式一样，您只需选择一次语言，我们就会记住您对整个文档的选择）

立即试用 Cloud Inspector

Cloud Inspector 已在 Cloud 中发布 Beta 版，您可以立即试用。 您可以在我们的文档中找到有关如何充分利用它的完整详细信息。 与往常一样，我们感谢您的反馈，我们很乐意听取您对它的看法。 请继续关注未来几个月的更多更新和补充