月球背面

中国 UI 设计比西方更复杂？

Wed, 01 Apr 2026 16:00:00 GMT

我们都知道，中国的 App 界面设计总是给人高信息密度、布局紧凑的印象，以至于很多人会感到这些 App 界面过于杂乱，尤其是不同国家地区文化的用户。

至于原因，业内众所周知的原因主要有 3 点：

App 平台化

中国的互联网公司很喜欢以 App 为中心扩张业务范围，背后的原因是在中国基于网页搜索引擎的流量来源在移动互联网时代被近乎完全的抛弃，作为垄断地位的搜索引擎百度已经被边缘化。App 是最重要的「流量入口」，公司 App 靠主营业务吸引用户，再在 App 中推出一系列其他的业务。

所以你可以在类似 Uber 的打车 App（滴滴打车）中贷款、开信用卡、买保险、叫家政。在类似 Dropbox 的网络存储 App（百度网盘）中浏览网页、像 Netflix 一样看电影、像 TikTok 一样看短视频、甚至求职。

意想不到的业务

想象一下 Google 把它的所有业务融合成一个 App，中国的 App 就是这样的产品模式，这就是 App 的平台化。一个 App 的涉及的业务如此之广，意味着功能会非常多，用户界面不可避免的要变得根据复杂臃肿。

绩效驱动的设计

在中国 App 的 UI 设计师的权力范围大多只涉及到视觉呈现，而功能布局大多数时候设计师可做不了主，不同业务的负责人都想方设法让自己的业务尽可能争取界面中更多曝光，而这种情况下界面布局只能由上一级负责人来协调，设计师只能视觉上优化被指派的功能布局。

而这样绩效驱动的设计，自然要榨干屏幕上尽可能多的空间来产生最大的效益，留白就是在寸土寸金的屏幕上浪费金钱。

无论界面设计还是用户体验要为业务完全的让位，最极端的体现就是在中国很多 App 的启动时会有非常长时间的启动广告（开屏广告），并且会随机的强制跳转到广告商的 App 或者网页，你必须前往广告商的 App（例如一个购物 App 的促销产品）后再回到原来想要打开的 App。

所以说，UI 设计其实由设计师决定的部分没有很多，更多的是由业务和商业模式决定的

语言文化差异

最后就是语言文化的差异了，汉字的信息密度会比拉丁文字更高，这在界面设计上也有显著影响，比如用中文设计里能轻松的设计紧凑的宫格，而拉丁文字的设计下，由于文本过长就很难设计的很紧密。

此外按人类学家（Edward T. Hall）的说法，中国是高语境文化（High-Context Culture），在高语境文化下，人们更倾向于从丰富的信息中提取有用的信息，而不是对此排斥。

另外一个语言差异是搜索，由于使用拼音输入中文进行搜索相比英文直接输入要更慢，搜索的优先级并没有那么的高。

如果排除商业因素呢

商业元素是中国 App 设计中最重要的因素，那如果排除商业因素呢，这里我找到了一些很好的例子，就是「博物馆」的 App，各国的博物馆的 App 商业模式差异较小，由绩效主导的程度也较小，设计师的权力范围相对较大，这些 App 的界面设计就更能反映出不同国家地区文化的差异了。

这里我们选取了中国国家博物馆、首都博物馆的官方 App 与西方常用的博物馆 App Bloomberg Connects、British Museum 来对比一下。

我们可以看到，在中国的博物馆 App 的界面设计相比商业 App 简洁一些，但不多，但仍然保留了较高的信息密度和复杂性，而和西方博物馆 App，最大的不一样是着陆页的导航，中国的 App 非常喜欢把尽可能多的功能入口以宫格的形式放在着陆页上，而西方的 App 则的着陆页缺少功能入口，倾向于让用户去导航栏或者搜索栏去寻找功能入口。

看来，商业因素虽然是中国 App 设计中重要的因素，但即使排除商业因素，中国的 App 设计仍然与西方差异很大，最大的差异就是着陆页的功能导航上，看来不管是因为真的文化差异还是用户的使用习惯已经被商业 App 塑造了，中国人确实更喜欢更高信息密度和平铺导航的界面设计。

