Figma 2020/2021 新功能重點整理

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

Lin Simon
Lin Simon
Sep 18 · 8 min read
Image for post
Image for post

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

Image for post
Image for post
Image for post
Image for post
這次介紹的五個主要功能

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

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

那我們馬上開始吧!

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

Image for post
Image for post

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

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

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

Image for post
Image for post

2. 變量功能 | Variants

Image for post
Image for post

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

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

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

3. 可互動的元件 | Interactive Components

Image for post
Image for post

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

Image for post
Image for post
直接二話不說崩潰

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

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

4. 自動排版 | Auto Layout

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

Image for post
Image for post

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

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

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

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

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

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

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

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

Image for post
Image for post

小結

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

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

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

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

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

Image for post
Image for post

產品設計實戰 Figma 線上課程募資中!

如果你對 Figma 和產品設計有興趣,我目前正在籌備一門系統化的線上課程!歡迎點擊下方圖片到課程介紹頁面了解更多😃

Image for post
Image for post

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

Lin Simon

Written by

Lin Simon

UI/UX 產品設計 & Figma 線上課程募資中,了解更多: https://bit.ly/3hqNvct

AAPD — As A Product Designer

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

Lin Simon

Written by

Lin Simon

UI/UX 產品設計 & Figma 線上課程募資中,了解更多: https://bit.ly/3hqNvct

AAPD — As A Product Designer

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

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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