隨著草圖云的引入，一種重新思考的文件格式和基于訂閱的定價模型，草圖已經(jīng)有了令人興奮的運行。除了一些小但非常直觀的改進(jìn)之外，草圖插件現(xiàn)在自動更新，過時的插件也被禁用。速寫插件管理越來越好，圖書館每天都在變大。讓我們來看看10個最好的草圖插件，它們正在徹底改變我們設(shè)計用戶界面的方式。

01. Auto Layout

插件類型:添加功能

價格:免費

概要:草圖的響應(yīng)性設(shè)計

群調(diào)整是去年年底添加到草圖的一個本地特性。它使您能夠改變當(dāng)您的畫板或父組被調(diào)整大小時對象的反應(yīng)方式——它并不是響應(yīng)性設(shè)計，但它已經(jīng)足夠近了。

由AnimaApp構(gòu)建的自動布局，將這個功能更進(jìn)一步。組元素調(diào)整允許您創(chuàng)建流體和銷對象一個角落(CSS)認(rèn)為::固定定位,自動布局還允許您通過一定量的px,抵消元素為元素定義最小和最大尺寸(認(rèn)為:min -:和max -:在CSS),集團(tuán)調(diào)整允許您所做的一切但是更令人費解的UI。

它還做了一些別的事情，我們接下來將討論。

02. LaunchPad

插件類型:網(wǎng)站發(fā)布

價格:保費計劃從9美元/ m

總結(jié):將設(shè)計轉(zhuǎn)換為靜態(tài)Html網(wǎng)頁

你已經(jīng)設(shè)計了一個網(wǎng)站。偉大的——現(xiàn)在什么?設(shè)計切換?不,沒有必要!LaunchPad提供了一種非常簡單的轉(zhuǎn)換方式。草圖設(shè)計到靜態(tài)HTML網(wǎng)頁。我總是對"簡單"的將設(shè)計轉(zhuǎn)換成代碼的"簡單"方法持懷疑態(tài)度，但LaunchPad卻能做到這一點。LaunchPad是由汽車布局制造商AnimaApp制造的。事實上，您可以結(jié)合LaunchPad與自動布局來導(dǎo)出響應(yīng)。草圖設(shè)計為HTML。讓我們看看。

首先,期望。LaunchPad沒有導(dǎo)出"完成"的設(shè)計。您仍然需要調(diào)整加載時間，進(jìn)一步調(diào)整代碼以確保響應(yīng)性和對可選屏幕尺寸的適應(yīng)性，并全面優(yōu)化代碼輸出，以確保站點能夠快速加載并順利運行。

LaunchPad并沒有讓網(wǎng)頁設(shè)計變得簡單——什么都不會——但它確實給了你一些非常堅實的基礎(chǔ)。在嘗試使用一些低保真模型后，我可以看到代碼輸出相對簡單，這意味著:

1.工作我們不需要擔(dān)心臃腫的代碼,和…

2.它不會用很長時間來取代開發(fā)人員

特點:

響應(yīng)式設(shè)計(如果與自動布局相結(jié)合)

視頻,鏈接和表單

字體類型回退

出版和域管理

搜索引擎優(yōu)化(標(biāo)題、元描述等)

社交媒體元標(biāo)簽(開放圖等)

版本控制(容易回滾到老版本)

谷歌分析(或類似)集成

以鍵盤為中心的工作流，以實現(xiàn)更快的設(shè)計

LaunchPad不能做什么:

用Javascript導(dǎo)出動態(tài)網(wǎng)站

03.Color Contrast Analyser

插件類型:添加功能

價格:免費

摘要:分析了色彩對比

兩種元素之間的顏色對比，通常在背景和正文文本之間，使用由WCAG(Web內(nèi)容可訪問性指導(dǎo)方針)定義的公式進(jìn)行比較。沒有人喜歡每天都處理公式(或者從來沒有，真的)，這就是為什么顏色對比分析器會進(jìn)入我們的前10名。

雖然許多草圖插件可以幫助你完成一些簡單的事情，但是顏色對比分析器也可以幫助你使用國際認(rèn)可的設(shè)計標(biāo)準(zhǔn)來做出可靠的設(shè)計決策。

彩色對比度分析儀比較兩種顏色，并定義它們之間的對比度。對比度分為三個層次(A、AA、AAA)，對比度應(yīng)始終滿足AA的最小要求。當(dāng)然，如果沒有度量的工具，您將永遠(yuǎn)不知道對比度，因此顏色對比分析器插件是設(shè)計人員必須努力提高其工作的可讀性和可訪問性的必備工具。如果只選擇一層，顏色將自動與畫板的背景顏色相比較。

