用 Figma 做產(chǎn)品設(shè)計(jì)，在線辦公6個(gè)月是什么體驗(yàn)？

前言

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

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

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

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

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

適合遠(yuǎn)程辦公

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

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

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

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

團(tuán)隊(duì)協(xié)作，實(shí)時(shí)同步

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

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

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

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

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

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

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

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

UI 走查的好幫手！

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

會(huì)用 Sketch 就會(huì)用 Figma

簡(jiǎn)單易上手，我從 Sketch 過(guò)渡到 Figma 非常快，個(gè)人賬戶(hù)使用免費(fèi)，只是團(tuán)隊(duì)組件庫(kù)有限制。

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

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

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

新功能：Community

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

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

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

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

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

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

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

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

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

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

贈(zèng)人玫瑰手有余香，你們的閱讀分享和點(diǎn)贊對(duì)我來(lái)說(shuō)很重要！啾咪~

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

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