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

01. Auto Layout

插件類型:添加功能

價(jià)格:免費(fèi)

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

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

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

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

02. LaunchPad

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

價(jià)格:保費(fèi)計(jì)劃從9美元/ m

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

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

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

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

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

2.它不會(huì)用很長(zhǎng)時(shí)間來(lái)取代開(kāi)發(fā)人員

特點(diǎn):

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

視頻,鏈接和表單

字體類型回退

出版和域管理

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

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

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

谷歌分析(或類似)集成

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

LaunchPad不能做什么:

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

03.Color Contrast Analyser

插件類型:添加功能

價(jià)格:免費(fèi)

摘要:分析了色彩對(duì)比

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

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

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

雖然沒(méi)有可用的鍵盤快捷鍵，但您可以從Plugins菜單中訪問(wèn)該功能，或者您可以在macOS中使用這個(gè)超級(jí)巧妙的技巧手動(dòng)定義自己的鍵盤快捷鍵。

04.ImageOptim

插件類型:添加功能

價(jià)格:免費(fèi)

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

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

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

05. Export More

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

價(jià)格:免費(fèi)

摘要:動(dòng)畫GIF出口

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

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

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

06.Sketch IconFont

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

價(jià)格:免費(fèi)

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

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

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

07. Craft

插件類型:原型

價(jià)格:免費(fèi)

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

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

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

08. Sketch Dynamic Button

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

價(jià)格:免費(fèi)

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

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

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

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

09.Swap Styles

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

價(jià)格:免費(fèi)

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

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

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

你通常有兩種選擇:

1 .工作笨拙地將東西移動(dòng)到每個(gè)畫板

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

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

10.Sketch Runner

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

價(jià)格:免費(fèi)

摘要:素描的聚光燈下

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

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

功能分解:

打開(kāi)運(yùn)行器:命令+ '

運(yùn)行最后的動(dòng)作:命令+ Shift + '

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

插入符號(hào):輸入“插入”，然后是共享的樣式/符號(hào)名稱

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

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

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

如何安裝草圖插件

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

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

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