作者：jeasonqiu，騰訊IEG品牌設計

| 導語 記2021年《Figma一站式設計交付》中提到，Figma本身是一個矢量設計軟件，所以個人認為Figma比較适用于制作一些偏扁平、卡通的遊戲UI風格。(以下僅個人臨摹練習使用，非官方内部源文件)

記得2021年《Figma一站式設計交付》中提到，Figma本身是一個矢量設計軟件，所以個人認為Figma比較适用于制作一些偏扁平、卡通的遊戲UI風格。

縱觀全網Figma基本都是To B 、To C類的産品應用，很少人會往這個遊戲這個方向研究了，因此我開啟了一段Figma針對扁平類遊戲UI設計的探索之旅，結合Figma Config 2022姗姗來遲的AutoLayout 4.0的使用，以英雄聯盟鮮明的海克斯科技風格代表性更高。(以下案例僅為個人示範，與官方産品效果及資源無關)

此次練習設計主要總結了一些設計技巧：

• 異形的自适應按鈕、自适應面闆背景（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 後也能完美地自适應寬高。

那具體應該怎樣才能做到自适應，同時文字和背景層能很好的分離切換呢？

其實早期在Figma官方介紹Autolayout 3.0的Playground文件中，就隐藏了一種思路：

仔細觀察這幾個頭像，通過父級定寬FixedWidth Autolayout SpaceBetween的方法，因此我們按鈕還是拆成一個文本結構層、一個背景拉伸層，并且一般按鈕來說都是定高的，隻需要水平自适應文本長度。借助這個點，結合Autolayout的Spaces Between 來完成按鈕和背景重疊一起的效果。

得益于負間距、絕對定位、堆疊順序、組件屬性的特性，可以省略一層文本結構層，通過組件屬性直接賦能在主按鈕上。背景層的處理使用絕對定位，以及約束填滿整個按鈕的大小，這樣就可以輕松實現寬高自适應的按鈕背景了。

剩下的重點是制作出可自适應拉伸的按鈕背景圖層即可。

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返回上級圖層)

• 文本結構層：文本圖标層可以建立不同的Variants Autolayout，來實現切換純文、左圖标 文本、文本 右圖标等多種方式。（Autolayout 3）

當然也可以使用AutoLayout 4 通過添加組件屬性，一個組件就能完成。

• 按鈕背景層：背景層内的元素注意使用約束Constraints的Left & Right和Top & Bottom。如果有多個按鈕背景層做切換 ，也可以使用Variants。

• 整體按鈕AL3.0：做水平自适應按鈕，使用垂直方向的AutoLayout，間距設置Auto即為Spaces Between效果，Padding設為0。(垂直自适應按鈕，則使用水平方向的AutoLayout，寬度設置為固定寬度）
• 整體按鈕寬度設為Hug Contents ，高度均需設為按鈕的固定高度如32。
• 文本結構層BtnText的Resizing寬度設置Hug Contents或Fill Container用于Padding調整左右邊距，高度同整體按鈕。
• 按鈕背景層BtnBg的Resizing寬度設置Fill Container用于自适應拉伸寬度，高度同整體按鈕。

注：如果出現背景層蓋住了文本層，交換一下圖層順序即可。

• 整體按鈕AL4.0：嵌套一層父級AutoLayout，Padding可以用于方便調整文本層和背景層之間的内填充。
• 其中文本結構層BtnText的Resizing寬度設置為Hug Contents，Hug Contents，這樣按鈕可以單行或多行自适應。
• 背圖層設置為絕對定位，寬高同父級AutoLayout，并且設置約束Constraints的Left & Right和Top & Bottom，這樣就可以完美自适應寬高。
• 注：如果出現背景層蓋住了文本層，交換一下圖層順序即可，或者在AL更多設置中調整CanvasStacking的順序。

細心的同學會發現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延遲時間，讓字母錯開完成結束。

注意：

• 在原子級組件，建議設置每個組件的寬高一緻，因為大部分字體都是非等寬字體，對1、7、E、F、I、J、L、M、W顯示的寬度差比較大， 後期對組合結果進行Autolayout排列的時候，非等寬的組件會出現異常，缺失動畫。
• 由于Figma會記錄元素最終的渲染狀态，就會導緻數字動畫在原型流Prototype Flow裡隻能播放一次，需要手動按R重置。

2021全球總決賽中，有這麼一個影視包裝設計畫面 Make / Break ，那這個效果其實Figma也能輕松實現。

得益于文本繼承的特性，可以隻設計一個動畫組件就可以完成核心步驟。

• Start幀，以兩行的方式輸入同一個字符，勾選ClipContent 裁剪超出Frame的内容用于隻顯示第一行字母，以SmartAnimate切換至End幀。
• End幀，調整位置，顯示第二行字母，以1ms延遲Instance的方式直接跳轉回Start幀。
• 最後在調用的時候，調整每個組件的Delay延遲時間，讓字母錯開播放。

特别說明的是：這個效果在原型播放約3次以後，會變慢（原因未知）,可以按R來重置效果。

基于上面的讨巧的方法，有了一些大膽的期望：

• 背景圖層的填充模式提供一種 類似Slicing的拉伸模式，即可使用輕便的AutoLayout結構自适應寬高拉伸

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!