快成一道閃電!讓你設計效率疾速提升的免費Sketch插件

盡管Bohemian Coding團隊一直在盡力更新提高Sketch的易用性,完善功能和特性,但依然無法滿足設計師和開發者的全部需求和愿望。好在開發者社區並沒有坐以待斃,而是積極地開始為Sketch開發各種各樣地插件。

有些開發者打算用自己開發的插件替代系統預制的組件,旨在讓GUI、圖標和原型地設計擁有更大地定制空間,還有一些開發者則選擇試圖開發出提高工作效率,完善工作流程地組件,解決各種尚未完善地問題。如果你打算借助Sketch從零開始設計一個項目,那么下面介紹地許多插件和工具應該能給你極大地幫助。

這些免費地插件不僅簡化了復雜的技術,加速了基本的流程,提升了原型開發速度,使得整個設計過程比原來提升了不止一星半點。打開你的Mac吧,下面的15個Sketch插件中,總有一款能幫你走的更快,設計得更好。

Sketch Mate

快成一道閃電!讓你設計效率疾速提升的免費Sketch插件

不想看常常的Sketch說明書?那么這款插件就是你的菜了。Sketch Mate 可以幫你熟悉Sketch相關的術語和功能,讓你在簡單上手過程中就可以了解畫板、智能對齊、排版和文本等工具的具體功能。

Dynamic Reposition

快成一道閃電!讓你設計效率疾速提升的免費Sketch插件

這個插件的名字已經非常形象了,動態重新定位插件,它可以幫你動態調整對象的大小和位置而不用破壞其內容,還能保持對象的比例。使用之前,你可以事先設置位置和尺寸,方便后續操作。這款插件和Sketch 3完美兼容,并且配有相應快捷鍵。

Sketch Framer

快成一道閃電!讓你設計效率疾速提升的免費Sketch插件

如果你想使用交互良好的原型展示給客戶,那么這款插件可以幫你達成這個愿望。這款插件能夠幫你將Sketch中設計的原型輸出到FramerJS中,生成可交互的原型,便于執行和展示。

Sketch Toolbox

快成一道閃電!讓你設計效率疾速提升的免費Sketch插件

這個名為 Sketch Toolbox的工具可以幫你更為方便地組織管理Sketch插件目錄。它不僅可以幫你組織管理插件,還可自動更新已安裝的插件,只需幾次點擊,你還能獲取更多可用、易用的Sketch插件。目前,Sketch Toolbox 的團隊還在為其添加更多功能,諸如排序、快捷鍵和自定義設置等,盡量與Sketch本身的開發保持相同進度。

Generate Gif

快成一道閃電!讓你設計效率疾速提升的免費Sketch插件

使用Gif來展示產品其實是頗受歡迎的一種方式。比起靜態的圖片,動態的Gif能更便捷地展現交互和動效的實際效果。Generate Gif 可以幫你快速生成動畫的關鍵幀,也與OSX Yosemite的沙盒機制完美兼容。

Sketch to App Store

快成一道閃電!讓你設計效率疾速提升的免費Sketch插件

當你使用Sketch為iOS或者Mac平臺設計APP的時候,發布到App Store 也是自然而然的事情吧?Sketch to App Store 這個工具能幫你生成一整套符合市場需求,漂亮且符合App Store 與 iTunes Connect 規則的展示截圖。

Smartboards

快成一道閃電!讓你設計效率疾速提升的免費Sketch插件

這個名為 Smartboards 的工具旨在通過一系列插件,來徹底解決新建畫板相關的所有問題。

在這一系列插件中,第一個是Gridify。這款工具可以幫你快速為畫板矩陣命名(列用數字表示,行用字母表示),然后按照字母順序排列,畫板與畫板之間還會預留100px的間隙,快速便捷高大上哦。

Sketch Sort Layers

快成一道閃電!讓你設計效率疾速提升的免費Sketch插件

每次項目都要接近尾聲的時候,都會發現所有的圖層亂七八糟犬牙差互,難以處理(不只是Sketch上,在PS上我們就沒少碰到這樣的情況)。而這個Sketch Sort Layers 插件正如同它的名字所說的,可以簡單有效地為你重現組織圖層順序,小巧,實用。

Sketch CSS Sprite Mixin

快成一道閃電!讓你設計效率疾速提升的免費Sketch插件

