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

Figma 是什么？

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

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

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

Figma為什么厲害

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

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

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

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

2. 絲般順滑不卡頓

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

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

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

經(jīng)過(guò)實(shí)際體驗(yàn)來(lái)看，無(wú)論多大的文件，F(xiàn)igma 似乎都能達(dá)到流暢的 60 幀渲染。

3. 大殺器 — 全局組件

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

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

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

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

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

4. 拉攏團(tuán)隊(duì)用戶的核心競(jìng)爭(zhēng)力 — 團(tuán)隊(duì)協(xié)作

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

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

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

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

Figma 在這一點(diǎn)上就做的非常到位，版本管理體驗(yàn)良好。

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

FIgma 目前存在的一些問(wèn)題

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

1. 無(wú)中文

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

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

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

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

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

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

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

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

Sketch/XD/Figma 如何選擇

1. Windows用戶

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

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

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

2. Mac用戶

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

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

當(dāng)然前提是，你最好得會(huì)翻墻。

結(jié)尾

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

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

所以我說(shuō) Figma 是面向未來(lái)的設(shè)計(jì)工具，一點(diǎn)都不夸張。

最后如果你們想嘗試 Figma 的話，有 Sketch/XD 基礎(chǔ)的同學(xué)只需要花一天時(shí)間熟悉一下 Figma 的操作和快捷鍵，就可以進(jìn)行無(wú)縫切換，它幾乎沒有學(xué)習(xí)成本?；蛘邔?shí)在不想自己摸索也可以康康我在虎課上錄制的 Figma 教學(xué)，過(guò)一遍就會(huì)，沒有難度。

作者微信公眾號(hào)：「超人的電話亭」