c。
過去,雖然Figma好用,但功能的缺失相當明顯:
- 做原型不如Axure專業
- 設計交付不如藍湖貼心
- 字體管理甚至沒有預覽功能
然而,現在Figma不僅解決了上述問題,還推出了許多創新功能!讓我們一起來看看這段宣傳片:
![Figma 宣傳片](https://i.imgur.com/D8i1WAN.jpeg)
00:45
接下來,詳細介紹一些新功能,從簡單的開始~
1. 視覺化字體列表
以前的Figma字體列表簡陋得像學生作業,只是一個從A到Z的字體名稱列表,既看不到預覽,也沒有把常用字體列出來。
![舊版字體列表](https://i.imgur.com/tGYGSvO.png)
現在終於有了預覽功能,而且還提供了多種分類查看:
![新版字體列表1](https://i.imgur.com/TlQUfOw.png)
![新版字體列表2](https://i.imgur.com/TmlA5WF.png)
如果能把中英文分開顯示就更好了,希望以後能實現。
2. 自動布局更接近前端
![自動布局](https://i.imgur.com/J5wbGpD.jpeg)
00:35
2.1 自動換行
自動布局很好用,但一直有一個問題——不能換行。因此,每次只能做一行,然後手動複製多行。
![動圖封面](https://i.imgur.com/wySNQ3Y.jpeg)
前端樣式可以自動換行,這次Figma終於加上了自動換行功能,這真是方便不少,還省了一級Frame。
![動圖封面](https://i.imgur.com/99at5hd.jpeg)
2.2 尺寸限制
再好的響應式頁面,也不可能下至0px上至∞px,基本都有尺寸限制。這個尺寸限制對前端來說,是非常簡單的一兩句程式碼,但大部分設計軟體都沒有這個功能。
![動圖封面](https://i.imgur.com/6F0JaGv.jpeg)
Figma這次終於加上了尺寸限制功能,這對強迫症來說是一大福音:
![動圖封面](https://i.imgur.com/LQbmjgJ.jpeg)
3. 變數(Variable)
重頭戲來了~
Axure的原型功能最厲害的地方就是變數。變數是一個可以和頁面上的展示或操作聯動的值。
Figma現在也可以用變數來做很多事。先看一下宣傳影片感受一下:
![Figma 宣傳影片](https://i.imgur.com/Ua0zJcw.jpeg)
00:46
接下來詳細解釋。
3.1 變數控制
例如這個數字控制項,點一下+就加一個數字,點一下-就減一個數字。
![動圖封面](https://i.imgur.com/RaKhKwv.jpeg)
有了變數后,設置一個名為itemCount的變數,+被點擊時給itemCount加1,-被點擊時給itemCount減1。這樣只需一個頁面就能完成數字的交互。
![動圖封面](https://i.imgur.com/81JnM6g.png)
變數有4種:數字、文本、顏色和布爾值(off/on二元選項)。變數可以用來做組件之間的聯動、音量調節、選項計數等,這幾乎沒有學習成本。
![動圖封面](https://i.imgur.com/it5xWlN.jpeg)
3.2 模式切換
前端能讓UI一鍵切換模式,例如深色模式、語言、尺寸等。利用變數,Figma也能實現這樣的切換:
![動圖封面](https://i.imgur.com/CEKPaxG.jpeg)
![動圖封面](https://i.imgur.com/kN0h8Vr.jpeg)
![動圖封面](https://i.imgur.com/Aoq2l8a.jpeg)
![動圖封面](https://i.imgur.com/f3ZdLkc.jpeg)
這一切的秘訣就是這張可以記錄多組數據的表格:
![數據表](https://i.imgur.com/S6n32Lv.png)
你可以創建多個這種表,Figma會將數據變成菜單,一鍵切換。
4. 開發模式(Dev Mode)
Figma對前端的野心不止於此,他們是真的想要將開發也納入目標人群。
![Figma 開發模式](https://i.imgur.com/zr4bXea.jpeg)
00:44
4.1 前端樣式
國內目前多用藍湖看尺寸、下載圖片,但性能較差。Figma的標注功能則清晰得多:
![Figma 標注](https://i.imgur.com/LJyarVN.png)
Figma開發模式對邊距樣式的展示,與瀏覽器自帶的開發工具非常相似,讓人倍感親切:
![開發工具](https://i.imgur.com/xO6yaej.png)
Figma本身有自動布局,因此布局樣式識別非常精準,未來可能會自動生成響應式頁面。
![動圖封面](https://i.imgur.com/qpFLeB6.png)
藍湖則無法識別布局,也沒有內外邊距、間距和尺寸限制:
![藍湖對比](https://i.imgur.com/ppc7Law.png)
Figma的圖片導出類型也很豐富:
![圖片導出](https://i.imgur.com/5dhh7rO.png)
查看方案更新時間也很方便,開發模式介面右上角就有:
![方案更新時間](https://i.imgur.com/FqkSvcR.png)
還能對比查看變更記錄:
![變更記錄](https://i.imgur.com/rDHMjYA.png)
4.2 前端設計組件一體化
現在大家搞組件化,基本都是設計一套、前端一套,二者之間溝通效率低。Figma的開發模式有希望打破這一局面。
因為它可以列出設計師的樣式和組件列表:
![設計組件列表](https://i.imgur.com/IBfMMQm.png)
這樣開發就能比較容易地了解設計所用的組件和標準色。
4.3 開發外掛
Figma本身有外掛,但主要是給設計師用的。現在開發模式也有自己的外掛區,全是面向前端的。
![開發外掛](https://i.imgur.com/aXRqfV8.png)
介紹完了,感覺怎麼樣?
如今,Figma的這些新功能,無論是字體管理、布局、變數還是開發模式,都顯示出它在快速進步,不僅追趕上了競爭對手,還在許多方面超越了 Axure 這個專注於 prototype 設計的工具。未來的Figma,將在設計和開發的各個方面,為使用者帶來更強大、更便利的體驗。
不妨親自試試看這些新功能,體驗一下Figma的變化吧!