最后

最后我想说的是，某一个 App 的界面设计风格可能是设计师或者产品团队的设计决策，但如果要论群体的设计风格，它更多的是有商业模式和文化环境所决定的，再追根溯源，其实是由消费者所决定的，最终的消费者选择了什么样的产品，什么样的产品就存活下来，而存活下来的产品的设计风格就会被模仿和延续，形成了一个文化环境，最终形成了一个国家地区的设计风格。

为什么选择 Moonvy 月维?

Mon, 26 Jan 2026 16:00:00 GMT

为什么不用 Figma 自身来交付

你可能有疑问，Figma 本身也可以交给工程师进行协作开发，为什么还需要一个第三方工具，这里就揭示给你为什么那么多团队使用 Moonvy 月维进行交付的理由：

更好用

Moonvy 月维提供的设计交付功能更加强大，并且由于专注于交付上手起来更加容易，比 Figma 有更人性化的操作体验，比如快速多选复制文本、查看图层轮廓。

Moonvy 月维甚至能实现很多 Figma Dev Mode 不能实现的图层效果，如渐变描边、多层文本渐变等。

此外还有切图压缩、CSS rem/vw/vh、微信小程序 rpx、设计倍数切换、专业色彩格式切换等开发者非常需要的功能，可以说在把设计交付给工程师这件事上 Moonvy 月维比 Figma 更好用更强大。

自由切换设计工具，鸡蛋不放在一个篮子里

使用 Moonvy 月维这样的专门的第三方设计交付工具，可以让团队同时使用不同的设计工具如 Figma、Sketch、即时设计等，这样无论设计师使用什么工具，给到工程团队的交付流程与体验能保持一致，即使某个工具出现问题暂时不能使用，也不会影响项目的正常进行。

更便宜

Figma 专业版的席位更加昂贵，在 2024 年后 Dev Mode 也会只有付费后才能使用。通过 Moonvy 月维来进行交付设计能给你省下更多的团队成本。

更专业的设计交付

为了帮助工程师能够轻松的还原设计图每个细节，我们提供了最专业的设计标注与代码生成功能，相比 Figma 自带的 Dev Mode 更加强大。

更人性化的操作体验，工程师实现设计图更高效；
不惧复杂图层与特殊效果，Moonvy 能识别更复杂的设计图，各种特殊的效果都能完美生成代码，甚至 Figma 自带的 Dev Mode 不支持的效果也能通过月维实现；
结构布局一目了然，用「图层轮廓」在开发前先了解页面布局；
设计图到链接文档，串联各个工具。

更强的设计管理

强大的设计管理可以打造一个团队设计资源的唯一信息来源，让团队协作更省心，多类型资源随取随用。

用最适合的方式展示你的设计，设计图逻辑关系用画布视图，设计素材灵感用瀑布流的图墙视图、SVG 插画库用可以用图标视图，多种视图只为更好呈现你的设计。
按你的用途整理文件，动画、视频、图片、设计图都可以在一个文件夹里存储。
在一个页面掌握项目，通过项目概览可以方便看到整个项目的更新情况。

轻松的团队协作

开发进度、任务迭代使用标签管理进度一目了然。
使用「看这里」强提醒在线成员，不遗漏重要消息。
任何文件都可以添加评论和备注，将宝贵的讨论过程保留下来。

极致的用户体验

让操作习惯保持一致，我们为鼠标滚动增加习惯设置。
设计图可以单独设置背景，呈现最好的设计效果。
记不清素材的名称？通过颜色标签可以找到它。
同过「在线的团队成员」将自己传送到对方正在看的设计图一起参与。

与设计师在一起

相比其他产品的团队，Moonvy 月维是一个更用心在设计上、更关心设计师的团队，我们为设计师推出了一系列的好用的工具，并且建立了最有爱的设计师社群，我们希望长期的为设计师这个群体做出更有价值也更有趣的贡献。

哪个版本适合你？

个人大会员

