译者：jeasonqiu，百度IEG品牌结构设计
| 编者按记2021年《Figma服务平台结构设计交货》中提及，Figma这类是两个向量结构设计应用领域软件，因而对个人指出Figma较为适用于于制做许多偏细长、米老鼠的格斗游戏UI艺术风格。(下列仅对个人米芾练采用，非正式外部示例)
提过2021年《Figma服务平台结构设计交货》中提及，Figma这类是两个向量结构设计应用领域软件，因而对个人指出Figma较为适用于于制做许多偏细长、米老鼠的格斗游戏UI艺术风格。
纵观全站Figma基本上都是To B 、To C类的商品应用领域，极少人能往那个格斗游戏那个路径科学研究了，因而我迈入了几段Figma特别针对细长类格斗游戏UI结构设计的explore，紧密结合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做了许多较为知名的格斗游戏按键来做验证。
那具体应该怎样才能做到自适应，同时文字和大背景层能很好的分离切换呢？
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返回上级图层)
按键重叠核心细节
文本结构层：文本图标层可以建立不同的Variants+Autolayout，来实现切换纯文、左图标+文本、文本+右图标等多种方式。（Autolayout 3）当然也可以采用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延迟时间，让拉丁字母错开完成结束。
注意：
在原子级模块，建议设置每个模块的宽高一致，因为大部分字体都是非等宽字体，对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来重置效用。
许多期望的Feature
基于上面的讨巧的方法，有了许多大胆的期望：
大背景图层的填充模式提供一种 类似Slicing的剪切模式，即可采用轻便的AutoLayout结构自适应宽高剪切
