十分鐘了解兵器榜排行第一的 Sketch 插件 ：CRAFT

前言：

CRAFT 是 Sketch 上最實用的插件，沒有之一，常年被 Sketch 開發團隊掛在官方插件推薦榜上。同時，CRAFT 也是很多知名設計師使用 Sketch 進行設計工作時的得力助手。

• 閱讀時間：10分鐘
• 流量預估：4.7MB

官方介紹：

Screen Design. Supercharged.

大幅提速界面設計。

開發團隊：

The world』s leading prototyping, collaboration & workflow platform.

世界一流的原型演示，設計協作和工作平台。

插件下載：Craft by InVision

插件功能：

CRAFT 一共包含七個功能，有用於協作的「協作白板」、「原型」、「同步」和「樣式庫」，也有實用的本地功能「圖庫」、「內容填充」和「複製」。

在啟動 Sketch 使用 CRAFT 前，需要先安裝並打開 Craft Manager。在這裡，你可以管理插件中各個功能的開關，以及檢測插件更新。

Enhance your designs with high-resolution imagery from Getty and iStock.

用來自 Getty 和 iStock 的高清圖像給你的設計畫龍點睛。

1. 圖海：數百萬世上最美的圖片，就在指間。
2. 動態：強有力的搜索使找到合適的圖片變得簡單。
3. 流暢：選取一個圖形圖層，再點擊一個圖片就完成了，so easy。
4. 便捷：搜索、登錄和下載歷史，這些功能都集成在你的設計環境中。

「圖庫」和「內容填充」中的「圖像填充」有所重複，但是里的圖像更為高清，需付費使用，是 Invision 對 CRAFT 商業化的一種嘗試。

A fast, flexible new way to collaborate in real time.

一個快捷、靈活的實時設計協作新方式。

1. 無邊界：白板有無限大的空間，你的想法和創意不會受到約束。
2. 靈活：Sketch 或 PS；手機、平板或筆記本；無論你在哪，實時獲取白板上的輸入。
3. 包容：協作白板適用於任何人和任何項目。分享你的設計，然後在線協作。

首先，創建一個協作白板，既可以導入所有畫板，也可以選擇需要評審的畫板後導入。創建完成後，會自動跳轉 Invision。因為是在線協作功能，這裡會需要你擁有一個 Invision 的賬號以繼續使用。

可以通過手寫、打字、插入圖片等功能來對界面進行討論、評審，很遺憾的是打字功能暫時不支持中文，只能用手寫功能進行中文注釋。作為協作功能，可以用右上角的 Share 功能把鏈接分享給別的同事，讓他們參與到協作白板中。在設計團隊內部評審環節很常用，適合跨辦公地點的設計協作、溝通。

Build hi-fi prototypes with your real design files.

用你的設計稿製作高保真原型。

1. 本地製作：就在你的設計環境中製作可以點擊的原型。
2. 即時同步：一鍵將你製作的原型同步到 Invision。
3. 可交互：用可交互的熱區將你的畫板連接起來。
4. 協作：實時從你的團隊獲取迅速的反饋。

這個功能比較複雜，但是很好用，這裡只做簡單的效果演示。需要配合「同步」功能使用。

Sync with 1 click from your native design environment.

一鍵同步本地設計稿到線上。

1. 即時性：只需一鍵，無縫連接你的設計和原型。
2. 高效：不再有拖拽的苦惱。更少的出錯機會意味著更少的煩惱。
3. 一屏操作：就在你的設計環境中把設計作品發送到 Invision。
4. 可靠：時刻保證你的設計稿被同步到線上。

修改界面後，使用「同步」功能同步到 Invision，保持線上的設計稿為最新版本。作為「原型」功能的一個環節。

The ultimate plugin to bring real data to your design.

給你的設計帶來真實數據的究極插件。

1. 切題：從圖源中選取真實的內容並直接放置於你的設計中。
2. 自定義：從網上，API或你自己的文件中選取內容。
3. 快捷：一鍵填充真實數據，加速你的工作流。
4. 實用：搭配 CRAFT 其他功能，給你的設計加料。

「CUSTOM」中可以給文字圖層快速填充模擬數據，例如姓名、日期、郵箱等，支持自定義欄位，比如中國的城市和地址。同樣，這個功能也可以給圖形圖層填充圖像，並支持從本地文件夾或 Dropbox 自建圖庫。

1. 情境帶入：從真實的網站上獲取圖像、文字內容。
2. 真實：使用真實有意義的內容，而不是假字元
3. 敏捷：一次給選中的多個圖層添加內容。
4. 高效：光速填充內容。

「WEB」中內嵌一個瀏覽器，輸入網址後可以獲取鏈接網站上的同類型欄位或圖像。

1. 預覽：在你的設計中置入真實 API 內容。
2. 健康：在每一個界面中都使用真實可靠的數據。
3. 靈敏：給每個單獨的圖層安排精準的 JSON 數值。
4. 面向企業：使用所在組織的 API 進行極致的設計。

「JSON」中可以鏈接一個 json 或是拖入文件，選取同組欄位進行填充。這裡提供一個簡單的 json 文件供大家實驗。

Cloud-connected design assets for your team.

團隊共享雲端設計資產。

1. 雲端共享：用共享的設計資源保持整個團隊的設計流通暢。
2. 專業：一鍵生成基於現有設計的樣式規範。
3. 一致性：在你的樣式庫里產生的變動會在其他設計組員的設計中同步變更，所以每個成員都不脫節。
4. 自定義：基於你獨有的設計給樣式庫添加特殊的元素。

採集 Sketch 文件中的已有樣式，製作共享樣式庫。在國內可以通過「堅果雲」實現樣式庫在線共享。

採集所有 Sketch 文件中的已有樣式，生成一頁設計樣式導航，包含配色、字體以及字體樣式。

Forget copy+paste. Perfectly clone any design element at lightning speed with Duplicate.

忘記粘貼複製吧，用「複製」功能可以快速、完美克隆任何設計元素。

1. 迅速：對設計元素進行快速的、精準到像素的完美複製。
2. 乾淨：不用手動移位確保了設計元素的一致性。
3. 設計檢驗：複製足夠的設計元素填充界面，以此檢測你的設計。
4. 情境帶入：Choose an exact number of duplicates, or make a live section.（這個 feature 官方說明太牽強了，筆者就不翻譯了。??）

這個功能和官方的「Make Grid」有些重複，不過如果之前使用了「內容填充」，那麼複製出來的圖形圖層也會被填充上圖像。

總結:

CRAFT 給單兵作戰的 Sketch 提供了團隊作戰的能力，配合另外幾個本地實用功能，它絕對有資格常駐在你的 Sketch 中。

我是 Teambition 的交互設計師徐小馬（微信：heiheilaugh），歡迎交流，請註明知乎 ID。作為知乎老透明，拋磚引玉，請大家多給意見。

假輿馬者， 非利足也， 而致千里； 假舟楫者， 非能水也， 而絕江河。 巨巨生非異也， 善假於 CRAFT 也。

擴展閱讀:

五分鐘了解谷歌全棧設計師打造的 Sketch 插件：Sketch Material

五分鐘了解微信團隊打造的 Sketch 插件 ：WeSketch

三步學會用繪圖利器 OmniGraffle 搭建一篇新文檔

Thx for your time.