对偏个人用途的用户，我们提供了「个人大会员」套餐，除了增加基础用量外，未来还会获得增值功能（FigmaEX 同步数据等）。

团队容量 + 10GB
为免费版团队增加 1 位成员额度（可以通过购买大会员构成 10 ~ 20 之间规模的团队）

迁移指南

帮助你快速理解月维的使用逻辑，顺利完成工具的更换并继续高效交付。

了解如何从 蓝湖、摹客或其他设计交付平台 更换到 Moonvy 月维

迁移旧习惯

月维是通过 「设计图文件名称」 来判断是否自动覆盖的，这样可以更灵活地 手动控制设计图的覆盖规则。

如果你仍然希望使用 画板 ID 的方式，可以在 月维 Figma 插件 的设置页面中：

勾选：☑️ 按照画板 UID 上传

设置后，设计图的覆盖规则将与蓝湖保持一致。

img

更多迁移细节前往，迁移指南

Axure 文件托管

月维支持 **Axure 原型文件托管

操作方式如下：

在 Axure 中导出 HTML
将 包含 HTML 的整个文件夹 上传至月维
即可在月维中 同时查看设计图与原型

👉 查看 Axure 文件上传详细帮助

完成以上设置后，即可继续使用 月维进行设计交付。

了解更多功能细节，戳这里

月维新增设计图字体下载功能

Sat, 03 Jan 2026 16:00:00 GMT

现在月维上的设计标注，可以支持下载字体文件了。

支持中文大部分免费商用字体，以及 Figma 中的设计师可以直接使用的用谷歌字体，都可以支持。设计师不用任何操作。

如何操作

打开 Moonvy 月维上的设计标注，选中文本字体，在右侧面板中找到文本属性

点击「下载字体」或者「谷歌字体」按钮，就可以下载

下载后的压缩包内就有 ttf 或者 woff2 格式的字体文件了

需要注意的是，目前不支持上传自定义字体，仅支持匹配 Fimga 中的 Google 字体和常见商业免费字体。

这里推荐几个网页字体工具：

中文字体子集化工具，按需加载部分字体： https://chinese-font.netlify.app/zh-cn/
字体格式转换工具：https://fontsource.org/tools/converter

设计素材周刊 218 期

Sat, 01 Aug 2026 16:00:00 GMT

Figma 推出了新版 Auto Layout，进一步缩小设计画布与前端 CSS 布局之间的差异。过去，一些布局在 Figma 和浏览器中的表现并不完全一致，开发者需要在交付后额外编写代码进行修正；新版布局逻辑能够让最终实现更贴近设计稿，减少还原时的变通处理。新建 Frame 会自动使用新版 Auto Layout，已有 Frame 则会继续保持旧版，用户可以自行选择升级，并可在 2027 年 1 月前切回旧版。

https://help.figma.com/hc/en-us/articles/42031586813719-Use-auto-layout-with-CSS-Flexbox-in-mind

Figma 导入代码界面时可自动绑定设计变量

现在，将代码生成的界面带回 Figma 画布时，其中的颜色、字体和间距会尽可能自动绑定到文件中已有的 Variables，而不再全部变成难以维护的固定值。这项能力适用于将 Figma Make 预览复制为设计图层、通过 Figma MCP Server 从代码生成设计，以及使用 Chrome 扩展将线上网页捕获为可编辑图层等场景。同时，更多导入的 Frame 会自动采用 Auto Layout，使后续编辑时能够正常缩放和重排，大幅减少从代码或旧页面还原设计后的手动整理工作。

https://www.figma.com/release-notes/

🏆 产品推荐

与 AI Agent 一起设计的专业设计工具：Brilliant

Brilliant 是一款面向 AI 时代的专业矢量设计工具，可以让设计师与 AI Agent 直接在同一块画布上协作。它既支持内置 AI 对话，也能通过 MCP 连接 Claude Code、Cursor、Codex 和 GitHub Copilot 等工具，让 Agent 创建或修改设计，而生成的结果仍是可以手动编辑的原生矢量图层。Brilliant 还提供设计系统、Figma 双向导入导出、并行 Agent、React 与 HTML/CSS 代码复制，以及图片、视频等多种格式的导出能力。

