Figma 按钮设计秘籍：3 步做出会发光的清亮可爱按钮组件

Sponsor

用 Figma 做按钮总觉得差点意思？要么太呆板，要么甜腻到齁，直到我摸透了「清亮可爱风」的精髓 —— 现在做的可爱按钮组件，甲方看了直夸 “会发光”！分享 3 个私藏小技巧，新手也能秒会！

教程/步骤

1、按钮主体

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

2、按钮外框

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

3、装饰点缀

用几个模糊+透明度的椭圆“叠加”在「in」中做反光；
在「fill」中加高光层、星光等装饰层。颜色同样都是黑白不透明度+混合模式；

注意设置内部元素相对「fill」的约束方式。比如高光跟随父级左右拉伸，stars可居中、或将子元素按左右分别固定。
（此时可以调整宽度测试下适应方式是否合适）

4、投影和切图范围

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

5、文字+自适应

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

6、调整复用

因为之前全局只用到了一个基础色，即可在属性面板中一键修改整个按钮的色调啦～

当然，若是连带文字一起切图，还可以考虑更多字体样式。也能做成点9切图来横向拉伸。今天分享就到这里，设计师可以尝一下设计提升设计质感按钮，感谢阅读。

分享者：Lelusen｜UI设计（小红薯）

赞助商链接

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