如何制作带有双灯光效果的Figma按钮?
用Figma蒙版实现带局部发光效果的按钮
嘿,我完全懂你说的这种按钮!渐变叠加确实搞不定这种不对称的局部发光,用蒙版的方法刚好能完美实现,我给你一步步拆解操作:
第一步:绘制基础按钮底色
先画一个你需要的圆角矩形,设置好按钮的基础底色(比如图里的深灰色),把它放在所有图层的最底层。第二步:创建两个发光渐变元素
- 用椭圆工具画一个比按钮大一圈的圆形,填充左上方向的明亮渐变(比如从浅青蓝色过渡到完全透明的径向渐变),把它挪到按钮的左上区域,模拟左上角的发光效果。
- 再画一个同样大小的圆形,填充右下方向的渐变(比如从淡紫色过渡到完全透明的径向渐变),放在按钮的右下区域,对应右下角的发光。
第三步:用蒙版锁定发光范围
按住Shift键,同时选中两个发光椭圆和底层的按钮矩形,右键点击选择**「创建剪贴蒙版」**(快捷键是Ctrl+Alt+M/Cmd+Option+M)。这样两个发光层就只会显示按钮形状以内的部分,完美贴合按钮轮廓。第四步:微调优化效果
你可以拖动发光椭圆调整位置,或者修改渐变的颜色、不透明度,甚至给发光层加一点高斯模糊(右侧面板「效果」里添加),让发光看起来更柔和自然,直到达到你想要的视觉效果。
这种蒙版的方式比单纯的渐变叠加灵活太多,能轻松实现这种不对称的局部发光,完全匹配你想要的按钮效果~
内容的提问来源于stack exchange,提问作者Andrii Frighes
相关产品推荐
相关产品推荐

