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

最新推荐文章于 2024-08-29 08:51:05 发布
最新推荐文章于 2024-08-29 08:51:05 发布
阅读量1.6k 收藏
点赞数
分类专栏： ui设计 文章标签： figma ui设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/billycoder/article/details/122640766
版权

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

最后效果

在这里插入图片描述

步骤

绘制基本结构

在这里插入图片描述

添加基本颜色

在这里插入图片描述

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

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

添加噪点

在这里插入图片描述

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

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

billycoder
关注
专栏目录
Figma#3：色彩
weixin_62428841的博客
01-18 5696
参考视频：【Figma教程】保姆级教程，全网最简单易学的Figma教程03-色彩及团队协作_哔哩哔哩_bilibili1 个人1.1 图层模式选择通过点击小水滴可以进入图层模式选择。
Figma真好用，8个让我不用Sketch的理由
设计“1+2”，摹客就够了！
06-11 1289
前言：设计不断的变化，而设计工具也一直在更新换代，设计师要想提高效率，就要选着好用的设计工具。做 UI/UX 设计，过去最常见的工具是 Axure、Sketch 和 Adobe XD。 这三款软件通常认为前者产品/交互用得多些，后者 UI/视觉用得多些，而 Sketch 通用性比较强，所以我用得最多。 但是自从开始用 Figma 之后，我打开 Sketch 的次数就越来越少了。 1、发展迅猛 一看数据，原来不光是我，Figma 这几年可以说真的是异军突起，不服不行： Figma .
figma 磨砂玻璃图标
tuuujy的博客
06-27 503
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 Squircle：让角部平滑如丝的Flutter神器
最新发布
gitblog_00763的博客
08-29 643
探索Figma Squircle：让角部平滑如丝的Flutter神器 figma_squircleFlutter implementation of Figma's corner smoothing. 项目地址:https://gitcode.com/gh_mirrors/fi/figma_squircle 在寻找能够无缝对接设计与开发之间的桥梁时，我们往往会遇到边角处理的棘手问题。Figma...
20-Figma-2.5D图标绘制技法
billycoder的专栏
01-23 1634
20-Figma-2-5D图标绘制技法 效果 步奏 1.分析案列 2.绘制3个基本矩形 3.通过Easometric插件完成变形 4.完成图形拼合 可以用吸管工具i,随意先上色 5.添加颜色和图片和者文字 背景模糊 线性渐变 图片或者文字也可以变型 复制属性:ctrl+alt+c 粘贴属性:ctrl+alt+v ...
18-Figma-微质感图标技法
billycoder的专栏
01-22 405
18-Figma-微质感图标技法 效果 步骤 1.绘制基础造型 1.绘制基本结构 2.形状->连集所选项 3.形状->连集所选项 2.上色和阴影效果 内阴影 外阴影
第五课：Figma 玻璃拟态页设计
qq_41768447的博客
07-12 2630
若添加背景模糊后会发现不太清楚，可减少透明度时数值；超人电话亭 零基础学 Figma。
feathericon-figma:Figma的简单通用矢量图标集合
05-08
Feathericon是一款专门为Figma设计的简单且通用的矢量图标集合。这款图标集旨在提供一个易用、灵活且高质量的...通过下载的"feathericon-figma-master"，你可以获取到图标集的全部内容，包括源文件，方便自定义和开发。
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:...
eos-icons-figma:EOS图标的Figma扩展
05-07
eos-icons-figma EOS图标的Figma扩展 贡献 遵循Figma插件和。 打开“创建插件”页面，然后选择“ Link existing plugin 。 从eos-icons/manifest.json选择manifest.json文件。
variable-fonts-figma:一个在Figma中运行可变字体的插件
04-01
Figma可变字体 “如果可以在Figma中播放 ，为什么不使用可变字体？” - 一个通过Samsa.js提供基本变量字体支持的插件。 该插件使您可以： 在Figma画布中渲染可变字体 使用可变字体的可变轴创建静态字体实例 将静态...
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。 作者
页面背景高斯模糊与展示页面轮播
03-14
页面背景高斯模糊与展示页面轮播 demo展示地址http://1.coverflow.applinzi.com/Swiper/demos/index.html
print-for-figma:用于Figma的插件启用了打印设计
05-11
打印Figma 直接在Figma中轻松准备打印文档。 Figma的Print是一个非常简单的插件，并且有大量优化空间。 设置 以下是使您的插件运行的步骤。 您也可以在以下位置找到说明： 该插件使用Typescript和NPM，这是创建...
非常好用的10个自用figma插件分享
七小嗨少的博客
07-27 6837
更方便地看到和分享图片。我们都知道电脑屏幕的布局是以宽屏的形式存在的，这意味着，FigmaEX利用横向总宽，在右侧固定一个区域，以显示基本信息，从而快速固定你想要的东西figma插件，而且这个插件是中国人生产的，更让人骄傲。其实在日常使用中，我们要填充的无非是普通的“姓名、地址、电话号码、邮箱”等等，在常用功能中，我们最重要的是要想快速上手，在我打开的时候，Contento可直接使用。有时，如果你想快速连接原始形状之间的交互，你可以使用它，可以连接不同的页面，也可以定制流程线的颜色、厚度、弧形尺寸等。...
figma客户端_50 个 Figma 提示和技巧，让你设计时快如闪电
weixin_39725365的博客
11-30 2889
提示：更多资源文章可以访问我的 Figma 中文网：https://figmacn.com3…2…1！我整理了一些最新和最方便的 Figma 快捷方式和技巧，帮助你节省时间，让你设计快如闪电(译者注：不是《疯狂动物城[1]》里的闪电)。下面开始欣赏视频吧，看看有没有你不知道的。详细文字版：复制图层要复制图层，只需要选择图层并按住 Option(Windows 下是 Alt，下同) 拖动就...
从3个方面，总结 Figma 值得借鉴的交互细节
aimeeth的博客
03-04 690
引言 近一年来，Figma 可谓是体验设计领域中最热门的工具。刚好最近开始频繁的在 Axure 9.0 和Figma中切换使用，深刻的感受到了设计细节带来的体验差异化。今天就通过一些细节亮点，总结下工具软件的体验设计的几个原则。 事先声明，本文不是对比软件工具孰优孰劣，仅仅是为了探讨设计技巧，希望对你有所帮助。 本文主要的内容包括： 效率设计：提高用户行为效率 简洁化设计：降低信息噪点 可视化设计：减少用户思考成本 效率设计 工具软件首要的任务就是追求效率，减少用户的操作成本。 1. 模..
figma 安装插件_使用figma插件快速生成颜色系统
weixin_26715991的博客
09-15 6057
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 5056
用过 Sketch 的同学都体会过插件的重要性，目前 Figma 的插件所覆盖的功能已经不输给 Sketch 了，基本上你在 Sketch 常用的插件，在 Figma 都能找到，不仅如此，Figma 基于在线工具的天然游戏，在插件的玩法上想象空间更大，比如你你可以通过插件直接听歌，或者玩游戏，在工作之余还能放松一下。 下面就给大家介绍一下5 款就连大厂设计师都在用的 Figma 插件 1.Clean Document 这款插件可以帮助设计师整理图层，设计稿完成以后，各种乱七八糟的图层和编组不仅自己看着
Figma-Low-Code
05-11
Figma-Low-Code是一种基于Figma设计工具的低代码平台，它允许用户通过可视化方式，快速创建Web和移动应用程序的原型和交互界面，无需编写代码。Figma-Low-Code平台提供了丰富的组件库、模板和插件，用户可以通过拖拽组件、链接页面、设置动画效果等方式来构建应用程序的原型和交互界面。同时，它还支持团队协作和版本控制，让多个用户同时协作设计和开发应用程序。Figma-Low-Code平台的出现，大大降低了应用程序开发的门槛，提高了开发效率，加速了产品的上线和迭代。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值