高端操作!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部門從糟心的海外服務器中解放出來,體會到極速查看、流暢協作的快感。

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