Figma大改版，跟Axure和藍湖搶活了？_天天熱資訊

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

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

(資料圖片僅供參考)

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

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

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

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

1.可視化字體列表

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

現在終于加上預覽了，而且還提供了幾種分類查看：

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

2.自動布局更接近前端

2.1自動換行

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

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

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

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

2.2. 尺寸限制

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

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

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

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

3.變量 Variable

重頭戲來了~

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

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

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

看不懂也沒關系，接下來詳細解釋。

3.1.變量控制

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

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

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

你給這個數字設置一個變量，取名叫itemCount。

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

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

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

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

可以用來做音量調節：

可以用來做選項計數：

這個種變量法和前端幾乎時一樣的，這對有前端基礎的設計師來說，幾乎沒有學習成本。

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

3.2.模式切換

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

利用變量，Figma也能實現這樣的切換：

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

你可以創建多個這種表，Figma會將數據變成菜單，一鍵切換。

4.開發模式 Dev Mode

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

4.1.前端樣式

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

但現在Figma進場，那效果就很不一樣了。

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

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

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

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

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

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

圖片導出的類型也挺多：

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

還能對比查看變更記錄：

4.2.前端設計組件一體化

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

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

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

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

4.3.開發插件

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

現在開發模式也有自己的插件區，全是面向前端的。

介紹完了，感覺怎么樣？

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

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

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

來個投票吧：

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

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

關鍵詞：