Figma Multi-edit 批次修改讓變更與管理元件更具彈性

在使用編輯器像 VS Code 時,最喜歡的部分就是可以使用超級選取,太開心 Figma 團隊讓這種操作和體驗重現在設計軟體上。本篇介紹必備用法,你也可以搭配觀看 Figma 官方英文介紹,或是打開 Figma 直接操作。

hugh
新加坡商鈦坦科技

--

VS Code Multiple selections (multi-cursor)
Figma Multi-edit

手指頭 👉🏻 是必學操作,星星 🌟 是額外補充知識點。

本文會分享的內容:

👉🏻 文字 Multi-edit
👉🏻 Across Frame Multi-edit 基礎
🌟 對應物件的匹配依據
👉🏻 跨 Frame 物件對齊
👉🏻 Multi-edit 可操作的項目
👉🏻 Multi-edit variants
👉🏻 Multi-edit create components
🌟 實際運用的心得
🌟 補充:功能背後的故事

👉🏻 文字的 Multi-edit

圈選多個文字,直接按 “Enter” ,並會以滑鼠指向作為母體

這是最簡單的應用,也是唯一幾個可以直接使用,不需要在跨 Frame 條件下(Across Frame)操作。

👉🏻 Across Frame Multi-edit 基礎

在不同的 Frame 裡,相同名稱的 object 可以按下 Select Matching Layer (快捷鍵 ⌥⌘A / Ctrl+Alt+A)來全選。

備註:如果 Frame 裡有多個同名稱的物件,將會以創建順序作為選取的依據。

🌟 對應物件的匹配依據

需要符合三個條件:

  • 對應的圖層名稱
  • 對應的父層
  • 對應的圖層層次結構
更詳細的說明可以看 Help Center : Identify matching objects

👉🏻 跨 Frame 物件對齊 (Aligning objects across frames)

選取跨 Frame 的物件提供了兩種對齊方式:

  • 對齊物件群體

在選中物件們時,直接點擊對齊工具選項。

  • 對齊各自 Frame

在選中物件們時,先按下 shift ,對齊工具區會產生變化。

👉🏻 Multi-edit 可操作的項目

  • 對齊
  • 變形
  • Auto layout

👉🏻 Multi-edit variants

在 variants 的狀況下則是按下 “Q” 會進入 Multi-edit 的狀態。
原本的 Multi-edit variants 會呈現藍底色狀態,此時編輯任一個 varaint 都會跟著改動。

👉🏻 Multi-edit create components

當你有一群同樣的內容但樣式還沒統一的元件,想統整成同一個 component 時,Multi-edit create components 可以節省你更多時間 。
選取要作為 component 的元件。

🌟 實際運用的心得

Figma 的新功能,Multi Edit,對於設計流程的改進不可或缺。在過去,維持元件的一致性可能會讓設計的彈性些微降低甚至增加設計的時間成本,特別是當面對不斷變化的需求時。一派設計師追求的是元件系統的完整性,這使得迭代和變更變得困難。

然而,Multi Edit 使得這一過程變得流暢。這項新功能允許我們在不同版本的頁面上嘗試不同的 UI 配置,而不損害整體的一致性。當設計方向確定後,我們可以利用 Multi Edit 的批量處理功能,迅速且一致地調整每個元件。

保持了元件整理的一致性且能輕鬆探索不同的設計可能性。即使面對需求調整和不確定性,我們也能保持設計稿的一致性並迅速適應變化,Figma 這項功能再次增強了設計做稿的靈活性與控制力。

🌟 補充:功能背後的故事

Behind the feature: The multiple lives of multi-edit

這次新功能釋出,Figma 團隊也一同分享這功能背後的故事,可以看全文外,節錄部分啟發的故事段落出來。

Muti Edit 概念第一次醞釀在 Figma 團隊是在推出 variant 功能的時候。 variant 功能讓設計師可以因屬性變化將 component做出變體,但隨之設計師的工作變成無天無地的持續製作變體並維護 (那時候也會持續的煩惱說嚮往設計管理真的很好,但設計師的工作真該變成就是 1px 的去維護這些變體嗎)。

光一個 Button 就有這麼多變體要處理,設計工作將會變得乏味

此時想法誕生了:What if you could enter a mode where all of your edits would magically happen to all the variants at once?
如果你可以進入一種模式,在這種模式下,你對所有變體的編輯可以同時自動發生。

聽起來這個想法很棒!然後這個當初在 2019 的 What if 火花誕生迎來的是長時間的冬眠。
起初將多重編輯視為新模式,允許使用者一次編輯許多事物 — — 有點像在進階文本編輯器中多重選擇文本的方式。然後如何選擇想要同時編輯的個體反而成了障礙。此刻團隊改為思考:“選擇機制應該如何運作?”

功能的運作原理尚未誕生同時又迎來軟體開發的延遲,隨之醞釀 Multi Edit 的想法也隨之延遲。

當新功能的想法冒出卻又不立即著手時,它便會漸漸失去眾人的動力甚至消失。然而 Multi Edit 的想法在 Figma團隊卻出奇地持續受到歡迎。

這個想法能夠受歡迎並非偶然,目前有讓設計組件維持秩序的功能 variant ,但也因此更明顯的感受到目前缺乏一個彈性的方式整理設計稿。

而時間來到 2023 Figma 團隊有機會將 Multi Edit 從冬眠中喚醒並推向聚光燈下⋯⋯

多個物件編輯物件不是使用者想要的效果已存在多年

在探索熟悉的方式以及新的嘗試中, 選擇了一個中間的選項:在不同 frame 下選擇的每組物體各自顯示其邊界框。

各自對應其 frame 的邊界框,讓操作更直覺

接下來的故事就是如何一步一步定義 Multi Edit功能上和哲學上的核心選擇機制,每個構思過程都相當精彩,不妨點進去細看: Behind the feature: The multiple lives of multi-edit

感謝看到這裡的你 !

💼 如果你對 Titansoft 團隊有興趣
我們正在招募優秀的設計師/工程師
歡迎點我查看職缺

對於本文這次介紹的 Figma 新功能有任何回饋、想法,歡迎在底下留言,我會很開心看見大家的討論!

--

--