第三次白嫖騰訊內部Figma技巧？我格局打開了！！！

Figma作為常用的設計工具，QQ團隊的設計師們整理了一批超實用的提效祕籍，希望能助力大家一頓快捷操作猛如虎，早早打卡下班不辛苦。當然除了提升效率， 必要的外掛 也能幫助我們 提升效率 、 激發靈感 ，今天給大家打包了20+Figma外掛，限前100位，文末領取。

獲取方式： 請檢視文章底部

:point_up_2:文末領取乾貨:point_up_2:

 01.    快捷鍵面板 | 寶典大全 

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

 02.    快速填充 | “嘭嘭嘭”地填充多張圖片 

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

 03.    自動佈局 | 介面佈局的魔法 

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

▍ 關於自動佈局

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

▍ 響應式變化

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

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

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

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

▍ 絕對位置

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

▍ 負間距

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

 04.    元件技巧 | 介面佈局的魔法 

▍ 變體

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

▍ 布林屬性

布林屬性的作用在於夠從設計面板中切換元件內部圖層的可見性，設計師可以在著在元件中新增可切換可見性的元素，而無需對圖層進行修改。 設定後，在設計面板上有用於該圖層的顯示或隱藏的開關。

▍ 交換例項屬性

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

 05.    互動原型 | 實現介面可操作性 

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

▍ 觸發器/互動行為

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

▍ 智慧動畫

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

▍ 彈性動畫

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

 06.    Figma Tokens | 設計變數管理者 

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

▍ 別名

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

▍ 使用數學

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

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

▍ 建立漸變token

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

 07.    小元件 | Figma工作流拓展 

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

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

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

在figma內上傳pdf等等等等。

 08.    歷史版本 | 創作時間軸回溯 

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

 09.    FigJam | 靈感爆發集合地 

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

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

 10.    Spotlight | 聚集所有人視線 

問： 設計師在闡述需求的時候，如何聚攏所有人的目光？ 祕訣就在你頭像的下方的“Spotlight”按鈕，點選後，可聚焦所有處於當前介面使用者的視線跟隨你移動。

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

 11.    最後 

學會 提升效率 的Figma技巧， 也要 適當利用好外掛， 這樣才能事半功倍。 開頭分享的外掛 全部打包好了給大家， 需要的同學可以新增叮噹貓回覆“ Figma ”領取， 已有叮噹貓的無需重複新增。

長按掃碼新增叮噹貓回覆： Figma

（分享來源於網路，僅供學習交流使用）