一、前言

在線矢量設(shè)計(jì)工具Figma最近很火，這也側(cè)面印證了“協(xié)作”已逐漸成為設(shè)計(jì)團(tuán)隊(duì)的共識(shí)。但對(duì)于國(guó)內(nèi)用戶，糟糕的連接速度、極度缺失的本地化支持都讓Figma較難發(fā)揮真正的協(xié)作優(yōu)勢(shì)。

下面這個(gè)界面，大概是所有直連Figma的用戶心中永遠(yuǎn)的痛：

即使困難重重，仍然無法動(dòng)搖部分國(guó)內(nèi)設(shè)計(jì)團(tuán)隊(duì)遷移平臺(tái)的決心。當(dāng)然代價(jià)也是不小的：按人數(shù)收費(fèi)的訂閱機(jī)制，總價(jià)不菲；為保持連接體驗(yàn)，“梯子”和相關(guān)費(fèi)用也是必不可少；最后，F(xiàn)igma自身的交付能力較弱，所以還得另購其它產(chǎn)品作為設(shè)計(jì)交付的補(bǔ)充.....

疫情的下半場(chǎng)，“節(jié)流”作首要原則，面對(duì)如此高昂的切換成本，團(tuán)隊(duì)推動(dòng)的阻力可想而知。令人欣喜的是，11月Figma官方社區(qū)正式上線了摹客的Figma插件，意味著終于有國(guó)內(nèi)的主流協(xié)作設(shè)計(jì)平臺(tái)接入了Figma。整個(gè)DevOps部門可以使用免費(fèi)、高速的國(guó)內(nèi)服務(wù)器進(jìn)行工作，大大降低團(tuán)隊(duì)推廣的費(fèi)用和風(fēng)險(xiǎn)。

以下筆者根據(jù)自己實(shí)際工作中的經(jīng)驗(yàn)，介紹一下如何借助摹客插件來降低Figma使用門檻。同時(shí)也介紹一些實(shí)用的其它插件，為希望將Figma作為主設(shè)計(jì)工具的團(tuán)隊(duì)們提供參考。

二、借助官方插件打通Figma和摹客

首先談?wù)劄槭裁匆褂脜f(xié)作平臺(tái)，而不使用一些可以導(dǎo)出離線HTML包的插件？Sketch measure迅速衰落的“前車之鑒”已經(jīng)證明了導(dǎo)出壓縮包交付的方式面對(duì)修改、迭代和審閱是非常低效的。平臺(tái)交付收集意見時(shí)更加高效，產(chǎn)生設(shè)計(jì)改動(dòng)也不需要重復(fù)發(fā)送壓縮包給團(tuán)隊(duì)，從而有效保證設(shè)計(jì)產(chǎn)出的準(zhǔn)確性、唯一性。

開始整套操作前需要先注冊(cè)好摹客賬號(hào)，進(jìn)入官網(wǎng)即可免費(fèi)注冊(cè)。完成后，再訪問官方插件鏈接，點(diǎn)擊右上角的install安裝。

安裝好以后就可以在瀏覽器中直接打開摹客插件了。在Figma的畫布空白區(qū)域點(diǎn)擊右鍵，依次選擇Plugins > Mockplus，稍作等待后彈出主界面。初次使用語言一定要選擇中文，才能使用中國(guó)區(qū)的服務(wù)器。

在插件中登錄后摹客賬號(hào)后，即可開始導(dǎo)入設(shè)計(jì)稿到摹客了。插件使用的方式可以查看官方教程，不再贅述。值得一提的是，除Figma外，摹客還兼容其他所有的主流軟件的設(shè)計(jì)稿（Sketch、Ps、Xd、Axure）導(dǎo)入。除了評(píng)審、交付等設(shè)計(jì)師的必需功能外，摹客還提供完整的在線設(shè)計(jì)，PRD文檔撰寫，設(shè)計(jì)規(guī)范管理，任務(wù)管理等實(shí)用功能，滿足設(shè)計(jì)團(tuán)隊(duì)的各種高級(jí)需求。

