第五课：Figma 玻璃拟态页设计

最新推荐文章于 2025-03-10 15:13:26 发布
最新推荐文章于 2025-03-10 15:13:26 发布
阅读量3.5k 收藏 2
点赞数
分类专栏： Figma 入门学习 文章标签： figma
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41768447/article/details/131680157
版权
文章介绍了如何在Figma中通过背景模糊效果来创建玻璃拟态设计。步骤包括选择背景、调整形状的填充颜色和模糊值，以及设置上层元素的颜色、描边和投影效果。通过这些技巧，可以增强设计的视觉层次感和透明度效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

效果展示

 通过背景模糊实现玻璃拟态效果

  • 选择合适的背景，绘制形状，给形状添加 Effects，点击下方的下拉选择框，选择 background blur；
  • 添加后会发现，画面无任何改变，调整 Fill 后面的百分比，此处的百分比专指填充颜色的百分比；

  •  当填充颜色调整为50%时，背景透出来，但是画面模糊度不够，因为默认的 Blur 值比较小，调整 Blur 的参数给 blur 一个特别大的数值，再结合颜色填充的透明度来实现玻璃拟态效果 ；

上层元素玻璃拟态效果 （原图越实，玻璃拟态效果越强烈）<

最低0.47元/天 解锁文章
【PM学习笔记】酸梅干超人 - 零基础学Figma学习笔记
m0_59085992的博客
09-04 1102
酸梅干超人 - 零基础学Figma学习笔记
软件产品设计
ai1614056501的博客
06-21 970
所谓CS是胖客户端，BS是瘦客户端，说的是CS的客户端交互能力很强，可以做许多工作，BS就不同了，浏览器功能太弱，啥都提交到服务器，极端依赖服务器。但BS发展至今时今日，客户端功能越来越强，体验越来越好，之前的flex，slivelight就不说了，阿贾克斯，以及现在的单页应用，前后端分离，以及浏览器功能的增强，客户端也日益强壮富裕。结合我们的实际工作，我认为，系统需求分析完成以后，进行技术选型，选择开发语言，开发工具，软件框架，数据库产品，是否采用SOA或微服务架构，是否需要上云，这些都属于架构设计。
Figma入门-磨砂效果
我码玄黄的博客
12-04 712
本文介绍Figma制作磨砂效果，通过绘制基础图形、应用渐变色、添加边框和设置背景模糊等步骤实现。案例帮助掌握Figma基础操作和磨砂效果技巧，欢迎交流指正。
Figma 对图片进行模糊处理
qq_15181569的博客
02-25 399
选择图层模糊。
Figma制作噪点质感背景图
最新发布
2401_85578645的博客
03-10 296
2、根据需要叠加几个圆形图案，浅蓝、深蓝，填充颜色，通过effects里的layer blur模糊边缘。根据画框大小调整数值。3、在社区里搜索texture，选择喜欢的复制过来，遮盖在画面上即可。可以通过调整纹理框大小调整纹理大小。实习期间跟着负责设计的同学蹭一点Figma技能...如何制作一张以下这样的背景图？
11-Figma-属性栏-填充、描边、投影、导出
billycoder的专栏
01-21 7188
11-Figma-属性栏-填充、描边、投影、导出 常见操作 填充 纯色填充，属性面板操作 线性渐变填充，属性面板操作，注意第二个点的透明度默认是完全透明 其他渐变填充，属性面板操作，了解 填充存为样式，属性面板操作 填充样式修改，属性面板操作 填充样式分离，属性面板操作 描边 纯色描边，属性面板操作 线性渐变描边，属性面板操作，注意第二个点的透明度默认是完全透明 其他渐变描边，属性面板操作，了解 描边存为样式，属性面板操作 描边样式修改，属性面板操作
径向模糊效果
逍遥剑客
01-06 1万+
最先在这里看到:http://www.gamerendering.com/2008/12/20/radial-blur-filter/这效果在鬼泣4中切换场景时见过, 极品飞车12的运动模糊也有这种感觉.原理:    确定一个中心点(如0.5, 0.5), 跟当前像素连一条线. 以当前像素为中心, 在线上的附近像素进行采样, 最后取一下平均值.代码翻译成HLSL:// Th
17-Figma-磨砂图标绘制技法
billycoder的专栏
01-22 1955
17-Figma-磨砂图标绘制技法 最后效果 步骤 绘制基本结构 添加基本颜色 渐变填充 描边使用径向渐变 大量用了复制属性 混合模式用了叠加 添加背景模糊 添加噪点 用到了noise插件 用到了蒙版 用到了编组 用到了合并形状 拓展 ...
2020最新ui设计风格-模糊半透明玻璃效果风格后台管理界面ui素材figma&sketch.zip
12-28
2020最新ui设计风格-模糊半透明玻璃效果风格后台管理界面ui素材figma&sketch ios模糊半透ui风格仪表板ui、sketch设计流行ui风格控制面板ui、后台管理控制面板ui素材、控制面板ui设计
页面背景高斯模糊与展示页面轮播
03-14
页面背景高斯模糊与展示页面轮播 demo展示地址http://1.coverflow.applinzi.com/Swiper/demos/index.html
figma-easing-gradient:Fig在Figma中制作漂亮的平滑渐变
05-02
:rocket: 入门 在Figma文档上，选择带有渐变的形状 转到插件>缓和渐变 看着你的渐变变得光滑美丽 :wrench: 发展 安装依赖项 npm install 编译插件 npm run dev 在Figma中，转到“插件”>“管理插件” 点击“开发”旁边的+图标 在仓库的根目录为Figma提供manifest.json :thought_balloon: 灵感来自 请查看这些以前启发了figma-easing-gradient创作的作品。 :folded_hands: -安德烈亚斯·拉尔森（Andreas Larsen）关于缓和渐变的精彩文章。 一个类似Sketch的插件。 用于实现类似渐变的PostCSS插件。 :memo: 执照 版权所有:copyright:2019-至今， 。 该项目获得许可。
BackgroundBlur_背景模糊高斯模糊
weixin_30929295的博客
07-16 1225
层级之下的所有控件都将模糊 Blur Strength设置模糊度,值越大越模糊 转载于:https://www.cnblogs.com/Optimals/p/11195379.html
figma的用法（四）
Winfredzhang的博客
12-19 3268
1、对齐工具。 1）左对齐。 2）水平居中对齐。 3）右对齐。 4）顶对齐。 5)纵向居中对齐。 6）向下对齐。 横向等距。 纵向等距。 2、取色器的使用。 ...
超全面！新晋设计神器Figma 深度评测
p312011150的博客
11-27 9159
Figma Figma 是最近才出的一款设计软件，我原以为它不过是又一个拿着「团队协作」当噱头，实际无法当作为生产力工具使用的玩具。然而在有限的几天时间试用后，我的想法改变了，比起玩票的前辈们，Figma 经历了相当的打磨，完成度很高。除了「实时协作」，还有「版本控制」、「矢量网络（Vector Network）」、全平台适配（基于 web ）等很棒的特性。 更妙的一点是，如果你曾经使用过 S...
css背景模糊用什么属性_如何用一行代码在css中使背景模糊
weixin_26715991的博客
09-26 1859
css背景模糊用什么属性 重点 (Top highlight)Background blurs are cool. This is an undisputed fact. Every single user interface should have at least ten background blurs in them (preferably stacked on top of each o...
Figma实用小技巧
热门推荐
设计の诗
05-17 3万+
1. 介绍 原作：lijxse 视频地址 文字版整理：岩鸣杨子 2. 快速拖拽调整数值 按住option可在数值上拖拽调整，不按option时只能在X/Y/W/H/旋转/圆角等的图标上拖拽调整，不能调整透明度的数值。 3. 属性粘贴复制 shift+X：互换填充和描边 选中图层的某个属性，然后cmd+C，则可复制这个图层特定的属性。 选中图层的某个属性，然后cmd+V，则可粘贴到这个图层特定的属性上。 4. 列表切换&快速搜索 option+1：切换到Layers option+2：切换到Asse.
CSS实现背景模糊效果（高斯模糊）
Think____的博客
07-31 1万+
px值越大，越模糊，可以按照不同的类名给不同的模糊值，背景看起来会更好看一点 重点实现为： -webkit-filter: blur(10px); /* Chrome, Opera */ -moz-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); 转自：h...
商务官网模板素材：Figma&Sketch设计包下载
1. **Figma和Sketch工具的介绍**：Figma是一款基于云端的设计工具，适合团队协作和共享设计，而Sketch是专为Mac用户设计的图形设计软件，适合个人设计师和小团队使用。 2. **网站模板素材的重要性**：模板素材能够...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值