推薦幾款比較好用的sketch插件

Slicer

一鍵生成帶邊距和限定尺寸切片，選中一個或多個圖層，執行 Sketch Slicer > Slice with Padding 生成帶邊距切片。

分別輸入邊距：

單個值（四邊邊距）以 ; 分隔（上;右;下;左）選擇是否帶預設和創建組件，執行 Plugins > Sketch Slicer > Slice with Frame 生成限定尺寸切片

分別輸入尺寸：

單個值或以 ; 分隔（寬;高）選擇是否帶預設和創建組件，更多預設可使用快捷鍵 command ? + , 設置

Sketch Measure

超級智能的幫你在作品上添加圖形尺寸、距離、顏色和文本屬性的附註，方便快捷，而且成品整潔漂亮。

選中你的圖形元素，在頂部標籤欄「插件」中，選中sketch measure中可以選擇尺寸等功能進行標註

WeSketch

功能特性

更高效的團隊協作，如：UI Kit 同步、色板同步等。

更快捷的交互設計，如：圖標庫、自動連線、標記注釋、全局替換文字、字體、顏色。

更精準的前端還原，如：補齊寬高導出圖片、導出 CSS 代碼（支持小程序）等。

面板功能

工具欄

功能展示

1. 連線／Link（command + shift + 1）

連線的樣式可以修改，包括線的寬度和顏色。

2. 標註／Mark（command + shift + 2）

選中目標後點擊可以點擊三下，第一下標註在右邊出現，第二下會將標註換到左邊，第三下則會取消。目前只支持數字序號。

這個應該是要配合文本框使用的，在頁面上邏輯較複雜處 mark 一下，然後在文本框里打上序號並進行細節描述。

3. Font／字體替換（command + shift + f）

可以替換整個文件或者當前頁面的字體。簡單實用

4. Text／文本替換

同樣支持全文件以及當前頁面的替換。

5. Color／顏色替換（command + shift + c）

有時候會接到這麼一個需求，需要微調下整個產品的主色調。需求雖小，工作量卻是非常飽和，先從 symbol 下手，然後還要挨個界面查漏補缺。顏色替換功能則解決了這個設計師頭疼的問題，簡化了設計稿中全局改色的操作。

6. Icon／圖標庫

不支持直接拖移導出。支持自定義圖標的尺寸和顏色。面板上方有篩選功能，但目前均只有一個選項，應該是還在完善中。每個成熟的設計團隊都有自己的一套圖標庫，有的用文件夾管理，有的全部放在 .psd 里，有的放在 Sketch 文件里。還有些設計師喜歡去阿里的 Icon Font 上找圖標素材。這個圖標庫則是無縫嵌入了設計流程，讓設計師的注意力都停留在 Sketch 里，而不用轉場。

7. UI Kit／同步 UI 庫

可以導入僅作演示，並非放出的工具，希望大家製作自己的 Kit。可以將團隊的 UI Kit 快速導入，不需要原始的粘貼複製大法了。

8. Palette／同步色板

該功能可將其他 Sketch 文件中的色彩配置導入。

9. Resize／補齊寬高／command + shift + u

這個功能名字叫補齊寬高，其實就是一種高自由度的切圖導出方式，比較實用。這個功能用在設計最後環節，可以根據工程師的需求選擇格式、解析度甚至素材在切出圖片中的布局。

10. Picker／快捷取色

吸管會直接吸取顏色的色號，並複製在粘貼板上

11. CSS／生成代碼／command + shift + d

同理，點擊獲取樣式，它會把css樣式代碼複製在粘貼板上。

其他功能

在插件菜單中，還有幾個的功能可能會用到。

1. 資源路徑設置

在這裡添加團隊 UI Kit 的存儲路徑，方便導入。

2. 導出圖片格式設置（支持小程序）

3. 插件設置

可以設置各個功能的快捷鍵以及是否在工具面板上出現。

總結

我們在用sketch做設計時，插件可以高幅提升我們的工作效率，不過作為設計師和工作者，你也要擁有一套屬於自己的快速高效的工作流程，無論是對於團隊，還是對自己，都是一種提升。

文章來自於微信訂閱號：如履薄冰（ruvlbb）

獲取以上插件

請關注如履薄冰並回復

插件

即可獲取

推薦閱讀：