MoreRSS

site iconmoonvy | 设计素材周刊修改

由月维公司维护的设计素材周刊,也包含其他设计类内容。
请复制 RSS 到你的阅读器,或快速订阅到 :

Inoreader Feedly Follow Feedbin Local Reader

moonvy | 设计素材周刊的 RSS 预览

设计素材周刊 215 期

2026-06-21 00:00:00

📰 设计资讯

Codex 生图案例分享

X 上看到一个 Codex 的使用案例,将 Codex 内置一个图片标注工具,这样修改标注工具里的图,Codex 就能读取数据进行重新生成,案例分享给大家

通过内嵌浏览器 + Codex Image 2 + 无限画布(Excalidraw / tldraw),构建一个多模态画布系统,让 Codex 直接读取画布的 Base64 标注图,实现“看图理解 + 生成”。

这样 Excalidraw / tldraw 就不只是白板,而是变成前端的 Multi-modal Canvas,用来拼一个低配但可控的生图工作流。

其他在线白板工具:

此想法的原贴:https://x.com/zhongerxin/status/2068027614300893383

原作者 Cowart:Codex + 无限画布工具插件开源:https://github.com/zhongerxin/cowart#

换白板工具原贴:https://x.com/cellinlab/status/2068193900570046502

操作步骤原贴:https://x.com/liyue_ai/status/2068545434818400526

Figma 客户端“标签页分组”功能

标签页分组功能允许您在 Figma 桌面应用程序中对标签页进行分组、着色、展开和折叠。保持井然有序,再也不用担心找不到要查找的文件。

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

FigmaEX 客户端已经更新到 126.6.8 版本,可自行下载安装

https://moonvy.com/figmaEX/

👆🏻必看里面的安装帮助哦

🏆 产品推荐

应用图标博物馆

展示收藏了非常多 iOS 的经典应用图标,并支持搜索,打开偶像墙非常喜欢被精心设计图标包围的充实感,后续会开放 macOS 应用图标库

https://icon.museum/

优秀应用界面库 ①

应用商店优化图片、付费墙 和用户引导流程。浏览精选的来自设计最佳的 iOS 应用的 App Store 屏幕截图

https://before.click/

优秀应用界面库 ②

App Store 截图库包含,350万+ 截图 、40万+ 应用,永久免费

https://screenshotsclub.xyz/

点阵加载器(网站 Loding 动画)

每个应用程序都需要矩阵加载器,55+个免费且开源的加载器,基于React、TypeScript、Tailwind CSS和shadcn构建。安装一个,复制代码,然后将其变成属于你自己的作品。

https://dotmatrix.zzzzshawn.cloud/

设计灵感网站 ①

精选 X 中设计、交互的最佳设计,每日更新,并且还有应用截图和应用图标等信息,AI 时代提升"看"的能力

https://recent.design/

设计灵感网站 ②

umanmade 是一个由真人创作的数字作品精选目录,收录优秀的设计灵感和交互案例

https://www.umanmade.com/

🎊 设计素材

Figma UI 模板库

免费的、随时可用的 Figma UI 块库。 复制任意组件,将其粘贴到你的文件中,即可立即开始构建。 非常适合着陆页、布局和 UI 部分。

https://blocks.lander.studio/


我们是谁?

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

设计素材周刊 214 期

2026-06-15 00:00:00

📰 设计资讯

Figma 官方出了网站直接转 Figma 文件插件

捕获你的实时网站,并将其作为可编辑图层导入Figma。 支持导入实时页面或元素,无需代码库、终端或编程代理。直接从浏览器中抓取完整页面或选择所需元素。 不过该功能尚在测试阶段,仅限Pro及以上计划用户使用

Chrome 插件:https://chromewebstore.google.com/detail/figma/fkmaohpngenfoccdgceedjkfhkdcohmg

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

但是,来咯😋,也是有第三方咱们自己设计师早在 Figma 上线前已经做出了这个插件,并且是免费的,有网页转 Figma 需求但是又不符合 Figma 测试门槛的,统统来试试这款插件哦,同款插件目前有3个用过的在周刊的204期有详细介绍

https://gwrdluzl9j9.feishu.cn/wiki/TTibw3e8niWpvmkfSIWc8bUmnJc

Figma 社区个人展示页改版

Figma 社区个人资料刚刚进行了更新,因此您可以更好地展示您是谁、您的工作流程和您的作品。

  • 添加您的职位、经验、技术栈以及您自己的自定义 FigPal。
  • 置顶你的优质资源,并添加图片和链接来展示你的最佳作品。
  • 将您的社交渠道连接到社区,以增加您的粉丝数量。

总体说改版之后的个人展示页面更像是设计师个人主页

https://help.figma.com/hc/en-us/articles/360038510833-Create-a-Community-profile#h_01HT334MHHY0X9YGNSKXDGW3D7