https://brilliant.design/

复古孔版印刷风照片加工 App：tone

tone 是一款能将照片快速转换为复古孔版印刷效果的 iOS 应用。导入照片后，它会利用半色调网点、颗粒、油墨叠印与纸张纹理，生成类似双色海报或 ZINE 的印刷质感。应用支持 1～3 色叠印，可分别调整网点大小、角度与油墨浓度，还能自定义纸张、留白、画幅比例和圆角；喜欢的效果可以保存为预设，最终以 PNG 格式导出。应用可免费下载，部分油墨颜色、预设保存与高分辨率导出功能需要付费解锁。

App Store：https://apps.apple.com/jp/app/tone-%E7%B4%99%E3%81%AB%E5%88%B7%E3%81%A3%E3%81%9F%E3%82%88%E3%81%86%E3%81%AA%E5%86%99%E7%9C%9F%E5%8A%A0%E5%B7%A5/id6792391699

Figma 图片拱形弯曲插件：Numeric Arch Warp

Numeric Arch Warp 是一款可以在 Figma 中通过具体数值制作拱形弯曲效果的插件，支持图片、Frame、组件实例以及带有图片填充的设计元素。与手动拖动锚点不同，它可以保存并复用同一组弯曲参数，即使替换成另一张图片，也能保持完全一致的弯曲程度。插件不仅改变外框，还会让内部的图片内容一起向上或向下拱起，非常适合制作产品图、封面、海报、Mockup 和各种视觉实验。处理过程完全在本地完成，生成结果会以带透明背景的 PNG 放回 Figma；建议保留原始可编辑图层，以便替换内容后重新生成。

https://www.figma.com/community/plugin/1648931677024157590/numeric-arch-warp

让 Tailwind 阴影更细腻的插件：Shadow

Shadow 是一款专为 Tailwind CSS 打造的平滑阴影插件，通过多层 CSS 阴影让卡片、弹窗、下拉菜单等悬浮元素的边缘和层次更自然。它提供从 XS 到 2XL 的多种阴影尺寸，还有将细边框融入阴影的 smooth-shadow-ring 工具类，避免边框与阴影叠加时出现生硬的“双重边缘”。阴影和边缘颜色可以独立调整，并支持明暗主题；整套效果由纯 CSS 实现，方便直接用于各类前端项目。官方还免费提供 Claude Agent Skill 和 Cursor Bugbot 规则，帮助 AI 在生成界面时自动选用正确的阴影样式。

https://shadow.floriankiem.com/

GitHub：https://github.com/flornkm/shadow-plugin

会动的在线品牌规范工具：Vessa

Vessa 是一款将传统品牌规范 PDF 变成在线互动页面的工具。设计师可以用品牌真实的色彩和字体搭建规范页，并通过一个链接分享给团队或客户，也可以部署到自己的域名。与静态文档不同，页面中的颜色可以点击复制，情绪板能够展开查看，动效也可以直接播放；修改一次后，所有已分享的链接都会同步更新，避免多份 PDF 造成的版本混乱。Vessa 由 Annnimate 团队打造，目前处于私密测试阶段，可在官网加入等候名单。

https://vessa.design/

每天亲手撕一页的 Mac 桌面日历：Himekuri

Himekuri 是一款将传统撕页日历搬到 Mac 桌面的免费应用。它不会同步数字日历、发送提醒或在零点自动翻页，而是等待用户每天亲手撕掉昨日，让看日期变成一个有触感的小仪式。纸张的抓取、起皱、撕裂和飘落都由物理模拟驱动，页面可以撕到一半停下，放手后则会像真纸一样打着旋飘出屏幕。应用提供昭和印刷、极简瑞士、粗野主义、复古办公室、日本历书和中国黄历六种样式，仅约 5 MB，无广告、无账号且不需要网络，支持 macOS 15 及以上系统。

https://himekuri.app/

