上次，我们讨论了使用开放文件格式的优点。现在是时候亲自动手，使用 Sketch 文档进行一些实际工作了。在下面，您将学习如何从原始文件格式中提取数据——在本例中，是颜色变量——这为您在设计过程中提供了多种自动化的机会。
自动化您的设计工作流程对参与该过程的每个人都有好处
当您自动化从 Sketch 文件中提取数据的过程时，您将不再需要从 Sketch 文档中复制颜色并将它们粘贴到规范文档中。您也不需要记住运行插件来将颜色与您的交付工具同步。这意味着更少的官僚主义和更多的设计。
自动化从 Sketch 文件中提取数据意味着您的设计和开发团队花费更少的时间来思考他们是否在使用相同的颜色，而花费更多的时间来思考如何使产品更好、更快或更具吸引力。
通过自动化从 Sketch 文件中提取数据，您无需花费时间学习新工具。相反，您可以直接从设计文件中获得您想要的数据，以正确的格式。您只需要一些胶水代码和一个 CI 服务器——我们将在本系列的第五篇文章中更详细地介绍。
要求
本文是事情开始变得更技术性的地方。要继续学习，您需要相当熟悉 TypeScript，并安装了相当新的 node 版本。对于代码编辑，我们建议使用 Visual Studio Code。您不需要 Sketch 或 Mac——您可以在任何操作系统上运行示例代码。
我们创建了一个存储库，其中包含本文的代码，因此您可以查看完成的项目。为了简洁起见，我们将仅介绍代码中更有趣的部分，因此请参考完整项目以获取更多实现细节。
您可以通过单击 GitHub 网站上的“使用此模板”按钮，将存储库用作您自己项目的起点。
我们将构建什么
在上一篇文章中，我们介绍了 Monday Studio，这是一家虚构的公司，我们将帮助他们完成设计和开发工作流程。今天，我们将构建一个简单的工具来帮助 Monday Studio 的开发者
- 读取在 Sketch 库中定义的颜色
- 创建一个 JSON 文件，他们可以直接从 Storybook 中使用，而无需在有人更新 Sketch 文件时打开或检查它
- 使用
@sketch-hq/sketch-file包中的fromFile函数将文件读入内存，使用SketchFile对象
SketchFile 对象允许我们以 JavaScript 对象的形式访问整个文档包原始数据。它使我们可以访问整个文档，包括页面，都在一个文档树中。这与磁盘上的原始 JSON 数据不同，后者每个页面都是自己的 JSON 文件。- 在 TypeScript 定义的帮助下遍历文件内容并提取相关数据（这将通过为我们的代码提供自动完成功能来使我们的工作更容易）
- 最后，将该数据保存在我们可以在 Storybook 中使用的格式中。
读取 Sketch 文件
const sketchDocumentPath = '../color-library.sketch'
// Load the Sketch document and parse it into a SketchFile object
fromFile(resolve(__dirname, sketchDocumentPath)).then(
(parsedFile: SketchFile) => {
// process the parsed file
}
)
一旦我们有了 SketchFile 对象，我们就可以通过使用 parsedFile.contents.document 来访问其中的数据。如果您使用的是 Visual Studio Code，TypeScript 定义将帮助您搜索正确的属性
Visual Studio Code 中的 TypeScript 自动完成
解析数据和访问颜色
由于文档数据已经解析为一个方便的 TypeScript 对象，我们可以通过读取适当的属性来访问 颜色变量。同样，TypeScript 定义将帮助我们发现我们正在使用的对象中的正确属性。但是，如果您仍然需要更多关于组成 Sketch 文档的对象的信息，您可以随时参考 GitHub 上记录的 JSON 模式。
检查模式，我们将了解到颜色变量在内部被称为“swatches”，它们存储在 sharedSwatches 属性中
const swatches = document.sharedSwatches.objects.sort((a, b) =>
a.name.localeCompare(b.name, undefined, { numeric: true })
)
当我们在这里时，我们将使用 ECMAScript 中的一个巧妙技巧 localeCompare 方法对色板进行排序。在对颜色进行排序时，您可能会发现诸如 colors.brand.green.75 和 colors.brand.green.100 之类的名称。按字母顺序对它们进行排序会将“100”放在“75”之前。但是 localCompare 的 { numeric: true } 选项将处理它，并对包含数字的字符串做正确的事情。
将颜色变量存储为 JSON
颜色变量（或此处称为色板）以 RGBA 格式存储颜色数据。我们将使用 Sindre Sorhus 的 出色的 rgb-hex 模块 将其转换为 Storybook JSON 的十六进制格式。
const colors = {}
swatches.forEach(swatch => {
colors[swatch.name] = rgbHex(
swatch.value.red * 255,
swatch.value.green * 255,
swatch.value.blue * 255,
swatch.value.alpha
)
})
FileFormat.UnitInterval TypeScript 类型。我们将使用 fs.writeFile 将颜色信息存储在 colors.json 文件中的 JSON 文件中。这是一个摘录（HEX 比您通常期望的要长，因为我们包含了 alpha）
{
"Brand/colors.brand.beige.50": "604a1eff",
"Brand/colors.brand.beige.75": "aa8c51ff",
"Brand/colors.brand.beige.100": "e0ca9eff",
"Brand/colors.brand.green.50": "3b5a00ff",
"Brand/colors.brand.green.75": "7b9939ff",
"Brand/colors.brand.green.100": "bbd975ff",
…
}
如果您想查看完整输出，请查看项目存储库中的文件。
总结
您已经使用 TypeScript 成功读取了您的第一个 Sketch 文档，现在可以自动从 Sketch 文件中的原始数据中提取您需要的任何信息。
在下一篇文章中，我们将更进一步，展示如何写入 Sketch 文档。我们将使用与今天所做的操作相反的操作来做到这一点——因此我们将从 JSON 文件中读取颜色信息并更新 Sketch 库中的颜色变量。