最讓人無法拒絕的是，摹客針對(duì)100人以下的團(tuán)隊(duì)一律免費(fèi)，功能還幾乎沒有限制——當(dāng)下和未來應(yīng)該都找不到第二家這么豪氣的廠商了。

三、大幅提升Figma實(shí)戰(zhàn)性能！實(shí)用第三方插件推薦

由于Figma本身是兼容Sketch文件的，設(shè)計(jì)資產(chǎn)的遷移相對(duì)容易，此處筆者再給出5個(gè)第三方插件的推薦，幫助團(tuán)隊(duì)更順利地完成操作習(xí)慣過渡和功能的銜接。

1. Scale

Figma無法手動(dòng)輸入倍率進(jìn)行縮放，這讓很多習(xí)慣了? + K縮放邏輯的設(shè)計(jì)師感到不爽。Scale則完美解決了這個(gè)問題。

2. Time Machine

Time Machine 可以理解為一個(gè)快速存檔功能，他會(huì)自動(dòng)復(fù)制一份當(dāng)前設(shè)計(jì)稿，并收納到一個(gè)專門的 Page 中。如果習(xí)慣使用“另存為”的方式來保存設(shè)計(jì)中間版本，一定會(huì)對(duì)這個(gè)插件愛不釋手。

3. Clean document

設(shè)計(jì)過程中難免產(chǎn)生一些排序混亂的空分組，無意義的隱藏圖層或是命名不規(guī)范的圖層。這款插件都可以幫你進(jìn)行“智能打掃”。整理后，無論是自己還是合作設(shè)計(jì)師都能夠更好地理解圖層結(jié)構(gòu)和邏輯。

4. TinyImage Compressor

圖片壓縮插件，支持JPG/PNG格式及打包輸出，質(zhì)量和體積的優(yōu)化相當(dāng)不錯(cuò)，免去輸出素材后再使用tinypng.com的處理麻煩。

5. Design Lint

如果你使用過Sketch新版本（69+）的助理功能，那就對(duì)這個(gè)插件非常熟悉了。Lint可以快速尋找設(shè)計(jì)的不一致，包括顏色、字體、效果、填充樣式、筆觸、邊框半徑等。實(shí)時(shí)的設(shè)計(jì)查錯(cuò)助理對(duì)于設(shè)計(jì)主管真是一個(gè)福音，再也不需要花費(fèi)大量的時(shí)間去審核設(shè)計(jì)師的細(xì)小設(shè)計(jì)失誤了。

四、結(jié)語

Figma社區(qū)功能上線才半年左右，各種設(shè)計(jì)素材和插件已經(jīng)非常豐富，足見全球用戶對(duì)這款產(chǎn)品的喜愛。

無論是個(gè)體設(shè)計(jì)師還是設(shè)計(jì)團(tuán)隊(duì)，F(xiàn)igma都是一款非常值得嘗試的工具。借助“摹客 + Figma”的方式來構(gòu)建設(shè)計(jì)平臺(tái)，并搭配第三方插件群提升功能性，就足以讓這款產(chǎn)品勝任高強(qiáng)度的真實(shí)設(shè)計(jì)工作，并讓整個(gè)DevOps部門從糟心的海外服務(wù)器中解放出來，體會(huì)到極速查看、流暢協(xié)作的快感。

工具或設(shè)計(jì)平臺(tái)的遷移并不是一件復(fù)雜的任務(wù)，這些看起來很“高端的操作”其實(shí)都很簡(jiǎn)單。試試看，相信你和你的團(tuán)隊(duì)會(huì)在這個(gè)全新平臺(tái)上收獲高效與驚喜！

Figma插件下載地址：https://www.mockplus.cn/download/figma-intergration?hmsr=w12
Figma插件使用教程：https://help.mockplus.cn/p/504?hmsr=w12