Figma制作可爱自适应长度的按钮组件

Sponsor

今天我们先来做个「相对简单」的视觉按钮教程，使用Figma设计工具制作，让按钮可爱有质感的同时，也能成为按钮组件，按钮支持自适应长度和修改颜色。

Figma按钮组件教程/步骤：

1️⃣ 按钮主体
直接来一个画板，尺寸150*54，圆角打满，加样式：
📌使用「基础色+混合模式」，方便整体改色。这里填充、描边、内阴影都是用黑白+不透明度来“叠加”。

2️⃣ 按钮外框
对「fill」向外裹两层自动布局，且子级均向其父级“填充”适应；
「main」的填充效果即表现为“按钮外框”，通过自动布局的padding数值来控制框体粗细，比如（6，4）

3️⃣ 装饰点缀 🌟
用几个模糊+透明度的椭圆“叠加”在「in」中做反光；
在「fill」中加高光层、星光等装饰层。颜色同样都是黑白不透明度+混合模式；
⚠️ 注意设置内部元素相对「fill」的约束方式。比如高光跟随父级左右拉伸，stars可居中、或将子元素按左右分别固定。
（此时可以调整宽度测试下适应方式是否合适）

4️⃣ 投影和切图范围
「main」下方添加一个shadow层，投影用同主色+模糊+不透明度；
将两者打一个画板组，命名为「按钮切图」；
对「按钮切图」使用快速“适应内容”，可自动识别投影范围，即得到需要的切图尺寸。最后将其打成智能组件。

5️⃣ 文字+自适应
用画框「demo」包裹文字和「按钮切图」，且自适应文字宽度，「按钮切图」给绝对定位。
通过调整padding、「按钮切图」宽度等，让「demo」和「按钮切图」尺寸重合，最后把「按钮切图」约束改为四边拉伸。
修改按钮文字，验证适应效果～

6️⃣ 调整复用 🎨
因为之前全局只用到了一个基础色，即可在属性面板中一键修改整个按钮的色调啦～🎉
当然，若是连带文字一起切图，还可以考虑更多字体样式。✅
也能做成点9切图来横向拉伸✅

以上就是今天分享的用Figma制作的自适应长度的按钮组件，效果是不是很不错，自己动手尝试一下吧！

分享者：分享者：elusen｜UI设计（小红书）

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。