高端操作！Figma + 摹客，打造實用設計平臺

（原標題：高端操作！Figma + 摹客，打造實用設計平臺）

一、前言

紅透UX設計圈的在線矢量設計工具Figma，在最近兩年幾乎成了“真香”的代名詞，這也側面印證了“協作”已逐漸成爲設計團隊的共識。但對於國內用戶，糟糕的連接速度、極度缺失的本地化支持都讓Figma較難發揮真正的協作優勢。

下面這個界面，大概是所有直連Figma的用戶心中永遠的痛：

即使困難重重，仍然無法動搖部分國內設計團隊遷移平臺的決心。當然代價也是不小的：按人數收費的訂閱機制，總價不菲；爲保持連接體驗，“梯子”和相關費用也是必不可少；最後，Figma自身的交付能力較弱，所以還得另購其它產品作爲設計交付的補充.....

疫情的下半場，“節流”作首要原則，面對如此高昂的切換成本，團隊推動的阻力可想而知。令人欣喜的是，11月Figma官方社區正式上線了摹客的Figma插件，意味着終於有國內的主流協作設計平臺接入了Figma。整個DevOps部門可以使用免費、高速的國內服務器進行工作，大大降低團隊推廣的費用和風險。

以下筆者根據自己實際工作中的經驗，介紹一下如何藉助摹客插件來降低Figma使用門檻。同時也介紹一些實用的其它插件，爲希望將Figma作爲主設計工具的團隊們提供參考。

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

首先談談爲什麼要使用協作平臺，而不使用一些可以導出離線HTML包的插件？Sketch measure迅速衰落的“前車之鑑”已經證明了導出壓縮包交付的方式面對修改、迭代和審閱是非常低效的。平臺交付收集意見時更加高效，產生設計改動也不需要重複發送壓縮包給團隊，從而有效保證設計產出的準確性、唯一性。

開始整套操作前需要先註冊好摹客賬號，進入官網即可免費註冊。完成後，再訪問官方插件鏈接，點擊右上角的install安裝。

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

在插件中登錄後摹客賬號後，即可開始導入設計稿到摹客了。插件使用的方式可以查看官方教程，不再贅述。值得一提的是，除Figma外，摹客還兼容其他所有的主流軟件的設計稿（Sketch、Ps、Xd、Axure）導入。除了評審、交付等設計師的必需功能外，摹客還提供完整的在線設計，PRD文檔撰寫，設計規範管理，任務管理等實用功能，滿足設計團隊的各種高級需求。

最讓人無法拒絕的是，摹客針對100人以下的團隊一律免費，功能還幾乎沒有限制——當下和未來應該都找不到第二家這麼豪氣的廠商了。

三、大幅提升Figma實戰性能！實用第三方插件推薦

由於Figma本身是兼容Sketch文件的，設計資產的遷移相對容易，此處筆者再給出5個第三方插件的推薦，幫助團隊更順利地完成操作習慣過渡和功能的銜接。

1. Scale

Figma無法手動輸入倍率進行縮放，這讓很多習慣了⌘ + K縮放邏輯的設計師感到不爽。Scale則完美解決了這個問題。

2. Time Machine

Time Machine 可以理解爲一個快速存檔功能，他會自動複製一份當前設計稿，並收納到一個專門的 Page 中。如果習慣使用“另存爲”的方式來保存設計中間版本，一定會對這個插件愛不釋手。

3. Clean document

設計過程中難免產生一些排序混亂的空分組，無意義的隱藏圖層或是命名不規範的圖層。這款插件都可以幫你進行“智能打掃”。整理後，無論是自己還是合作設計師都能夠更好地理解圖層結構和邏輯。

4、TinyImage Compressor

圖片壓縮插件，支持JPG/PNG格式及打包輸出，質量和體積的優化相當不錯，免去輸出素材後再使用tinypng.com的處理麻煩。

5、Design Lint

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

四、結語

Figma社區功能上線才半年左右，各種設計素材和插件已經非常豐富，足見全球用戶對這款產品的喜愛。

無論是個體設計師還是設計團隊，Figma都是一款非常值得嘗試的工具。藉助“摹客 + Figma”的方式來構建設計平臺，並搭配第三方插件羣提升功能性，就足以讓這款產品勝任高強度的真實設計工作，並讓整個DevOps部門從糟心的海外服務器中解放出來，體會到極速查看、流暢協作的快感。

工具或設計平臺的遷移並不是一件複雜的任務，這些看起來很“高端的操作”其實都很簡單。試試看，相信你和你的團隊會在這個全新平臺上收穫高效與驚喜！