支持中日韩字体的免费 Mac 字体管理器：Pica

Pica 是一款由 Josh Puckett 打造的原生 macOS 字体管理应用，可以将字体整理进自定义收藏夹，监看指定文件夹的变化，并通过一次点击完成字体的启用与停用。它提供完整的 OpenType 支持，还能将不同字体直接应用到自定义 Logo 和配色主题中预览，帮助设计师更直观地比较字形在真实品牌场景中的效果。最新版本已加入完整的中文、日文和韩文字体支持，浏览超过 30,000 个字符时仍能保持流畅滚动；同时优化了大型字体库的性能，监看或启用数 GB 的字体文件夹也更顺畅。应用可免费下载使用。

https://pica.joshpuckett.me/

发布介绍：https://x.com/joshpuckett/status/2083703054076133491

🎊 设计素材

AI 思考状态加载动画组件库：Thinking Orbs

Thinking Orbs 是一套专为 AI 聊天和 Agent 界面设计的开源加载动画组件，用灵动的点阵球体呈现 working、searching、solving、listening、composing 和 shaping 六种工作状态，比普通的转圈 Loading 更能传达 AI 当前正在做什么。组件提供适合头像区域的 64px 与行内状态的 20px 两种尺寸，支持明暗主题自动适配、动画速度调节和减少动态效果等无障碍设置。它基于 React 与 2D Canvas 实现，零额外依赖，通过 npm 安装后即可快速引入项目。

https://orbs.jakubantalik.com/

GitHub：https://github.com/Jakubantalik/thinking-orbs

7 万多个免费手绘 SVG 图标：Koboyo Icons

Koboyo Icons 是一个收录了 71,262 个高质量手绘图标的免费素材库，覆盖界面、人物、生活、商业、科技等丰富主题。所有图标都以 SVG 格式提供，支持按分类、关键词和同义词搜索，并使用 currentColor 方便在项目中调整颜色。图标可免费用于个人及商业项目，无需注册或署名，也可自由改色、缩放、裁剪和制作动画。

https://koboyo.com/icons

精选落地页设计灵感网站：Pure

Pure 是一个专注于优质落地页的设计灵感网站，持续收集并筛选各行业值得参考的网页案例。网站按 Agency、Mobile App、Physical Product、Service、Single Page、Software 和 Web App 等类型分类，方便根据项目定位快速寻找参考；还可以单独浏览页面中的局部设计截图，很适合在制作官网、产品介绍页或营销页时寻找版式、配色和视觉表达灵感。

https://purelanding.page/

可爱手绘头像生成器：Humation

Humation 是一款已经有约 40 万用户使用的在线头像生成器，通过组合不同的头部、身体、配饰和眼镜等元素，就能快速创造一个充满手绘感的个性角色。最近，Humation 又加入了一批夏日主题素材，包括风铃、花火球、汽水、章鱼烧、向日葵、鲨鱼、西瓜和潜水镜等，让生成的头像更有轻松可爱的季节氛围。网站无需复杂操作，挑选喜欢的造型与物件自由组合即可，很适合制作社交头像、个人形象或趣味角色。

https://humation.app/avatar

发布介绍：https://x.com/ysk_en/status/2067938941882536428

我们是谁？

Moonvy 月维是一款专业的「设计资源管理工具」，让设计图的管理与交付在浏览器中就能轻松完成。提供更高效的切图、标注体验，并支持多种开发代码格式，让设计交付更省心、更顺畅。（moonvy.com）

设计素材周刊 217 期

Sun, 19 Jul 2026 16:00:00 GMT

📰 设计资讯

Figma Make 已支持 GPT-5.6

OpenAI 最新模型 GPT-5.6 现已在 Figma Make 中正式上线。现在，用户可以直接在 Figma Make 聊天框中打开模型选择器，并切换到 GPT-5.6 进行设计与内容生成。该模型已对所有套餐用户开放

https://www.figma.com/release-notes/

谷歌 Noto 3D 表情设计重塑 4000 个表情

