跳過導覽
An image of a color tokens swatch in Sketch
最新消息

隆重推出色彩權杖 — 將色彩變數帶入您的開發專案

我們透過一種同步色彩的新方法,將 Sketch 中的開發者交接流程更向前推進一步 — 從您的設計系統到開發,甚至更遠!

設計流程並未隨著開發者交接而結束。當設計系統演進時,細節會發生變化,而您圍繞這些細節構建的產品也需要隨之改變。透過色彩變數,我們解決了在整個設計中保持色彩同步的問題。現在,透過色彩權杖,我們將同樣輕鬆的一致性帶入您的開發專案。

色彩權杖為您提供一組始終保持最新的值,這些值與您的文件或元件庫中的色彩變數相符。它們開啟了一個全新的世界,讓您能夠以各種方式將您的設計帶入其他工具、平台和工作環節。

建立色彩權杖

您可以從任何包含色彩變數的文件或元件庫中,透過網路應用程式匯出色彩權杖。目前,它們提供兩種格式 — CSS 和 JSON(使用 Amazon Style Dictionary 格式)。我們也正在與 W3C Design Tokens 社群小組合作,共同定義 JSON 設計權杖的標準規範。

在網路應用程式中,只要您選取了「色彩變數」標籤,您就會在元件網路檢視的右下角找到匯出色彩權杖的選項。如果您還不熟悉元件網路檢視,現在正是您認識它的好機會。除了作為色彩權杖的家之外,您還可以在這裡瀏覽文件或元件庫中的所有元件、檢查它們,甚至複製樣式的 CSS。

在您的專案中使用色彩權杖

色彩權杖可以作為獨立檔案下載,例如,如果您想快速抓取 CSS 並將其直接複製到一個簡單的網站中,這是非常理想的選擇。對於更複雜的專案,您可能希望您的色彩權杖能夠隨著您對色彩變數所做的更改自動更新。有鑑於此,我們添加了使用您的色彩權杖建立公開網址的選項。

公開色彩權杖網址將根據您的最新文件或最新的星號標記更新進行更新 — 選擇權在您手中。無論哪種方式,如果更新包含對色彩變數的更改,則網址上的色彩權杖也會更改。

色彩權杖的公開網址非常適合 Storybook 等工具 — 使您的開發人員資料來源保持最新狀態。也就是說,我們不建議直接在生產環境中使用它們。有關將色彩權杖網址與您的開發設定整合的一些建議,請查看我們的範例專案Amazon Style Dictionary 文件

從設計到開發 — 甚至更遠!

無論您是在構建一個簡單的個人網站並希望保持設計更新的簡潔性,還是在負責將您的設計系統帶入產品的每個角落,我們相信色彩權杖都能夠幫助您保持一致性。

色彩代幣只是我們最近為 Sketch 帶來的眾多開發者交接更新之一,而且我們不會就此止步。我們的目標是打造一套工具,涵蓋整個設計流程,從設計到開發者交接,甚至更多。我們迫不及待想向您展示接下來的內容。

您可能也喜歡

免費試用 Sketch

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

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