c。
過去,雖然Figma好用,但功能的缺失相當明顯:
- 做原型不如Axure專業
- 設計交付不如藍湖貼心
- 字體管理甚至沒有預覽功能
然而,現在Figma不僅解決了上述問題,還推出了許多創新功能!讓我們一起來看看這段宣傳片:

00:45
接下來,詳細介紹一些新功能,從簡單的開始~
1. 視覺化字體列表
以前的Figma字體列表簡陋得像學生作業,只是一個從A到Z的字體名稱列表,既看不到預覽,也沒有把常用字體列出來。

現在終於有了預覽功能,而且還提供了多種分類查看:


如果能把中英文分開顯示就更好了,希望以後能實現。
2. 自動布局更接近前端

00:35
2.1 自動換行
自動布局很好用,但一直有一個問題——不能換行。因此,每次只能做一行,然後手動複製多行。

前端樣式可以自動換行,這次Figma終於加上了自動換行功能,這真是方便不少,還省了一級Frame。

2.2 尺寸限制
再好的響應式頁面,也不可能下至0px上至∞px,基本都有尺寸限制。這個尺寸限制對前端來說,是非常簡單的一兩句程式碼,但大部分設計軟體都沒有這個功能。

Figma這次終於加上了尺寸限制功能,這對強迫症來說是一大福音:

3. 變數(Variable)
重頭戲來了~
Axure的原型功能最厲害的地方就是變數。變數是一個可以和頁面上的展示或操作聯動的值。
Figma現在也可以用變數來做很多事。先看一下宣傳影片感受一下:

00:46
接下來詳細解釋。
3.1 變數控制
例如這個數字控制項,點一下+就加一個數字,點一下-就減一個數字。

有了變數后,設置一個名為itemCount的變數,+被點擊時給itemCount加1,-被點擊時給itemCount減1。這樣只需一個頁面就能完成數字的交互。

變數有4種:數字、文本、顏色和布爾值(off/on二元選項)。變數可以用來做組件之間的聯動、音量調節、選項計數等,這幾乎沒有學習成本。

3.2 模式切換
前端能讓UI一鍵切換模式,例如深色模式、語言、尺寸等。利用變數,Figma也能實現這樣的切換:




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

你可以創建多個這種表,Figma會將數據變成菜單,一鍵切換。
4. 開發模式(Dev Mode)
Figma對前端的野心不止於此,他們是真的想要將開發也納入目標人群。

00:44
4.1 前端樣式
國內目前多用藍湖看尺寸、下載圖片,但性能較差。Figma的標注功能則清晰得多:

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

Figma本身有自動布局,因此布局樣式識別非常精準,未來可能會自動生成響應式頁面。

藍湖則無法識別布局,也沒有內外邊距、間距和尺寸限制:

Figma的圖片導出類型也很豐富:

查看方案更新時間也很方便,開發模式介面右上角就有:

還能對比查看變更記錄:

4.2 前端設計組件一體化
現在大家搞組件化,基本都是設計一套、前端一套,二者之間溝通效率低。Figma的開發模式有希望打破這一局面。
因為它可以列出設計師的樣式和組件列表:

這樣開發就能比較容易地了解設計所用的組件和標準色。
4.3 開發外掛
Figma本身有外掛,但主要是給設計師用的。現在開發模式也有自己的外掛區,全是面向前端的。

介紹完了,感覺怎麼樣?
如今,Figma的這些新功能,無論是字體管理、布局、變數還是開發模式,都顯示出它在快速進步,不僅追趕上了競爭對手,還在許多方面超越了 Axure 這個專注於 prototype 設計的工具。未來的Figma,將在設計和開發的各個方面,為使用者帶來更強大、更便利的體驗。
不妨親自試試看這些新功能,體驗一下Figma的變化吧!