在世界表情包日（World Emoji Day）之际，谷歌官方分享了 Noto 3D 表情的幕后设计故事。设计团队重新设计了将近 4000 个表情符号，融入了更丰富的表情细节、更完善的无障碍设计，并采用了符合现代化沟通场景的全新 3D 视觉风格，让数字表达更加生动、有温度。更令人兴奋的是，因为语言的本质在于共享，所以谷歌所有的 Noto 产品组合都是完全开源的。官方已将原始的 .OBJ 3D 模型文件共享给开源社区，让任何人都可以利用它们去构建沉浸式 VR 世界、独立应用，甚至是创造各种充满创意的趣味表情包。

https://blog.google/products-and-platforms/platforms/android/world-emoji-day-noto-3d/

GitHub 仓库：https://github.com/googlefonts/noto-emoji

🏆 产品推荐

UI 设计组件、动效词典

帮你提升 Vibe Coding 前端交互设计水平的网站，在跟 AI 编码交流时，因为不知道某个组件或微动效的专业英文名称而难以描述时，Name That UI 就像一个 UI 元素的视觉词典。你只需用自己的日常语言模糊描述想要的效果，它就能帮你精准识别出对应的专业术语、API 标识，甚至提供直接可用的 Prompt，大幅提升你与 AI 协同开发的效率。

https://namethatui.com/

面向 AI 的动画组件库：OriginKit

OriginKit 是一款专为现代网页量身打造的精美动画组件库，它提供了大量开箱即用的前端交互组件与动效，完美适配 Framer 与 React 生态。更棒的是，它原生支持 Model Context Protocol (MCP)，这使得 Claude 等 AI 编码助手可以直接获取其组件库上下文，让你通过简单的对话就能自动编写和生成高质量的动效页面。

官网：https://toolfolio.com/tools/originkit

设计规范提取器：DesignMD

在 Vibe Coding 时代，使用 AI 辅助设计网页时，最怕的就是各个页面风格不统一。DesignMD 就是为了解决这一痛点而生的工具。它可以直接分析你指定的精美网站，将其色彩系统、字体层次、间距规范以及圆角阴影等核心设计特征提取出来，生成一份标准的 DESIGN.md 规范文件。将这份文件直接放入项目根目录，AI 编码助手（如 Claude、Cursor 等）就能读取并严格遵循这套设计系统，从而有效防止 AI 生成界面的“设计漂移”。

官网：https://designmd.cc

社区模板库：https://getdesign.md

Figma 矢量网格弯曲形变插件：Warp It

在 Figma 中实现类似 Illustrator 的网格变形（Mesh Warp）或自由变换效果，Warp It 绝对是不容错过的利器。它允许你直接对 Figma 中的矢量图形甚至文字进行扭曲、弯曲和形变操作。你只需通过拖动网格上的控制点或调节滑块，就能轻松制作出波浪形文字、透视效果的插画以及各种极具张力的创意视觉。需要注意的是，对文本进行变形后，它会将其自动转化为矢量路径，因此建议在确认文案后再进行操作

https://www.figma.com/community/plugin/923820065156924054/warp-it

Figma 矢量半色调渐变生成插件：HLFTN

HLFTN 是一款由 Pavel Laptev 开发的优秀 Figma 插件，用于一键生成精美的矢量半色调（Halftone）渐变效果。它支持径向、线性和均匀分布的网点渐变，并且生成的所有图形都是完全可缩放、可编辑的矢量对象。无论是为了给网页背景增加复古印刷感、打造波普艺术（Pop Art）风格，还是为插画和 UI 组件添加独特的噪点质感，HLFTN 都能让你在 Figma 内快速完成

https://www.figma.com/community/plugin/1000012087652644703/hlftn

🎊 设计素材

Web 交互与设计风格提示词库：Arlan's Vault

这是一个能帮你提升 Vibe Coding 前端交互设计水平的宝藏网站。网站精心整理并归纳了 Web 和 App 中常见的各种组件和动效名词，甚至还列出了诸如 Liquid Glass（液态玻璃）、Neumorphism（新拟物）等网页设计风格名称。当你不知道该用什么词汇去指示 AI 时，在这里翻一翻就能找到最地道的提示词

