Figma 2020/2021 新功能重點整理

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

Dylan Field 在 Config Europe 演講，投影片寫著 creativity 與 structure

Config 投影片：結構、動態、可重用性，加上迭代與探索

這次介紹的五個主要功能

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

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

那我們馬上開始吧！

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

Instance Swap 新功能介紹，附搜尋與圖示清單的替換面板

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

舊版替換元件選單，大量圖示名稱層層展開難以尋找

新版 Swap Instance 面板，輸入 follow 搜尋並預覽圖示

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

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

替換按鈕內的圖示後切換按鈕狀態，覆寫內容仍被保留

2. 變量功能 | Variants

Variants 功能介紹，按鈕元件可切換類型、顏色、尺寸與狀態

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

目前的做法：Spotify 按鈕的每種狀態都是獨立元件

目前元件狀態製作方式

48 種按鈕組合整合成一個 Variants 元件組

Variants 屬性面板，列出類型、顏色、尺寸、Icon 與狀態選項

使用 Variant 的作法

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

3. 可互動的元件 | Interactive Components

Interactive Components 介紹，按鈕在滑鼠懸停時切換狀態

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

直接二話不說崩潰

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

在 Figma 原型模式中為開關元件設定各狀態之間的互動

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

4. 自動排版 | Auto Layout

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

新版 Auto Layout 面板，可設定間距、內距與對齊方式

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

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

Auto Layout 的 Resizing 設定，子元件可設為 Fill container

在 Auto Layout 面板中個別調整左右內距

Auto Layout 分配方式從 Packed 切換為 Space Between

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

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

Inspect Tab 介紹，可直接複製尺寸、文字內容和字型樣式

舊版 Code 面板，只列出按鈕的 CSS 屬性

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

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

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

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

各功能上線時程：即日起、2020 年 11 月、2021 年 1 月

小結

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