雖然沒有可用的鍵盤快捷鍵，但您可以從Plugins菜單中訪問該功能，或者您可以在macOS中使用這個超級巧妙的技巧手動定義自己的鍵盤快捷鍵。

04.ImageOptim

插件類型:添加功能

價格:免費

概述:圖像優(yōu)化草圖

盡管草圖為優(yōu)化SVG文件提供了自己的解決方案，但是JPG和PNG圖像格式的壓縮仍然缺少使用一系列壓縮技術(shù)來調(diào)整的選項。自從ImageOptim提供了多年的可靠服務(wù)后，它就有了這樣的感覺:它會把這個功能畫出來。

任何設(shè)計師關(guān)心的加載時間和圖像優(yōu)化(這應(yīng)該是所有設(shè)計師)當(dāng)然需要ImageOptim添加到自己的工具箱,應(yīng)該注意的是,雖然你仍然需要核心ImageOptim應(yīng)用macOS系統(tǒng)上安裝(免費),你仍然需要在草圖層標(biāo)記為出口。導(dǎo)航到"導(dǎo)出和優(yōu)化所有資產(chǎn)"開始。

05. Export More

插件類型:擴(kuò)展功能

價格:免費

摘要:動畫GIF出口

當(dāng)你想到動畫gif，你會想到Dribbble射擊和應(yīng)用程序演示。毫無疑問，gif正在卷土重來，但制作它們的微妙藝術(shù)并不完全是常識。我們用Photoshop做這個嗎?在影響?

這兩個都是很棒的選擇，但你并不一定需要一個全功能的Adobe應(yīng)用程序來創(chuàng)建一個很酷的gif，特別是在創(chuàng)建相對簡單的動畫的時候。出口更多的把每一個藝術(shù)板作為一個單獨的框架，并把它們結(jié)合在一起。然后你可以選擇是否讓GIF播放一次或連續(xù)循環(huán)。

導(dǎo)航到"插件>輸出更多的>畫板到GIF"，選擇所需的回放方法(默認(rèn)或循環(huán))，然后選擇所需的幀速率。這真的很簡單，也很有趣。

06.Sketch IconFont

插件類型:節(jié)省時間

價格:免費

管理圖標(biāo)字體的草圖

Icon字體是一種高效的方法，在你的網(wǎng)頁設(shè)計中使用無限數(shù)量的圖標(biāo)，而不需要輸出和優(yōu)化大量的圖像資產(chǎn)。通常，我們參考HTML網(wǎng)頁< head >部分的圖標(biāo)字體，就像我們使用CSS和JavaScript一樣。然而，在草圖中使用它們稍微復(fù)雜一點。幸運的是，草圖IconFont使它變得簡單。

下載并安裝草圖IconFont后，下載SVG字體文件或下載這個字體包，其中包括FontAwesome的字體文件，材質(zhì)設(shè)計圖標(biāo)，離子圖標(biāo)和簡單的線條圖標(biāo)。當(dāng)你完成后，導(dǎo)航到"插件>圖標(biāo)字體>安裝一個字體包"，從打開的文件對話框中選擇下載的字體，然后導(dǎo)航到"插件>圖標(biāo)字體>網(wǎng)格插入>(你想要的圖標(biāo)字體)"，以插入一個圖標(biāo)。即使你打算為你的設(shè)計設(shè)計一個定制的圖標(biāo)，在你的處理中使用現(xiàn)成的圖標(biāo)可以幫助你在設(shè)計的早期階段快速的原型化，在你的低保真模型中增加一點的清晰度/保真度。

07. Craft

插件類型:原型

價格:免費

概要:設(shè)計和原型工具

手工做的遠(yuǎn)不止于同步你的。草圖設(shè)計與InVision web應(yīng)用。事實上，大多數(shù)工藝的功能都可以使用，而不需要有InVision訂閱。通過讓你用真實的數(shù)據(jù)和圖像來構(gòu)建你的設(shè)計，快速地將對象橫向和垂直地平鋪，并創(chuàng)建可以存儲在云中的風(fēng)格和資產(chǎn)的庫，并在任何時候訪問你的團(tuán)隊，你的設(shè)計工作流程就會被設(shè)計出來。