https://www.arlan.me/vault

复古像素风图表库：Dither Kit

Dither Kit 是一款极具复古像素美学风格的图表及 UI 组件库。它基于超轻量的 Canvas 引擎构建，不需要依赖繁重的 Recharts。组件库包含了折线图、柱状图、饼图、雷达图以及生成式头像和渐变色块等，其特有的有序抖动（ordered-dither）填充在亮色和暗色模式下均有极佳的视觉表现，且自带细腻的入场动效和滑动 Tooltip，是打造个性化像素风页面的不二之选。

https://www.tripwire.sh/dither-kit

动效 SVG 图标库：AnimateIcons

如果常规的静态图标已经无法满足你的交互要求，那不妨试试 AnimateIcons。这是一个专为现代网页微交互（Micro-interactions）打造的开源动效 SVG 图标库。它提供了一大批包含内置悬停（hover）和循环（loop）动画的精美 SVG 图标，非常适合与主流的 shadcn/ui 或 motion/react 等前端框架配合使用。直接复制代码即可嵌入项目，支持随意修改大小和颜色，能为你的网页细节带来立竿见影的灵动感。

https://github.com/Avijit07x/animateicons

Jitter 动态图形模板库

Jitter 是一款网页动画编辑工具。今天为大家推荐的是它的官方模板库，这里提供了海量免费且高质感的动态图形模板（如 UI 交互动画、社交媒体动效、图标微动效等）。你可以直接将这些模板复制到你的 Jitter 工作区中，快速替换自己的文字与素材，并支持一键导出为 GIF 或高画质视频，非常适合需要快速产出精美动效的设计师和运营人员。

https://jitter.video/templates/all/

我们是谁？

设计素材周刊 216 期

Sat, 04 Jul 2026 16:00:00 GMT

📰 设计资讯

Figma cofig 大会新功能介绍

已上线

Figma Motion：动画工具（免费可用）
Shader：着色器特效与填充（免费可用）

Beta版需申请内测

3D 变换：为设计赋予3D立体感和深度
代码图层：在 Figma 画布上使用代码进行设计

AI 相关功能

Agent skills：给 AI Agent 添加额外的“技能包”，让它不仅理解设计稿，还能结合更多上下文完成复杂任务
生成式插件：通过 AI 直接生成自定义工具
Figma Weave：Figma 可视化 AI 工作流工具（有免费额度）

Figma 更新日志和 Beta 申请入口：https://www.figma.com/release-notes/

另外UP主「草帽sMao」发布了 Figma Motion 的专项教学和操作技巧，月维也近期上线支持 Figma Motion 的代码支持，在月维中就能看到动画关键帧的代码信息，让开发者更方便的实现动画效果。

https://www.bilibili.com/video/BV1ooTe62Ebs/

🏆 产品推荐

Figma 粒子模版插件 Particle Factory

这是一款非常适合“懒人”的 Figma 粒子特效插件。它内置了 65 个现成模板，点选即可在画布中生成动画效果。模板类型非常丰富，包括彩纸类（Confetti、金色彩纸）、闪光类（Gold Glitter Fall、Sparkles）、氛围类（雪景球、星空、樱花飘落）、以及可以套用自己素材的 Logo 组装和图片消解等炫技动效。每个模板都能继续微调重力、颜色、发光、模糊等属性，并且支持一键导出到 Figma。

https://www.figma.com/community/plugin/1651782298707514077/particle-factory-the-particle-animation-studio-for-figma

LottieFiles 插件支持导出 Figma Motion 的动画为 json 格式

就在 Figma Motion 正式上线之后，LottieFiles 插件更新了支持导出 Figma Motion 中的动画为 lottie 格式和 json 格式，并且免费开放该功能，和上面粒子插件结合使用，就能将粒子动画导出成 json 格式直接使用了

https://www.figma.com/community/plugin/809860933081065308/lottiefiles-discover-create-export-lottie-animations

Figma 表格编辑插件：CoyTable

