前言

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

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

直接輸出標注切圖

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

△ 源文件來自 Figma 社區 Microsoft Teams UI Kit.

適合遠程辦公

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

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

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

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

團隊協作，實時同步

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

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

設計體系和流程建設

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

△ 源文件來自 Figma 社區 Material Design.

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

△?Figma 社區 Microsoft Teams UI Kit.

這個流程前期制定比較復雜，但是相當實用，我也在不斷的學習和優化設計流程。大家想要了解更多的話，可以留言給我，讓我知道這個主題大家還比較感興趣，值得再開一篇文章詳細聊聊。

UI 走查的好幫手！

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

會用 Sketch 就會用 Figma

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

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

基于瀏覽器的設計

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

新功能：Community

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

△?Figma 社區的設計資源，預計會越來越多

△?如圖，還可以關注發布者

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

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

△?Figma 社區中的部分插件

新功能：支持設置多種變體

當同一個控件有不同的狀態時，Figma 也推出了支持設置多種變體的方式，只需要點擊 Combine 將相關控件結合在一起，就可以非常方便的切換各種狀態。

下圖的奶茶有多種規格，就比上面那個按鈕的變體要復雜，用 Figma 也可以輕松實現。

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

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

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

歡迎關注作者微信公眾號：「彩虹BOOK」