17-Figma-磨砂图标绘制技法

最新推荐文章于 2025-07-16 10:53:35 发布
原创 最新推荐文章于 2025-07-16 10:53:35 发布 · 2.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#figma #ui设计

本文详细介绍使用Figma绘制磨砂图标的全过程，包括绘制基本结构、应用渐变填充、利用径向渐变描边、添加背景模糊及噪点等技巧，并介绍了noise插件的应用。

17-Figma-磨砂图标绘制技法

最后效果

在这里插入图片描述

步骤

绘制基本结构

在这里插入图片描述

添加基本颜色

在这里插入图片描述

渐变填充
描边使用径向渐变
大量用了复制属性
混合模式用了叠加
添加背景模糊

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R9mVOz7w-1642844234401)(17-Figma-磨砂图标绘制技法.assets/image-20220122171513630.png)]

添加噪点

在这里插入图片描述

用到了noise插件
用到了蒙版
用到了编组
用到了合并形状
拓展

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CgQkftKM-1642844234401)(17-Figma-磨砂图标绘制技法.assets/image-20220122173155417.png)]

最低0.47元/天 解锁文章
20-Figma-2.5D图标绘制技法
billycoder的专栏
01-23 1930
20-Figma-2-5D图标绘制技法 效果 步奏 1.分析案列 2.绘制3个基本矩形 3.通过Easometric插件完成变形 4.完成图形拼合 可以用吸管工具i,随意先上色 5.添加颜色和图片和者文字 背景模糊 线性渐变 图片或者文字也可以变型 复制属性:ctrl+alt+c 粘贴属性:ctrl+alt+v ...
Figma入门-磨砂效果
我码玄黄的博客
12-04 1050
本文介绍Figma制作磨砂效果，通过绘制基础图形、应用渐变色、添加边框和设置背景模糊等步骤实现。案例帮助掌握Figma基础操作和磨砂效果技巧，欢迎交流指正。
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制作噪点质感背景图
2401_85578645的博客
03-10 729
2、根据需要叠加几个圆形图案，浅蓝、深蓝，填充颜色，通过effects里的layer blur模糊边缘。根据画框大小调整数值。3、在社区里搜索texture，选择喜欢的复制过来，遮盖在画面上即可。可以通过调整纹理框大小调整纹理大小。实习期间跟着负责设计的同学蹭一点Figma技能...如何制作一张以下这样的背景图？
【开发工具】Figma入门
最新发布
大雨的博客
07-16 5568
Figma是一款基于云端的UI/UX设计工具，支持跨平台协作与实时同步编辑。文章详细介绍了Figma的核心功能：云端协作、矢量图形编辑、原型设计、组件复用等特性，并提供了从界面基础到图标设计、自动布局等功能的系统教程。同时分享了高效使用技巧如快捷键操作、批量处理等实用方法，推荐了官方插件市场、设计素材网站等学习资源。通过音乐播放器界面等实战案例，帮助读者快速掌握这一设计工具，提升团队协作效率与设计质量。
Figma真好用，8个让我不用Sketch的理由
设计“1+2”，摹客就够了！
06-11 1489
前言：设计不断的变化，而设计工具也一直在更新换代，设计师要想提高效率，就要选着好用的设计工具。做 UI/UX 设计，过去最常见的工具是 Axure、Sketch 和 Adobe XD。 这三款软件通常认为前者产品/交互用得多些，后者 UI/视觉用得多些，而 Sketch 通用性比较强，所以我用得最多。 但是自从开始用 Figma 之后，我打开 Sketch 的次数就越来越少了。 1、发展迅猛 一看数据，原来不光是我，Figma 这几年可以说真的是异军突起，不服不行： Figma .
feathericon-figma:Figma的简单通用矢量图标集合
05-08
Feathericon是一款专门为Figma设计的简单且通用的矢量图标集合。这款图标集旨在提供一个易用、灵活且高质量的...通过下载的"feathericon-figma-master"，你可以获取到图标集的全部内容，包括源文件，方便自定义和开发。
html-figma：用于将HTML导入到Figma层的插件
01-30
-> Figma Figma插件可将HTML从URL转换为Figma，或通过将Figma设计转换为代码 它是如何工作的 在Figma中，打开一个新的或现有的文档，然后单击cmd + /并搜索“ html figma”，然后按Enter 输入您要导入的URL 为什么...
react-figma-boilerplate:oil‍:female_sign: Boilerplate应用程序用于React-figma
05-02
git clone https://github.com/react-figma/react-figma-boilerplate.git <your> 使用Yarn或npm安装节点模块 纱： cd yarn npm： cd npm install 跑步 纱： yarn webpack:watch npm： cd npm run webpack:...
18-Figma-微质感图标技法
billycoder的专栏
01-22 586
18-Figma-微质感图标技法 效果 步骤 1.绘制基础造型 1.绘制基本结构 2.形状->连集所选项 3.形状->连集所选项 2.上色和阴影效果 内阴影 外阴影
figma-plugin-perfect-freehand:一个Figma插件，用于绘制完美的手绘笔触
03-12
完美的写意Figma插件 等待审查。 发展 克隆或下载此仓库。 安装依赖项（ npm install或yarn install ）。 启动开发服务器（ npm run start或yarn start ）。 下载Figma Desktop App。 在菜单中，选择插件，开发，新建插件...。 单击选项以选择manifest.json文件。 从此仓库中选择manifest.json 。 凉爽清爽 在Figma中，使用Plugins ， Play启动插件。 在单独的终端选项卡中，运行modd以使用更改热加载到Figma。 作者
Figma#3：色彩
weixin_62428841的博客
01-18 6962
参考视频：【Figma教程】保姆级教程，全网最简单易学的Figma教程03-色彩及团队协作_哔哩哔哩_bilibili1 个人1.1 图层模式选择通过点击小水滴可以进入图层模式选择。
非常好用的10个自用figma插件分享
七小嗨少的博客
07-27 7440
更方便地看到和分享图片。我们都知道电脑屏幕的布局是以宽屏的形式存在的，这意味着，FigmaEX利用横向总宽，在右侧固定一个区域，以显示基本信息，从而快速固定你想要的东西figma插件，而且这个插件是中国人生产的，更让人骄傲。其实在日常使用中，我们要填充的无非是普通的“姓名、地址、电话号码、邮箱”等等，在常用功能中，我们最重要的是要想快速上手，在我打开的时候，Contento可直接使用。有时，如果你想快速连接原始形状之间的交互，你可以使用它，可以连接不同的页面，也可以定制流程线的颜色、厚度、弧形尺寸等。...
figma客户端_50 个 Figma 提示和技巧，让你设计时快如闪电
weixin_39725365的博客
11-30 3232
提示：更多资源文章可以访问我的 Figma 中文网：https://figmacn.com3…2…1！我整理了一些最新和最方便的 Figma 快捷方式和技巧，帮助你节省时间，让你设计快如闪电(译者注：不是《疯狂动物城[1]》里的闪电)。下面开始欣赏视频吧，看看有没有你不知道的。详细文字版：复制图层要复制图层，只需要选择图层并按住 Option(Windows 下是 Alt，下同) 拖动就...
从3个方面，总结 Figma 值得借鉴的交互细节
aimeeth的博客
03-04 895
引言 近一年来，Figma 可谓是体验设计领域中最热门的工具。刚好最近开始频繁的在 Axure 9.0 和Figma中切换使用，深刻的感受到了设计细节带来的体验差异化。今天就通过一些细节亮点，总结下工具软件的体验设计的几个原则。 事先声明，本文不是对比软件工具孰优孰劣，仅仅是为了探讨设计技巧，希望对你有所帮助。 本文主要的内容包括： 效率设计：提高用户行为效率 简洁化设计：降低信息噪点 可视化设计：减少用户思考成本 效率设计 工具软件首要的任务就是追求效率，减少用户的操作成本。 1. 模..
figma 安装插件_使用figma插件快速生成颜色系统
weixin_26715991的博客
09-15 6682
figma 安装插件In Figma, using defined styles (colors, type, effects, etc.) early and throughout a design project can have a lot of positive impact on your efficiency and output. I’m not necessarily here t...
figma有哪些插件比较好用，分享5款必备figma插件
七小嗨少的博客
05-27 5647
用过 Sketch 的同学都体会过插件的重要性，目前 Figma 的插件所覆盖的功能已经不输给 Sketch 了，基本上你在 Sketch 常用的插件，在 Figma 都能找到，不仅如此，Figma 基于在线工具的天然游戏，在插件的玩法上想象空间更大，比如你你可以通过插件直接听歌，或者玩游戏，在工作之余还能放松一下。 下面就给大家介绍一下5 款就连大厂设计师都在用的 Figma 插件 1.Clean Document 这款插件可以帮助设计师整理图层，设计稿完成以后，各种乱七八糟的图层和编组不仅自己看着
Qt Design Studio 2.1 发布：组件库重新设计，提供Figma 支持，改善用户体验
qq_42444778的博客
06-02 1899
QQ搜索群号“765444821”加入Qt技术交流群 下载Qt最新版本 Qt Design Studio是一种 UI 设计和开发工具，它使设计人员和开发人员能够为桌面、嵌入式和移动平台快速创建原型并创建精美的体验。设计师和开发人员都使用 Qt Design Studio，这使得两者之间的协作更加简单和高效。 改善用户体验 作为进一步改善用户体验的一部分，新版本再次改进了属性编辑器中的控件。例如，我们通过仅在悬停时显示操作菜单和旋转框的控件来显着降低 UI 中的噪点。这会创建更清晰的 UI 外观.
「新拟物化」过时了！此刻你最应该拥抱的是「玻璃拟物化」
前端达人
12-07 637
转自：优设（ID：uisdcer）还记得今年年初大家追捧的新拟物化（Neumorphism）风格嘛？这种风格最初在社交媒体上风靡，很大程度上，来源于资深设计师Michal Malew...
Figma插件：vscode-icons-figma 使用VS Code图标
文件名称“vscode-icons-figma-master”告诉我们，该插件的源代码被组织在一个名称为“vscode-icons-figma”的项目中，并且我们看到的是该代码库的“master”分支。通常，master分支代表项目的稳定版或最新版，这...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值