Style Inventory一鍵歸納導出設計規范

設計需要自由,但是設計同樣也需要條理性和組織結構。Sketch 在自由與條理兩方面都做的不錯,設計師們經常需要整理畫板與文檔,把所做的工作歸納出來(交付給其他同事),但要在一個碩大的工程中整理出字體樣式、顏色等信息結構并非易事。Style Inventory 就是幫助你做這樣一件事的:能夠縱覽所有設計過程中使用的樣式信息,并且幫助設計師將同樣樣式的圖層進行合并

安裝

下載安裝包

雙擊Style Inventory.sketchplugin完成安裝

使用

生成

選中某一個頁面后,使用本功能可以自動生成一個包含了所有使用過顏色、字體樣式、符號在內的畫板

執行 Plugins > Style Inventory > Generate 或使用快捷鍵 command?+ control?+ alt?+I


導出元數據

當在配置窗口中勾上 Export Metadata 選項后,Sketch 可以將你項目中的元數據和圖片導出,這樣就方便交付給開發同事了。導出形式:顏色(JSON)、符號(PNG)、字體樣式(JSON)

執行 Plugins > Style Inventory > Generate 或使用快捷鍵 command?+ control?+ alt?+I在彈出的對話框中勾選 Export Metadata 選項


在畫板(頁面)中根據顏色選擇圖層

選中一個圖層之后,可以通過此功能將本畫板(頁面)內所有與當前圖層具有相同填充或字體顏色的圖層一起選中

執行 Plugins > Style Inventory > by Color > Select Layers by Color on Artboard(Page) 或使用快捷鍵 command?+ control?(+ shift?) +C


在畫板(頁面)根據名稱選擇圖層

選中一個圖層之后,可以通過此功能將所有與當前圖層名稱相匹配的同層一起選中。此功能同樣適用于復制圖層時自動命名產生的數字結尾,如 Rectangle 1,Rectangle 2,…

執行 Plugins > Style Inventory > by Name > Select Layers by Name on Artboard(Page) 或使用快捷鍵 command?+ control?(+ shift?) +N

在畫板(頁面)批量替換字符命名

通過本功能可以將所有選中的文字圖層進行統一命名替換

執行 Plugins > Style Inventory > by String > Replace Strings on Artboard(Page)


在畫板(頁面)根據文本樣式選擇圖層

選中一個圖層之后,可以通過此功能將所有與當前圖層文本樣式相匹配的同層一起選中

執行 Plugins > Style Inventory > by Text Style > Select Layers by Text Style on Artboard(Page) 或使用快捷鍵 command?+ control?(+ shift?) +T

重點

最常用的功能就是下面兩個了,再稍微詳細提一下:

樣式清單

生成包含顏色、字體樣式在內的可見樣式清單,方便用戶縱覽所有設計要素,也可以將樣式非常接近的內容進行合并,還可以將字體樣式通過 CSS 文件導出


生成字體樣式清單

生成一個畫板,其中包含了本項目中所有用到的字體樣式


原文鏈接

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容