Figma 设计规范检查功能

检查设计功能会将您的设计与设计系统进行比较,标记出偏差之处,并一键提供正确的修复建议。在工作过程中随时发现偏差,在交付前运行质量保证流程,并确保每个文件都与您的设计系统保持一致:

→ 变量和样式建议标记硬编码的颜色、文本、半径和间距值,并将其替换为正确的设计系统标记。

→ 辅助功能建议会标记颜色对比度规范,并将其替换为符合 WCAG 2.0 AA 或 AAA 标准的颜色。

→ 组件库匹配检测会标记来自未订阅库的标记和组件。

→ 分离组件检测标记已从其源库中分离的组件。

功能适用于组织版和企业版套餐。

最近 Figma 其他更新

  • Figma 专业版的 AI 积分如果不够用可以购买扩展额度了

  • 支持上传视频的容量由原来 100MB 提高到 300MB

  • 插槽工具增加了更多细节设置

🏆 产品推荐

腾讯新 AI 生成工具 Miora 开始内测

Miora 不是又一个 AI 出图工具,而是一个由 Agent 驱动的 AI 创意工作室。给它一份brief,它会按需调用对应的Creative Specialist,从图像、脚本、分镜、视频、U/UX、插画、3D到品牌系统,在一块无限画布上交付整套可用的创意资产。

现在工具在内测中,感兴趣的可以官网提前申请一下

https://miora.design/home

静态Logo 直接变成矢量动画的开源工具

丢一张 PNG 或 JPG 进去,它先用 AI 把像素图转成矢量路径,然后自动生成动画效果,输出无损的 SVG

注意它不是一个独立的App,是一个 Agent skill 也就是说你在 Claude Code 或者 Codex 里加载这个技能之后,直接跟 AI 说"把这个 logo 变成动画"就行

它的工作流大概是这样的:

-AI 分析你的像素图,识别图形结构

-用矢量路径重建图形,跟原图对比误差

-根据图形特点选择合适的动画方式

-输出干净的 SVG 代码,可以直接嵌到网页里 迪士尼12法则那个点值得说一下—

就是挤压拉伸、预备动作、缓入缓出这些。加了这个约束之后动画看起来会自然很多,不会像 CSS transition 那种机械感 输出的 SVG 是纯代码,不带任何依赖,体积很小,适合放在网站或者产品里

https://github.com/nolangz/pixel2motion

效果预览https://nolangz.github.io/pixel2motion/

作者帖子:https://x.com/VincentLogic/status/2066136632496136588

多说一点,感觉之后会逐渐出现 Agent skill 类型的分享,将这些告诉你的 AI ,你来控制他开出怎样的花

Apple Icon Composer(图标合成器)

如果有要上线的应用图标强烈建议都来试试这个Apple 的图标工具

Icon Composer 允许您使用 Liquid Glass 从单个设计创建适用于 iPhone、iPad、Mac 和 Apple Watch 的分层图标。多层图标格式允许您精心设计图标,并在不同的外观模式下进行注释。Icon Composer 旨在与 Xcode 无缝协作,并提供导出扁平化图标版本的选项,以满足市场营销和宣传需求。

https://developer.apple.com/icon-composer/

🏖 随便看看

个人主页网站设计

网站头部设计很有意思,像打印机又很有质感,现在有 AI 加持网站的设计到上线比之前简单不少,有空的时候都可以试试看,对之后找工作也会有帮助。

https://nooc.me/zh

AI 工程做自己的视觉系统

有了 AI 辅助之后甚至已经不需要产品上线才能用上,分享这个例子,只需要一个概率和样例通过几轮对话就能生成自己的工具,这个案例有需要的可以复刻一下

https://x.com/mochitaro_de/status/2066330465934659795

书籍网站欣赏

书籍分享网站,直接将书大面积展示在视觉中间,切换动画丝滑

https://press.stripe.com/


我们是谁?

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

设计素材周刊 213 期

2026-05-31 00:00:00

📰 设计资讯

Figma “Design is dead(设计已死)”活动

Figma 近期的一个线下活动,它回应了近几年设计圈和 AI 圈反复出现的一个话题:

“Design is dead(设计已死)”

尤其是在 AI 生成设计、自动化工具、无代码平台兴起后,每隔一段时间就会有人宣称设计师要被取代、设计行业要消失。

核心观点是:设计从未消失,它只是不断以新的形式存在于我们每天的生活中。

AI 不会杀死设计,过去一年里,从 Midjourney、ChatGPT 到各种 AI UI 生成工具出现后,社交媒体上出现大量类似观点:

  • UI设计师要失业了
  • 产品设计师没用了
  • AI会自动完成所有设计工作

Figma 用一种幽默的方式回应:

根据 X(原 Twitter)的统计,今年设计已经被“宣布死亡”847次。

但现实是:

1. 设计依然存在,而且无处不在。

