📰 设计资讯
Figma 变量支持可缩放控制不透明度
Figma 在 2026 年 9 月 3 日的更新中，增加了在变量面板里批量控制不透明度的能力。不需要解除颜色变量的链接，就可以在颜色之上叠加不透明度；也可以使用数字变量设置不透明度，并将它限定为颜色变量使用。
这让禁用状态、遮罩层和 scrim 等场景的透明度可以统一管理和批量更新，颜色变量仍然保持与设计系统的关联，不必再逐个手动调整。
官方记录：https://www.figma.com/release-notes/
Figma 生成式插件与着色器更新
Figma 在 Config 发布自定义生成式插件和着色器之后，又补充了动画与交互、社区发布、组织内发布、代码查看器等能力。现在可以让 Agent 创建带动画、能够响应鼠标移动的着色器效果，也可以把生成式插件和着色器发布到 Figma Community，供其他人使用和 remix。
此外，用户可以直接查看和下载着色器以及自己创建的生成式插件代码；通过 Figma MCP，第三方 Agent 也能查看和修改这些生成式插件与着色器。组织版和企业版还支持将私有资源发布到组织内部统一使用。
官方记录：https://www.figma.com/release-notes/
Figma Draw 加入橡皮擦和油漆桶
Figma Draw 最近把两个很熟悉的绘图工具带回了矢量编辑流程：橡皮擦可以直接擦掉路径或形状的一部分，油漆桶则可以为封闭区域填充纯色或渐变，也可以拖动一次修改多个区域的颜色。
橡皮擦不会把对象简单地变成一张位图，而是会在擦除位置生成新的可编辑矢量点；油漆桶也保留在同一个矢量网络里。对于做图标、插画、贴纸和图形 Logo 的设计师来说，这种操作比反复切割路径更接近手绘时的直觉。快捷键是 Shift + E 切换橡皮擦，Shift + B 使用油漆桶。
功能说明：https://help.figma.com/hc/en-us/articles/360039957634-Edit-vector-layers
更新记录：https://www.figma.com/release-notes/
Figma MCP 企业托管授权正式开放
Figma MCP 的企业托管授权现在已经正式开放。组织管理员可以通过身份提供商集中管理 MCP Server 与 AI Agent 的连接，成员不需要每个人都重复走 OAuth 登录和授权流程。
当前文档以 Okta Cross App Access 为例：成员通过企业身份系统登录一次，Claude 就可以在组织批准的范围内使用 Figma MCP。它解决的不是“如何让 Agent 读到设计稿”，而是团队规模变大以后，如何把权限、登录和审计纳入原有的 IT 管理流程。这个功能目前适用于 Organization 和 Enterprise 计划，并且文档注明支持 Anthropic models。
Figma Auto Layout 的间距命名开始对齐 CSS
Figma 的 Auto Layout 新增了 Around 和 Evenly 两种自动间距方式，并把原本的默认方式重新命名为 Between。三个选项分别对应 CSS 中常见的 space-between、space-around 和 space-evenly 逻辑。
Between 只在元素之间分配间距，边缘不留额外空间；Around 会在每个元素两侧分配空间，边缘间距是中间间距的一半；Evenly 则让元素之间以及两端的间距完全一致。对于需要从设计稿直接还原到 Flexbox 的界面，这种命名和行为的统一能减少“看起来差不多、代码却要重新猜”的情况。
官方说明：https://www.figma.com/release-notes/
🏆 产品推荐
Claude Code 里的设计画布：/design
Anthropic 把 Claude Design 的画板工作流带进了 Claude Code。输入 /design 后，Claude 会先生成多个可编辑的界面方案，设计师可以挑选一个、直接在画布上调整，再让 Agent 按这个版本继续实现，而不是从一句模糊 Prompt 直接跳到代码。
它适合用在还没有确定布局的功能：先比较几个方向，再把选中的画板交给现有代码库。Claude Design 的更新说明还提到，/design-sync 可以把设计系统带入工作流，尽量沿用已有组件和规则。需要注意的是，/design 目前仍属于研究预览，使用时最好把它当作快速探索和沟通工具，关键的组件、交互和无障碍细节仍然要自己验收。
官方介绍：https://claude.com/blog/claude-design-stays-on-brand-for-daily-work
进度条 - 会呼吸的 Shader：MetalForge
MetalForge 是一个面向 SwiftUI 和 React Native 的 Shader 可视化编辑器，不需要先写 Metal 或 GLSL，就可以通过滑块调整效果，再预览并分享参数 URL。它支持导出真正的 .metal 文件、SwiftUI View，以及 React Native（Skia）Shader，适合用来制作更有质感的加载、进度和 Agent 工作状态动画。
预览：https://metalforge.xyz/editor#tool=progress
设计系统加上“设计判断”的 Better Design
Better Design 是一套面向 coding agent 的设计系统与 MCP 工具。它提供设计系统、界面原则、UX 指导、图标、素材和审查规则，目标是让 Agent 在生成页面时先读取设计上下文，并在修改代码后继续做设计层面的检查。
它和普通组件库的区别在于：组件只是“能用什么”，而设计指导还要回答“什么时候用、如何组合、怎样判断结果是否合理”。如果你已经在使用 v0、Claude Code 或其他 MCP 客户端，可以把它当成一层独立的设计顾问；项目主页还提供了可以直接安装到编辑器的 MCP。
对比说明：https://better-design.com/vs/v0
不依赖大型图表库的 Sync UI Charts
Sync UI 最近发布了 Charts，包含 Bar、Donut、Heatmap、Line、Progress 和 Stat 等常见图表，组件带有动画、主题变量和深色模式，并且 CLI 与 MCP 已经同步支持。
它适合用在需要快速搭建后台、数据产品或 AI 工作台的项目里：图表和其他组件采用同一套 syncui add 工作流，不需要额外引入一套完全不同的图表 API。图表可以继续使用项目自己的 Token 做主题化，比较适合先快速搭出信息结构，再回到代码里调整数据密度、动画和交互。
更新记录：https://www.syncui.design/docs/changelog
Logo 网格编辑器：Logo Lattice
Logo Lattice 是一个浏览器里的 Logo 编辑器，围绕方格和等距网格来绘制几何 Logo，支持 SVG 和 PNG 导出。最近的更新包括 SVG 描边圆角、等距绘制、可自定义 PNG 尺寸，以及更清晰的网格绘制引导。
它不是用来替代 Illustrator 的完整矢量软件，而是把“从几何约束出发做一个小 Logo”这件事做得更直接。想练习图形构成、快速做一个 App 图标，或给一个新项目先建立几个方向时，都可以打开它试试。免费浏览和编辑，部分 Studio 功能需要订阅。
更新记录：https://logolattice.com/change-log
设计验收清单变成 Agent 团队：Superflow
Superflow 是一个面向网站和数字资产的 AI Review 工具。它可以把团队已有的 QA 清单变成多个审核 Agent，检查断链、拼写、基础无障碍、SEO，以及品牌颜色和字体是否符合规范；发现问题后会把评论固定在页面元素上，而不是只给一份难以定位的报告。
它保留了 human-in-the-loop：AI 负责第一轮检查，团队和客户仍然需要确认、修改和签字。对于设计师和小型工作室来说，比较实用的地方是把“交付前再看一遍”的经验变成可重复执行的流程，尤其适合同时维护多个网站或营销页面的场景。
🎊 设计素材
色彩的渐变生成器：FeralUI Gradients
FeralUI Gradients 是一个免费的在线渐变生成器，使用传统日式色彩来组合柔和、带有绘画感的渐变。选择渐变类型、混合颜色和边缘衰减后，可以实时预览结果，不需要注册，也不会添加水印。
它提供了 20 多种类型，包括动态 Mesh、颗粒感复古 Blob、Aurora 光带、Wave，以及线性、径向、锥形和像素网格等渐变。静态效果可以导出为 SVG 或 PNG，动态效果可以导出为 MP4；复制 SVG 后，还能直接粘贴到 Figma，并作为带名称的可编辑图层继续调整。
在线使用：https://feralui.dev/gradients
浏览器里测量与视觉反馈工具：Mesurer
Mesurer 是一款基于浏览器的 UI Inspector，适合在开发过程中直接检查页面界面。安装 Chrome 扩展后，可以选取页面元素查看尺寸、间距和对齐关系，也支持像素标尺、横竖辅助线、按住 Alt 快速检查间距、颜色取样、文字样式检查和 X-ray 结构查看。
它还可以截取当前可见区域，并复制到剪贴板或下载到本地。对于设计还原、像素级验收，或者需要给 coding agent 提供更精确视觉反馈的场景，Mesurer 能把“这里差一点”变成更具体的测量结果和截图标注。
界面截图做成产品摄影：UI Camera
UI Camera 是一个在浏览器里制作软件产品视觉素材的工具。上传 PNG、JPG、WEBP、AVIF、GIF，或 MP4、MOV、WEBM 后，可以像操作一台 3D 相机一样调整 X、Y、Z 视角，选择 16:9 等画幅，并在图片和视频模式之间切换。
它适合把普通的 UI 截图变成更有空间感的产品展示图或演示视频，用于产品介绍、案例展示和社交媒体配图。调整好角度后还能直接截取 PNG，整个过程比较适合快速做出一组风格统一的界面视觉。
精美的圆形加载动画：Circle Loaders
Circle Loaders 收集了 24 个黑白风格的圆形加载动画，全部使用原生 SVG 制作，不依赖任何 JavaScript 或第三方库。每个动画都可以直接复制 SVG 代码，适合放进网页、应用加载状态、AI Agent 处理中状态和各种空状态界面。
它的细节很适合拿来做微交互参考：同样是圆形，既可以用旋转、分段、扫描和呼吸感表达“正在等待”，也可以用更有节奏的变化表现 Agent 正在工作。网站还提供了面向开发者的复制入口，使用时可以先确认动画的尺寸、颜色和 prefers-reduced-motion 处理是否符合自己的项目。
在线浏览：https://circleloaders.dominikakissi.com
更多内容：https://shoogle.dev/fresh
让 CSS 阴影跟随光源变化：Ambient CSS
Ambient CSS 是一个基于物理光照的 CSS 系统。只需要定义光源，阴影、高光和表面渐变就会根据同一套光照关系自动变化；它参考 Blender 的光线追踪结果进行校准，最终使用 CSS box-shadow 渲染。
它适合用来理解界面中的光照方向、阴影层次和表面质感，也可以作为制作卡片、按钮和悬浮面板视觉效果的参考。相比单独调整多层阴影，这种方式更容易让同一组组件保持一致的光照逻辑。
在线体验：https://ambientcss.vercel.app/
基于 CSS 混合模式的氛围渐变：Aura Gradients
Aura Gradients 是一个免费的氛围渐变素材库，使用分层渐变和 CSS 混合模式制作柔和、带有空间感的背景。网站目前收录 200 多个渐变，提供 Aura、Mesh、Nebula、Prism、Lattice、Grain、Glass 和 Flux 等分类。
每个渐变都可以先预览，再进入自定义编辑，也支持复制 Prompt，适合快速为网站、产品界面或作品集寻找背景方向。项目开源，动画渐变和更多自定义能力也在持续开发中。
在线浏览：https://auragradients.vercel.app/
有趣的手绘动画图标库
很有意思的手绘动画图标库，每个图标都有活泼的小动画，手绘感很强，很适合用在一些偏个性、轻松有趣的产品或网页中。
图标支持导出为 Animated SVG，也可以放到 Figma 中继续编辑。目前已经制作了约 150 个图标，作者 计划后续扩充到 1500 个，值得持续关注。
网站：https://oreoui.com/doodle-icons
Github：https://github.com/oreo-design/doodle-icons
设计灵感库
很适合日常逛的设计灵感库，收集了来自互联网的优秀视觉设计作品，涵盖 Web、品牌、产品、动效、插画、3D、印刷等多个分类。
网站整体很干净，可以直接按分类筛选，适合找项目灵感、做 Moodboard，或者没事的时候随手刷刷最近的好设计。内容还会持续更新。
网站：https://www.inspora.design/
我们是谁？
Moonvy 月维是一款专业的「设计资源管理工具」，让设计图的管理与交付在浏览器中就能轻松完成。提供更高效的切图、标注体验，并支持多种开发代码格式，让设计交付更省心、更顺畅。（moonvy.com）
