去年,我們將 Inspector 引入我們的網路應用程式,以便開發人員可以查看設計、放大圖層之間的尺寸並進行測量、複製屬性以及下載可供生產使用的素材資源。更棒的是,他們可以使用自己喜歡的網路瀏覽器免費完成所有這些操作。他們不需要使用 Mac 應用程式,也不必付費購買協力廠商工具和外掛程式來實現這一點。
自從我們將開發人員交接設為 Sketch 體驗的核心功能以來,我們已經看到許多團隊使用這套內建功能取代了協力廠商應用程式。事實上,在過去 12 個月中,您在網路應用程式中檢查的畫板數量已經翻倍,每天超過 10,000 個。
透過我們內部的使用和您的回饋,我們知道網路 Inspector 非常適合探索設計的基本圖層,但它在探索來自設計系統的元件方面可能會更有用。因此,這正是我們所做的。
查看和選取符號和來源
符號是維持一致工作方式的基石,允許開發人員使用一組通用元件快速工作。現在,只要您選取屬於符號的圖層,我們就會在畫板和側邊欄中醒目顯示這些符號。這讓開發人員可以輕鬆分辨設計的某一部分是基於可重複使用的元件,還是需要從頭開始製作的自訂內容。
當您選取屬於符號一部分的圖層時,我們會在畫板和側邊欄中醒目顯示該符號。
您隨時可以在其環境中檢查符號的各個圖層,但有時查看原始符號來源是有意義的。因此,您現在可以按一下畫板上符號的醒目顯示部分,或側邊欄中其卡片,以查看其來源,無論它是該文檔的本地來源,還是工作區中另一個元件庫文檔的一部分。
使用瀏覽器的「返回」按鈕可以從符號來源返回到先前的畫板。
這是我們對網路應用程式 Inspector 最需要的改進,我們希望它能對您的工作流程產生重大影響。
支援共用樣式和顏色變數
與符號一樣,共用樣式和顏色變數可以加快設計和開發過程,因此我們也對在網路 Inspector 中公開這些變數的方式進行了重大改進。首先,當您選取使用文字樣式或圖層樣式的圖層時,我們現在會在側邊欄中顯示該樣式。
除了在側邊欄中查看圖層和文字樣式之外,您還可以按一下其標題以複製其屬性。
我們還會顯示這些共享樣式是屬於目前文件還是其他庫,以及它們的完整路徑。我們有一些想法,讓共享樣式支援在未來更加實用,我們正在努力實現這些想法。
對於顏色變數,我們也改進了選取使用它們的圖層時會看到的資訊。現在(在可能的情況下),您會看到顏色變數的全名以及它所屬的任何群組。點擊它會顯示其顏色值 — 當然,開發人員可以將複製的格式更改為適合其專案的任何格式。
顏色變數現在會顯示更多名稱及其位置。
不僅如此…
在我們處理上述所有內容的同時,我們也花時間看看是否可以改善網頁檢查器的效能。我們會在幾天後發表另一篇部落格文章,深入探討我們是如何做到這一切的 — 但現在最大的消息是,網頁應用程式檢查器的載入速度比以前快了大約三倍。
當您在檢視特別複雜的文件時切換到側邊欄中的「檢查器」標籤時,差異就很明顯。 不過,別只聽我們說,親自試試看吧!
我們也讓從網頁應用程式檢查器複製屬性和值變得更容易。現在,只需點擊該值或屬性的任何位置即可。您也可以點擊區段標題,將該區段的所有值和屬性複製到剪貼簿。
您現在可以透過點擊屬性、其值或標題上的任何位置來複製。
為了讓檢查文字圖層更加實用,我們現在將始終完整顯示字體名稱,並在字體大小值旁邊添加了單位 `px`。我們現在還會顯示邊框的虛線、間距、端點和連接樣式屬性。這些小的改進共同提升了 Sketch 中的開發交接體驗 — 我們還有更多功能正在開發中。
我們希望讓 Sketch 成為您整個協作設計流程的家 — 我們希望這些改進能讓它變得更好。Sketch 內建了一套開發交接工具,因此您無需支付額外的應用程式或整合費用。您將獲得所有這些工具,作為訂閱的一部分,以及即時協作和用於儲存和共享所有文件和庫的工作區等功能。