上次，我們談到了使用開放檔案格式的優點。現在，讓我們捲起袖子，實際操作 Sketch 文件。以下，您將學習如何從原始檔案格式中擷取資料（在本例中為顏色變數），這為您的設計流程提供了多種自動化的機會。
自動化您的設計流程對參與流程的每個人都有好處。
當您自動從 Sketch 檔案擷取資料時，您將不再需要從 Sketch 文件中複製顏色並貼到規格文件中。而且您也不需要記得執行外掛程式來將顏色與您的交接工具同步。這意味著更少的繁文縟節，更多的設計。
自動從 Sketch 檔案擷取資料意味著您的設計和開發團隊花更少的時間去確認他們是否使用相同的顏色，而花更多時間思考如何讓產品更好、更快或更吸引人。
透過自動從 Sketch 檔案擷取資料，您將不需要花時間學習新的工具。相反地，您可以直接從設計檔案中以正確的格式取得所需的資料。您只需要一些膠水程式碼和一個 CI 伺服器——我們將在本系列的第五篇文章中更詳細地介紹。
需求
從本文開始，內容將會變得更技術性。要繼續學習，您需要相當熟悉 TypeScript，並且安裝了相當新版本的 node。對於程式碼編輯，我們推薦使用 Visual Studio Code。您不需要 Sketch 或 Mac——您可以在任何作業系統上執行範例程式碼。
我們建立了一個包含本文程式碼的儲存庫，以便您可以查看完成的專案。為了簡潔起見，我們只會涵蓋程式碼中比較有趣的部分，因此請參考完整的專案以了解更多實作細節。
您可以透過點擊 GitHub 網站上的「使用此範本」按鈕，將此儲存庫用作您自己專案的起點。
我們將建構的內容
在我們上一篇文章中，我們介紹了 Monday Studio，這是一家我們將協助其設計和開發流程的虛構公司。今天，我們將建構一個簡單的工具來幫助 Monday Studio 的開發人員：
- 讀取 Sketch 函式庫中定義的顏色。
- 建立一個他們可以直接從 Storybook 使用的 JSON 檔案，而不需要在有人更新 Sketch 檔案時開啟或檢查它。
- 使用
@sketch-hq/sketch-file套件中的fromFile函式，透過SketchFile物件將檔案讀入記憶體。
SketchFile 物件允許我們將整個文件包的原始數據作為 JavaScript 物件來存取。它讓我們可以存取整個文件，包括頁面，都在單一的文件樹狀結構中。這與磁碟上的原始 JSON 數據不同，原始 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 綱要。
查看綱要後，我們會了解到顏色變數在內部稱為「色票」，它們儲存在 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」之前。但 localeCompare 的 { 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 檔案中。以下是它的摘錄（十六進位碼比您通常預期的要長，因為我們包含了 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 函式庫中的顏色變數。
