騰訊高手出品！10個提高設計效率的Figma技巧

上期推薦了一波Figma插件，這期分享10個提高效率的實用技巧~

一、快捷鍵面板｜寶典大全

相信很多設計師一定看過一些快捷鍵操作，但是實際操作起來總是讓人摸不著頭腦。其實 Figma 提供了一個非常方便的功能，按"Ctrl + Shift + ?" 即可打開快捷鍵面板查看所有快捷鍵，有錦囊在手再也不用求助他人啦~

二、快速填充｜“嘭嘭嘭”地填充多張圖片

遇到多個占位符的情況，有多少小伙伴還在一張張重復填充內容-選擇圖片-瀏覽并選擇……在不使用插件的情況下，其實只要按下“Ctrl + Shift + K”選中多張圖片或動圖，就可以依次填充進去。

三、自動布局｜界面布局的魔法

想一下平常工作中遇到的高頻但低效的場景，例如“做頁面時刪除一張圖片則其它模塊都需要微調好麻煩啊”、“過方案想看不同間距的樣式但是一個個調整太浪費時間了”，用 Figma 的自動布局功能就可以解決這些問題，通過搭配使用等距排列、自適應變化等，你就可以完成一個調整細節就會自動影響整個界面的魔法。

1. 關于自動布局

使用鍵盤快捷鍵“Shift+A”即可為一個框架或選擇的對象添加自動布局，同時，在右側邊欄會新增一塊功能區域，你可以在里面控制自動布局框架的流動方式（選擇垂直方向或水平方向的布局）、快速調節對象之間的間距。值得一提的是，自動布局非常好用的一點就是可以“套娃”，嵌套自動布局框架可以組合玩出非常多的花樣，比如同個畫框內同時存在垂直和水平方向的布局方向等。

2. 響應式變化

固定大小（fixed content）顧名思義就是“敵變我不變”，不跟隨容器任何調整而變化，例如表單里面的頭像和 icon；但如果是人為“天降大手”去對元素本身進行調整的話，元素依然會變化。

適應內容 (hug contents) 用英文更好理解一些，去“擁抱”變化的內部，當內部是一個只能設計師調整尺寸(即固定大小)的容器，那么外部就會跟隨內部發生變化。常用于容器內部包含文本段落，那么整個容器都會跟隨文本變化而自適應容器大小。

填充容器 (fill container)，即“填滿”變化的容器，當容器是一個只能設計師操作尺寸(即固定大小)的容器，那么內部元素就會跟隨容器發生變化。

但值得注意的是，適應內容和填充容器只可選其一。例如表單長度根據昵稱長短變化后，就不能再讓表單長度去控制內部變化的適應，禁止套娃。

3. 絕對位置

很多設計師會遇到元素插入到在自動布局中，會按照自動布局關系自動進行排列，很難靈活調整位置，這時候你就可以絕對位置功能，使項目在自動布局中不占空間，自由定位。

4. 負間距

以前用 Auto Layout 的處理堆疊效果的內容非常復雜，在今年 Config 2022 功能更新后帶來了負間距的功能，通過拖拽間距參數為負數即可完成堆疊的效果，效率翻倍！

四、組件技巧｜組件庫“瘦身”

1. 變體

當設計師創建組件庫時，運用變體來管理組件的多種類型、尺寸、狀態等，優化設計系統的層級關系，那么組件庫就會極速瘦身，由原來各個形態的樣式變為一個。設計師在調用時也可以更加快速地使用變體組件靈活調整為自己所需要的組件，而無需去逐個查閱組件庫。

2. 布爾屬性

布爾屬性的作用在于夠從設計面板中切換組件內部圖層的可見性，設計師可以在著在組件中添加可切換可見性的元素，而無需對圖層進行修改。設置后，在設計面板上有用于該圖層的顯示或隱藏的開關。

3. 交換實例屬性

交換實例屬性的作用是使用后不再需要深入圖層面板，查找圖層來交換實例。例如設計師可以從設計面板的屬性中直接完成圖標替換。

五、交互原型｜實現界面可操作性