设计不只是视觉,很多人把设计理解成,做界面、画图标、配颜色,但 Figma 想强调,真正的设计是体验。

例如:

  • 地铁线路图让你不会坐过站
  • 菜单排版让你看得懂菜名
  • App 通知让你及时获得信息

这些都是设计,即使用户从来没有意识到它们被设计过。

2. AI 越强,设计反而越重要

AI 可以生成方案。但设计师决定,什么值得被创造、什么体验是好的、什么情感应该被传达、如何让产品更有人性,设计的价值不在于画按钮。而在于:

理解人,并创造更好的体验。

3. 为什么这对设计师有价值?

对于设计师来说,这其实是一种信心表达。因为每一次技术革命都会出现同样的话:

  • Photoshop 出现 → 设计师完了
  • 模板网站出现 → 设计师完了
  • Sketch 出现 → 设计师完了
  • Figma 出现 → 设计师完了
  • AI 出现 → 设计师完了

但事实上:工具一直在变,设计师真正的价值始终来,自判断力、审美、对用户的理解、解决问题的能力

这些恰恰是最难被自动化的部分

https://x.com/figma/status/2061101954034442293

🏆 产品推荐

在线 3D 模型变成 ASCII 动画

可以把任何 3D 模型变成 ASCII 动画,很适合加到官网中作为动态插画,并且支持配色、动画、多种导出格式支持

https://bitmap-forge.vercel.app/

Mac 图像查看工具

一款针对 macOS 系统优化的图像查看器,专为鼠标用户设计。采用 SwiftUI 构建

支持图片浏览,文件夹索引、侧边栏、并支持鼠标和键盘移动和缩放图片

Github:https://github.com/wflixu/Monet

https://apps.apple.com/cn/app/imonet/id6770070921

在线像素编辑器

一个像素艺术工具,其中每个像素都是代码,而不是光栅,可以导出代码、生成动画、绘画编辑等功能

https://newt.sh/

组件音效库

为你的网站赋予声音,让他会说话。仅使用一个属性,为 shadcn/ui 提供语义音频反馈。17 个语义角色,24个组件,每个组件都监听该属性,即时反馈体验极佳。

https://www.sensory-ui.com/#showcase

🎊 设计素材

接近 Apple Hello 的谷歌字体

非常接近苹果的“hello”字体,并且他是免费的

https://fonts.google.com/specimen/Playwrite+TZ

渐变素材

包含 1100+ 种不同渐变,包含免费下载资源

https://gradientora.com/

🏖 随便看看

FigmaEX皮肤

FigmaEX 客户端 CSS 皮肤-吾皇巴扎黑皮肤,让 Figma 界面更个性化

皮肤地址:https://github.com/liteyais/FigmaEX-CSS-Skin 视频讲解:https://www.bilibili.com/video/BV1XVGi6pEvh/

FigmaEX版客户端:https://moonvy.com/figmaEX/

使用方法:找到css代码,复制后粘贴到FigmaEX版客户端【设置】中的【皮肤CSS】处。

Chrome 视频控制插件

视频控速插件,看视频时可以倍速播放,还有画中画、关灯等便捷功能

https://chromewebstore.google.com/detail/%E5%BD%B1%E9%80%9F-%E8%A7%86%E9%A2%91%E6%8E%A7%E5%88%B6%E5%99%A8/bgjedanbolbggjfcfdjfjhaaclkammhl

Chrome 历史记录插件

可以非常方便的查看历史记录,和最近关闭的历史,作者发现谷歌没有这个快捷功能,就仿照 eage 的做了个插件,确实非常方便

https://chromewebstore.google.com/detail/%E6%97%B6%E5%85%89%E5%8E%86-%E5%8E%86%E5%8F%B2%E8%AE%B0%E5%BD%95%E7%AE%A1%E7%90%86/milpfamhdelgaclnppmonpaiokbfifhh


我们是谁?

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

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

2026-04-02 00:00:00

我们都知道,中国的 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 月维?

2026-01-27 00:00:00

为什么不用 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 月维是一个更用心在设计上、更关心设计师的团队,我们为设计师推出了一系列的好用的工具,并且建立了最有爱的设计师社群,我们希望长期的为设计师这个群体做出更有价值也更有趣的贡献。

哪个版本适合你?

免费版

Moonvy 月维的免费版能够使用全部功能,马上开始使用

团队版

我们根据团队规模提供不同的套餐,可以前往官网升级团队

个人大会员

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

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

迁移指南

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

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

迁移旧习惯

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

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

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

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

img
img

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


Axure 文件托管

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

操作方式如下:

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

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

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

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

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

2026-01-04 00:00:00

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

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

如何操作

  1. 打开 Moonvy 月维上的设计标注,选中文本字体,在右侧面板中找到文本属性
  1. 点击「下载字体」或者「谷歌字体」按钮,就可以下载

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

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

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