Sketch 外掛合集Miaow使用方法教程

下面給大家帶來一款Sketch 外掛合集，這款合集是由微信設計團隊打造，擁有UIkit 同步管理，批量替換文字、字型、顏色，互動連線等多種強大的功能！ske'tch破解版下載：https://www.macz.com/mac/1620.html?id=NzY4OTU4Jl8mMjcuMTg2LjkuMjQ%3D

1、語言設定

執行 Miaow > Settings，在彈出的對話方塊語言設定項選擇 簡體中文(zhCN) 並儲存

2、管理 UI Kit

UIkit 同步管理

本功能用於團隊輸出 UIKit 設計標準，並用於團隊成員快速協同

快速開始

新建一個 Sketch 畫板，執行 WeSketch > 管理 UIKit > 同步 UIKit，外掛提供了三個可使用的示例

選擇 WeUI 或其它，點選確定，所開啟的畫板會下載已經在放在 http 伺服器的 UIKit 並匯入到現在的畫板

如何設定

開啟 WeSketch > 同步源設定，介面中出現如上介面，按照示例新增一個你已經制作好的並上傳到網路的 UIKit 地址配置到介面中的輸入框中

有些團隊可能使用 DropBox 同步團隊 UIKit 到本地，外掛也提供了選擇本地檔案同步的能力，點選資料夾 Logo 即可選擇

特別注意：若同時配置 UIKit 及顏色庫地址到一個專案中，同步 UIKit 同時會同步顏色庫內容，但單獨同步顏色庫不會同步 UIKit 庫

如何製作自己的 UIkit

匯出 UIKit

UIKit 是通過 Sketch 的 Symbols 功能，達到一次製作 Symbols 多處使用。將你製作好的 UIKit 檔案通過本外掛的匯出 UIKit 功能匯出成 Sketch 文件

注意：由於此同步工具是通過元素名稱判斷是否同步的內容與原畫板內容是否相同來做同步操作的，所以儘量避免畫板中的 Symbol 沒有相同命名，通過本外掛的匯出 UIKit 功能，會自動將重名的元素重新命名（原名後加數字）

3、管理色板

本功能用於團隊約定一套顏色標準，並用於團隊成員快速協同

快速開始

新建一個 Sketch 畫板，執行 WeSketch > 管理色板 > 同步色板，外掛提供了一個可使用的示例

選擇 WeUI 點選確定，所開啟的畫板會下載已經在放在 http 伺服器的色板並匯入到現在的畫板，在顏色設定的 Document Colors 皮膚可以看到已經同步的顏色標準庫

如何設定

開啟 WeSketch > 管理色板 > 同步源設定，設定方法同 UI Kit

如何製作自己的顏色庫

匯出色板

先將需要製作的顏色新增到 Document Colors 中，然後點選匯出色板，外掛會將顏色內容匯出成 JSON 檔案，將此檔案存放在 http 伺服器或使用 DropBox 等工具進行同步即可

4、批量替換文字、字型、顏色

本功能用於快速解決產品反覆無常的腦洞 

文字

字型

顏色

功能說明

當要修改一個全域性顏色的時候，最快方法就是先選中有這個顏色的元素，再開啟全域性替換顏色功能，你會發現選中的元素顏色已經出現在替換皮膚中。（全文文字替換也是這樣）

字型批量替換用於解決 iOS 大版本升級後，原設計稿中文字字型不再適應新的版本的問題

5、互動連線

本工具用於快速標註 UI 設計中的頁面關係

快速開始

本功能與市面上已有的連線工具最大的不同是，可以自動繞過障礙，連線不會重合

選中頁面中任何兩個元素，點選互動連線。即可完成兩者之間的連線

使用方法

十分建議記下功能快捷鍵，初始快捷鍵為 command ? + shift ? + 1 若想自定義快捷鍵，可開啟 WeSketch > 快捷鍵設定，進行自定義快捷鍵

本功能只有一個功能鍵，即互動連線按鈕，但在不選擇元素選擇一個元素，選擇兩個元素點選功能鍵時，效果各不相同。可能會吐槽為什麼一個鍵要集合這麼多功能，但是當用快捷鍵完成操作之後，你會發現非常順手

1、當沒有選擇元素按下快捷鍵時，畫板中的線會自動重繪，用於如果將頁面元素進行了調整之後，重新調整畫布中的連線的功能