一款 Figma 表格生成与编辑插件。它支持实时预览、嵌入编辑、拖拽排序等功能，极大改善了在 Figma 中制作和维护表格的痛苦体验。它提供 8 种预设主题色块和 12 套常用数据模板（如商品清单、Bug 追踪等），支持导入 Excel 文件或从剪贴板一键粘贴，并且能够一键生成至画布，或者选中已有表格载入回传编辑

https://www.figma.com/community/plugin/1653235482992231228/coytable

灵感网站推荐：让 AI 也能拥有「设计感」

现在越来越多 AI 编程工具都支持 DESIGN.md，它可以把一个网站的视觉设计（颜色、字体、间距、组件规范等）整理成 AI 可读的设计文档，让生成的界面不再是千篇一律的「AI 风」。这一概念最初由 Google Stitch 推广，如今已经开始形成生态。

先拿设计规范交给 AI，再生成的界面会更有设计感，也更接近真实产品，推荐两个这类的产品

免费开源颜色选择器：Pretty Color Picker

一款轻量、优雅且完全开源的颜色选择器组件，非常适合前端开发者集成到自己的现代 Web/UI 项目中。

预览：https://colors.kiira.in/

GitHub 仓库：https://github.com/kiiradesign/pretty-color-picker

X 推文：https://x.com/kiiradesign/status/2073419336392618251

设计灵感采集站：Recent Design

该网站专门采集和整理来自 X (Twitter) 上的优质设计、创意网站、精美应用、特色图标以及各种新奇的设计工具，是设计师寻找灵感的绝佳去处。

https://recent.design/

设计灵感采集站：Posts.design

这是一个将全网最热门的模板与设计帖子聚合在一起的网站，每日更新。它可以帮你把零散的灵感帖子集中在同一个地方，并整理得井井有条。

https://posts.design/

着色器渐变生成器：Gradient Lab

Gradient Lab 可以让你在几秒钟内快速生成惊艳的着色器渐变（Shader Gradients）。它支持自定义颜色、柔和度、角度、速度和亮度，并且支持导出为静态图像、动态视频以及可嵌入的代码。

官网：https://backgrounds.supply/gradient-lab

X 推文：https://x.com/saurra3h/status/2073511187162005915

17 个创意加载动画

17 个创意十足的加载动画（Loader），包括抖动网格、变形形状、牛顿摆、DNA 双螺旋、以及专为 AI 代理设计的盲文加载器等。你可以直接复制粘贴到 BeUI 中使用，从此告别枯燥的常规 Spinner。

https://beui.dev/components/motion/loader

动画词汇对照表

很多时候，设计师与开发沟通动效时，纯文字往往不够直观。有开发者基于 animations.dev 的动效词汇表，用 GSAP 做了一个视觉对照站点。在这里，你可以直接点击词汇查看对应的动效展示，让沟通更高效。

官网地址：https://vocabulary.vikingz.me

X 推文：https://x.com/vikingmute/status/2072494808653070631

🎊 设计素材

高质量 SVG 图标库：Reicon

Reicon 是一个隐藏的宝藏图标库，拥有 2700+ 个专为现代 UI/UX 项目打造的 SVG 图标。它开源、免费、易于定制，完美适用于现代设计项目。

每个图标都提供两种字重——轮廓和填充——并且可以完全自定义大小、颜色和自定义属性/props。图标在与打包工具或框架包一起使用时支持摇树优化，从而确保最小的包体积。

网站：https://reicon.dev

Figma 插件：https://www.figma.com/community/plugin/1652983191908763066

Github：https://github.com/dqev/reicon

Icônes 桌面客户端：Icônes Desktop

如果你每天频繁使用 Icônes 网站来获取图标，现在它可以作为原生的 Mac 客户端使用。该软件包含超过 200,000 个开源图标，支持在桌面直接进行搜索和导出，完全免费且开源。

GitHub 仓库：https://github.com/ensaktas1/icones-desktop

X 推文：https://x.com/ensaktas/status/2073361315381608697

GitHub 仓库：https://github.com/HduSy/tokenscope