“

UI設(shè)計師在日常工作中，經(jīng)常會思考如何提高自己以及團(tuán)隊的工作效率。作為UI設(shè)計師必備的工具，我們已經(jīng)相當(dāng)熟悉了。那么我們該如何結(jié)合它來提高自己以及團(tuán)隊的工作效率呢？

”

插件社區(qū)很活躍，時不時就會出現(xiàn)一些殺手級插件，可以幫助你大大提高設(shè)計效率。今天給大家推薦9個超贊的輔助插件和10個使用技巧，希望對大家有所幫助。

輔助神器插件

一個UI設(shè)計最終呈現(xiàn)的效果，當(dāng)然離不開設(shè)計師自身的努力，但也需要考慮與前端工程師的充分溝通，以提高溝通效率。

例如，我們在做大型項目的時候，經(jīng)常會遇到設(shè)計稿交付給前端工程師后需要更新的情況，這可能是由于需求變更，或者是前期設(shè)計不合理，當(dāng)設(shè)計稿更新時，前端工程師很難根據(jù)“畫板名稱”快速找到設(shè)計師所做的修改。

這時候設(shè)計師可以用插件來記錄自己修改的位置，以及修改的描述，我把這個動作叫做Add Pin。

當(dāng)前端工程師打開有修改記錄的文件時，可以點(diǎn)擊插件菜單中的Show Log，查看設(shè)計師記錄的修改，點(diǎn)擊后可直接跳轉(zhuǎn)到修改的位置，將修改說明與設(shè)計稿進(jìn)行匹配。

正確的字體

這可能是我在 Mac 上遇到的最驚艷的字體管理工具了，當(dāng)然其他的我沒遇到過，只是覺得這個太簡潔、太高效了，讓我一見傾心。

打開之后你的界面會出現(xiàn)下面的畫面：

你 Mac 里的所有字體都集中在這里?？吹缴厦妗救~根友特開簡體版】旁邊的星星了嗎？你可以點(diǎn)擊它來收藏你經(jīng)常使用的字體。這些字體可以在頂部菜單的星星里找到。至于使用，就更簡單了。

打開它，在畫板中選中你想要改變的字體，然后雙擊你喜歡的字體，你會驚奇的發(fā)現(xiàn)字體也發(fā)生了變化。

除了直接選擇字體之外，你還可以在上面的搜索框中找到你想要的字體（當(dāng)然，只能是你的 Mac 上存在的字體），并且你可以根據(jù)字體樣式/粗細(xì)/寬度三個維度來篩選字體。

另外，你當(dāng)然可以預(yù)覽字體樣式。在中間右鍵，選擇 [...]，在輸入框中輸入想要預(yù)覽的文字。這樣可以更方便你篩選出合適的字體。

在這個過程中，它會一直放在屏幕的最前面，方便你快速選擇所需的字體，同時還會顯示在 Mac 頂部的 WIFI 和電池電量欄中。

之前我管理圖標(biāo)的方式是在 新建一個空白文件，把經(jīng)常用的圖標(biāo)拖進(jìn)去，然后命名為【圖標(biāo)合集】保存，等到再次需要用到的時候再打開一個一個選。剛開始用的時候也不知道還有什么圖標(biāo)管理工具，只能用這種笨辦法，直到那天在微博搜索相關(guān)話題的時候看到了。（請忽略我收集的圖標(biāo)素材都是用細(xì)、中、粗來命名的……）

至于使用方式，完全是傻瓜式的，先打開，然后選擇【+添加圖標(biāo)】建立一個目錄，命名，然后把你積累的素材導(dǎo)入進(jìn)去就可以了，目前支持SVG、PNG、Gif三種格式的圖片，建議盡量保留SVG，方便對圖標(biāo)進(jìn)行二次修改。

然后，當(dāng)你需要圖標(biāo)時，只需打開它并將所需的圖標(biāo)拖到設(shè)計界面即可。它非常簡單、快速且高效。

用過之后我第一件事就是刪除了其他的注釋工具，相比于其他的注釋工具，道行顯然功能更加強(qiáng)大，而且強(qiáng)調(diào)了它是設(shè)計師和前端開發(fā)人員的協(xié)作工具。

安裝完成后，在 中選擇需要注釋的頁面，使用快捷鍵【?+E】快速導(dǎo)入 ，就會看到如上圖的畫面。右側(cè)會顯示界面配色方案，選中某個元素后，右側(cè)就會出現(xiàn)各種元素，如下圖：

之所以把它放在第一位，是因?yàn)樗耸且粋€非常好用的插件之外，還具備快速安裝其他插件的功能。

通過，您可以快速運(yùn)行各種內(nèi)置命令。

