跳过导航
Image showing a an open format file with Sketch icon on top of it, over a teal background.
学习设计

开放格式:Sketch 的开放文件格式如何增强您的工作流程

探索我们的开放格式提供的可能性,并了解它如何帮助您和您的团队更快地工作

在 Sketch,我们坚信您拥有您所创建的一切,并且我们始终优先考虑让您掌控您的文档。这就是为什么我们的文件格式是完全开放的;它是一个已发布的规范,因此您和第三方工具可以读取和修改它。但这不仅仅是为了让您掌控一切。借助开放格式,您可以在 Sketch 文档中自动执行操作,无需插件,甚至无需 Sketch。

在本系列文章中,我们将向您展示如何使用 Sketch 的开放格式来自动化和改进您的设计和开发工作流程。首先,让我们看看本系列文章如何使您受益

对于设计师

如果您是一位设计师,正在寻找使您的工作减少重复的想法。花更少的时间做重复性的工作意味着您有更多的时间来完成工作中重要的部分。

对于管理者

如果您是一位管理者,正在寻找最大化您的团队的生产力和幸福感的方法。

对于开发者

如果您是一位开发者,正在寻找使用 Sketch 文件格式进行自动化的参考,或者寻找一些新的挑战来改善团队工作流程的健康状况。

什么是开放格式?

一个 开放格式 允许任何人读取和写入文档,而无需担心版权、许可费或对专有工具的任何依赖。开放格式是避免供应商锁定的基础,如果您担心数据所有权和选择自由,这是必须的。

此外,当有适当的工具可用时,开放文件格式允许您以编程方式读取、创建和修改文档。

在 Sketch 的情况下,您可以使用我们的 文件格式工具 来处理 .sketch 文件,而无需使用 Mac 应用程序。这种缺乏依赖性也扩展到了操作系统。您可以在 macOS、Windows 和 Linux 上读取和写入 .sketch 文档,这在 持续集成 在您的设计和开发工作流程方面开辟了一个充满可能性的世界。

有一种常见的误解是,像这样的自动化仅对拥有专门设计运营团队的大型团队或组织有用。事实是,无论您的团队规模如何,总有改进工作流程的空间。

世界是你的牡蛎

到目前为止,我们已经从理论上讨论了开放格式,您可能想知道您和您的团队可以用它做什么。以下是一些示例 — 我们将在本系列的后面部分更详细地介绍其中一些。

保持设计令牌更新

每当您的设计文件发生更改时,使用自动化来保持您的设计令牌(或生产代码!)更新。您可以通过自动化知识转移来减少设计交付过程中的摩擦(甚至消除它)。本系列文章的下一篇文章,开放格式:如何读取 Sketch 文件并转换为 JSON,详细解释了这一点。

以编程方式修改 Sketch 文件

快速生成一个 Sketch 图库,其中包括在您的 CSS / Storybook / 设计令牌中定义的颜色。本系列的第三篇文章,开放格式:如何以编程方式修改 Sketch 文件, 通过一个简单的例子解释了如何做到这一点。

自动化图库生产/发布/mac

处理数千个 SVG 格式的图标,并将它们变成一个图库。同样,您可以自动化此过程,以便在每次更改原始图标时更新图库。我们在本系列的第四篇文章中更详细地讨论了这一点,开放格式:如何自动化图标图库的创建

使用其他工具完成所有操作

作为奖励,您不必使用 Sketch 来运行这些自动化工具。相反,您可以使用 CI/CD 服务,包括 GitHub Actions,在每次真理来源发生更改时自动生成图库。我们将在本系列的第五篇也是最后一篇文章中向您展示如何操作,开放格式:使用 GitHub Actions 处理 Sketch 文档

还有更多…

但乐趣并没有到此为止。您还可以从设计文档中的原始数据导出生产代码,并直接从文件格式中获取有关设计系统模块的信息。这意味着您的开发团队甚至不需要打开或检查设计文档 — 他们只需在原始文件中看到他们需要的数据。

您甚至可以从设计文档中提取所有文本内容,以发送给文案编辑或翻译。反之亦然 — 将翻译服务中的字符串添加回您的设计文档。只要设计文档或文本内容在您的代码存储库中发生更改,所有这些都可以自动发生。

认识 Monday Studio

为了给这些文章提供一些背景信息,我们将跟随一家虚构的公司,Monday Studio

Image showing the Sketch window with the Monday Studio Workspace.

Monday Studio 有一个基本的设计系统,并使用经典的设计和开发工作流程。我们将在每篇文章中对他们的流程进行小小的改进,最终得到一个现代化的、完全自动化的工作流程,从而减少重复性的工作,并让设计师和开发人员有更多的时间专注于他们工作中更有趣的部分。

您的技术堆栈可能与 Monday Studio 使用的技术堆栈完全不同,但核心概念适用于几乎每个从事设计和开发的团队。

Monday Studio 开发一个多语言 React web 应用程序,使用 Sketch 进行 UX 和 UI 设计,并使用 Storybook 来管理他们的组件库。他们使用手动流程来保持共享的 Sketch 图库与 Storybook 组件的更改保持同步。

对于多语言内容,他们依赖 Crowdin。他们使用 Sketch 插件来保持设计文档与最新的更改保持同步。

他们对当前的工作流程感到满意,但感觉他们花费了太多时间来回移动数据。

在本系列的其余部分中,我们将看到使用 Sketch 的开放文件格式如何帮助他们(以及您!)更智能地工作,减少重复性的工作。

展望未来

我们现在准备好开始本系列文章的下一篇文章中的一个实际示例,开放格式:如何读取 Sketch 文件并转换为 JSON


您是否在本系列中构建了一些值得分享的东西?是否有一个自动化的想法,但需要开发方面的帮助?对开发体验有反馈吗?请通过 developer@sketch.com 或在 Twitter 上与我们联系!

您可能还喜欢

免费试用 Sketch

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

免费开始
免费开始