2、當選擇一個元素按下快捷鍵時，若此元素有從它出發的連線，那麼會自動刪除此條連線。並重新調整畫布中的連線

3、當選擇兩個元素按下快捷鍵時，會按照從先選到後選的順序，繞過 Artboard 元素，生成連線

設定顏色及細度粗細

進入互動設定即可調整連線的顏色及粗細

6、註釋標記

本工具用於快速標註設計中對元素進行註解

使用方法

十分建議記下功能快捷鍵，初始快捷鍵為 command⌘+ shift ⇧ + 2 若想自定義快捷鍵，可開啟 WeSketch > 快捷鍵設定，進行自定義快捷鍵

本功能只有一個功能鍵，即註釋標記。但依然有很多細節

1.選擇一個元素，若此元素沒有新增過標記，按快捷鍵即可新增一個在右邊的標記

2.選擇一個已有在右邊的標記，按快捷鍵會刪除右邊的標記，生成左邊的標記

3.選擇一個已有在左邊的標記，按快捷鍵此時若選中的數字在頁面中不為最後一個標記（假如頁面中有9，刪除第8個標記），頁面中會彈出選項

4.選擇刪除標記並保留排序（選擇此選項會將 8 標記刪除，9 標記不動，下次再標記會以 8 開始）

5.刪除標記並重新排序 （選擇此選項會將 8 標記刪除，之後 9 標記變為 8，如果後續還有會依次類推，下次再標記會以最後一個數的後一個數開始）

7、自定義寬高匯出

匯出 icon 補齊統一寬高

本功能用於快速解決一些佔位 icon 需要擴大點選區域，或者 icon 需要匯出統一尺寸但又不能拉伸的需求

快速開始

選中任意個 icon 點選匯出，或使用快捷鍵 command⌘+ shift ⇧ + U 彈出視窗填入你統一匯出的寬高、倍數、格式，確定之後選中目錄，即可獲得相對應的圖片

功能說明

同時檔名稱也會放入你的剪貼簿，用於快速完成程式碼需求

8、匯出程式碼（含小程式版）

本功能用於開發用一個快捷鍵就能匯出各種設計稿中的字型及各種基本塊狀樣式能力

快速開始

選中一個需要獲取對應程式碼的字型或者圖形，使用獲取樣式的快捷鍵 command⌘+ shift ⇧ + D 外掛會按照常見 CSS 寫法將樣式放入剪貼簿中

功能說明

本功能重點解決當拿到不同尺寸設計稿時，例如寬 320 375 414 750 1242，需要人腦換算輸出成統一的尺寸問題。所以本外掛對需要獲取樣式的父 Artboard 尺寸敏感，若父 Artboard 尺寸非標準，或無父 Artboard 會預設為 2 倍圖

本功能提供設定功能，除了匯出標準 Web 樣式，還可以匯出以 rpx 為單位的小程式程式碼。點選獲取程式碼設定，可以將獲取的程式碼更換成 rpx 標準。rpx 的設計標準是以 750 寬度為標準設計，所以非 750 寬度的設計稿，會按照小程式尺寸換算

9、快捷取色

選中一個你需要獲取顏色的字型或圖形，使用快捷鍵 command⌘+ shift ⇧ + C 外掛會匯出 Web 標準色，或帶透明度會使用 rgba 形式

10、圖示庫

本功能提供常用 icon 並提供搜尋功能，讓使用 Sketch 完成互動稿的過程中不需要再費心去找 icon 了

快速開始

開啟 WeSketch > 圖示庫，點選圖示庫中任意 icon 即會出現在 Artboard 中央供設計互動過程中快速使用

11、自定義快捷鍵

十分建議在瞭解功能之後首先搭建自己常用功能的快捷鍵

快速開始

選擇一個你需要設定的功能的對應輸入框中使用 command⌘ shift ⇧ alt⌥三個功能鍵一個及以上，搭配字母或數字鍵同時按住，輸入框中出現你想要的組合鍵，點選確定後嘗試使用

注意

由於 macOS 系統和 Sketch 本身有大量的預設快捷鍵，所以設定的快捷鍵容易產生衝突，如發現設定的快捷鍵無法使用請嘗試更換快捷鍵使用。