可以快速切換到任何文件、畫板、頁面等。

最方便、最常用的是快速插入。

怎么樣？是不是有點(diǎn)像設(shè)計界的風(fēng)范呢？感興趣的朋友可以去官網(wǎng)了解更多功能。

稻田

作為網(wǎng)頁設(shè)計師，最痛苦的事情之一就是在設(shè)計稿中添加固定的設(shè)計組件sketch標(biāo)注插件，例如標(biāo)簽等。因?yàn)榫W(wǎng)頁與APP最大的區(qū)別就是設(shè)備空間的不同，很多時候元素的寬高無法固定，而必須根據(jù)具體的文本內(nèi)容進(jìn)行調(diào)整。雖然之前也有類似的插件，但是用處不大，直到Paddy的出現(xiàn)，基本解決了這個問題。

所以Paddy的核心功能就是一旦你設(shè)置了上下左右的值，你就可以快速的根據(jù)你內(nèi)容的變化來適配外部容器的寬高，非常方便。

軸測風(fēng)格平面設(shè)計最近非常流行，很多設(shè)計師都想在其中設(shè)計自己的軸測圖。通過這款插件，你可以快速繪制軸測圖sketch標(biāo)注插件，并制作出各種效果?？靵碓囋嚢?！

另外如果想要實(shí)現(xiàn)動圖里的效果的話，可以使用魔術(shù)工具，不過由于這些圖片處理操作比較像PS，所以我還是比較喜歡在PS里進(jìn)行，有需要的朋友可以自行取用。

工藝

Craft 是一套用于設(shè)計和開發(fā)的插件，可幫助您簡化設(shè)計過程中的自動化填充，提高工作流程效率，并專注于設(shè)計本身。作為一套工具套件，Craft 包含以下工具：

為了

Modao是國內(nèi)知名的在線原型設(shè)計工具，而近期新增的設(shè)計稿在線批注功能可以說開創(chuàng)了批注工具的新高度。你只需要通過Modao插件上傳設(shè)計稿，就可以輕松在Modao中設(shè)計出高保真原型，還可以快速查看設(shè)計稿的批注。有了如此便捷的功能，你還需要一次又一次地將設(shè)計稿導(dǎo)入本地電腦嗎？當(dāng)然不需要了！

技能

使用快捷鍵調(diào)整圖形的形狀

選中圖形，按住 鍵，然后使用上下左右方向鍵可以以 1 個像素為單位調(diào)整圖形的形狀，同時按住 Shift 方向鍵可以以 10 個像素為單位調(diào)整。

復(fù)制元素

選擇一個元素，按D鍵進(jìn)行復(fù)制；復(fù)制的新元素會默認(rèn)與原元素位置相同，且會覆蓋原元素。

另外，也可以通過按住 鍵并拖動來復(fù)制目標(biāo)元素，保持復(fù)制的元素處于選中狀態(tài)，并根據(jù)之前手動拖動的距離連續(xù)使用 D 快捷鍵進(jìn)行多次復(fù)制。

智能選擇

按住 鍵并拖動選擇框以覆蓋多個元素。最終只有完全位于選擇框內(nèi)的元素才會被選中，其他元素將被忽略。

分組和取消分組

選擇多個元素并按 G 鍵將它們合并為一個組。選擇一個組并按 Shift G 鍵將其取消分組。

組內(nèi)單選

要選擇組中的特定元素，您無需在圖層列表中搜索。只需按住 鍵并將鼠標(biāo)直接指向元素即可“穿透”組并直接選擇元素。

將畫板的縮放比例重置為 100%

按0可以快速將畫板的縮放比例恢復(fù)為100%。

調(diào)整縮放比例并同屏顯示

按1可以快速調(diào)整畫板到合適的縮放比例，以便所有畫板可以同時呈現(xiàn)在視圖中。

將視圖聚焦于所選元素

按2可以快速將編輯區(qū)域的視圖焦點(diǎn)移動到選定的元素或畫板上。

將元素放置在圖層序列的第一個或最后一個位置

按住該鍵，頂部工具欄中的“()”和“()”按鈕將自動變?yōu)椤癟o Front”和“To Back”，將選定元素排列到圖層序列的第一個或最后一個位置。

10

重命名圖層

選擇一個元素并按 R。圖層列表中該元素的條目將變?yōu)榭删庉嫛，F(xiàn)在您可以輸入新的圖層名稱。

教程和插件下載

登錄中文社區(qū)，你可以找到以上所有插件的下載地址，以及完全免費(fèi)的設(shè)計教程和資料。記住地址：

過去的亮點(diǎn)

如有侵權(quán)請聯(lián)系刪除！