[譯] 使用figma設計產品6個月心得

作者：Lee Munroe

https：//

onesignal。com/blog/desi

gning-with-figma/

我是在6個月前剛加入OneSignal的其一個設計團隊的，我的一部分工作內容就是確定使用的工具和工作流程。

我斷斷續續用Figma作為輔助工具用了大概1年左右。在我上一個團隊中，我們使用Sketch，Invision和Absrack，十分流暢，因此從來沒有考慮過替換使用其他工具或者改變團隊工作習慣。

換工作後我在這家公司有了一個新的開始，這也是開始使用Figma的好機會。以下是我截止目前的經驗。

我的設計工具使用歷史

首先是一些我用過的工具背景。像我們中的許多人一樣，我一開始用的就是Photoshop。Photoshop4。0是我用過最早的版本（緊接Geocities之後）。我只用這唯一一個工具做了好幾年的網頁設計。這幾年中也會用到Flash（做一些開屏畫面之類）。

Adobe Photoshop 4。0

Macromedia flash 8

當我開始需要做出更好用的互動稿的時候，我開始用Axure畫原型。這些年來我也用過Fireworks和Keynote，但主要還是沿用了Axure實現可互動原型，同時我用Photoshop做UI介面。

Axure RP 6

Macromedia Fireworks 8

後來大約在2013/2014年的時候，我開始嘗試Sketch。它改變了整個設計格局。更輕量級、更具成本效益、基於向量、單個檔案多個畫板、元件、外掛——我們是怎麼用了那麼多年Photoshop的？用Sketch來設計UI視覺真是太棒了。但Sketch缺乏設計原型的能力。結合使用Sketch和Invision出原型是個很強大的組合。

Sketch 3

Invision 2

然而，在團隊工作中，怎樣以及在哪裡儲存檔案依然是個問題，這會導致檔案修改時的版本衝突。Abstract的出現解決了版本控制問題以及“某人的最新版本檔案在哪裡？”之類的問題。Abstract可以用來存放檔案（這使得團隊協作更容易），Sketch可以產出介面設計，而Invision可以產出原型。

Abstract

這三者共同使用會是個非常優秀的組合，但畢竟是三個不同的工具。讓團隊成員使用三個獨立的工具，需要依賴一個可以無縫協同工作的外掛（比如Invision Craft）。

Hello Figma

Figma

我剛接觸Figma的時候，聽說它最大的特點就是它的實時協作體系。說實話當時這對我並沒有很大的吸引力（除了遠端會議的場景）。但其實除了這之外，它還有很多別的功能。

基於瀏覽器並且可共享

Figma是基於瀏覽器的，也就是說你可以在瀏覽器中開啟。這意味著省去了安裝步驟，在任何平臺上，只要有瀏覽器就可以訪問。這也意味著任何人都可以更容易地獲取設計稿。

對我而言，Figma的這一大特點改變了整個遊戲規則：易於訪問並且可共享。每個人都可以很容易地檢視設計稿。市場、開發、產品、管理層，團隊中的任何人。你不用匯出檔案然後挖空心思想辦法傳送給他人，你也不用為了讓他們試用而不得不請對方下載註冊某個應用。

開始使用是免費的

Figma團隊慷慨地提供了免費版本，方便試用也方便其他團隊成員訪問。當你決定擴大團隊規模並給成員訪問設計檔案庫的許可權時，也不會有太高的預付成本。我們跟很多設計外包團隊合作，我能很容易地新增或刪除他們的使用許可權。

效能

放大/縮小

我曾經覺得基於瀏覽器的設計和原型工具一定會有效能問題。結果這完全不成問題。事實上各方面來說響應速度都很快，完全不會有延遲。

資金和成長

就像任何新誕生的很酷的工具一樣，你不會想把錢花在一個活不長久的事物上。Figma不會讓你有這種顧慮。他們拿到了大筆融資，產品也獲得了很好的進展。

沒有“檔案”

Figma檔案

Figma的檔案是線上儲存的，所以你的系統、硬碟或Dropbox中不會丟失。psd或。sketch檔案。最新最棒的設計稿永遠都在Figma上。你也可以匯出。fig檔案，但我很少需要這麼做。

一體式設計堆疊

Figma囊括了這些功能：UI設計，演示，原型，版本控制，反饋系統和切換開發者模式。全程使用一個同工具意味著不需要在不同的應用程式中來回切換，或者從一個工具匯出給另一個，也不用安裝額外的外掛。這樣也更容易管理預算，所以我只用買一款工具，也只用按每人/每個許可來付款即可。

設計、原型、程式碼功能

友好的支援

Figma的客戶支援又好又快。通常你都能從線上問題列表中找到你要的答案，但有一次我因為某些不常見的庫行為聯絡他們希望獲得幫助，一小時內他們就透過截圖和gif動圖幫我解決了問題。

Sketch匯入

Figma知道他們的目標使用者基本都是Sketch使用者，所以對sketch格式的匯入匯出都做了很好的支援。你甚至可以直接從Sketch裡複製檔案到Figma裡貼上。

Figma 和Sketch的差異

他們之間並沒有太大的不同，即使有的話我用不了幾個星期就已經忘了。我知道的幾個比較顯著的不同如下：

· 置入影象——在Figma中比較像蒙版，這一點很不錯。尤其是當你需要把影象限制在某個區域內的時候。

· 框架和畫板——框架是你在Figma中使用的主要設計物件。你可以在框架中巢狀框架，可以在子框架中設定約束和柵格。

· 元件（Sketch中的Symbols）、元件（Figma中的Components）和例項（Instances）——元件（Components）更為靈活，你可以隨時編輯。話雖如此，之前有一件事讓我困惑，就是我找不到主元件在哪裡（因為Sketch會自動建立一個元件頁面）。

· 外掛——Figma上週剛宣佈開始支援外掛了

怎樣開始

看這裡的教學影片。我目測大約1小時就把Figma可以掌握個七七八八。

看一些免費素材。看下別人怎麼做的，照著做就行。

備選和相關工具

當然了Figma不是唯一的設計工具，隨時掌握可用的工具，瞭解它們的利弊是很有必要的。

· Abstract

https：//www。

abstract。com/

· Adobe XD

https：//www。

adobe。com/products/xd。h

tml

· Framer

https：//www。

framer。com/

· Invision Studio

https：//www。

invisionapp。com/studio

· Principle

https：//

principleformac。com/

· Sketch

https：//www。

sketch。com/

結論

Figma很了不起，最大的特點就是它的可共享性。給你的團隊發一個連結，他們就能看到你的原始檔。鑑於它是免費的，而且不用你下載任何軟體，每個設計師都應該至少嘗試用一下，這樣可以更瞭解它是如何使用的。從現在的設計堆疊切換到Figma取決於你的專案背景、團隊大小、預算以及你涉及的某些協議，但是Figma至少能使這種切換變得更容易。