Figma 最值得稱贊的功能之一就是它的可交互原型，當所需頁面和交互邏輯都排列好后，就可以像連線游戲一樣，將頁面串聯起來，完成一個可上手操作的 app 啦！Figma 貼心地預置了常見操作觸點、運動曲線、運動時間等。有了這些，你就不需要再切換不同的設計軟件啦。下面給大家介紹原型動畫中的一些關鍵功能。

1. 觸發器/交互行為

觸發器用于定義原型從一個框架到另一個框架的交互方式。你可以使用原型選項卡中的 Trigger 下拉列表進行設置。

2. 智能動畫

利用 Figma 內的智能動畫，設計師可以輕松地做出豐富的動畫效果，例如開關的切換、tab 的平移、選擇器的滑動等。簡單來說，設計師只需要制作開始幀和結束幀的設計稿，利用觸發器將兩者串聯后，智能動畫會幫助設計師補齊過程中發生的動畫，你也可以在這個過程中選擇合適的動畫曲線讓你的動畫更具表現力。

3. 彈性動畫

Config 2022 的更新中，Figma 為設計師專門提供了在原型轉換中的彈性動畫。自帶物理屬性的彈性動畫，讓你更容易設計出更流暢、更自然的界面原型。

六、Figma Tokens｜設計變量管理者

推薦一款叫做“Figma Tokens”的插件，其強大之處在于可以通過可視化以及編碼的方式創建并管理各種 tokens，且可以在 Token 之間做一些引用關系或是算法，讓各個 Token 串聯起來，甚至可以一鍵導出 json 給你的開發同事。下面來具體安利幾個非常厲害的小技巧。

1. 別名

Figma Tokens 里一個非常好用的功能，你可以用這個功能對使用不同 token 名稱，但卻用了同一個色值的 token 做引用關系。這樣，當你改動你的原始色板的時候，其他被引用的 token 都會隨之發生變化。

2. 使用數學

在構建類型比例或間距比例時需要考慮到比例可能是有關聯性的。在 Figma tokens 中，你可以引用已有的一個 token，并使用它進行一些數學運算。

例如，你希望 borderWith.medium 引用 borderWith.small，但將其值乘以 2。那么，你可以將以下內容寫為 token 的值: ({borderWith.small} * 2)。

3. 創建漸變 token

Figma 本身沒有辦法做到制作漸變色 token 時引用現有的純色 token。但是在這個插件當中，設計師可以自由度更高的使用多個已有的純色 token 作為被引用者。

七、小組件｜Figma 工作流拓展

前陣子 Figma 更新了一個小功能，FigmaWidgets，說是小功能，但其實一點也不小。利用小組件，你可以在 Figma 內做到很多之前意想不到的事情，比如上傳 pdf，添加錄音，計時器等等，而且是屬于開放式的，所有人都可以參與到小組件的創作并上傳至社區，想必不遠的未來，這一功能一定會大放異彩。

比如近期很火的一直跟隨在畫面中心的像素小人，或許你可以用它來搭建一個像素風的小游戲。

使用小組件進行表態和投票。

在 figma 內上傳 pdf 等等等等。

八、歷史版本｜創作時間軸回溯

不知道你是否也遇到過這樣的問題，當你發現誤刪了某些元素，一直按“Ctrl + Z”也無法回退，其實你不必重新再做一遍這個元素，你只需要打開歷史版本，找到存在該元素的版本，從該版本中復制這個元素回來就 OK 啦。

九、FigJam｜靈感爆發集合地

ios16 上新了共同編輯備忘錄，而 Figma 早早就提供了一個豐富的協作編輯功能：FigJam。

使用 FigJam 可以和你需要和你溝通的產品同學快速進行線上溝通，可以使用便利貼快捷記錄下你們的靈感，并用一個大大的貼紙表示你對他的想法的贊同，更有非常多豐富的互動玩法，快快去發掘吧。

十、Spotlight｜聚焦所有人視線

問：設計師在闡述需求的時候，如何聚攏所有人的目光？秘訣就在你頭像的下方的“Spotlight”按鈕，點擊后，可聚焦所有處于當前界面用戶的視線跟隨你移動。

你在設計中是否也遇到過一些提效妙招呢？歡迎在評論區分享給我們，大家一起成為高效的設計師吧！

歡迎關注作者微信公眾號：「騰訊設計族」