sketch最強(qiáng)切圖工具Sketch Measure(含最詳細(xì)的講解)
工具欄
一個集成了所有功能圖標(biāo)的工具欄，可以方便操作每一個功能
執(zhí)行 Plugin > Sketch Measure > Toolbar 或使用快捷鍵 control??+ shift??+?B
標(biāo)注區(qū)域
有時你可能需要標(biāo)注一個區(qū)域以突出該層淀零，而這在 Sketch Measure 中很容易實(shí)現(xiàn)
在 Sketch 中選中一個或多個層
點(diǎn)擊工具欄上的區(qū)域按鈕或使用快捷鍵 control??+ shift??+?1
標(biāo)注尺寸
用于標(biāo)注一些圖層的寬度和高度
在 Sketch 中選中一個或多個層
點(diǎn)擊工具欄上的尺寸按鈕或使用快捷鍵 control??+ shift??+?2
對于寬度和高度，如果你想分別單獨(dú)標(biāo)注以及設(shè)置顯示方式
可以在按住 alt??鍵的同時點(diǎn)擊工具欄上的尺寸按鈕
標(biāo)注間隔
任何層與畫板之間的間距
選中在畫板上的一個層或選中任意兩個層
點(diǎn)擊工具欄上的間隔按鈕或使用快捷鍵 control??+ shift??+?3
如果你想分別單獨(dú)顯示頂部撤缴、右雀鹃、底部或左的間距
可以在按住 alt??鍵的同時點(diǎn)擊工具欄上的間隔按鈕
標(biāo)注屬性
標(biāo)注圖層或文本層的信息诫睬，例如填充顏色、邊框顏色态罪、不透明度字體和字號等
在 Sketch 中選中一個或多個層
點(diǎn)擊工具欄上的屬性按鈕或使用快捷鍵 control??+ shift??+?4
如果你想分別單獨(dú)標(biāo)注任何屬性
可以在按住 alt??鍵的同時點(diǎn)擊工具欄上的屬性按鈕
標(biāo)注備注
在畫板上標(biāo)注一些備注噩茄，在規(guī)范導(dǎo)出的查看器中展示
插入文本層，鍵入一些文本
選中文本層
點(diǎn)擊工具欄上的備注按鈕或使用快捷鍵 control??+ shift??+?5
設(shè)置切圖
快速設(shè)置層導(dǎo)出選項(xiàng)的預(yù)設(shè)和規(guī)范導(dǎo)出切片規(guī)格复颈，例如下圖導(dǎo)出安卓資源
在 Sketch 中選中一個或多個層
點(diǎn)擊工具欄上的設(shè)置切圖按鈕或使用快捷鍵 control??+ shift??+?S
如果你想創(chuàng)建切片圖層
可以在按住 alt??鍵的同時點(diǎn)擊工具欄上的設(shè)置切圖按鈕
顏色命名
設(shè)置顏色命名和導(dǎo)出.xml文件給開發(fā)者
點(diǎn)擊工具欄上的顏色命名按鈕或使用快捷鍵 control??+ shift??+?C
在 Sketch 中選中一個或多個圖層或文本層
在第 1 步驟彈出的顏色管理對話框界面中點(diǎn)擊+按鈕
如果你想編輯顏色命名
在對話框界面中雙擊顏色項(xiàng)目即可
規(guī)范導(dǎo)出
一鍵自動生成 HTML 頁面绩聘，離線下檢查所有設(shè)計(jì)細(xì)節(jié)，包括 CSS 樣式耗啦。
在 Sketch 中選中一些畫板
點(diǎn)擊工具欄上的規(guī)范導(dǎo)出按鈕或使用快捷鍵 control??+ shift??+?E
如果你創(chuàng)建一個 HTML 文件一個畫板凿菩，請取消選中“高級模式”
規(guī)范查看器
你可以使用 Safari 9+ 或 Google Chrome 來查看, 導(dǎo)出的規(guī)范基于 HTML 5、CSS 3 和 Javascript 呈現(xiàn)
選中一個層并懸停在層上來測量和獲得間距
點(diǎn)擊位于規(guī)范查看器界面右側(cè)屬性檢查器的顏色區(qū)域可改變顏色格式
使用 command??+?+和 command??+?-來縮放畫布
摁住鍵盤空格鍵, 同時鼠標(biāo)拖拽畫布可平移畫布
切換備注開關(guān)可顯示和隱藏備注
注意事項(xiàng)
第一次執(zhí)行上述操作會彈出界面倍率和單位選擇對話框
選擇的倍率和單位基于當(dāng)前畫板尺寸帜讲，如 Sketch 默認(rèn) iPhone 7 畫板 375x667px 的倍數(shù)和單位分別為 1 和 px衅谷，同時 Sketch Measure 也內(nèi)置了常用的倍率和單位，點(diǎn)擊下拉菜單即可選擇
