跳过导航
An illustration showing a black and white magnifying glass in 3D, on a purple background
最新动态

通过大型开发者交付更新改进设计师与开发者之间的协作

我们对 Web 应用中的检查器进行了升级,更好地支持设计系统,提高了速度,并进行了一系列较小的改进

去年,我们将检查器引入了我们的 Web 应用,以便开发者可以查看设计、测量图层大小和图层间距、复制属性以及下载可用于生产的资源。更好的是,他们可以通过自己喜欢的 Web 浏览器免费完成所有这些操作。他们无需使用 Mac 应用,也不需要付费购买第三方工具和插件来实现此目的。

自从我们将开发者交付作为 Sketch 体验的核心功能以来,我们已经看到许多团队用这套内置功能取代了第三方应用。事实上,在过去的 12 个月中,你在 Web 应用中检查的画板数量增加了一倍多,达到了每天超过 10,000 个。

通过我们的内部使用和你的反馈,我们知道 Web 检查器非常适合探索设计的基本图层,但对于探索来自设计系统的组件而言,它可以更加有用。因此,这正是我们所做的。


查看和选择符号和来源

符号是保持一致性的基石,使开发者能够快速使用一组通用组件。现在,我们将突出显示符号,无论是在画板上还是在侧边栏中,只要你选择属于符号的图层。这使开发者可以轻松判断设计的一部分是基于可重用组件,还是基于他们需要从头开始创建的自定义组件。

当你选择属于符号的一部分图层时,我们将在画板和侧边栏中突出显示该符号。

你始终可以在其上下文中检查符号的各个图层,但有时查看原始符号来源是有意义的。因此,你现在可以单击画板上符号的突出显示部分,或者单击侧边栏中的卡片,以查看其来源 — 无论是文档本地的还是 Workspace 中另一个 资源库文档的一部分。

使用浏览器的后退按钮从符号来源返回到上一个画板。

这是我们对 Web 应用检查器提出的最受欢迎的改进,我们希望它能对你的工作流程产生重大影响。

支持共享样式和颜色变量

与符号一样,共享样式和颜色变量可以加快设计和开发过程,因此我们对在 Web 检查器中公开这些内容的方式也进行了重大改进。首先,当你选择使用 文本样式图层样式的图层时,我们现在将在侧边栏中显示该样式。

除了在侧边栏中查看图层和文本样式外,你还可以单击其标题来复制其属性。

我们还将显示这些共享样式是属于当前文档还是另一个资源库,以及它们的完整路径。我们对如何使 共享样式支持在未来更加有用有一些想法,并且我们正在努力开发这些想法。

对于 颜色变量,我们还对你选择使用它们的图层时将看到的信息进行了一些改进。现在(在尽可能的情况下),你将看到颜色变量的完整名称以及它所属的任何组。单击它将显示其颜色值 — 当然,开发者可以更改他们复制的格式以适应他们的项目。

颜色变量现在显示更多名称,以及它们的位置。

这还不是全部……

在我们进行上述所有工作时,我们花时间看看是否可以提高 Web 检查器的性能。我们将在几天后的另一篇博文中深入探讨我们如何实现这一切 — 但现在最大的消息是,Web 应用检查器的加载速度比以前快了大约三倍。

当你切换到侧边栏中的检查器选项卡以查看特别复杂的文档时,差异很明显。但不要只听我们说,亲自尝试一下

我们还使从 Web 应用检查器中 复制属性和值变得更加容易。现在,只需单击该值或属性上的任何位置即可。你还可以单击某个部分的标题以将该部分的所有值和属性复制到剪贴板。

你现在可以通过单击属性、其值或标题上的任何位置进行复制。

为了使检查文本图层更有用,我们现在将始终以全称显示字体的名称,并且我们在字体大小值旁边添加了单位 px。我们现在还显示边框的短划线、间隙、端点和连接样式属性。所有这些较小的改进都为 Sketch 中更好的开发者交付体验做出了贡献 — 并且我们还有更多正在开发中。


我们希望使 Sketch 成为你整个协作设计过程的家 — 我们希望这些改进使其变得更好。通过 Sketch 内置的一套开发者交付工具,无需为其他应用或集成付费。你将获得所有这些功能作为 订阅的一部分,以及诸如 实时协作和用于存储和共享所有文档和资源库的 Workspace 等功能。

你可能还会喜欢

免费试用 Sketch

无论你是 Sketch 的新手,还是回来看看有什么新功能,我们都会让你在几分钟内完成设置并准备好做到最好。

免费开始使用
免费开始使用