18-Figma-微质感图标技法

billycoder billycoder 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 600+累计阅读 635平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄17年
关注
原创 最新推荐文章于 2026-10-17 14:02:11 发布 635 阅读 AI 写同款· GEO 优化 ›
Figma教程上新丨绝了~以为是青铜结果是个王者 UI设计岗位日趋火热的当下，UI设计软件也日渐受到关注。掌握更高效的生产力工具，已成为职场人的加薪技能！ 毫不夸张的说，设计师的日常工作只有 20 %的时间在发挥创意解决问题，80% 的时间都在重复一些机械操作，改颜色、改间距、改排列等等，这些都让整个设计工作冗余、低效还无趣。 网上有句话说的好，成功人士都是工具控。好的工具不仅能够提升劳动效率，连干活儿的心情都能好很多。图片 Figma 是一款更为先进、更理解设计师工作方式和需求的界面设计工具。Figma 让设计师无需再考虑操作系统问题，也不需要管理插件 阅读详情

18-Figma-微质感图标技法

效果

在这里插入图片描述

步骤

1.绘制基础造型

在这里插入图片描述

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

在这里插入图片描述

内阴影
外阴影
收录于
ui设计

当前文章被收录于：

ui设计
38 篇文章 27 人学习
订阅专栏 查看详情
标签
#css3 #css #前端 #figma #ui设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
Figma设计稿直出前端代码：AI驱动的设计资产工程化实践 设计系统不再只是视觉规范，而是可执行的前端工程输入源。当Figma文件以结构化JSON形式暴露语义属性（如layoutMode、constraints、variables），Codex、Claude Code与Cursor等AI工具便能基于设计语义而非像素截图，完成从布局推演、组件抽象到交互逻辑生成的全链路编译。这一转变的核心价值在于弥合设计与开发间的语义鸿沟，提升UI还原一致性与协作效率。典型应用场景包括React+TypeScript组件自动生成、Tailwind类名精准映射、响应式断点自动推导，以及设 阅读详情

相关推荐

AI驱动设计画布：从自然语言到Figma自动化的实现原理与配置实战

在软件开发和界面设计领域，自动化与智能化正深刻改变传统工作流程。其核心原理在于通过自然语言处理（NLP）和应用程序接口（API）技术，将人类模糊的意图转化为机器可执行的精确指令。这项技术的核心价值在于极大提升了设计迭代与工程实践的效率，将从业者从重复性劳动中解放出来，专注于更高层级的创意与决策。其典型应用场景包括自动化设计验收、动态设计系统维护以及基于上下文的创意辅助。本文以**Figma**和**Cursor**为例，深入剖析了如何通过指令解析、上下文感知与API执行三层架构，搭建一个能够理解“把按钮调大

weixin_30652897的博客 379

【Figma学习】图标制作

Figma学习

weixin_47050107的博客 2027

React Native 原生图标实践：用 SF Symbols 和 Material Icons 提升性能与体验

图标是移动端 UI 的基础元素，其加载性能、深色模式适配、无障碍支持和包体积影响直接关系到应用质量与审核通过率。原生图标（如 iOS 的 SF Symbols、Android 的 Material Icons）依托系统渲染引擎，具备零额外体积、毫秒级响应、自动适配动态类型与深色模式等核心优势；相比基于字体的 vector-icons 方案，它规避了字体加载白屏、版权合规风险及跨平台语义失真等问题。在 React Native 工程中，通过分层策略（L1 系统图标优先、L2 定制资源补充、L3 JS 库兜底）

cuililai5127的博客 402

06-figma-形状操作

06-figma-形状操作 形状操作 矩形 圆角操作 单个圆角修改 多个圆角修改 直线 水平垂直线 改颜色 箭头 修改箭头方向 椭圆 画正圆 画扇形 多边形 绘制任意多边形 星形 绘制任意多角星 放置图片… 插入图片 在指定的形状中插入图片,直接放入形状即可，这个和蒙版功能很像 蒙版操作 两个图形层叠摆放-》然后框选2个图形-》点击设为模板 布尔运算 如何触发，两个形状，框选之后就会触发 哪些操作？ 连集所选项 -》加-》形状相

billycoder的专栏 9927

用Codex和AI打造微信小游戏一键换肤自动化链路

