Figma 2020/2021 新功能重點整理

Instance Swap, Variants, Interactive Components, Auto Layout, Inspect Tab

Figma 的創辦人 Dylan Field 在今年 2020 的 Config Europe 論壇開場 Keynote 中分享了幾個令人為之振奮的新功能,目的是為了讓設計和工程之間的溝通協作更順暢,讓設計的過程除了保有創意、同時也讓設計的架構能夠更縝密、更接近工程實作端。

這次介紹的五個主要功能

這些功能將會陸續在 2020 的 11月和 2021 的 1 月上線跟大家見面,我是自己相當期待,因此馬上寫下來筆記跟大家分享有哪些功能將推出!

本篇文章中的圖片範例都是從 Figma 官方發布的影片中截圖而來,如果想看完整的影片可以到他們的 Youtube 頻道觀賞哦!

那我們馬上開始吧!

1. 新版元件替換功能 | Instance Swap

Figma 很棒的功能之一就是可以在元件中互換裡面的子元件,這讓設計上變得非常彈性且好管理,但一直以來有的一個問題就是當你的元件一多、變複雜之後,在做「替換元件」這件事情變得相對麻煩,你需要不斷在各種選單中來回尋找適合的元件,而且光看名字有時候還會看到眼花。

左邊為舊版 | 中間/右邊為新版介面

所以新版的 Instance Swap 就是要來解決這個問題, Figma 重新設計了整個 Instance Swap 面板,讓不同層級的元件位置導航更明確,也增加了搜尋功能和圖片預覽,讓整體的體驗變得夠流暢!最重要的是,當你在主元件中替換過內部元件之後,如果想要改變主元件的狀態,被替換的內部元件還是會保留,這點真的是非常讚。

2. 變量功能 | Variants

在程式的的世界裡,元件中包含了不同的變量,以按鈕來說裡面可能可包含各種 Variant ,像是顏色、類型、有/無 icon 等等,但在目前 Figma 的設計中,你無法單獨在一個主元件中控制這些不同變量,你需要分別創造很多不同狀態的元件來達到一樣的效果,這會讓你的元件面板看起來非常複雜。

目前元件狀態製作方式
使用 Variant 的作法

所以這次 Figma 發表了這個新的變量功能,現在你只需要把所有狀態和類型的元件組合成一個核心元件,然後使用相同的命名原則(Naming Convention )把所有的變量都儲存在裡面,然後透過元件面板上的控制器來選擇不同的變量,就可以達到不同狀態、類型的元件了,這樣也更接近工程端在實作元件的邏輯,真的是太神啦!

3. 可互動的元件 | Interactive Components

以往我們在製作原型的時候,如果想要達到元件可以切換狀態的效果,例如開關(Switch),我們需要製作兩個完整頁面包含不同狀態的開關才能辦到,當一個頁面如果有好幾個開關時更是崩潰,就要考慮到各種不同可能的互動狀況,需要製作的連結會非常之多。

直接二話不說崩潰

所以這次 Figma 推出的 Interactive Components 功能,可以在可互動的層級下縮到元件層級,你不需要做到整個頁面的互動,也可以在單獨頁面中針對元件做不同狀態的互動設定,非常方便!

之後可以針對單一元件設定互動效果

4. 自動排版 | Auto Layout

這大概是我最興奮的部分了,Auto Layout 自推出以來一直是個非常好用的功能,可以幫助我們的實現更彈性、更有組織的設計,但在製作一些複雜的元件或頁面設計時,它還是有些一缺點無法滿足我們的使用情境。

這次 Figma 針對 Auto Layout 做了一些優化,包含有了新的面板設計、可以讓元件的對於外層容器(Container)的響應更彈性、可以針對 Auto layout 容器中的元件做等均分配等等。總之,就是把這原本強大的功能再升級了一番!

Auto Layout 也可以做出這種超彈性的設計稿了

5. 檢查(交付)面板 | Inspect

最後一點就是跟工程協作最有關係的更新了,當工程師來到 Figma 設計檔案的時候,由於他們通常不會有編輯權限,所以很多設計上的命名細節或共享樣式(shared-style)名稱可能是看不到的, 只能看到當前的顏色代碼,甚至還不能複製內容文字。

右邊可以看到新舊 inspect 面板的對比

所以這次 Figma 對於 Inspect 面板也做了重新設計,讓整體看起來更直覺、可以取得的資訊和功能也更完善,讓設計師跟工程師的協作可以更順暢。

功能上線時間:現在、2020年11月、2021年1月

以上提到的功能,有些已經上線或是都會陸續在今年或明年正式推出,所以設計師們可以期待許多有趣的改變,讓我們設計效率更上一層樓,花更少時間在管理檔案,可以更專注在解決重要的問題上。

小結

Figma 更新的速度真的是非常的令人驚艷,尤其是這次的更新我真的是覺得拳拳到肉,沒有一個是多餘的功能,感覺 Figma 團隊真的是下了不少功夫在理解使用者的需求,並合理的排程在新功能的推出上,從他們發展的方向來看,一直是想解決設計和工程協作的問題,讓彼此溝通的語言更接近,這也是我自己很關注的方向,所以也非常期待 Figma 之後的發展!

感謝你/妳花時間讀這篇文章,如果你覺得這篇文章寫得不錯、有幫助到你,希望你能給我一點「拍手鼓勵」,也歡迎在下方留言讓我知道你的想法,我會多加點油寫出更多內容的!

1. 拍「10下」:表示你喜歡這篇文章,謝謝你!
2. 拍「20下」:表示你覺得這篇文章很棒、願意分享給朋友!
3. 拍「30–40下」:希望未來我能寫更多這類主題的文章!
4. 拍好拍滿「50下」:給我最大的鼓勵,這將會支持我繼續寫作,並持續分享我的經驗!

拍手小秘訣: 只要將滑鼠(或手指)持續按著不放手掌的icon,就能夠連續拍手囉,試試看吧!

我是Simon,一名UX/產品設計師,目前正在東京討生活 🇯🇵。
我喜歡分享、試著從小事開始創造價值,如果有合作&交流機會或任何想聊的事情,都不用客氣透過我的 E-mail 或直接用Facebook 聯絡我,期待與你的相遇 :)

工商時間 | 一起學習產品設計吧!

產品(UI/UX)設計實戰 Figma 線上課程

如果你對 Figma 這個設計工具或是 UI/UX 設計有興趣,也許這門產品設計實戰的線上課程會很適合你/妳!歡迎點擊下方圖片到課程介紹頁面了解更多細節😃

https://bit.ly/33Glid5

點擊上方圖片,前往課程介紹網站了解更多 :)

--

--

AAPD 專注於分享數位產品設計的相關資訊,並且致力在平台上創造更多的交流與互動,我們關注UI設計、UX設計、設計師的個人成長、設計趨勢與產業動態等,希望透過這些知識的傳遞,能夠降低每位設計師成長的過程中所遇到的阻礙。歡迎來信投稿:aapdgo@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store