工具

設(shè)計工具軟件Figma的詳細介紹

23235

最近有一款新興設(shè)計工具「Figma」逐漸走進了大家的視野，越來越多的人認識或者上手嘗試了這款軟件，不過似乎還是有不少同學(xué)對 Figma 一頭霧水，不知道這是哪里殺出來的程咬金，那么今天我們就來簡單介紹一下 Figma。

Figma 是什么？

它是一款類似 Sketch 或 XD 的 UI 設(shè)計工具，但 Figma 跟后兩者的本質(zhì)區(qū)別在于它基于 web，也就是說只要有瀏覽器和網(wǎng)絡(luò)就能開、就能用。

目前 Figma 在國外收割了一大批擁躉，比如大家耳熟能詳?shù)?Twitter、微軟、Github 以及 Dribbble 等等。在國內(nèi)的熱度雖然還沒有這么高，不過 Figma 正在逐漸搶占 Sketch 的用戶，比如最近很火的閱文，其體驗設(shè)計部 YUX 已將海外項目 webnovel 全部遷移至 figma。

那么它何德何能，可以成為如此耀眼的新星呢？

Figma為什么厲害

1. Windows上最好用的UI設(shè)計工具

由于 Windows 生態(tài)的緣故，UI 類的專業(yè)設(shè)計工具似乎對 windows 都極度不友好，不管是像 sketch 這樣根本不開發(fā) windows 版本，還是 XD 這樣哪怕有 windows 版，也是各種閃退、bug 頻出，總之 windows 的 UI 設(shè)計體驗向來是非常差的。

這時候 figma 給 windows 帶來了媲美，甚至超過 sketch 之于 mac 的體驗?；?web 這個基本特質(zhì)決定了 figma 非常容易適配全平臺，只要你的設(shè)備有瀏覽器，聯(lián)了網(wǎng)，就隨時隨地可以快樂地進行設(shè)計。

不管是 macOS、windows、Linux，甚至最近連 iPad 都可以了！

2. 絲般順滑不卡頓

不管是曾經(jīng)習慣用 Ps 做設(shè)計的同學(xué)，還是用 sketch 的同學(xué)，我想你們都有被卡頓的支配的恐懼，圖層一多、文件一大、頁面一復(fù)雜就連移動圖層都變得異常費勁。

在使用 Figma 之前，我也以為線上的軟件必然比本地的好不到哪里去，但后來發(fā)現(xiàn)我錯了，臉都被打腫了，這里演示中因為 iOS 沒有 figma 版本的 guideline，所以用谷歌 MD 的替代，文件量大致相當。

Figma 似乎并不怎么消耗本地資源，也完全沒有 sketch 那樣嚴重的內(nèi)存泄漏問題，所以當我打開同一個 APP 項目文件，Sketch 內(nèi)存（加緩存）占用達到恐怖的 16G，figma 甚至不足 160M。

經(jīng)過實際體驗來看，無論多大的文件，F(xiàn)igma 似乎都能達到流暢的 60 幀渲染。

3. 大殺器 — 全局組件

Figma 的組件和 sketch 類似，但又有區(qū)別。

得益于線上協(xié)作的模式，你可以在 figma 新建一個專門的文件來定義組件（component）或者樣式（Style），再把這個文件發(fā)布到庫（Library），這樣你團隊中的所有成員都可以在團隊中的任意文件調(diào)用這些組件。

而只要修改其中一個組件的樣式，團隊中所有的文件內(nèi)用到該組件的地方，都能選擇是否要同步更新。

有同學(xué)可能會問「啊那不是和 sketch 的 library 一模一樣么？」

區(qū)別在于 Figma 的組件庫是同步、實時、全員更新的。這就意味著團隊中每一個成員和組件庫之間的交互都更加快捷高效，而組件庫可以更新給全部成員、全部文件，再也不用像 Sketch 那樣 10 個人 10 種不同的組件版本了。

4. 拉攏團隊用戶的核心競爭力 — 團隊協(xié)作

而 Figma 最核心的競爭力，非團隊協(xié)作不可，這也是 Figma 能夠抵抗 sketch 贏家通吃的大勢，硬生生從 sketch 手里搶下一片市場的關(guān)鍵所在。

它進可實時協(xié)作，幾位設(shè)計師同時操作同一設(shè)計文件，不用再受你改一下保存完之后他才能再改第二下的困擾；它退又可評論留言，哪里急需修改、哪里優(yōu)先級較低，又或者如果恰好馬上下班，卻有地方需要記錄的話，這個功能絕對屬于殺手級 feature。

