20-Figma-2.5D图标绘制技法

原创 已于 2022-01-23 16:29:34 修改 · 1.9k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#figma #ui设计

于 2022-01-23 07:24:39 首次发布
本文介绍使用Figma绘制2.5D图标的具体步骤：从基础形状开始，利用Isometric插件变形，完成图形组合，并介绍如何添加颜色、背景模糊等效果。

20-Figma-2.5D图标绘制技法

效果

在这里插入图片描述

步奏

1.分析案列

在这里插入图片描述

2.绘制3个基本矩形

在这里插入图片描述

3.通过Easometric插件完成变形

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

4.完成图形拼合

最低0.47元/天 解锁文章
17-Figma-磨砂图标绘制技法
billycoder的专栏
01-22 2118
17-Figma-磨砂图标绘制技法 最后效果 步骤 绘制基本结构 添加基本颜色 渐变填充 描边使用径向渐变 大量用了复制属性 混合模式用了叠加 添加背景模糊 添加噪点 用到了noise插件 用到了蒙版 用到了编组 用到了合并形状 拓展 ...
Figma使用问题（更新自己遇到的问题）
技术小白=-=的博客
03-27 8545
记录型笔记（主要记录Figma使用问题和插件使用过程）
第四课：Figma 图标设计
qq_41768447的博客
07-07 4106
带角度的箭头 shift + L ，按住 shift 键调整以 45 度角调整箭头方向，右侧属性面板可调节箭头方向和线条类型：圆角/直角。绘制图标时，需要多大尺寸的图标，建立多大尺寸的画板，绘制好图标后，按住 alt 键将画板拖入界面中，可保持画板大小，统一图标规范；选择形状，点击右侧属性面板的颜色，切换渐变模式，Linear 中选择渐变类型；选择线段，右键，选择 Outline stroke，即可将线段转为形状；正方体 R + shift，右侧属性面板可调整描边显示方向，描边类型；
【Figma学习】图标制作
weixin_47050107的博客
08-16 1888
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 高效技巧：设计系统中的图标嵌套
我码玄黄的博客
05-01 2327
在设计中，图标起着不可或缺的作用。一套便捷易用的图标嵌套方法可以有效提高设计效率。
【开发工具】Figma入门
最新发布
大雨的博客
07-16 5569
Figma是一款基于云端的UI/UX设计工具，支持跨平台协作与实时同步编辑。文章详细介绍了Figma的核心功能：云端协作、矢量图形编辑、原型设计、组件复用等特性，并提供了从界面基础到图标设计、自动布局等功能的系统教程。同时分享了高效使用技巧如快捷键操作、批量处理等实用方法，推荐了官方插件市场、设计素材网站等学习资源。通过音乐播放器界面等实战案例，帮助读者快速掌握这一设计工具，提升团队协作效率与设计质量。
Figma教程上新丨绝了~以为是青铜结果是个王者
weixin_51689029的博客
11-05 1040
UI设计岗位日趋火热的当下，UI设计软件也日渐受到关注。掌握更高效的生产力工具，已成为职场人的加薪技能！ 毫不夸张的说，设计师的日常工作只有 20 %的时间在发挥创意解决问题，80% 的时间都在重复一些机械操作，改颜色、改间距、改排列等等，这些都让整个设计工作冗余、低效还无趣。 网上有句话说的好，成功人士都是工具控。好的工具不仅能够提升劳动效率，连干活儿的心情都能好很多。图片 Figma 是一款更为先进、更理解设计师工作方式和需求的界面设计工具。Figma 让设计师无需再考虑操作系统问题，也不需要管理插件
Figma真好用，8个让我不用Sketch的理由
设计“1+2”，摹客就够了！
06-11 1490
前言：设计不断的变化，而设计工具也一直在更新换代，设计师要想提高效率，就要选着好用的设计工具。做 UI/UX 设计，过去最常见的工具是 Axure、Sketch 和 Adobe XD。 这三款软件通常认为前者产品/交互用得多些，后者 UI/视觉用得多些，而 Sketch 通用性比较强，所以我用得最多。 但是自从开始用 Figma 之后，我打开 Sketch 的次数就越来越少了。 1、发展迅猛 一看数据，原来不光是我，Figma 这几年可以说真的是异军突起，不服不行： Figma .
10个改变你Figma体验的高效插件！
2301_79599164的博客
11-09 552
这个工具可以使Figma的所有插件直接悬浮在右边的画布上，最重要的是显示每个插件的logo，更容易找到。在Figma中，文本不能倾斜，这个工具可以调整X和Y轴的调整角度，这个过程是非破坏性的，文本可以在倾斜后继续编辑。通过三轴和透视的参数条件，我们可以达到我们想要的3d效果，非常舒适。非常强大的内容填充工具，可以直接连接到谷歌的服务，直接导入自己设置的表单数据，甚至可以实时更新。这个工具提供了许多常见的3d原型，我们可以将我们的设计应用到原型中进行显示，它支持调整视角，非常容易产生效果！
好用还免费的10个Figma插件推荐
FourxiYuanzi的博客
04-13 2017
Figma是一款广受设计师喜爱的工具，可用于创建和协作用户界面、图形和原型。它广泛应用的原因之一是因为有许多插件可供选择，可以增强其功能。在本文中，我们将探讨10个设计师必备的Figma插件。
Figma入门-形状工具
我码玄黄的博客
11-26 3504
Figma原型图制作流行，内置组件友好。本文介绍Figma形状工具使用，包括矩形、直线等七种形式，折线、圆角、角数修改及形状组合技巧，可制作炫酷图标。
figma都有哪些小技巧，分享3个给你
七小嗨少的博客
10-27 2189
假设第一种绘制问题现在很高，我们可以水平翻转.垂直翻转，此时你调整高度没有问题，但要调整宽度你必须（水）+垂)调回去。例如，在这种情况下，实际间距为1.5px，但是你看操作面板是显示2px，数据对不起怎么办？组件命名的方式就像一个子，一圈一圈，也许这里每个人的习惯都会不一样，所以命名方式也会不一样。当我们建立规范时，我们通常有一个习惯，就是先归类，颜色.图标.等等，比如腾讯的这种方式。确定大类后，根据大类，Tab栏目分为小类，如语雀的Tab栏：小记.文档.消息.我的。第三步：整体向上旋转，给圆角。
2.5D地图GIS系统技术方案
热门推荐
u011180278的博客
03-05 1万+
2.5D地图GIS概述 1.1. 概述 2.5维地图就是根据dem、dom、dlg等数据，以及真三维模型在一定高度、视角和灯光效果，按照轴侧投影的方式生成的地图。本文以电子地图服务平台为例，详细阐述了2.5维电子地图关键技术以及其实现方式。 1.2. 地图的发展和概述 地图作为记录地理信息的一种图形语言形式是按照一定的数学法则，根据地图投影、地理坐标和比例尺，经过制图概括，在一定的...
06-figma-形状操作
billycoder的专栏
01-20 9583
06-figma-形状操作 形状操作 矩形 圆角操作 单个圆角修改 多个圆角修改 直线 水平垂直线 改颜色 箭头 修改箭头方向 椭圆 画正圆 画扇形 多边形 绘制任意多边形 星形 绘制任意多角星 放置图片… 插入图片 在指定的形状中插入图片,直接放入形状即可，这个和蒙版功能很像 蒙版操作 两个图形层叠摆放-》然后框选2个图形-》点击设为模板 布尔运算 如何触发，两个形状，框选之后就会触发 哪些操作？ 连集所选项 -》加-》形状相
2.5D架构图绘制工具
代码大师麦克拉瑞的博客
02-21 3719
亚马逊架构图绘制工具:https://www.cloudcraft.co/ 可绘制2.5D或者平面图，并且可以导出svg，前端同学有福了。
UI: 设计复用时代——人物与场景自主切换的插图设计库
手写我对你的温柔
04-11 561
像讯飞的： 人物UI都是复用的。 Humaaans是可以配合我们熟悉的figma使用的，提供了插件，当然还可以配合其他的。 安装后，新建一个frame，然后使用插件： 他弹出了这个画面，让我们选择，剩下的就是自己搭配衣服、头饰、背景等等、完全自定义。 然后可以导出为svg或者其他格式以便使用。 看到了吗，就拿头这部分而言，是可以自己更换的，实现UI复用。 ...
figma 安装插件_figma插件教程6 6
weixin_26715991的博客
08-16 5336
figma 安装插件** The code for this section is here.** **此部分的代码 在这里 。** Okay so we have done a lot of work but our plugin still looks like ???? hot trash™ and is missing some reactiveness. 好的，我们已经做了很多工作，但是我们...
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...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值