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

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

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

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

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

三、自動(dòng)布局｜界面布局的魔法

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

1. 關(guān)于自動(dòng)布局

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

2. 響應(yīng)式變化

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

適應(yīng)內(nèi)容 (hug contents) 用英文更好理解一些，去“擁抱”變化的內(nèi)部，當(dāng)內(nèi)部是一個(gè)只能設(shè)計(jì)師調(diào)整尺寸(即固定大小)的容器，那么外部就會(huì)跟隨內(nèi)部發(fā)生變化。常用于容器內(nèi)部包含文本段落，那么整個(gè)容器都會(huì)跟隨文本變化而自適應(yīng)容器大小。

填充容器 (fill container)，即“填滿”變化的容器，當(dāng)容器是一個(gè)只能設(shè)計(jì)師操作尺寸(即固定大小)的容器，那么內(nèi)部元素就會(huì)跟隨容器發(fā)生變化。

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

3. 絕對(duì)位置

很多設(shè)計(jì)師會(huì)遇到元素插入到在自動(dòng)布局中，會(huì)按照自動(dòng)布局關(guān)系自動(dòng)進(jìn)行排列，很難靈活調(diào)整位置，這時(shí)候你就可以絕對(duì)位置功能，使項(xiàng)目在自動(dòng)布局中不占空間，自由定位。

4. 負(fù)間距

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

四、組件技巧｜組件庫(kù)“瘦身”

1. 變體

當(dāng)設(shè)計(jì)師創(chuàng)建組件庫(kù)時(shí)，運(yùn)用變體來(lái)管理組件的多種類型、尺寸、狀態(tài)等，優(yōu)化設(shè)計(jì)系統(tǒng)的層級(jí)關(guān)系，那么組件庫(kù)就會(huì)極速瘦身，由原來(lái)各個(gè)形態(tài)的樣式變?yōu)橐粋€(gè)。設(shè)計(jì)師在調(diào)用時(shí)也可以更加快速地使用變體組件靈活調(diào)整為自己所需要的組件，而無(wú)需去逐個(gè)查閱組件庫(kù)。

2. 布爾屬性

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

3. 交換實(shí)例屬性

交換實(shí)例屬性的作用是使用后不再需要深入圖層面板，查找圖層來(lái)交換實(shí)例。例如設(shè)計(jì)師可以從設(shè)計(jì)面板的屬性中直接完成圖標(biāo)替換。

五、交互原型｜實(shí)現(xiàn)界面可操作性

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

1. 觸發(fā)器/交互行為

觸發(fā)器用于定義原型從一個(gè)框架到另一個(gè)框架的交互方式。你可以使用原型選項(xiàng)卡中的 Trigger 下拉列表進(jìn)行設(shè)置。

2. 智能動(dòng)畫

利用 Figma 內(nèi)的智能動(dòng)畫，設(shè)計(jì)師可以輕松地做出豐富的動(dòng)畫效果，例如開關(guān)的切換、tab 的平移、選擇器的滑動(dòng)等。簡(jiǎn)單來(lái)說(shuō)，設(shè)計(jì)師只需要制作開始幀和結(jié)束幀的設(shè)計(jì)稿，利用觸發(fā)器將兩者串聯(lián)后，智能動(dòng)畫會(huì)幫助設(shè)計(jì)師補(bǔ)齊過(guò)程中發(fā)生的動(dòng)畫，你也可以在這個(gè)過(guò)程中選擇合適的動(dòng)畫曲線讓你的動(dòng)畫更具表現(xiàn)力。

3. 彈性動(dòng)畫

Config 2022 的更新中，F(xiàn)igma 為設(shè)計(jì)師專門提供了在原型轉(zhuǎn)換中的彈性動(dòng)畫。自帶物理屬性的彈性動(dòng)畫，讓你更容易設(shè)計(jì)出更流暢、更自然的界面原型。

六、Figma Tokens｜設(shè)計(jì)變量管理者

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

1. 別名

Figma Tokens 里一個(gè)非常好用的功能，你可以用這個(gè)功能對(duì)使用不同 token 名稱，但卻用了同一個(gè)色值的 token 做引用關(guān)系。這樣，當(dāng)你改動(dòng)你的原始色板的時(shí)候，其他被引用的 token 都會(huì)隨之發(fā)生變化。

2. 使用數(shù)學(xué)

在構(gòu)建類型比例或間距比例時(shí)需要考慮到比例可能是有關(guān)聯(lián)性的。在 Figma tokens 中，你可以引用已有的一個(gè) token，并使用它進(jìn)行一些數(shù)學(xué)運(yùn)算。

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

3. 創(chuàng)建漸變 token

Figma 本身沒有辦法做到制作漸變色 token 時(shí)引用現(xiàn)有的純色 token。但是在這個(gè)插件當(dāng)中，設(shè)計(jì)師可以自由度更高的使用多個(gè)已有的純色 token 作為被引用者。

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

前陣子 Figma 更新了一個(gè)小功能，F(xiàn)igmaWidgets，說(shuō)是小功能，但其實(shí)一點(diǎn)也不小。利用小組件，你可以在 Figma 內(nèi)做到很多之前意想不到的事情，比如上傳 pdf，添加錄音，計(jì)時(shí)器等等，而且是屬于開放式的，所有人都可以參與到小組件的創(chuàng)作并上傳至社區(qū)，想必不遠(yuǎn)的未來(lái)，這一功能一定會(huì)大放異彩。

比如近期很火的一直跟隨在畫面中心的像素小人，或許你可以用它來(lái)搭建一個(gè)像素風(fēng)的小游戲。

使用小組件進(jìn)行表態(tài)和投票。

在 figma 內(nèi)上傳 pdf 等等等等。

八、歷史版本｜創(chuàng)作時(shí)間軸回溯

不知道你是否也遇到過(guò)這樣的問(wèn)題，當(dāng)你發(fā)現(xiàn)誤刪了某些元素，一直按“Ctrl + Z”也無(wú)法回退，其實(shí)你不必重新再做一遍這個(gè)元素，你只需要打開歷史版本，找到存在該元素的版本，從該版本中復(fù)制這個(gè)元素回來(lái)就 OK 啦。

九、FigJam｜靈感爆發(fā)集合地

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

使用 FigJam 可以和你需要和你溝通的產(chǎn)品同學(xué)快速進(jìn)行線上溝通，可以使用便利貼快捷記錄下你們的靈感，并用一個(gè)大大的貼紙表示你對(duì)他的想法的贊同，更有非常多豐富的互動(dòng)玩法，快快去發(fā)掘吧。

十、Spotlight｜聚焦所有人視線

問(wèn)：設(shè)計(jì)師在闡述需求的時(shí)候，如何聚攏所有人的目光？秘訣就在你頭像的下方的“Spotlight”按鈕，點(diǎn)擊后，可聚焦所有處于當(dāng)前界面用戶的視線跟隨你移動(dòng)。

你在設(shè)計(jì)中是否也遇到過(guò)一些提效妙招呢？歡迎在評(píng)論區(qū)分享給我們，大家一起成為高效的設(shè)計(jì)師吧！

歡迎關(guān)注作者微信公眾號(hào)：「騰訊設(shè)計(jì)族」