Sketch Measure是一款強(qiáng)大的Sketch插件，功能十分的出色！Sketch Measure集成了各種便捷實(shí)用的工具，如：標(biāo)注和切圖等等，通過這款標(biāo)注插件可以幫助用戶輕松完成設(shè)計(jì)一類的工作。

Sketch Measure安裝方法

下載，然后解壓打開，找到后綴是.sketchplugin的文件就是這個(gè)插件啦

首先打開Sketch，在最上方的任務(wù)欄中找到插件(Plugins)，點(diǎn)開，選擇管理插件(Manage Plagins)。

打開插件管理界面，點(diǎn)擊左下角的小齒輪，選擇顯示插件文件夾(Reveal Plugins Folder)

接著插件文件夾所在的位置會(huì)跳出，將剛才的插件文件放入這個(gè)文件夾中就完成了，這時(shí)再打開Sketch-Plugin時(shí)就會(huì)看到measure啦！

使用教程

使用Measure這個(gè)插件首先需要打開它的工具欄，在sketch工具欄的Plugins - Sketch Measure - 工具欄，快捷鍵是control+shift+B。

Measure的功能全部集中在這個(gè)工具欄中，簡單清晰。

標(biāo)注間隔

任何層與畫板之間的間距

選中在畫板上的一個(gè)層或選中任意兩個(gè)層

點(diǎn)擊工具欄上的 間隔 按鈕或使用快捷鍵 control ? + shift ? + 3

如果你想分別單獨(dú)顯示頂部、右、底部或左的間距

可以在按住 alt ? 鍵的同時(shí)點(diǎn)擊工具欄上的 間隔 按鈕

標(biāo)注尺寸

用于標(biāo)注一些圖層的寬度和高度

在 Sketch 中選中一個(gè)或多個(gè)層

點(diǎn)擊工具欄上的 尺寸 按鈕或使用快捷鍵 control ? + shift ? + 2

對于寬度和高度，如果你想分別單獨(dú)標(biāo)注以及設(shè)置顯示方式

可以在按住 alt ? 鍵的同時(shí)點(diǎn)擊工具欄上的 尺寸 按鈕

標(biāo)注屬性

標(biāo)注圖層或文本層的信息，例如填充顏色、邊框顏色、不透明度字體和字號等

在 Sketch 中選中一個(gè)或多個(gè)層

點(diǎn)擊工具欄上的 屬性 按鈕或使用快捷鍵 control ? + shift ? + 4

如果你想分別單獨(dú)標(biāo)注任何屬性

可以在按住 alt ? 鍵的同時(shí)點(diǎn)擊工具欄上的 屬性 按鈕

規(guī)范查看器

你可以使用 Safari 9+ 或 Google Chrome 來查看, 導(dǎo)出的規(guī)范基于 HTML 5、CSS 3 和 Javascript 呈現(xiàn)

選中一個(gè)層并懸停在層上來測量和獲得間距

點(diǎn)擊位于規(guī)范查看器界面右側(cè)屬性檢查器的顏色區(qū)域可改變顏色格式

使用 command ? + + 和 command ? + - 來縮放畫布

摁住鍵盤空格鍵, 同時(shí)鼠標(biāo)拖拽畫布可平移畫布

切換備注開關(guān)可顯示和隱藏備注

標(biāo)注備注

在畫板上標(biāo)注一些備注，在規(guī)范導(dǎo)出的查看器中展示

插入文本層，鍵入一些文本

選中文本層

點(diǎn)擊工具欄上的 備注 按鈕或使用快捷鍵 control ? + shift ? + 5

設(shè)置切圖m.27lzpaw.cn

快速設(shè)置層導(dǎo)出選項(xiàng)的預(yù)設(shè)和 規(guī)范導(dǎo)出 切片規(guī)格，例如下圖導(dǎo)出安卓資源

顏色命名

設(shè)置顏色命名和導(dǎo)出 .xml 文件給開發(fā)者

點(diǎn)擊工具欄上的 顏色命名 按鈕或使用快捷鍵 control ? + shift ? + C

在 Sketch 中選中一個(gè)或多個(gè)圖層或文本層

在第 1 步驟彈出的顏色管理對話框界面中點(diǎn)擊 + 按鈕

如果你想編輯顏色命名

在對話框界面中雙擊顏色項(xiàng)目即可

規(guī)范導(dǎo)出

一鍵自動(dòng)生成 HTML 頁面，離線下檢查所有設(shè)計(jì)細(xì)節(jié)，包括 CSS 樣式。

在 Sketch 中選中一些畫板

點(diǎn)擊工具欄上的 規(guī)范導(dǎo)出 按鈕或使用快捷鍵 control ? + shift ? + E

如果你創(chuàng)建一個(gè) HTML 文件一個(gè)畫板，請取消選中“高級模式”

在 Sketch 中選中一個(gè)或多個(gè)層

點(diǎn)擊工具欄上的 設(shè)置切圖 按鈕或使用快捷鍵 control ? + shift ? + S

如果你想創(chuàng)建切片圖層

可以在按住 alt ? 鍵的同時(shí)點(diǎn)擊工具欄上的 設(shè)置切圖 按鈕

注意事項(xiàng)

第一次執(zhí)行上述操作會(huì)彈出界面倍率和單位選擇對話框

選擇的倍率和單位基于當(dāng)前畫板尺寸，如 Sketch 默認(rèn) iPhone 7 畫板 375x667px 的倍數(shù)和單位分別為 1 和 px，同時(shí) Sketch Measure 也內(nèi)置了常用的倍率和單位，點(diǎn)擊下拉菜單即可選擇