最近Figma出了很多新功能，變化之大可以說是一日千里不足為過。

以前Figma雖然好用，但功能缺失比較明顯。

(資料圖片僅供參考)

做原型不如Axure專業(yè)，設(shè)計(jì)交付不如藍(lán)湖貼心，字體管理居然連預(yù)覽都沒有……

但是現(xiàn)在，上述問題不但一次性給出全面解決方案，而且做出了很多創(chuàng)新的功能！

可以看看這段宣傳片感受下：

接下來仔細(xì)給大家介紹一下，從簡(jiǎn)單的開始吧~

1.可視化字體列表

以前的Figma字體簡(jiǎn)陋得跟學(xué)生作業(yè)一樣，就一個(gè)從A到Z的字體名稱列表，既看不到預(yù)覽，也沒有把常用字體列出來。

現(xiàn)在終于加上預(yù)覽了，而且還提供了幾種分類查看：

要是能把中英文分割出來就更好了，希望以后再接再厲吧。

2.自動(dòng)布局更接近前端

2.1自動(dòng)換行

自動(dòng)布局這個(gè)東西很好用，但一直有一個(gè)問題——不能換行。

于是，每次只能做一行，然后手動(dòng)復(fù)制多行。

但前端樣式是可以自動(dòng)換行的，下圖這種效果只需一行float代碼即可。

所以，這次Figma終于把自動(dòng)換行加上了，這個(gè)真是方便不少，還省了一級(jí)Frame。

2.2. 尺寸限制

再好的響應(yīng)式頁(yè)面，也不可能下至10px上至10000px，基本都有尺寸限制的。

這個(gè)尺寸限制對(duì)前端來說，也即是一兩句代碼的事，非常簡(jiǎn)單。

但絕大部分設(shè)計(jì)軟件都沒有這個(gè)功能（大部分連響應(yīng)式布局都不支持），這樣就加大了響應(yīng)式設(shè)計(jì)的難度：

Figma這次終于加上了，這真是強(qiáng)迫癥的福音：

3.變量 Variable

重頭戲來了~

Axure的原型功能最厲害的地方在哪？就是這個(gè)變量。

什么是變量？就是設(shè)置一個(gè)值，可以和頁(yè)面上的展示或操作聯(lián)動(dòng)。

Figma現(xiàn)在可以用變量來做很多事，可以先看一下宣傳視頻感受下：

看不懂也沒關(guān)系，接下來詳細(xì)解釋。

3.1.變量控制

例如這個(gè)數(shù)字控件，點(diǎn)一下＋就加一個(gè)數(shù)字，點(diǎn)一下-就減一個(gè)數(shù)字。

如果這玩意兒沒有變量，就得做N個(gè)頁(yè)面，每個(gè)頁(yè)面是不同的數(shù)字，把他們都串起來才行，是不是想想就頭疼？

而有了變量后，做起來就簡(jiǎn)潔多了。

你給這個(gè)數(shù)字設(shè)置一個(gè)變量，取名叫itemCount。

+被點(diǎn)擊時(shí)，給itemCount加1；-被點(diǎn)擊時(shí)，給itemCount減1。

這樣一來，你只需要一個(gè)頁(yè)面就能完成數(shù)字空間的交互了。

變量有4種，除了數(shù)字之外，還可以是文本、顏色和布爾值（off/on二元選項(xiàng)）。

變量的運(yùn)用范圍也是很廣，例如可以用來做組件之間的聯(lián)動(dòng)：

可以用來做音量調(diào)節(jié)：

可以用來做選項(xiàng)計(jì)數(shù)：

這個(gè)種變量法和前端幾乎時(shí)一樣的，這對(duì)有前端基礎(chǔ)的設(shè)計(jì)師來說，幾乎沒有學(xué)習(xí)成本。

以為這就完了嗎？還不止。

3.2.模式切換

前端能讓UI一鍵切換模式，例如深色模式、語言、尺寸等。

利用變量，F(xiàn)igma也能實(shí)現(xiàn)這樣的切換：

這一切的秘訣，就是這張可以記錄多組數(shù)據(jù)的表：

你可以創(chuàng)建多個(gè)這種表，F(xiàn)igma會(huì)將數(shù)據(jù)變成菜單，一鍵切換。

4.開發(fā)模式 Dev Mode

Figma對(duì)前端的野心不止于此，他們是真的想要將開發(fā)也納入目標(biāo)人群。

4.1.前端樣式

現(xiàn)在國(guó)內(nèi)用藍(lán)湖的比較多，看尺寸、下載圖片很方便，雖然性能是卡了一點(diǎn)。

但現(xiàn)在Figma進(jìn)場(chǎng)，那效果就很不一樣了。

首先，這個(gè)標(biāo)注挺清晰的：

藍(lán)湖相比之下，就弱很多了：

Figma開發(fā)模式對(duì)邊距樣式的展示，與瀏覽器自帶的開發(fā)工具非常相似，讓人倍感親切：

這是是Chrome開發(fā)者工具，比Figma開發(fā)模式多了外層的margin和position：

關(guān)鍵是，因?yàn)镕igma本身有自動(dòng)布局，所以布局樣式識(shí)別得比較精準(zhǔn)。感覺這樣下去，自動(dòng)生成相應(yīng)式頁(yè)面也不遠(yuǎn)了。

而藍(lán)湖不能識(shí)別出布局，而且內(nèi)外邊距、間距、尺寸限制都沒有：

圖片導(dǎo)出的類型也挺多：

查看方案更新時(shí)間很方便，開發(fā)模式界面右上角就有：

還能對(duì)比查看變更記錄：

4.2.前端設(shè)計(jì)組件一體化

現(xiàn)在大家搞組件化，基本都是設(shè)計(jì)一套、前端一套，二者之間溝通效率低，基本上各玩各的比較多。

但是Figma這個(gè)開發(fā)模式，就有希望打破這一局面了。

因?yàn)樗言O(shè)計(jì)師做的樣式和組件列表都能列出來了：

這樣開發(fā)就能比較容易地了解設(shè)計(jì)所用的組件和標(biāo)準(zhǔn)色了。

4.3.開發(fā)插件

Figma本身有插件，但主要是給設(shè)計(jì)師用的。

現(xiàn)在開發(fā)模式也有自己的插件區(qū)，全是面向前端的。

介紹完了，感覺怎么樣？

我之前對(duì)Figma這個(gè)工具，總覺得大面上不錯(cuò)，但產(chǎn)品能力還是有不少缺陷。只能算是小而美，算不上成熟大氣。

也正是因?yàn)檫@個(gè)漏洞，這兩年來國(guó)產(chǎn)設(shè)計(jì)軟件都往功能全面的方向發(fā)展，確保自己在Figma面前的競(jìng)爭(zhēng)力。

但這次改版，讓人覺得沒有固步自封，步子邁得挺大的。

來個(gè)投票吧：

工具不管怎么升級(jí)，關(guān)鍵還是看使用者的實(shí)力，有沒有想法，能否找到對(duì)的設(shè)計(jì)策略才是關(guān)鍵。

想要提升設(shè)計(jì)核心競(jìng)爭(zhēng)力的話，可以來參加我們的設(shè)計(jì)策略課程，在齊全的資料和負(fù)責(zé)的導(dǎo)師的助力下，一定會(huì)讓你進(jìn)步神速的：

關(guān)鍵詞：