上次，我们向您展示了 Monday Studio 如何使用 Sketch 文档作为事实来源来自动化颜色标记生成。现在，他们希望通过自动化相反的任务来结束循环——当他们在代码中更改库中的颜色变量时，更新所有设计文档。
自动更新 Sketch 文档意味着不再需要担心手动同步设计标记与开发期间所做的调整（这些调整可能发生在解决可访问性问题时，或者当在代码中调整值更快时）。
自动更新 Sketch 文档意味着您的设计和开发团队花费更少的时间来思考他们是否使用了相同的颜色，而将更多的时间用于思考如何使产品更好、更快或更具吸引力。
自动更新 Sketch 文档意味着您确定设计团队掌握了您已签入代码存储库的最新更改。因此，您可以减少猜测，将更多的时间用于编码。
要求
要跟上进度，您需要相当熟悉 TypeScript，并安装了相当新的 node 版本。对于代码编辑，我们推荐 Visual Studio Code。您不需要 Sketch 或 Mac——您可以在任何操作系统上运行示例代码。
我们创建了一个 存储库 其中包含本文的代码，因此您可以查看已完成的项目。为了简洁起见，我们将仅介绍代码中更有趣的部分，因此请参阅完整的项目以了解更多实现细节。
您可以通过单击 GitHub 网站上的“使用此模板”按钮，将存储库用作您自己项目的起点。
我们将构建什么
今天，我们将编写代码从 JSON 文件中读取颜色信息。然后，我们将把该信息插入到 Monday Studio 的设计师用作库的现有 Sketch 文档中。
我们将使用fromFile函数——我们在上一篇文章中了解了该函数——来读取 Sketch 库。接下来，我们将修改文档中的数据，然后使用toFile将 Sketch 库写回磁盘。
下面，我们将介绍存储库代码，让您了解它的工作原理。
JSON 到 Sketch
这是 Monday Studio 用于存储颜色定义的colors.json文件（在上一篇文章中了解如何生成此文件）
{
"Brand/colors.brand.beige.50": "#604a1e",
"Brand/colors.brand.beige.75": "#aa8d52",
"Brand/colors.brand.beige.100": "#e0ca9e",
"Brand/colors.brand.green.50": "#3c5a00",
"Brand/colors.brand.green.75": "#7b993a",
"Brand/colors.brand.green.100": "#bbd975",
"Brand/colors.brand.purple.50": "#420d4c",
"Brand/colors.brand.purple.75": "#854691",
"Brand/colors.brand.purple.100": "#c18ccb",
…
}
首先，我们将 JSON 文件作为模块加载，并将值存储在sourceColors对象中，以便从中提取颜色信息。我们还创建一个targetColors对象，并使用文档中的现有颜色填充它
import sourceColors from '../colors.json'
const targetColors = document.sharedSwatches.objects
使用代码替换 Sketch 中的颜色
我们现在可以使用颜色名称将targetColors中的颜色替换为sourceColors中的新值。然后，我们将使用targetColors替换 Sketch 文件中的原始样本。正如我们在上一篇文章中看到的那样，Sketch 以 RGB 格式存储颜色，因此我们将使用hex-rgb库转换它们。
Object.keys(sourceColors).forEach(colorName => {
const colorValue = hexRgb(sourceColors[colorName])
const swatch = targetColors.find(color => color.name === colorName)
if (!swatch) return
swatch.name = colorName
swatch.value.red = colorValue.red / 255
swatch.value.green = colorValue.green / 255
swatch.value.blue = colorValue.blue / 255
swatch.value.alpha = colorValue.alpha
})
parsedFile.contents.document.sharedSwatches.objects = targetColors
以编程方式保存 Sketch 文件
有了这些，我们就可以使用toFile保存 Sketch 库了
const exportableFile: SketchFile = {
contents: parsedFile.contents,
filepath: sketchFilePath,
}
toFile(exportableFile)
运行yarn start将运行项目中的代码，并使用 JSON 文件中的颜色更新 Sketch 库。
一旦我们保存了文件，我们很可能希望自动将其提交到存储库。为此，我们向存储库添加了一个 GitHub Action，它会在colors.json文件更改时运行代码，然后提交结果文件。您可以将其用作更复杂自动化的起点。
测试我们的工作
为确保代码正常工作，您可以更改 JSON 文件中第一项的颜色，然后再次运行yarn start。
如果您然后打开color-library.sketch文档，您将在“组件视图”中看到您的新颜色，方法是转到“视图”>“组件”>“颜色变量”选项卡
干得好——现在您知道如何修改现有的 Sketch 文档了！
总结
您可以将此知识用于其他自动化，例如更改文本图层的值或修改图层上的属性。
如果您想继续探索，请查看是否可以组合前两篇文章中的代码来构建一个解决方案，使您的数据在 JSON 和 Sketch 文件之间保持同步。
在该系列的下一篇文章中，我们将向您展示如何从头开始创建一个新的 Sketch 文件，并使用来自外部来源的数据填充它（在我们的例子中，是 Material Icons 存储库中的所有图标）。
