Figma 的插件功能自 6 月初開(kāi)始內(nèi)測(cè),到 8 月初正式上線以來(lái),截止目前線上共有 268 款眾多功能與特色的插件,可以幫助設(shè)計(jì)師快速完成填充數(shù)據(jù)、創(chuàng)建元素、整理圖層、檢查可用性等工作,進(jìn)一步提升設(shè)計(jì)生產(chǎn)效率。補(bǔ)充上最后一塊拼圖 ── 插件生態(tài)的 Figma 終于是擁有了完整形態(tài)的設(shè)計(jì)工具,面對(duì)競(jìng)爭(zhēng)對(duì)手 Sketch 完全可以與之一戰(zhàn)。
插件功能正式上線三個(gè)多月以來(lái),F(xiàn)igma 上目前發(fā)布的插件所覆蓋的功能與類型,與 Sketch 已經(jīng)別無(wú)二致,基于 Sketch 的日常工作流中需要用到的插件在 Figma 中基本都能找到替代品。
不僅如此,讓人更興奮的是 Figma 基于 Web 技術(shù)的天然優(yōu)勢(shì)和其更加強(qiáng)大的 API,幫助 Figma 插件在一些方面更有想象空間。比如你可以在 Figma 上利用插件直接聽(tīng)歌單(Deep Focus),也可以玩游戲(Multiplayer Pong)檢查頁(yè)面元素與樣式是否符合設(shè)計(jì)規(guī)范、是否達(dá)到 WCAG 標(biāo)準(zhǔn),也可以創(chuàng)建 3D 元素,甚至直接設(shè)計(jì)、演示動(dòng)效也不在話下。
△ Multiplayer Pong
經(jīng)過(guò)筆者這幾個(gè)月對(duì)插件的使用與探索,有幾款插件已經(jīng)是日常工作流中提升效率不可或缺的一部分,這篇文章也想和大家分享一下這些插件。
安裝與使用插件
在分享插件之前,先簡(jiǎn)單介紹下插件的安裝與使用。插件的入口「Plugins」位于首頁(yè)的左上方,用戶可以在該頁(yè)面瀏覽、搜索所有插件。相比 Sketch 那種傳統(tǒng)的安裝與更新插件的方式,你只需要鼠標(biāo)輕輕點(diǎn)擊下「Install」,插件立馬安裝完成,即可上手使用,而且插件的更新也是毫無(wú)感知。
在插件的體驗(yàn)上,F(xiàn)igma 依舊秉承其一貫的風(fēng)格,設(shè)計(jì)師唯一需要關(guān)注的只有設(shè)計(jì)本身,其他的像版本迭代,插件管理、文件存儲(chǔ)、同步、協(xié)同的問(wèn)題都無(wú)需再投入任何精力。
使用 Figma 插件的方法與 Sketch 類似,主要有三種:
從系統(tǒng)的頂部菜單欄上的「Plugins」入口選擇插件;
在文件內(nèi)右鍵呼出菜單,從「Plugins」入口選擇插件;
快捷鍵 ? + / 呼出搜索,輸入插件名。
文件管理類插件
1. Time Machine
Time Machine 可以幫助設(shè)計(jì)師一鍵將設(shè)計(jì)稿自動(dòng)復(fù)制一份,收納到在一個(gè) Page 里,并按日期與時(shí)間排列。這款插件已經(jīng)是筆者目前最高頻使用的插件,因?yàn)槿粘5墓ぷ髁髦性O(shè)計(jì)方案的探索、推導(dǎo)、收斂到最后的落地,會(huì)產(chǎn)生數(shù)量很多的廢稿。以往筆者都要手動(dòng)創(chuàng)建一個(gè)名為「Archive」的 Page,然后將廢稿手動(dòng)丟進(jìn)去?,F(xiàn)在只需要 ? + / 然后輸入「tim」再一個(gè)回車一氣呵成。
△ Time Machine
2. Clean document
Clean document 可以幫助設(shè)計(jì)師自動(dòng)「打掃」選中的設(shè)計(jì)文件,清理隱藏的圖層,解除只有單個(gè)圖層的組,重命名圖層,還可以根據(jù)元素的位置對(duì)圖層重新排序。
△ Clean document
每次設(shè)計(jì)稿最終完成后,雜亂的圖層和編組簡(jiǎn)直是一片狼藉。無(wú)論是對(duì)設(shè)計(jì)師本人,還是一起協(xié)作的設(shè)計(jì)師與開(kāi)發(fā)都是一場(chǎng)噩夢(mèng)。不過(guò)現(xiàn)在一鍵就能搞定,是設(shè)計(jì)師的必備神器。
△ 設(shè)計(jì)師頭疼的 4 種原因
圖形資源類插件
3. Autoflow
Autoflow 可以讓設(shè)計(jì)師直接選中兩個(gè)元素后自動(dòng)畫(huà)上流程線,省去了畫(huà)流程圖過(guò)程中標(biāo)注箭頭的繁瑣工作。
△ Autoflow
4. Iconify
Iconify 內(nèi)有 50 個(gè)圖標(biāo)庫(kù),包含超過(guò) 40,000 個(gè)圖標(biāo)。如果要找圖標(biāo)直接搜索,然后「add icon 」即可。用 iconify 來(lái)處理搭建原型階段的圖標(biāo)需求再好不過(guò),也省去了打開(kāi) iconfont 網(wǎng)頁(yè)找圖標(biāo)的麻煩。
△ iconify
5. Gifs
Gifs 可以讓設(shè)計(jì)師直接搜索并插入來(lái)自 GIPHY 的動(dòng)圖。不過(guò)這款插件在平時(shí)的工作中用的還是很少的,但是用 Figma 做 PPT 就非常適合配合這款插件食用。
△ Gifs
6. Vectary 3D
Vectary 3D 可以將 3D 元素插入 Figma 中,更有趣的在于你能將設(shè)計(jì)稿置入預(yù)設(shè)的可交互的 3D mockup 后,導(dǎo)出圖片到 Figma 中。從此包裝設(shè)計(jì)稿不用煩惱找不到適合的 mockup 了,自己動(dòng)手豐衣足食。
△ Vectary 3D
另外值得一提的是 Vectary 3D 這款插件背后的產(chǎn)品,是一款與其同名的基于瀏覽器的在線 3D 設(shè)計(jì)工具。
△ Vectary 3D 界面
無(wú)障礙類插件
7. A11y系列
A11y 即 Accessibility,隨著無(wú)障礙設(shè)計(jì)得到越來(lái)越多關(guān)注,這類插件也終于開(kāi)始出現(xiàn),讓我們可以更有效的優(yōu)化產(chǎn)品設(shè)計(jì),讓更多用戶享受更友好的體驗(yàn)。
A11y 系列由 Microsoft 出品,包含兩款插件:Color Contrast Checker、Focus Orderer。
7-1 Color Contrast Checker
用來(lái)檢查設(shè)計(jì)稿內(nèi)文本對(duì)比度是否遵守 WCAG(Web Content Accessibility Guidelines)標(biāo)準(zhǔn),以保證用戶可以無(wú)障礙閱讀文本內(nèi)容。Color Contrast Checker 的使用非常方便,喚起插件,選中需要檢測(cè)的界面,點(diǎn)擊 「Check」即可。
△ Color Contrast Checker
不過(guò)這款插件也存在偶爾失效的問(wèn)題,筆者還沒(méi)發(fā)現(xiàn)其規(guī)律和玄學(xué)。色彩對(duì)比度檢測(cè)的插件除此之外還有三款,其中 Contrast 是筆者體驗(yàn)下來(lái)比較不錯(cuò)的一款,如果沒(méi)有對(duì)整個(gè)頁(yè)面內(nèi)所有文本自動(dòng)檢測(cè)的需求,Contrast 會(huì)更適合使用。
△ Contrast
7-2 Focus Orderer
Focus Orderer 幫助設(shè)計(jì)師標(biāo)記并測(cè)試焦點(diǎn)狀態(tài)(Focused)的流程和體驗(yàn)是否合理,一般在網(wǎng)頁(yè)設(shè)計(jì)中使用。
△ Focus Orderer
其實(shí)筆者之前還未見(jiàn)過(guò)類似 Focus Order 的插件或工具,希望未來(lái)能有更多解決或輔助無(wú)障礙設(shè)計(jì)的工具出現(xiàn)。一方面讓我們的設(shè)計(jì)產(chǎn)出更容易向無(wú)障礙標(biāo)準(zhǔn)對(duì)齊,另一方面也會(huì)影響行業(yè)內(nèi)的設(shè)計(jì)師更多的關(guān)注無(wú)障礙設(shè)計(jì)領(lǐng)域。
8. Color Blind
上面提到的 Color Contrast Checker 可以檢測(cè)文本的對(duì)比度,而 Color Blind 則可以將設(shè)計(jì)稿自動(dòng)轉(zhuǎn)成 8 種不同類型的色盲效果,借此我們可以進(jìn)入色盲用戶的視角審視我們的設(shè)計(jì)是否合理。
△ Color Blind
設(shè)計(jì)系統(tǒng)類插件
9. Roller · Design Linter · Toybox
Roller 是一款樣式自動(dòng)檢查工具,通過(guò)添加或?qū)?styles 后,可以以此為基準(zhǔn)校驗(yàn)文件內(nèi)使用的顏色、字體樣式、陰影、圓角大小是否符合設(shè)計(jì)規(guī)范,以保證設(shè)計(jì)產(chǎn)出完全對(duì)齊規(guī)范。不過(guò) Roller 有個(gè)很大的問(wèn)題,其本身不支持 rgba,希望后續(xù)會(huì)有優(yōu)化。
△ Roller
Roller 好像是目前市面上(不包括某些大廠的內(nèi)部工具)出現(xiàn)的第二款設(shè)計(jì)校驗(yàn)工具(筆者已知的第一款是 sketch-lint),雖然類似概念的工具在開(kāi)發(fā)那很早就存在,但我們還在用最原始的人肉方式處理樣式不規(guī)范的問(wèn)題,從 components 到 design lint ,設(shè)計(jì)的工程化還要走好長(zhǎng)一段路。
10. Chroma colors
Chroma colors 可以通過(guò)選中多個(gè)對(duì)象快速創(chuàng)建 Color styles,省去了為每個(gè)顏色手動(dòng)創(chuàng)建 style 的重復(fù)勞動(dòng),在搭建組件庫(kù)初期幫助很大。
△ Chroma colors
以上推薦的插件均為筆者日常工作會(huì)用到的一些功能和體驗(yàn)不錯(cuò)的插件,其實(shí)還有很多優(yōu)秀的插件可以推薦,比如官方人員出品的 Themer,可以一鍵切換主題;自動(dòng)生成視覺(jué)焦點(diǎn)圖的 VisualEyes;還有 Product plane、Wireframe、Graphviz 將圖表、流程圖全部搬運(yùn)到 Figma 中,實(shí)現(xiàn)排期、文檔、設(shè)計(jì)全在 Figma 實(shí)現(xiàn)。
好的軟件也要有好的設(shè)計(jì)模板,最后推薦一系列figama格式的設(shè)計(jì)模板,請(qǐng)點(diǎn)擊鏈接前往。
全站高品質(zhì)素材免費(fèi)下載!