18-Figma-微质感图标技法

最新推荐文章于 2025-11-21 11:15:33 发布
原创 最新推荐文章于 2025-11-21 11:15:33 发布 · 586 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3 #css #前端 #figma #ui设计

本文介绍使用Figma创建微质感图标的详细步骤。首先绘制基础造型并进行整合，然后添加上色及阴影效果，包括内外阴影的设置，使图标呈现出细腻的立体感。

18-Figma-微质感图标技法

效果

在这里插入图片描述

步骤

1.绘制基础造型

在这里插入图片描述

1.绘制基本结构
2.形状->连集所选项  
3.形状->连集所选项
2.上色和阴影效果

在这里插入图片描述

内阴影
外阴影
17-Figma-磨砂图标绘制技法
billycoder的专栏
01-22 2118
17-Figma-磨砂图标绘制技法 最后效果 步骤 绘制基本结构 添加基本颜色 渐变填充 描边使用径向渐变 大量用了复制属性 混合模式用了叠加 添加背景模糊 添加噪点 用到了noise插件 用到了蒙版 用到了编组 用到了合并形状 拓展 ...
Figma教程上新丨绝了~以为是青铜结果是个王者
weixin_51689029的博客
11-05 1040
UI设计岗位日趋火热的当下，UI设计软件也日渐受到关注。掌握更高效的生产力工具，已成为职场人的加薪技能！ 毫不夸张的说，设计师的日常工作只有 20 %的时间在发挥创意解决问题，80% 的时间都在重复一些机械操作，改颜色、改间距、改排列等等，这些都让整个设计工作冗余、低效还无趣。 网上有句话说的好，成功人士都是工具控。好的工具不仅能够提升劳动效率，连干活儿的心情都能好很多。图片 Figma 是一款更为先进、更理解设计师工作方式和需求的界面设计工具。Figma 让设计师无需再考虑操作系统问题，也不需要管理插件
UI设计：使用AI绘制微质感图标
weixin_57156294的博客
07-05 607
UI设计：使用AI绘制微质感图标
《9步教你轻松绘制微质感音乐图标》
u010339531的专栏
05-19 1959
1、首先用形状工具画一个圆角矩形 2、添加斜面浮雕、描边、内阴影和渐变叠加效果 3、添加矢量圆角矩形（降低透明度）和矢量圆角矩形（加渐变叠加） 4、形成基本的图标底图 5、用钢笔工具勾画音乐符的基本形状 6、对音乐符添加斜面浮雕、颜色叠加和投影效果 7、对音乐符添加一些细节（为凸显细节将音乐符调灰，灰面细节为钢笔勾画加渐变蒙版效果、图底为橙色 椭圆矢量高斯模糊而成） 8、在图标底部
figma 磨砂玻璃图标
tuuujy的博客
06-27 821
6.添加安全边距，画一个64x64的矩形（可以先把透明度调到20%，把刚刚画好的图形选中移到矩形中，让图形居中，再把透明度调到0，选中所有右键组选（ctrl+g）7.制作背景：再画一个64x64的矩形，填补是白色（ffffff，100%）到紫色（bfaef5，100%），白色在上紫色在下的渐变效果。影响：背景模糊（10），阴影（x：-1，y：2，模糊：5，颜色：756bef，透明度：50%）影响：阴影（x：0，y：1，模糊：3，颜色：746cef，透明度：80%）4.补填：白色渐变（线性），透明度50%；
【Figma学习】图标制作
weixin_47050107的博客
08-16 1888
Figma学习
4个玻璃质感文件夹图标FIG设计素材下载
这对于构建统一设计语言的企业级项目尤为重要——例如，可以将这四个玻璃质感图标纳入公司的Design System中，作为“文件管理”模块的标准视觉资产。 进一步分析其**标签体系**所涵盖的知识范畴：“文件夹图标”...
Figma 中的插画设计和图形图标创建技巧
# 第一章：Figma 简介 ## 1.1 什么是 Figma Figma 是一款基于浏览器的界面设计与协作工具，它不仅仅是一个UI设计工具，还拥有强大的协作功能，能够让团队成员实时协同编辑同一份设计文档。 ## 1.2 Figma 的优势和...
立体文件夹图标设计素材下载
“立体”和“3D”则突出了设计风格的技术特征，意味着这些图标采用了建模、渲染、阴影处理、高光反射、边缘倒角等三维表现技法，可能是通过专业软件如Adobe Photoshop、Illustrator、Blender、Sketch、Figma或Cinema...
2013版软件水晶图标包下载资源
从描述中可以看出，该文档被定位为“很不错的参考资料”，并强调其“较高参考价值”，说明其不仅可用于直接集成到实际项目中，还可作为设计师学习图标设计风格、配色方案、图层结构与表现技法的重要范本。...
06-figma-形状操作
billycoder的专栏
01-20 9583
06-figma-形状操作 形状操作 矩形 圆角操作 单个圆角修改 多个圆角修改 直线 水平垂直线 改颜色 箭头 修改箭头方向 椭圆 画正圆 画扇形 多边形 绘制任意多边形 星形 绘制任意多角星 放置图片… 插入图片 在指定的形状中插入图片,直接放入形状即可，这个和蒙版功能很像 蒙版操作 两个图形层叠摆放-》然后框选2个图形-》点击设为模板 布尔运算 如何触发，两个形状，框选之后就会触发 哪些操作？ 连集所选项 -》加-》形状相
Figma入门-立体效果
我码玄黄的博客
12-05 697
本文介绍如何使用Easometric插件在Figma中创建立体效果，包括安装插件、处理图标、尝试不同视角、复制调整多个面构建立方体，并通过调整透明度和层级实现真实立体效果。
figma客户端_小白的Figma入门手册
weixin_39815925的博客
11-30 6413
全世界都在用Figma不知道你们有没有这种感觉，仿佛有一天，很突然的，全世界都在使用figma,一个软件从无人问津到现在的如日中天，用了不到3年，而现在，它不仅仅是当下的最优生产力工具，在疫情掀起的远程办公的风潮下，它更为我们揭示了未来设计协作的方式。事实正是如此，大批专业设计团队不惜成本尝试由传统设计软件(sketch等)向Figma转型，只因他们于此看到了代表未来的生产力工具及协作方...
【Figma技巧】Figma中快速制作斜线阴影的三种方法
设计の诗
03-05 7266
想要实现的效果 方法一 安装Hero-Patterns插件（安装地址：https://www.figma.com/community/plugin/743134103711120154/Hero-Patterns-for-Figma） 缺点：生成的是位图，无法再次修改颜色 方法二 自己画一条斜线，然后用Pattern Hero这个插件生成斜线阵列，再放到蒙版里面 方法三 用虚线方式手动制作斜线阴影 画一条横线，增加宽度 设置虚线和间隔 绘制一个封闭区域作为蒙版 旋转角度 ...
20-Figma-2.5D图标绘制技法
billycoder的专栏
01-23 1932
20-Figma-2-5D图标绘制技法 效果 步奏 1.分析案列 2.绘制3个基本矩形 3.通过Easometric插件完成变形 4.完成图形拼合 可以用吸管工具i,随意先上色 5.添加颜色和图片和者文字 背景模糊 线性渐变 图片或者文字也可以变型 复制属性:ctrl+alt+c 粘贴属性:ctrl+alt+v ...
11-Figma-属性栏-填充、描边、投影、导出
billycoder的专栏
01-21 7598
11-Figma-属性栏-填充、描边、投影、导出 常见操作 填充 纯色填充，属性面板操作 线性渐变填充，属性面板操作，注意第二个点的透明度默认是完全透明 其他渐变填充，属性面板操作，了解 填充存为样式，属性面板操作 填充样式修改，属性面板操作 填充样式分离，属性面板操作 描边 纯色描边，属性面板操作 线性渐变描边，属性面板操作，注意第二个点的透明度默认是完全透明 其他渐变描边，属性面板操作，了解 描边存为样式，属性面板操作 描边样式修改，属性面板操作
5分钟用Spline制作一个Figma图标
设计の诗
12-19 4226
Spline是一个新出的轻量级3D软件，可以轻松创建和发布3D Web体验。快速构建和迭代，并可直接导出可开发的文件。 1. 新建Spline文件 打开spline软件，新建一个文件。这时默认会创建一个320✖️320px的白色背景，为了更好得显示，我们将背景放大至800✖️800，然后点左上角的锁定按钮，将白色背景固定住。 2. Figma图标的构成 从Figma官网上可以看到，Figma图标包含红、浅红、紫、蓝、绿5种颜色，半圆角矩形、圆形、3个圆角一个直角的图形3种类型。如果转换为3D图形，则应该
figma button_在Figma中创建图标和徽标的技巧
weixin_26715991的博客
08-31 3942
figma buttonFigma’s $40 million in Series C funding led by Sequoia was announced in early 2019. Almost every designer I know uses it. Every designer online has been raving about it ever since it launc...
style.width是指dev的宽度还是指dev宽度+内边距
最新发布
qq_40453972的博客
11-21 312
CSS盒模型有两种类型：标准盒模型（默认）和边框盒模型。标准盒模型中，width仅定义内容宽度，总宽度=width+padding+border。边框盒模型中，width包含内容、内边距和边框的总宽度。现代开发更推荐使用边框盒模型（通过box-sizing:border-box设置），因其布局计算更直观。默认情况下style.width不包含内边距，但在边框盒模型中包含。
Figma扩展 eos-icons-figma：轻松设计EOS图标
压缩包子文件的文件名称列表中仅包含了一个文件名 "eos-icons-figma-main"，这表明该项目可能是一个单文件项目，或者至少是核心功能被包含在这个单一的文件中。"main" 这个命名可能暗示了这是一个主入口或主文件，该...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值