記得2021年《Figma一站式設計交付》中提到，Figma本身是一個矢量設計軟件，所以個人認為Figma比較適用於製作一些偏扁平、卡通的遊戲UI風格。
此次練習設計主要總結了一些設計技巧：
異形的自適應按鈕、自適應面板背景（AL4.0絕對定位+約束拉伸）
數字、字母動畫（AfterDelay嵌套）
異形按鈕的做法
起初一個同事在大群里問，像這種異形的漸變按鈕在Figma裡面做Autolayout組件嗎？
由於當時正在使用skewDat插件。於是就想到兩種解決辦法：
對文本Autolayout之後，Autolayout層用skewDat插件傾斜 -10度，再對裡面的文字傾斜10度，就得到了（負負得正）。
把兩邊異形的部分單獨抽出來，中間部分就可以做自適應。
但其實以上兩種方法，都會有一些問題：
尺寸上會有小數點，不夠精確（像素控感到難受）
不能做不規則漸變填充（45度、角度漸變等）
不能給整個形狀增加描邊（如上圖最後一個按鈕）
文字不能入侵到異形部分
後來，在不斷的實踐過程中也發現了基於Autolayout 3.0更優的解法，類似於做點9圖的效果得到更好的設計延展（限高，寬度自適應/限寬，高度自適應）。在AutoLayout4.0發布後，這個方法有了絕對定位的加持，實現變得更容易了(寬高可自適應)。
異形設計的自適應
在大多數To B 、To C的應用場景中，常規的按鈕如純色、漸變、幽靈、投影/發光按鈕+各種直角、圓角、全圓角，AutoLayout都能輕鬆的完成自適應。
但在遊戲設計中，按鈕的背景一般都不會做的規矩和太扁平，總會做一些和遊戲主題匹配的樣式，會有一些特殊的異形裝飾，類似海克斯科技里除了常規的矩形按鈕，還有被圓和三角形切割的異形按鈕，因此也特意用Figma做了一些比較知名的遊戲按鈕來做驗證。
常規按鈕：可以拆解成一層文本，和一個填充/漸變層，通過添加Autolayout完美自適應寬高。
遊戲按鈕：可以拆解成一層文本，和一個可以自適應拉伸的背景組件，在AutoLayout 4.0 後也能完美地自適應寬高。
那具體應該怎樣才能做到自適應，同時文字和背景層能很好的分離切換呢？
AL3.0 & 4.0 中的實現原理
其實早期在Figma官方介紹Autolayout 3.0的Playground文件中，就隱藏了一種思路：
仔細觀察這幾個頭像，通過父級定寬FixedWidth + Autolayout + SpaceBetween的方法，因此我們按鈕還是拆成一個文本結構層、一個背景拉伸層，並且一般按鈕來說都是定高的，只需要水平自適應文本長度。藉助這個點，結合Autolayout的Spaces Between 來完成按鈕和背景重疊一起的效果。
AutoLayout 4.0+組件屬性
得益於負間距、絕對定位、堆疊順序、組件屬性的特性，可以省略一層文本結構層，通過組件屬性直接賦能在主按鈕上。背景層的處理使用絕對定位，以及約束填滿整個按鈕的大小，這樣就可以輕鬆實現寬高自適應的按鈕背景了。
剩下的重點是製作出可自適應拉伸的按鈕背景圖層即可。
自適應拉伸核心細節
Figma中做自適應拉伸主要使用約束Constraints的Top、Bottom、Left 、Right和Top&Bottom、Left&Right進行定位以及布爾運算的Union、Subtract進行加減運算，這樣出的圖像既能夠自適應拉伸，也能夠保持一個整體同時方便調整樣式。
最終的效果類似CSS3 Border-Image 邊框圖像、Android 的 9-patch點九拉伸圖、iOS的Slicing 拉伸、Flutter的centerSlice。
(視頻中按Tab切換下一個圖層，Enter進入圖層，Shift+Enter返回上級圖層)
按鈕重疊核心細節
當然也可以使用AutoLayout 4 通過添加組件屬性，一個組件就能完成。
註：如果出現背景層蓋住了文本層，交換一下圖層順序即可。
虛化蒙版細節
細心的同學會發現LOL這個Play按鈕在hover的時候，會有一些朦朧的煙霧流動效果。這個核心的細節點主要是把遮罩的描邊圖層加一層LayerBlur，這樣作為蒙版的時候就能有類似PS的虛化效果。
自適應面板背景
在遊戲設計中，彈窗面板一般都是固定幾個大中小尺寸的，這樣方便統一。從截圖可以看出，LOL手遊中基本上也就是有大中小三個基礎尺寸，也會有做定寬自適應高，定高自適應寬的彈窗。
有了前面的自適應拉伸基礎後，其實面板背景就已經學會了，這樣就可以很方便地延伸出不同的面板背景。
在AL4.0的加強下，這個面板實現更輕鬆。在對文字內容的AL基礎上，只需要給背景設為絕對定位並且設置約束Constraints的Left & Right和Top & Bottom，這樣就可以完美自適應寬高。
數字、字母動畫
在遊戲設計中，不乏使用數字增長的效果強調個人資產數據。
在過去的一些原型動畫設計工具如Flinto、Principle都沒奢望過能做數字滾動的效果，但Figma不一樣，組件內的交互讓我有了些想法。那在Figma中應該怎麼做呢？
數字滾動動畫
我們可以簡單的分析思路：
【原子】把0~9，A~Z拆分成獨立的原子組件，方便統一管理大小、樣式；
【自循環】把0~9~0，A~Z~A使用AfterDelay建立自循環動畫，如每個狀態停留100ms，那10個剛好1000ms（1秒）。由於自循環後會直接播放，所以可以給一個【-】作為起始幀，也方便後續調整延遲。
【輸出結果】把自循環動畫 → 原子(最終結果)，建立組件集系列；
最後在需要的地方直接調用Number to / 具體數系列的組件，在【-】狀態分別調整Delay延遲時間，讓字母錯開完成結束。
注意：
重複字母翻動動畫
2021全球總決賽中，有這麼一個影視包裝設計畫面 Make / Break ，那這個效果其實Figma也能輕鬆實現。
得益於文本繼承的特性，可以只設計一個動畫組件就可以完成核心步驟。
特別說明的是：這個效果在原型播放約3次以後，會變慢（原因未知）,可以按R來重置效果。
一些期望的Feature
基於上面的討巧的方法，有了一些大膽的期望：
背景圖層的填充模式提供一種 類似Slicing的拉伸模式，即可使用輕便的AutoLayout結構自適應寬高拉伸
原創設計團隊：光子設計中心
留言列表