Should Read Later #8 - Figma 更新好魷力!
期待已久的更新終於邁入 beta 了!
看標題應該有在打遊戲的可能都知道為何上週停刊了🤪
在週更以及斯普拉遁 3 的第一次祭典之間,我無法抗拒遊戲的誘惑整個週末都在大玩特玩,但好險選的道具組贏了(撒花)。作為補償,這週來聊聊上週就已經發布的 Figma Component property 更新 🎉
Figma Component Property
在發布當天(通常都是午夜、凌晨)馬上試玩了一下後,就決定安排跟公司所有 UI 的 Playground 會議。跟所有同事試用過後的心得都是「真的感恩讚嘆 Figma!」
只不過現在還處於 Beta 的階段,我們還不敢馬上導入公司的 Component Kit 中,只怕一個不小心所有元件又要重做(身為維護 Design System 的設計師都懂的痛)。至於今天,就來一步步地教大家怎麼開啟這功能、以及怎麼用!
感謝所有在我們團隊裡面的設計師朋朋們願意花時間聽我 Demo 一些還沒打算實際導入的功能 🎉
啟用功能
隨便挑選一個 Component,點選右側邊欄中的設定值,開啟「Try new authoring features」就可以囉,可以看到目前還是處於 Beta 階段。
三大更新
Component Property
在這次更新中,除了在 Properties 的列表中就能夠直接新增過去已經有的 Variant、Boolean、Instance Swap、Text 之外,還新增了一個 Nested instances。
從 Sketch 搬家過來到 Figma 的各位,在製作 Component 時有時候應該還是會保有製作巢狀 Component 的習慣,不論是 Navigation Bar 或者 Modal 可能都會出現。而每次要更改 Modal 內的按鈕樣式總是得往下精準地找到那個圖層真的覺得好累好麻煩。於是 Figma 出來解救眾生了,在這波更新下,元件的對設計師的易用性真的是大幅上升!
以常見的 navigation bar 為例,左側、右側可能都會有文字按鈕、單顆 icon、甚至是複數顆 icon 出現。在過往只有 Varient 時,可能需要透過排列組合羅列出每個可能,在使用及挑選上才能夠在元件的第一層進行置換。以我們公司為例,可能就有 5x3 種可能性 🤦
這時只要將 Nested instances 設為可見,並勾選想要的子階層元件(在這邊為左側 action 以及右側 action)就好了!
之後在使用上,從元件庫叫出的 navigation bar 便能夠看見左側 action、右側 action 兩個子元件出現在 Components Property 的設定介面之中。
Preferred Values
除了上面這個最強大個更新之外,Figma 也提供了一些提升易用性的小更新,而 Preferred Values 就是一個。以 Navigation Bar 來舉例,通常右上角的 icon 在單顆時,很有可能會是出現關閉、介紹、分享等一些常作為整個頁面的輔助動作。
但在過去就算有 Instance Swap 的功能,我們可能還是得在上百顆 icon 中尋覓對的那一顆,而 Preferred Values 可以有效的解決這個問題。
在 Instance swap 的下方,多了一個 Preferred values 的選項,點選 + 號後便可以新增這個變數中最常用的一些 icon(值)。
當設置完成並使用 navigation bar 這個元件時,且右側是單顆 icon 的屬性時,如果想要切換 icon 就會看到最常使用的那三個可以快速地切換。
Simplified Instances
如果你在團隊中是在建立、維護並使用元件庫的設計師應該能夠理解,為了讓元件適應各種尺寸、符合各種長度的文本等等,你會使用一大堆的 auto layout 去製作元件。但上述的那些 auto layout 對於團隊裡面的其他設計師可能不是那麼地重要,他們只想要簡單地使用所有元件就好。而 Simplified Instances 便是為此存在,一旦 Simplified Instances 被啟用後,所有在元件內沒有被賦予屬性或變數的圖層都會隱藏起來(包含了填色、效果、layout 等等)。
雖然我覺得這功能我可能暫時還用不上就是了😂
額外閱讀
在 webflow 任職的 Joey Banks 在功能發布後的 30 分鐘內就寄送了他最新一期的電子報(神速!)裡面也有他的手把手教學跟一些小眉角,也歡迎大家去看看 👀
Baseline #10 — Exposing Nested Instances, Preferred Values, & more. — joeyabanks.substack.com The update we’ve been waiting for is finally here and in beta!
最後祝大家在使用新功能並導入 components library 的時候一切順利。(雖然比較常發上下面這狀況就是了😭
👋
寫完要回去蠻頹鎮打工了。存著魷空看,元件不會壞。
我是 Should,我們下週見。
Twitter: @shouldwang