上次，我們展示了 Monday Studio 如何使用 Sketch 文件作為資料來源自動產生顏色 token。現在，他們希望透過自動執行相反的任務（在程式碼中變更他們的程式庫中的顏色變數時更新所有設計文件）來完成整個循環。
自動更新 Sketch 文件意味著不再需要擔心在開發過程中手動同步您的設計 token 與調整和修改（這些情況可能發生在解決無障礙問題時，或者在程式碼中調整值比較快時）。
自動更新 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 儲存庫中的所有圖示）。