5. 恢復(fù)歷史版本

我不知道大家有沒有經(jīng)歷過，對一個文件一頓猛改之后眼疾手快行云流水地按下了 ?+S 和 ?+Q ，美滋滋交稿下班之后 leader pick 了前一個版本。盡管這是小概率事件，不過一旦遇到就只能欲哭無淚地修改回去。

Figma 在這一點上就做的非常到位，版本管理體驗良好。

Figma 中每一個成員做的每一次修改都會自動生成對應(yīng)的歷史版本，即使一些成員誤操作修改或者刪除了一些東西，依然有機會一鍵搶救。

FIgma 目前存在的一些問題

但 Figma 目前也有一些有一些可能「勸退」新人的問題：

1. 無中文

我想作為設(shè)計師，認識幾個英文單詞并不是什么難事，新人只要多用幾天軟件，一邊用一邊查查詞典，就 Figma 里面這些單詞量并不成問題。

2. 全程需要聯(lián)網(wǎng)

同樣是由 Figma 線上工具的特質(zhì)決定的，在沒有網(wǎng)絡(luò)的特殊情況下可以先使用 sketch 來完成工作，再將 sketch 文件導(dǎo)入 figma，圖層、蒙板、圖片、矢量幾乎全部可以保留下來。

3. 網(wǎng)絡(luò)不是特別穩(wěn)定

由于 figma 服務(wù)器在海外，所以國內(nèi)網(wǎng)絡(luò)直連不太穩(wěn)定。如果你想要又快又穩(wěn)定的網(wǎng)絡(luò)訪問，找一個梯子對于設(shè)計師這種常年扒在墻頭往外瞄的人來說也并不是一件難事。

4. 插件、資源生態(tài)不夠完善

相較于 Sketch 來說，F(xiàn)igma 顯然還屬于后輩，所以插件生態(tài)還略顯單薄不是特別完善。不過 Figma 本體的功能已經(jīng)非常完善和強大了，所以日常工作基本上都能滿足。

這些問題有些如果努力一下完全不成問題，有些也很好解決，有些需要時間去積累，但這完全不妨礙現(xiàn)在的 Figma 成為在一定程度上可以替代 Sketch 的軟件。但是figma的素材資源也豐富起來，很多模板都推出sketch版和figma版本，更多figma素材資源可以在這里下載：figma格式的設(shè)計模板設(shè)計素材

Sketch/XD/Figma 如何選擇

1. Windows用戶

如果你用的 Windows，那么目前唯二可以用來做 UI 設(shè)計的軟件是 XD 和 Figma。

XD 今年 10 月起開始收費。當然不是全功能收費，但是「保存到本地」這一功能是需要收費的，否則只能存儲在只有 2G 容量的云端，這就比 Figma 的體驗還差了。

所以在 10 月之前你們依然可以使用 XD，但 10 月之后，如果不想花錢你們將只剩 Figma 可用，想熟悉它不如趁早。

2. Mac用戶

Sketch 依然是國內(nèi)的 UI 設(shè)計工具王者，如果個人使用且沒有團隊協(xié)作的需求那我還是推薦 Sketch，但一旦涉及到兩人或（尤其是）兩人以上的中小團隊，F(xiàn)igma 獨此一家的團隊協(xié)作優(yōu)勢將展現(xiàn)的淋漓盡致。

另外一種情況是你想找工作，要做項目整理或者重設(shè)計，那么在 Figma 中完成會是一個更好的選擇。你帶著 iPad 就能讓面試官看到項目源文件，指不定什么時候就能給自己加加分。

當然前提是，你最好得會翻墻。

結(jié)尾

之前看到一篇文章中說設(shè)計長久以來就像一座封閉的孤島，受限于專業(yè)設(shè)計工具的本地存儲形式，設(shè)計師不僅與上下游的銜接困難，內(nèi)部交流溝通的效率也不容樂觀。我們交給客戶視覺稿，交給開發(fā)標注切圖，交給設(shè)計師同事源文件，一項設(shè)計任務(wù)的輸出變得非常繁瑣和瑣碎。

現(xiàn)在，F(xiàn)igma 將這些孤島鏈接在了一起，開發(fā)可以直接查看對象屬性甚至代碼，設(shè)計可以查看調(diào)用組件庫、規(guī)范、原型、視覺稿，這些只需要一個分享鏈接。