跳過導覽
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 文件

以及更多…

樂趣不止於此。 您還可以從設計文件中匯出原始資料的生產代碼,並直接從檔案格式中獲取有關設計系統模組的資訊。 這意味著您的開發團隊甚至不需要開啟或檢查設計文件 - 他們可以直接在原始檔案中看到他們需要的資料。

您甚至可以從設計文件中提取所有文字內容,以將其發送以進行文案編輯或翻譯。 反之亦然 - 將翻譯服務中的字串添加回您的設計文件中。 每當設計文件或文字內容在您的代碼儲存庫中發生變更時,所有這些都可以自動進行。

認識星期一工作室

為了讓這些文章有一些背景脈絡,我們將跟隨一家虛構的公司,星期一工作室

Image showing the Sketch window with the Monday Studio Workspace.

星期一工作室擁有一個基本的設計系統,並使用經典的設計和開發流程。 我們將在每篇文章中介紹對其流程的一些小改進,最終形成一個現代化的、完全自動化的流程,以減少重複性工作,並讓設計師和開發人員有更多時間專注於他們工作中有趣的部分。

您的技術堆疊可能與星期一工作室使用的技術堆疊完全不同,但核心概念適用於幾乎所有進行設計和開發的團隊。

星期一工作室開發了一個多語言的 React 網頁應用程式,使用 Sketch 進行 UX 和 UI 設計,並使用 Storybook 管理他們的元件庫。 他們使用手動流程使共用 Sketch 庫與 Storybook 元件的變更保持同步。

對於多語言內容,他們依賴於 Crowdin。 他們使用 Sketch 外掛程式使設計文件與最新的變更保持同步。

他們對目前的流程感到滿意,但覺得他們花費了太多時間來回移動資料。

在本系列的其餘部分中,我們將瞭解使用 Sketch 的開放檔案格式如何幫助他們(以及您!)更聰明地工作,減少重複性工作。

展望未來

我們現在準備好從本系列下一篇文章中的一個實際範例開始,開放格式:如何讀取 Sketch 檔案並轉換為 JSON


在本系列中,您是否構建了值得分享的作品?是否有自動化的想法,但需要開發方面的幫助?對開發體驗有什麼意見回饋?請透過 developer@sketch.comTwitter 與我們聯繫!

您可能也喜歡

免費試用 Sketch

無論您是 Sketch 新手,還是回來查看新功能,我們都能讓您在幾分鐘內設定好並準備好進行最佳創作。

免費開始使用
免費開始使用