設(shè)計提效-Figma技巧篇
點擊 ▲ 三分設(shè) 關(guān)注，和 10 萬設(shè)計師一起成長
三分設(shè) x 騰訊ISUX
?
一、快捷鍵面板｜寶典大全
相信很多設(shè)計師一定看過一些快捷鍵操作，但是實際操作起來總是讓人摸不著頭腦。其實Figma提供了一個非常方便的功能，按"Ctrl + Shift + ?" 即可打開快捷鍵面板查看所有快捷鍵，有錦囊在手再也不用求助他人啦~
二、快速填充｜“嘭嘭嘭”地填充多張圖片
遇到多個占位符的情況，有多少小伙伴還在一張張重復(fù)填充內(nèi)容-選擇圖片-瀏覽并選擇……在不使用插件的情況下，其實只要按下“Ctrl + Shift + K”選中多張圖片或動圖，就可以依次填充進(jìn)去。
三、?自動布局｜界面布局的魔法
?想一下平常工作中遇到的高頻但低效的場景，例如“做頁面時刪除一張圖片則其它模塊都需要微調(diào)好麻煩啊”、“過方案想看不同間距的樣式但是一個個調(diào)整太浪費時間了”，用Figma的自動布局功能就可以解決這些問題，通過搭配使用等距排列、自適應(yīng)變化等，你就可以完成一個調(diào)整細(xì)節(jié)就會自動影響整個界面的魔法。
關(guān)于自動布局
使用鍵盤快捷鍵“Shift+A”即可為一個框架或選擇的對象添加自動布局，同時，在右側(cè)邊欄會新增一塊功能區(qū)域，你可以在里面控制自動布局框架的流動方式（選擇垂直方向或水平方向的布局）、快速調(diào)節(jié)對象之間的間距。值得一提的是，自動布局非常好用的一點就是可以“套娃”，嵌套自動布局框架可以組合玩出非常多的花樣，比如同個畫框內(nèi)同時存在垂直和水平方向的布局方向等。
響應(yīng)式變化
固定大?。╢ixed content）顧名思義就是“敵變我不變”，不跟隨容器任何調(diào)整而變化，例如表單里面的頭像和icon；但如果是人為“天降大手”去對元素本身進(jìn)行調(diào)整的話，元素依然會變化。
絕對位置
很多設(shè)計師會遇到元素插入到在自動布局中，會按照自動布局關(guān)系自動進(jìn)行排列，很難靈活調(diào)整位置，這時候你就可以絕對位置功能，使項目在自動布局中不占空間，自由定位。
負(fù)間距
以前用Auto Layout的處理堆疊效果的內(nèi)容非常復(fù)雜，在今年Config 2022功能更新后帶來了負(fù)間距的功能，通過拖拽間距參數(shù)為負(fù)數(shù)即可完成堆疊的效果，效率翻倍！
四、組件技巧｜組件庫“瘦身”
變體
當(dāng)設(shè)計師創(chuàng)建組件庫時，運用變體來管理組件的多種類型、尺寸、狀態(tài)等，優(yōu)化設(shè)計系統(tǒng)的層級關(guān)系，那么組件庫就會極速瘦身，由原來各個形態(tài)的樣式變?yōu)橐粋€。設(shè)計師在調(diào)用時也可以更加快速地使用變體組件靈活調(diào)整為自己所需要的組件，而無需去逐個查閱組件庫。
布爾屬性
布爾屬性的作用在于夠從設(shè)計面板中切換組件內(nèi)部圖層的可見性，設(shè)計師可以在著在組件中添加可切換可見性的元素，而無需對圖層進(jìn)行修改。設(shè)置后，在設(shè)計面板上有用于該圖層的顯示或隱藏的開關(guān)。
交換實例屬性
交換實例屬性的作用是使用后不再需要深入圖層面板，查找圖層來交換實例。例如設(shè)計師可以從設(shè)計面板的屬性中直接完成圖標(biāo)替換。
五、交互原型｜實現(xiàn)界面可操作性
Figma最值得稱贊的功能之一就是它的可交互原型，當(dāng)所需頁面和交互邏輯都排列好后，就可以像連線游戲一樣，將頁面串聯(lián)起來，完成一個可上手操作的app啦！Figma貼心地預(yù)置了常見操作觸點、運動曲線、運動時間等。有了這些，你就不需要再切換不同的設(shè)計軟件啦。下面給大家介紹原型動畫中的一些關(guān)鍵功能。
觸發(fā)器/交互行為
觸發(fā)器用于定義原型從一個框架到另一個框架的交互方式。你可以使用原型選項卡中的 Trigger 下拉列表進(jìn)行設(shè)置。
智能動畫
利用Figma內(nèi)的智能動畫，設(shè)計師可以輕松地做出豐富的動畫效果，例如開關(guān)的切換、tab的平移、選擇器的滑動等。簡單來說，設(shè)計師只需要制作開始幀和結(jié)束幀的設(shè)計稿，利用觸發(fā)器將兩者串聯(lián)后，智能動畫會幫助設(shè)計師補(bǔ)齊過程中發(fā)生的動畫，你也可以在這個過程中選擇合適的動畫曲線讓你的動畫更具表現(xiàn)力。
彈性動畫
Config 2022的更新中，F(xiàn)igma為設(shè)計師專門提供了在原型轉(zhuǎn)換中的彈性動畫。自帶物理屬性的彈性動畫，讓你更容易設(shè)計出更流暢、更自然的界面原型。
六、Figma Tokens｜設(shè)計變量管理者
推薦一款叫做“Figma Tokens”的插件，其強(qiáng)大之處在于可以通過可視化以及編碼的方式創(chuàng)建并管理各種tokens，且可以在Token之間做一些引用關(guān)系或是算法，讓各個Token串聯(lián)起來，甚至可以一鍵導(dǎo)出json給你的開發(fā)同事。下面來具體安利幾個非常厲害的小技巧。
別名
Figma Tokens里一個非常好用的功能，你可以用這個功能對使用不同token名稱，但卻用了同一個色值的token做引用關(guān)系。這樣，當(dāng)你改動你的原始色板的時候，其他被引用的token都會隨之發(fā)生變化。
使用數(shù)學(xué)
在構(gòu)建類型比例或間距比例時需要考慮到比例可能是有關(guān)聯(lián)性的。在Figma tokens中，你可以引用已有的一個token，并使用它進(jìn)行一些數(shù)學(xué)運算。
例如，你希望borderWith.medium引用borderWith.small，但將其值乘以 2。那么，你可以將以下內(nèi)容寫為token的值: ({borderWith.small} * 2)。
創(chuàng)建漸變token
Figma本身沒有辦法做到制作漸變色token時引用現(xiàn)有的純色token。但是在這個插件當(dāng)中，設(shè)計師可以自由度更高的使用多個已有的純色token作為被引用者。
七、小組件｜Figma工作流拓展
前陣子Figma更新了一個小功能，F(xiàn)igmaWidgets，說是小功能，但其實一點也不小。利用小組件，你可以在Figma內(nèi)做到很多之前意想不到的事情，比如上傳pdf，添加錄音，計時器等等，而且是屬于開放式的，所有人都可以參與到小組件的創(chuàng)作并上傳至社區(qū)，想必不遠(yuǎn)的未來，這一功能一定會大放異彩。
?
?比如近期很火的一直跟隨在畫面中心的像素小人，或許你可以用它來搭建一個像素風(fēng)的小游戲。
八、歷史版本｜創(chuàng)作時間軸回溯
不知道你是否也遇到過這樣的問題，當(dāng)你發(fā)現(xiàn)誤刪了某些元素，一直按“Ctrl + Z”也無法回退，其實你不必重新再做一遍這個元素，你只需要打開歷史版本，找到存在該元素的版本，從該版本中復(fù)制這個元素回來就OK啦。
??
九、FigJam｜靈感爆發(fā)集合地
ios16上新了共同編輯備忘錄，而Figma早早就提供了一個豐富的協(xié)作編輯功能：FigJam。
使用FigJam可以和你需要和你溝通的產(chǎn)品同學(xué)快速進(jìn)行線上溝通，可以使用便利貼快捷記錄下你們的靈感，并用一個大大的貼紙表示你對他的想法的贊同，更有非常多豐富的互動玩法，快快去發(fā)掘吧。
十、Spotlight｜聚焦所有人視線
問：設(shè)計師在闡述需求的時候，如何聚攏所有人的目光？秘訣就在你頭像的下方的“Spotlight”按鈕，點擊后，可聚焦所有處于當(dāng)前界面用戶的視線跟隨你移動。
?
- END -
我們相信設(shè)計師和創(chuàng)造者一樣是思想家
評論
圖片
表情