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

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

(資料圖片僅供參考)

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

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

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

接下來仔細給大家介紹一下，從簡單的開始吧~

1.可視化字體列表

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

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

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

2.自動布局更接近前端

2.1自動換行

自動布局這個東西很好用，但一直有一個問題——不能換行。

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

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

所以，這次Figma終于把自動換行加上了，這個真是方便不少，還省了一級Frame。

2.2. 尺寸限制

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

這個尺寸限制對前端來說，也即是一兩句代碼的事，非常簡單。

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

Figma這次終于加上了，這真是強迫癥的福音：

3.變量 Variable

重頭戲來了~

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

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

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

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

3.1.變量控制

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

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

而有了變量后，做起來就簡潔多了。

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

+被點擊時，給itemCount加1；-被點擊時，給itemCount減1。

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

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

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

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

可以用來做選項計數(shù)：

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

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

3.2.模式切換

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

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

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

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

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

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

4.1.前端樣式

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

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

首先，這個標注挺清晰的：

藍湖相比之下，就弱很多了：

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

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

關(guān)鍵是，因為Figma本身有自動布局，所以布局樣式識別得比較精準。感覺這樣下去，自動生成相應(yīng)式頁面也不遠了。

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

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

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

還能對比查看變更記錄：

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

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

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

因為它把設(shè)計師做的樣式和組件列表都能列出來了：

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

4.3.開發(fā)插件

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

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

介紹完了，感覺怎么樣？

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

也正是因為這個漏洞，這兩年來國產(chǎn)設(shè)計軟件都往功能全面的方向發(fā)展，確保自己在Figma面前的競爭力。

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

來個投票吧：

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

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

關(guān)鍵詞：