AI编程与自动化资源处理正在深刻改变游戏开发流程。通过自然语言生成代码、脚本化导出设计资源以及AI辅助生图，开发者可以将重复性的UI换肤工作转化为可复用、可配置的自动化链路。本文从基础概念出发，介绍如何借助OpenAI Codex搭建微信小游戏项目骨架，并用SkinManager实现皮肤配置化；结合PSD/Figma自动导出脚本，让设计稿资源按原始图层尺寸一键输出；再通过AI生成节日素材并继承图层尺寸，最终串联成一条“设计稿到上线”的全自动换肤流程。这套方案适合小游戏开发团队和独立开发者，能显著降低节日活动

weixin_34378767的博客 743

OpenAI Images 2.0：中文原生设计生成与多轮意图对齐技术解析

文生图技术正从‘能出图’迈向‘精准达意’的新阶段。其核心在于文本-视觉语义对齐能力的突破，尤其在中文理解、多轮交互与设计资产结构化输出三个维度实现代际升级。中文原生支持不再依赖英文翻译中转，而是通过专用分词与领域概念对齐模块（DCAM），让‘蓝白渐变数据流’‘微信公众号首图’等复合提示词被准确建模；多轮意图对齐机制（IIT）则使‘芯片光效强30%’这类量化指令可被持续追踪并定向扰动潜变量。这种能力已超越图像生成本身，支撑PSD分层、SVG矢量、Figma组件等工业级交付，广泛应用于品牌视觉、电商主图、UI界

cqbh2011的博客 469

Figma入门-立体效果

本文介绍如何使用Easometric插件在Figma中创建立体效果，包括安装插件、处理图标、尝试不同视角、复制调整多个面构建立方体，并通过调整透明度和层级实现真实立体效果。

我码玄黄的博客 864

在统信UOS Server 20上踩坑记：手把手教你搞定openGauss 5.0.0企业版安装（附常见报错解决方案）

本文详细记录了在统信UOS Server 20上安装openGauss 5.0企业版的实战经验，包括环境准备、依赖库问题、目录权限、内存参数调优等常见问题的解决方案。通过伪装系统标识、建立软链接、调整内存参数等方法，成功克服国产操作系统与企业级数据库的兼容性挑战，为开发者提供了一份深度排雷指南。

weixin_28698059的博客 265

figma的drop shadow x:0 y:4 blur:6 spread:0 如何写成css样式

figma的drop shadow x:0 y:4 blur:6 spread:0 如何写成css样式

susu1083018911的博客 1048

Cadence psspxf实战：手把手教你仿真250MHz环形VCO的电源抑制比（附Verilog代码）

本文详细介绍了使用Cadence psspxf仿真器对250MHz环形VCO的电源抑制比(PSRR)进行仿真的全流程。从环形VCO的设计原理、Verilog代码实现，到Cadence环境配置、仿真参数设置，再到结果分析与优化技巧，提供了完整的实战指南。特别适合电路设计工程师学习如何评估和优化VCO的抗电源噪声能力。

weixin_42567752的博客 415

pgsql行列转换

‌是PostgreSQL中的一个函数，用于将一个字符串根据正则表达式进行分割，并将结果返回为一个表格，每个分割后的部分作为一行‌‌。string_agg() 函数是 PostgreSQL 中的一个聚合函数，用于将一个列中的值连接成一个字符串。

chimchim66的博客 3505

figma客户端_小白的Figma入门手册

全世界都在用Figma不知道你们有没有这种感觉，仿佛有一天，很突然的，全世界都在使用figma,一个软件从无人问津到现在的如日中天，用了不到3年，而现在，它不仅仅是当下的最优生产力工具，在疫情掀起的远程办公的风潮下，它更为我们揭示了未来设计协作的方式。事实正是如此，大批专业设计团队不惜成本尝试由传统设计软件(sketch等)向Figma转型，只因他们于此看到了代表未来的生产力工具及协作方...

weixin_39815925的博客 6683

基于Spring Boot框架的网上蛋糕销售系统

