前言

你還在糾結(jié)到底是換 Figma 還是接著用 Sketch 嗎？工欲善其事必先利其器，今天主要來分享下 Figma 的使用體驗以及適用場景。

先大概介紹一下我們設(shè)計團隊的情況，我們是在線辦公模式：18 位設(shè)計師分布在 3 個國家，9 個不同的城市。最近半年用下來，F(xiàn)igma 簡直太適合我們了！經(jīng)過閱讀 Figma 相關(guān)的文章以及我的實踐，來分享一下使用 Figma 的做產(chǎn)品設(shè)計的體驗：

直接輸出標(biāo)注切圖

還記得之前使用 Sketch 都需要使用其他軟件上傳設(shè)計圖才能輸出切圖和標(biāo)注，F(xiàn)igma 可以直接輸出切圖標(biāo)注，不依賴其他軟件，只需要維護好 Figma 里面的設(shè)計文件就好了。點擊想要輸出的切圖圖層，右側(cè)可以設(shè)置倍數(shù)和格式，然后輸出即可。為設(shè)計師們節(jié)省了寶貴的輸出時間，人生只有 3 萬天，every minute count!

△ 源文件來自 Figma 社區(qū) Microsoft Teams UI Kit.

適合遠(yuǎn)程辦公

有句話總結(jié)的好：Figma 就是網(wǎng)頁版的帶有實時反饋功能的 Sketch。設(shè)計師之間再也不用來回傳文件，或上傳云盤（云盤上的版本管理，你懂得）。

但如果大家是面對面的工作，當(dāng)面溝通的效率也是很高的，我以前團隊使用 Sketch 并在云盤上管理設(shè)計體系和頁面版本，所以這種情況的話，我覺得換不換都可，大家靈活選用。

如果你是遠(yuǎn)程辦公，或者研發(fā)團隊與設(shè)計產(chǎn)品團隊不在一處，建議使用 Figma，畢竟像這樣甩一個鏈接就能搞定前期的設(shè)計方案、設(shè)計審查、標(biāo)注切圖、設(shè)計還原度對比，還是比較方便的。你既可以通過郵件邀請的方式發(fā)送鏈接也可以 Copy link 粘貼到聊天工具里。

△ 可以選擇生成可編輯或可觀看的鏈接

團隊協(xié)作，實時同步

不管是 PM、設(shè)計師還是研發(fā)，都能實時看到設(shè)計進度，標(biāo)注反饋。當(dāng)你在設(shè)計文件中標(biāo)注反饋時還可以@相關(guān)人，這樣 TA 就可以收到郵件提醒。當(dāng)然你如果不想讓他們看的時候就不要分享鏈接給他們。

如圖，你可以實時看到誰在看你的設(shè)計稿，如果有合作的設(shè)計師，你們還能一起編輯設(shè)計稿。之前我覺得美國的設(shè)計師是不加班的，但當(dāng)我看到跟我合作的設(shè)計師在 Figma 上工作到半夜時（時差原因我的中午就是人家的半夜了），也算是眼見為實了，所以項目緊急了大家都一樣吧。

設(shè)計體系和流程建設(shè)

設(shè)計組件在整個設(shè)計部的協(xié)調(diào)使用非常重要，我們有一個單獨的設(shè)計體系文件，當(dāng)使用相同控件時調(diào)用即可，當(dāng)然這點 Sketch 也能做到，但線上實時同步就減少了很多溝通成本。

△ 源文件來自 Figma 社區(qū) Material Design.

用 Figma 可以制作出比較完整的設(shè)計流程，前期的想法（需求文檔也可以附上），競品調(diào)研，交互框架，頭腦風(fēng)暴，設(shè)計方案等都可以分別建立不同頁面展示。如下圖，在左側(cè)可以增加 Pages 頁面，方便前來觀看的用戶（老板、產(chǎn)品、設(shè)計、研發(fā)、測試等）理解需求背景，設(shè)計思路和解決方案。

△?Figma 社區(qū) Microsoft Teams UI Kit.

這個流程前期制定比較復(fù)雜，但是相當(dāng)實用，我也在不斷的學(xué)習(xí)和優(yōu)化設(shè)計流程。大家想要了解更多的話，可以留言給我，讓我知道這個主題大家還比較感興趣，值得再開一篇文章詳細(xì)聊聊。

UI 走查的好幫手！

在 Figma 另起一頁，將需要微調(diào)的截圖內(nèi)容+文字備注整理在設(shè)計圖下方，方便工程師核對設(shè)計稿和線上稿的區(qū)別，直接方便，開發(fā)同事表示這樣很友好。

會用 Sketch 就會用 Figma

簡單易上手，我從 Sketch 過渡到 Figma 非?？?，個人賬戶使用免費，只是團隊組件庫有限制。

需要提醒的是，F(xiàn)igma 有導(dǎo)入 Sketch 文件的功能，但是導(dǎo)入后組件和位置會發(fā)生錯亂，所以工具的遷移還是要考慮一些時間成本，但如果正好趕上設(shè)計改版那就可以順勢而為了。

基于瀏覽器的設(shè)計

Figma 是基于瀏覽器的，優(yōu)點是可以在任何系統(tǒng)中使用，但缺點是比較依賴網(wǎng)絡(luò)，我就遇到過短時系統(tǒng)故障。Figma 也有客戶端，可以下載到電腦上，個人感覺會更穩(wěn)定一些。

新功能：Community

Community 是 Figma 在 2020 年 8 月發(fā)布的新功能，目前是 beta 版，Community 里分為 Files 和 Plugins 兩部分內(nèi)容，F(xiàn)iles 和 Dribbble 有些類似，會有很多設(shè)計師或大廠分享設(shè)計作品，但強大的地方是：這里的設(shè)計資源都是源文件！可以直接在 Figma 里面拷貝和編輯的，從此不用四處搜羅資料了，心動了沒有？

△?Figma 社區(qū)的設(shè)計資源，預(yù)計會越來越多

△?如圖，還可以關(guān)注發(fā)布者

也就是說依托瀏覽器的 Figma 自帶設(shè)計資源和插件，一站式解決設(shè)計師的問題。Figma 這是預(yù)備要搶多少設(shè)計網(wǎng)站的飯碗呢?

插件也有很多值得期待，比如 Lottie。

△?Figma 社區(qū)中的部分插件

新功能：支持設(shè)置多種變體

當(dāng)同一個控件有不同的狀態(tài)時，F(xiàn)igma 也推出了支持設(shè)置多種變體的方式，只需要點擊 Combine 將相關(guān)控件結(jié)合在一起，就可以非常方便的切換各種狀態(tài)。

下圖的奶茶有多種規(guī)格，就比上面那個按鈕的變體要復(fù)雜，用 Figma 也可以輕松實現(xiàn)。

由于疫情原因，國外在家辦公的情況很普遍，有調(diào)查顯示 Figma 已經(jīng)超過 Sketch 成為主要的產(chǎn)品設(shè)計、UI/UX 設(shè)計工具了，從我近半年來的使用體驗來看，F(xiàn)igma 在遠(yuǎn)程辦公方面確實更勝一籌，這篇文章也算是帶大家提前了解一下。

贈人玫瑰手有余香，你們的閱讀分享和點贊對我來說很重要！啾咪~

注：本文非廣告非廣告非廣告。

歡迎關(guān)注作者微信公眾號：「彩虹BOOK」