最近添加到此列表的功能是工藝原型,這不僅可以讓你展示用戶流,轉(zhuǎn)換和動態(tài)組件(如固定的頁眉/頁腳,這些示威活動也同步到核心InVision應(yīng)用與工藝同步,使你的整個團(tuán)隊與豐富的一流循環(huán)溝通、協(xié)作和設(shè)計切換工具。有了設(shè)計，原型和切換工具，草圖+工藝+ InVision是三重威脅!InVision應(yīng)用程序的訂閱開始于每月15美元，這適用于小型團(tuán)隊。然而，工藝本身可以免費使用。

08. Sketch Dynamic Button

插件類型:節(jié)省時間

價格:免費

概要:按鈕的動態(tài)寬度

按鈕在用戶界面中非常常見——我們使用它們來激活功能，直觀地提醒用戶使用重要的tap目標(biāo)，并向web服務(wù)器提交數(shù)據(jù)。問題是，并不是所有的按鈕都是相等的。在其他方面，它們的大小通常是不同的，這取決于內(nèi)部文本的字符長度，這可以使每個圖形的大小調(diào)整成為一個麻煩。

速寫按鈕不是一個新的速寫插件，但它肯定是一個無法超越的東西。如果您以前從未使用過它，它允許設(shè)計器指定一個固定的內(nèi)部間距(稱為填充:在CSS中)。

當(dāng)您更改按鈕中的文本層的值時，按鈕會自動調(diào)整大小，同時保持填充完整。盡管它很簡單，但它很有用。

09.Swap Styles

插件類型:節(jié)省時間

價格:免費

總結(jié):與另一層交換樣式

在方便快捷的鍵盤快捷鍵的幫助下，Swap風(fēng)格完全與另一層互換樣式。盡管從本質(zhì)上講，交換樣式在設(shè)計懸停狀態(tài)時是一個巨大的節(jié)省時間的方法。

讓我們以菜單導(dǎo)航為例。菜單導(dǎo)航將出現(xiàn)在每個屏幕上，盡管活動狀態(tài)(在導(dǎo)航中描述您所在位置的視覺突出鏈接)將不同于屏幕和屏幕。設(shè)置屏幕上的"設(shè)置"菜單項可能突顯出,并在newsfeed屏幕上"訂閱"菜單項會突顯出…

你通常有兩種選擇:

1 .工作笨拙地將東西移動到每個畫板

2。創(chuàng)造大量的共享風(fēng)格和/或符號

在本例中，交換樣式允許您簡單地使用快捷鍵:Cmd +Ctrl+ S，將活動狀態(tài)樣式移動到另一個菜單項。簡單但強(qiáng)大的,對吧?

10.Sketch Runner

插件類型:生產(chǎn)力

價格:免費

摘要:素描的聚光燈下

素描因其極簡抽象的鍵盤工作流程而深受喜愛。也就是說，總是有兩個或三個鍵盤快捷鍵，你似乎總是忘記或混淆了另一個設(shè)計應(yīng)用，比如Photoshop。讓我們不要忘記那些沒有鍵盤快捷鍵的常用工具和功能，它們隱藏在草圖菜單中。

素描跑步者解決了這些問題，并以macOS用戶熟悉的方式進(jìn)行了——素描跑步者是macOS的焦點，但是素描。

功能分解:

打開運行器:命令+ '

運行最后的動作:命令+ Shift + '

跳轉(zhuǎn)到任何地方:鍵入"goto"，然后是對象名稱

插入符號:輸入"插入"，然后是共享的樣式/符號名稱

創(chuàng)建符號和共享樣式:類型"創(chuàng)建"，然后是名稱

應(yīng)用共享樣式:類型"Apply"，然后是共享樣式名

安裝更多的插件:輸入"安裝"，然后擴(kuò)展名

如何安裝草圖插件

可以通過多種方式安裝草圖插件。大多數(shù)開發(fā)人員只需將他們的擴(kuò)展名以a的形式上傳至GitHub。sketchplugin文件。這很容易，但你必須定期檢查更新，因為當(dāng)更新版本的草圖被發(fā)布時，擴(kuò)展被知道會中斷。

我們還可以使用素描工具箱來搜索、安裝和管理草圖插件。然而，沒有保證你會得到最新的版本，一些(比如工藝和Zeplin)甚至沒有包含在工具箱中。

sketchpack經(jīng)常更新，通常包括像AnimaApp這樣的大男孩，但它仍然缺少像Craft和Zeplin這樣的私有插件。最新版本的草圖(版本45)試圖在它可以的時候更新草圖插件，但是使用sketchpack或者甚至是GitHub的GUI——如果你熟悉GitHub——可以作為一個合適的選擇。