随着互联网的普及和电子商务的迅猛发展，网上购物已经成为人们日常生活的一部分。蛋糕作为一种受欢迎的食品，其销售市场也逐渐向网络化方向发展。网上蛋糕销售系统能够打破时间和地域的限制，让消费者随时随地浏览和购买蛋糕，同时也为蛋糕商家提供了一个展示和销售产品的平台。该系统的开发旨在提高蛋糕预定和销售的便捷性，节约时间和经济成本，并推动蛋糕市场的进一步发展。开发语言：Java，一种面向对象的编程语言，具有跨平台性、稳定性和安全性等特点，适用于构建大型、复杂的Web应用程序。 框架：Spring Boot，一个基于Sp

2301_81127431的博客 997

如何用Teenyicons图标库让网页变精致？600+免费微型图标上手全攻略

做前端页面时，你是不是常为"图标"发愁？**Teenyicons 图标库**给出了一个轻盈的答案：600+ 个基于 15×15 网格精心设计的微型 SVG 图标，免费开源，轮廓（outline）与实心（solid）两种风格任你挑选。这篇文章就带你从零上手，把这套微型图标真正用进自己的项目里。 ## 从一次"图标荒"说起：我为什么盯上了这个免费微型图标库 去年我维护一个管理后台，导航栏和表格操作

gitblog_00497的博客 210

计算机视觉-全景图像拼接中的特征匹配与优化策略

本文深入探讨了计算机视觉中全景图像拼接的核心技术，重点解析了特征匹配后的关键优化策略。通过SIFT特征提取、RANSAC算法剔除误匹配，并结合APAP算法应对视差与鬼影问题，详细阐述了从基础对齐到无缝融合的完整流程，为开发者实现高质量全景拼接提供了实用指南。

weixin_29039773的博客 362

【腾讯小龙虾 WorkBuddy 专栏 03】技能（Skills）制作全教程！自定义技能编写、导出分享、导入使用一步到位

🔥腾讯AI智能体WorkBuddy自定义技能全攻略 本文为零基础用户提供WorkBuddy自定义技能的完整教程，涵盖技能概念、编写规范到实操全流程。核心内容包括： 技能本质：标准化任务指令模板，可固化重复操作流程 三大价值：一键执行重复任务/跨设备共享/降低使用门槛 实操演示：以"桌面文档自动分类"为例，分步讲解编写、测试、导出 共享方案：支持单技能/批量导出，通过任意渠道传输分享 导入指南：3秒完成他人技能加载，并提供常见问题解决方案 高阶优化：增加异常处理、版本管理等提升技能普适性

AI人人懂 2983

PS、AI、Sketch已经老了？这个新生代工具，大家都在偷学！

UI设计岗位日趋火热的当下，UI设计软件也日渐受到关注。掌握更高效的生产力工具，已成为职场人的加薪技能！毫不夸张的说，设计师的日常工作只有 20 %的时间在发挥创意解决问题，80% 的时间...

传智播客的专栏 406

51-14 Retentive Network，RetNet 多尺度保留机制序列建模论文精读

RetNet 提出了多尺度保留机制序列建模，该机制支持三种计算范式，即并行、循环和分块循环。RetNet有更好的全局注意力建模、高效的计算效率、对遮挡的鲁棒性、支持基于注意力的图像生成、与置信度相关的门控机制和多任务学习等特点，对不同视觉任务可以共享历史注意力记忆，可以同时进行分类、分割、检测等任务。RetNet在视觉领域应该有广阔的应用前景。

AIgraphX 1614

幻境·流金玄金美学系统落地：UI组件库开源、Figma设计系统与开发者SDK文档

本文介绍了幻境·流金玄金美学系统的全面开源，包含UI组件库、Figma设计资源与开发者SDK。开发者可在星图GPU平台上自动化部署⚡ 幻境·流金 (Mirage Flow)镜像，快速构建具备独特美学风格的AI影像生成应用，例如集成到内容创作平台中，实现文本到高质量图片的自动化生成。

weixin_33597080的博客 38

手把手教你学GPU的KMD专栏--3.4 中断处理机制与优化

记住，中断处理是GPU与CPU通信的"桥梁"，没有高效的中断处理，GPU的性能将无法充分发挥。KMD通过"快进快出"原则、事件标志机制、GPU本机围栏等技术，实现高效、低延迟的中断处理。：GPU本机围栏机制允许GPU在满足特定条件（如围栏值达到某个阈值）时才触发中断，而不是每次围栏更新都触发中断，从而显著减少CPU唤醒次数，降低功耗。正如Microsoft GPU架构师在2022年WinHEC大会上指出："没有好的中断处理，再强大的GPU也会被系统延迟拖垮。：多个GPU设备共享中断，导致中断处理混乱。

