提升UI設計效率，這9款sketch插件神器你值得擁有！
「
UI設計師在日常工作中，經常會思考怎麼樣提高自己及團隊的工作效率？Sketch 作為 UI 設計師的必備工具，我們已經相當熟悉，如何結合 Sketch 來提高自己以及團隊的工作效率呢？
」
Sketch 的插件社區非常活躍，時不時都會出現一些殺手級的插件，從而幫助你大幅度提升設計效率。今天就給大家推薦9款超贊的sketch輔助插件神器，再附送10個sketch的使用技巧，希望對大家有所幫助。
sketch輔助神器插件
1
PinLog
一個 UI 設計的最終呈現，當然要靠設計師的自我奮鬥。但是，也要考慮到和前端工程師的充分溝通，PinLog 就是為了提高溝通效率而存在。
舉個很常見的例子，我們在進行大型項目的時候，經常會碰到設計稿交付前端工程師後還需要更新設計稿的情況，這些情況可能是因為需求變更，也可能是前期設計不合理造成的。而當設計稿更新後，前端工程師僅憑「畫板名稱」其實很難快速的找到設計師修改的地方在哪裡。
這時設計師就可以通過 PinLog 插件記錄下自己的修改位置和對這個修改的描述，我把這個動作稱之為 Add Pin 。
當前端工程師打開這個有修改記錄的 Sketch 文件之後，可以點擊插件菜單中的 Show Log 看到設計師記錄下的修改，點擊後可以直接跳轉到修改的位置，將修改的說明和設計稿對應起來。
2
Right Font
這可能是我在Mac上邂逅的最驚艷的一款字體管理工具了，當然其他的其實我也沒遇到過，只不過是覺得這個的簡潔和高效，已經有了一種一見鍾情的感覺了。
打開它後，在你的界面上就會出現如下圖：
這裡集中了你的Mac中所有的字體，看見上面【葉根友特楷簡體】旁邊的那個星星了么，你可以通過點擊它來收藏你常用的字體，這些字體可以在頂部菜單那個星星里找到，至於用法，就更簡單了。
打開sketch，在畫板中選擇你想要改變字體的字體，然後雙擊RightFont中你喜歡的字體，就會驚奇的發現sketch中的字體也隨之發生改變了。
除了直接去選擇字體，你還可以在上面的搜索框中找到自己想要的字體（當然只是存在於你的Mac之中的字體），並且可以根據字體樣式/字重/字寬三個維度來篩選字體。
除此之外，你當然可以預覽字體樣式了，在RightFont中右鍵，選擇【change preview...】,在輸入框中輸入你要預覽的文字，這會讓你更加便捷的去篩選出合適的字體。
在這個過程中，RightFont會一直置於屏幕最前，方便你快捷的選擇想要的字體，同時會在Mac頂部的那個不知道叫什麼欄就是有WIFI和電量之類的地方顯示。
3
Iconjar
在之前，我管理icon的辦法是，在sketch中新建一個空白文件，把經常用到的icon拖進去，然後命名為【icon大全】後保存……當再次要用到的時候就會打開，在去裡面一個一個挑，入坑不久，那個時候還真不知道有icon管理的工具，於是就只能用這種笨辦法，直到那天在微博搜索sketch相關話題的時候，看到了iconJar。（請忽略我用細中粗來分別命名我收集的icon素材……）
至於用法，完全覺得是傻瓜級的，首先打開iconjar，然後選擇那個【+Add Icons】建立目錄，命名，然後將自己日積月累的素材導入進去，Iconjar 目前支持 SVG、PNG、Gif 三種格式的圖片，建議大家盡量保留 SVG，這樣在 Sketch 還可以對icon進行二次修改。
然後，在你需要icon的時候打開iconJar，直接把你想要的icon拖進設計界面里就OK了，簡單快捷高效到令人髮指。
4
Zeplin
在用完zeplin之後，我做的第一件事就是刪除了其它標註工具，相比其它標註工具，zeplin道行明顯要高，並且重點強調，zeplin是設計師與前端的協作工具。
安裝完成後，在sketch中選擇想要標註的頁面，快捷鍵【?+E】快速導入到zeplin中，你就會看到如上圖的畫面。右側會顯示界面配色，而當你選中了某一元素的時候，各種元素就會出現在右側，如下圖：
5
Sketch Runner
之所以把 Sketch Runner 放在第一位，除了它是一個很好用的插件外，它還兼帶了快速安裝其他插件的職能。
通過 Sketch Runner，你可以快速運行 Sketch 自帶的各種命令。
能快速切換到任意文件、畫板、Page 等。
最方便常用的就是快速插入 Symbols 了。
怎麼樣，是不是有點像設計界的 Sublime？有興趣的朋友可以前往官網仔細了解 Sketch Runner 的更多功能特點。
6
Paddy
作為一名 Web Designer，最痛苦的事情之一莫過於在設計稿里添加固定 Padding 的設計組件了，例如 Button、Label 等。因為 Web Design 跟 App Design 最大的區別就是設備空間上的差異，很多情況下 Button 等元素是不能定寬高的，而是要根據裡面的具體文字內容和 Padding 調整寬高，之前雖然也有類似的插件，但都不是很好用，直到 Paddy 的出現，基本上解決了這個問題。
所以 Paddy 的核心功能就是，當你設定好上下左右的 Padding 值以後，就能夠快速根據你內容的變化而適配外面的容器寬高，非常方便。
7
Sketch Isometric
最近軸測圖風格的圖形設計大行其道，很多設計師都躍躍欲試想要在 Sketch 裡面設計自己的軸測圖，有了這個插件以後，你就能在 Sketch 快速繪製軸測圖了，並且還能做各種其他效果，快來試試吧！
另外，如果想要實現動圖裡的 Mockup 效果，可以採用 Magic Mirror 工具，但由於 Mockup 這些偏向圖像處理的操作我還是更傾向於在 PS 中進行，所以有需要的朋友可以自取。
8
Craft
Craft是一套面向Sketch和Photoshop的插件組，幫助你簡化設計流程中的自動化填充，提升工作流效率，將注意力集中在設計本身。作為一個工具套件，Craft包含下列工具：
批量複製：快速複製重複圖層，並方便調節間距、數量等。
樣式庫：在Sketch中生成一個Style Guide。它使一個新的頁面有不同的調色板，字體，文本樣式和自定義元素，您可以建立自己。與你的團隊分享和同步整個庫。
智能圖庫：支持Dropbox，unsplash，本地文件夾，或Web頁面上調取圖片到Sketch畫板中。
數據：帶來真正的文本，圖像，JSON等內容到你的Sketch，無需花費時間進行模擬數據。
9
MockingBot for Sketch
墨刀是國內大名鼎鼎的在線原型設計工具，而最近加入的設計稿在線標註功能可以說是開創了標註工具的新高度，你只需要通過墨刀的Sketch插件把設計稿上傳，即可輕鬆在墨刀中設計高保真原型，也可以快速的查看設計稿的標註，有了這樣方便的功能，還需要一遍遍的把設計稿導到本地嗎？當然不用啦！
sketch使用技巧
1
通過快捷鍵調整圖形的形狀
選中圖形，按住 Command 鍵，然後通過上、下、左、右方向鍵即可按1像素為單位調整圖形形狀。同時按住 Command Shift 方向鍵，則可以按10像素為單位進行調整。
2
複製元素
選中某元素，按 Command D 即可進行複製；複製出的新元素默認與原有元素的位置相同，且覆蓋於原有元素之上。
此外，按住 Option 健，同時拖拽目標元素，同樣可實現複製；保持複製出的新元素仍處於選中態，並連續使用 Command D 快捷鍵，即可按照之前手動拖拽的距離為間隔單位實現多重複制。
3
智能選擇
按住 Option 鍵，面向多個元素拉選擇框，最終只有完全處於選擇框內部的元素會被選中，而其他元素會被忽略。
4
分組與解組
選中多個元素，按 Command G 將其合併為一組。選中某個組，按 Command Shift G 則可實現解組。
5
組內單選
要選中某分組內的特定元素，無需到圖層列表中尋找，按住 Command 鍵，同時用滑鼠直接指向該元素，即可「穿透」分組，直接選中元素。
6
將畫板的縮放比還原為100%
按 Command 0，即可快速將畫板的縮放比還原為100%。
7
調整縮放比，同屏呈現
按 Command 1，即可快速將畫板調整為恰當的縮放比，所有的畫板得以同時呈現在視圖當中。
8
使視圖聚焦於選中的元素
按 Command 2，即可將編輯區域的視圖焦點快速移至處於選中態的元素或畫板。
9
將元素置於圖層序列的首位或末位
按住 Option 鍵，Sketch頂部工具欄里的「向前(Forward)」、「向後(Backward)」按鈕會自動變為「最前(To Front)」、「最後(To Back)」，即可使選中的元素排列到圖層序列的首位或末尾。
10
重命名圖層
選中某元素，按 Command R，該元素在圖層列表中的條目即進入可編輯狀態，此時輸入新的圖層名稱即可。
sketch教程及插件下載
TAG:靜Design |