Sketch CSS Sprite Mixin 可以幫你從Sketch 快速生成干凈清爽的SCSS代碼,甚至無需額外操作就能生成無延遲的Sprite 圖像。

Sketch Notebook

快成一道閃電!讓你設計效率疾速提升的免費Sketch插件

對于那些看不到描述、評論和解釋就不知道怎么完善工作流程的人而言,這個小插件絕對算是良心了。Sketch Notebook 擁有一個簡潔高效的側邊欄,對于每一個工具和條目都有簡短而清晰的描述,還能有效地創建靠譜的文檔。

Efficiency

快成一道閃電!讓你設計效率疾速提升的免費Sketch插件

在Sketch 中安裝Efficiency 意味著,將會有一系列工具合集會幫你從各個方面提升你的工作效率。從文本控制到圖層管理,你會發現Efficiency會從各個方面各個細節提升你的工作效率。

CSS Buddy

快成一道閃電!讓你設計效率疾速提升的免費Sketch插件

雖然這個插件僅僅還處于測試階段,但是本身的易用性已經開始顯現。CSS Buddy 會使用CSS幫你控制圖層,對于開發者而言,這是一個偉大的創舉。現在,它已經可以控制圖形、文本和畫板,今后它還會控制更多類型的元素。

AEFlowChart

快成一道閃電!讓你設計效率疾速提升的免費Sketch插件

如果你需要在Sketch中繪制五顏六色的圖表的話,就千萬不要錯過這個插件。你唯一需要做的,就是編輯好文本和標簽,這個插件會幫你轉化為你需要的圖形和圖表。稍加調整,你要的圖表就搞定了。

Blade

快成一道閃電!讓你設計效率疾速提升的免費Sketch插件

Blade 可以將你在Sketch中繪制的原型、視覺稿轉化為HTML代碼,目前已經針對最新的 Sketch 3 的特性進行了升級。Blade 會針對不同類型的元素插入標簽,所以為了讓轉化效果更好,最好針對不同的元素和圖層進行合理的分組。

Sketch Export Assets

快成一道閃電!讓你設計效率疾速提升的免費Sketch插件

開發者提供了兩個有用的插件來處理所有的輸出和導出的問題。其中一個插件負責幫你針對Android、Windows Phone 以及iOS三大平臺導出素材,去它的Github頁面看看,你會發現另外一個插件還為你準備了什么功能~

結語

想比起昂貴而復雜的Photoshop, Sketch 看起來確實單薄了點,但是它對網頁和UI設計具有極強的針對性,社區和開發者提供的諸多插件也都專注于這方面的功能完善和技巧提升。稍加探索,我想你一定會愛上它的。

靜電的Sketch教程合集持續更新中:

  1. 《SKETCH設計教室!從零開始學APP設計利器SKETCH(一)》
  2. 《SKETCH設計教室!從零開始學APP設計利器SKETCH(二)》
  3. 《SKETCH設計教室!帶你了解超好用的SKETCH插件》
  4. 《想要一稿過不加班?SKETCH絕配神器MIRROR搶先體驗》

更多Sketch文章:

  1. 《SKETCH神助攻!無代碼做動效神器HYPE3入門教程》
  2. 《SKETCH新手指南!10個幫你UI設計提速的SKETCH使用技巧》
  3. 《超能陸戰隊!手把手教你用SKETCH繪制萌萌噠的大白》
  4. 《相見恨晚!6個實用技巧幫你提升SKETCH使用效率》

原文地址:designmodo
優設譯者:@陳子木

「子木說」

很多時候,我們都會在距離成功只有一步之遙的地方放棄。第一次運行Sketch啟動失敗之后,在很長的一段時間里面都不想碰玩意。后來發現,只需要進入系統偏好設置->安全性與隱私,然后在“允許從以下位置下載的應用程序”下勾選“任何來源”,就可以正常運行了。不懂變通+懶癌晚期 簡直不可救藥啊。話又說回來,如果你現在有Mac,想嘗試Sketch但又未曾安裝,趁這個機會趕緊試試吧。Sketch中文版+英文版+中文ibook格式說明文檔戳這里:微盤

本文由優設網原創翻譯,請尊重版權和譯者成果,轉摘請附上優設鏈接,違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/
設計微博:擁有粉絲量94萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎?
添加 優秀網頁設計 微信號:【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加:

快成一道閃電!讓你設計效率疾速提升的免費Sketch插件

收藏 11
點贊

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。