MHD0815的博客 112

IEM模型，地表粗糙度模拟

利用微波反演土壤水分时候，利用IEM模型可以实现对随机地表的模拟

HAPI 品牌资产体系：图标源文件、设计决策与跨平台导出同步实战

HAPI 是一个面向 Codex / Claude Code / Pi / OpenCode / Kimi Code / Grok Build 等编程 Agent 的移动与 Web 应用，其品牌图标由一套规范化 SVG 源文件统一驱动，覆盖 Web、文档站、官网、Android 与 iOS 五个平台。本文基于仓库中的 [品牌资产文档](https://link.gitcode.com/i/cecd

gitblog_00485的博客 92

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册，内含HL7和ASTM)

解锁2500+精美图标：开源Remix Icon完整使用手册

还在为找不到合适的图标而烦恼吗？Remix Icon为你提供了一套完整的解决方案，包含超过2500个精心设计的SVG矢量图标，完全免费且支持商业使用。无论你是前端开发者、UI设计师还是产品经理，这套图标库都能为你的项目增添专业质感。 ## 为什么选择Remix Icon：五大核心优势 ### 设计统一性保证 所有图标基于24×24像素网格系统设计，线条宽度严格控制在2像素，确保在不同界面和尺寸

gitblog_00022的博客 974

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

OV9734 DATASHEET，完整规格书

OV9734完整规格书，包括电气参数，尺寸规格，寄存器配置表等

AI设计工作流实战：从Figma到代码的自动化生成与协作

在现代软件开发中，自动化工具链正深刻改变设计到开发的传统流程。其核心原理是通过协议与AI模型，将设计资产结构化解析并转化为可执行的代码，从而打通设计与开发之间的壁垒。这一技术的核心价值在于显著提升产品原型的迭代效率，将开发者从重复的界面还原工作中解放出来，专注于业务逻辑与用户体验。典型的应用场景包括快速原型验证、设计系统维护以及独立开发者或小团队的产品MVP构建。本文以Figma MCP、Claude Design、代码生成AI等热词工具为例，系统拆解了如何构建一套从设计构思、视觉生成、代码实现到动态交互的

weixin_33727510的博客 439

jQuery向上翻动广告效果：轻量稳定的功能型微交互实现

向上翻动广告是一种典型的功能型微交互，本质是通过DOM位置变化实现信息分层展示与节奏化引导。其核心原理基于CSS定位控制与JavaScript定时驱动的数值动画，技术价值在于兼容性强、维护成本低、降级容错好，特别适合中小型企业官网、教育落地页、本地生活平台等需运营高频更新的场景。相比CSS动画，jQuery方案在动态内容注入、暂停恢复控制及IE11兼容方面更具工程鲁棒性；而ul/li语义化结构则兼顾可访问性、样式重置效率与选择器性能。本文围绕jquery动画与向上翻动两大热词，详解从设计逻辑、DOM结构、参

weixin_33976072的博客 1004

【UI】常见基础知识整理

本文整理了常见UI知识点。

someone's Blog 2322

artcraft：AI时代创作者的临界判断力系统

在工具高度自动化的今天，‘创作’正从‘完成任务’转向‘定义完成态’——这一转变的核心是人类独有的临界判断力。artcraft并非艺术与工艺的简单叠加，而是一套处理不可算法化决策的隐性操作系统，聚焦于阈值识别、质感翻译、留白计算与衰减校准四大实操维度。它回应了当前设计与开发中普遍存在的‘差不多但不够好’困境，将模糊直觉转化为可记录、可复盘、可迁移的决策逻辑。尤其在AI批量生成初稿的背景下，artcraft成为区分同质化产出与真正‘人味’作品的关键分水岭，广泛应用于UI/UX优化、交互设计、前端体验工程及数字内

weixin_33960567的博客 236
上一篇： vue-自定义组件-自定义checkbox效果
下一篇： 19-Figma-旋转造型绘制技法
点赞 0
评论 0
书签 书签 1
billycoder
billycoder
博客等级 码龄17年 171粉丝 188原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值