2024-12-22 00:00:00
Figma 最近宣布将于 2025年3月11日起实施新的定价模式：
按新的收费标准来看，设计师使用 Figma 进行协作，开发者使用「Moonvy月维交付工具」这样对公司来说成本会比较低。
https://www.figma.com/blog/billing-experience-update-2025/
Visual Studio Code 昨天宣布 GitHub Copilot 免费可供所有人使用
免费套餐包含：
https://x.com/code/status/1870137617557152110
我们将 FigmaEX + 汉化版客户端 Mac、Windows 都升级到了最新的 v124.7.4 版本，有时间的时候可以前往 月维的网站 FigmaEX 里去下载新版（如果下载过程失败或者比较慢需要换个浏览器再下载，或者使用备用站点）。
网站：https://moonvy.com/figmaEX/
更新教程：https://www.bilibili.com/video/BV1Y2SKYzEq1/
ComfyUI 宣布，突破性的 13B 开源视频模型腾讯混元-Video，现已在 ComfyUI 中获得原生支持！ 它附带统一的图像和视频生成结构
https://x.com/ComfyUI/status/1870137963193217172
创建漂亮的移动梯度，在三维中设计独特的梯度。
https://www.figma.com/community/plugin/1203016883447870818/shadergradient
LogoCreator 是一款免费开源的 AI logo（徽标）生成器，帮助用户在几秒钟内创建徽标，支持自定义样式。它由 Together AI 上的 Flux 提供支持，并使用 TypeScript 构建的 Next.js 应用框架。
https://github.com/Nutlope/logocreator
这款插件之前介绍过，但仍然有陆续询问的，最近节日比较多使用场景比较常用，就再推荐一次。
插件可以创建圆形、方形、路径等文字环绕的效果，可以调整字体、字号、稀疏等设置。
https://www.figma.com/community/plugin/1331748701210388011/curve-text
TikTok Voice 支持小帅，猴哥，熊二，紫薇，新闻腔等热门AI配音，免费版每月1000字符限制，每天生成5次。
这些素材和内容使用插件 Vector to 3D 制作，这是其中3位优秀的创作者。文章的最后有八折劵可以使用。
https://www.figma.com/@coyhuase
包含设计组件规范、图标、样式等设计相关的资源源文件分享。
在 Figma 中以简单的方式将路径、形状生成 3D 模型，并且支持 3D 软件中的打光、材质、变形、渲染等专业功能，而且近期增加了动画、凹凸贴图等新功能，年底了跟作者要了一批八折劵给大家，插件是一次付费永久使用的，不是订阅制。(Figma 社区中可以搜索插件名有其他创作者提供的免费素材可以直接使用)
https://mbd.pub/o/bread/ZZecl5dr?af_user=2175663&discount_code=ORRJTQ
自CSS问世之初，它并未拥有正式的官方识别标识。直到CSS3标准发布之后，CSS才获得了其首个官方盾牌标识。十多年来，这个盾本文来自标志情报局，牌成为了CSS语言的标志性符号。
今年8月初，谷歌Chrome团队的CSS开发者Adam Argyle发起了一项设计新 Logo 的征集活动，活动吸引了来自世界各地设计师和开发者热情参与。经过数月的公众意见收集和设计迭代，11月12日，CSS 团队经过投票选出了最终的CSS官方标识设计方案。
https://www.logonews.cn/css-new-logo.html
2024-12-15 00:00:00
12月份了各家APP开始了年终总结，你可以通过这个浏览器插件知道今年你在 Figma 的使用情况
Sketch 正在开发一个类似 Auto Layout 的新功能「Stack Layout」，用于自动排列设计元素。目前功能处于早期阶段。同时，Sketch 计划将画板升级为更强大的可嵌套容器（类似 Figma 的 Frame）
作者提到，Stack Layout 目前还在测试阶段，然而，今年不会有测试版。解释原因需要更深入地了解构建此功能真正需要什么。
https://forum.sketch.com/t/sneak-peek-stack-layout/3854
Figma 的文本修饰的多种下划线样式，设计师做样式时更方便了，同时还不用担心交付问题 Moonvy 月维插件已支持文本修饰的标注和代码一键复制。
在做设计走查或者整理设计项目时需要出个画板查看字体字号是否有细微差异以免交付不规范，现在可以通过插件来批量选中设计图统一查看字体、字重、字号，并且自动合并同属性图层，在插件中可以通过粘贴的方式统一对Frame 中的字体进行批量调整。
https://www.figma.com/community/plugin/1445383264057474829/batch-font-size-modifier
选择元素的形状！通过设置尺寸、间距、颜色来快捷创建重复的底纹图案，目前支持方形、圆形、星形。
https://www.figma.com/community/plugin/1444063408897662520/grid-patterns
10 余种图表类型、超过 20 种内置模板类型、丰富的图表样式配置、自动生成图表实现代码。更丰富内容仍在持续更新中。
投稿人：Summer_夏沫汐
https://www.figma.com/community/plugin/1387772732225258211/vchart
https://www.streamlinehq.com/emojis/freebies-freemojis
网站收集 Notion 相关工具的集合网站，涵盖 notion 头像、素材、浏览器插件、主题等等百余个工具。
Bootstrap 5 初始化 UKit 集合了Bootstrap 基础组件。包含设计规范以及常用组件和图标库
https://www.figma.com/community/file/876022745968684318
该创作者在Figma社区中分享了很多UI、UX的素材，每个文件一个小点介绍的很详细。
https://www.figma.com/@julienfovelle
之前周刊87期介绍过的设计系统如今他们升级到了2.1视觉更好看了也更新了 Figma 文件地址，所以重新发一下
整套设计系统，包含样式、组件库、设计规范、图标等资源。
https://www.figma.com/community/file/1123930848462274399
AI 浏览器 Dia，目前官网可以申请内测了。
Apple 近日公布了 2024 年 App Store Awards 的获奖名单，表彰了 17 款应用与游戏，App Store 编辑从 45 款入围作品中选出了获奖者。
https://www.apple.com/hk/newsroom/2024/12/apple-honors-2024-app-store-award-winners/
临近年末双十二年终特惠，在活动期间购买 Moonvy月维任意产品全部 8.7 折
| Moonvy 月维产品 | 原价（人/年） | 现在（人/年） | 其他品牌价格 |
|---|---|---|---|
| 专业版（20人协作团队、40GB容量） | 🔥60.6 | 174 | |
| 企业版（21人以上团队、100GB+容量） | 🔥165 | 327 | |
| 20GB 团队容量包 | 263 | - | |
| 2GB 团队容量包 | 34 | - | |
| 个人大会员（10GB团队容量包、协作成员+1） | 112 | - |
马上升级：https://moonvy.com/pricing/
2024-12-08 00:00:00
中央广播电视总台《2025年春节联欢晚会》发布官方吉祥物形象“巳（sì）升升”，祝福全球华人在新的一年如意康宁、好事连连。🏮 这个吉祥物的设计灵感来源于中华传统文化，整体造型参考了甲骨文中的“巳”字，呈现出憨态可掬且富有古意的形象。 “巳升升”的头部轮廓和脸颊上的螺旋形状来源于陕西扶风法门寺唐代地宫出土的银质鎏金如意，从头部的蝙蝠装饰到尾巴点缀的寿字盘长结，通身典故寓意着“福从头起，尾随如意”。
https://m.weibo.cn/detail/5108305980559176
图层面板支持横向滚动条，内容层级多导致的看不到图层名或者图层名过长看不全的问题都可以通过横向滚动条来解决了。
https://www.figma.com/release-notes/
为了支持向 UI3 的过渡，每个人都有可以在 UI2 和 UI3 之间切换，以便能够习惯重新设计。
Figma 文章中描述最终将在 2024 年末或 2025 年初淘汰 UI2。但具体日期尚未确定，建议目前仍然高度依赖 UI2 的可以抽空多适应 UI3。
https://help.figma.com/hc/en-us/articles/26284839136407-UI3-a-guide-for-admins
付费用户现在可以从 Figma 导入设计作为起点，设计图到网页更简单了
https://x.com/shintech_AI/status/1864190451412283893
将图片转换为提示词，更方便使用AI工具生成图片，还单独区分了不同的生成工具 Flux、Midjourney、Stable Diffusion。
https://imageprompt.org/zh/image-to-prompt
IBM 发布了全新的免费开源的简体中文字体“IBM Plex Sans SC”，可供下载并按照开放字体许可证（OFL）进行使用，中文字体的使用多了一个选项👍
https://github.com/IBM/plex/releases/tag/%40ibm%2Fplex-sans-sc%401.1.0
作者在六个月间召集1200名同学共同完成的一套字库设计，该字体免费可商用。
https://www.bilibili.com/video/BV1RSiUY8ERe/
网站生成「像素艺术（Pixel Art）风格」。将图像细节较简化，通过小的方块或像素单元来表达形状和颜色。这样的风格常见于复古的电子游戏图形或简约设计中。Figma 中有类似效果的插件「vga asciicore.exe 、Dither it!」
https://editor.p5js.org/vjthlk/sketches/fWbxwrifY
https://cr7nkbf1b4.feishu.cn/docx/OO2vd3Ce2oHQhDxqFPhc26dVnth
体验了一下效果挺好的，中文生成效果还是需要国产模型。
https://x.com/op7418/status/1863571609023664343
视频介绍：https://www.bilibili.com/video/BV1MzioYgEfN/
提示工程（Prompt Engineering）是一门较新的学科，关注提示词开发和优化，帮助用户将大语言模型（Large Language Model, LLM）用于各场景和研究领域。
https://www.promptingguide.ai/zh
临近年末双十二年终特惠，在活动期间购买 Moonvy月维任意产品全部 8.7 折
| Moonvy 月维产品 | 原价（人/年） | 现在（人/年） | 其他品牌价格 |
|---|---|---|---|
| 专业版（20人协作团队、40GB容量） | 🔥60.6 | 174 | |
| 企业版（21人以上团队、100GB+容量） | 🔥165 | 327 | |
| 20GB 团队容量包 | 263 | - | |
| 2GB 团队容量包 | 34 | - | |
| 个人大会员（10GB团队容量包、协作成员+1） | 112 | - |
马上升级：https://moonvy.com/pricing/
2024-09-27 00:00:00
Figma 最近更新了它们的桌面客户端图标，这个新图标有着 3D 的质感，不过看起来有点……不太好看，有点太塑料感了，3D 效果的颜色也很奇怪。比起原来的图标，很不自然，感觉是 Figma 的又一个倒退啊。
看了下其他人的评论，看来不是我的审美问题，很多人都觉得这个图标不好看，比如 Rive 的设计师就直言：「这确实是一个倒退」
如果比较原图标，可以看到原图标的质感更加自然，也有立体感，但是不会让人觉得很突兀，而且颜色也更加柔和，作为图标在桌面上更加协调。而新图标，看起来像是一个面向新手的 3D 建模工具的图标，可不像是专业 UI 设计的工具。
不过，设计师们也不是没有办法，有些设计师自己设计了 Figma 的图标，有些设计的还挺好看的，比如这个 MagicGrass 设计的 Figma 图标，看起来就很不错，有着很漂亮的 3D 质感，颜色也很柔和，看起来就很舒服。
为此，我们在 Figma 增强的客户端 FigmaEX 中，添加了一个「自定义 Figma 应用图标」功能，预置了一些好看的图标，你可以快速把 Figma 的图标换成你喜欢的图标， 比如还原成更新前的图标、其他设计师设计的图标、或者你自己设计的图标（通过选择本地图片文件的方式）。
你可以下载 「FigmaEX 客户端」，在菜单栏中的「EX」项中找到「自定义 Figma 应用图标」功能，选择你喜欢的图标，然后重启软件即可（系统可能不会立即刷新，你可能需要手动让 Figma 从 Dock 栏消失再打开）。
把 Figma 图标换成你喜欢的图标，让你的桌面更加个性化吧！ 比如，我把自己的 Figma 图标换成了是 Windows XP 画图的图标，嘿，这样看起来更有趣了。
2024-08-27 00:00:00
Rspack 是一个基于 Rust 的 Web 构建工具，它最大的特点是惊人的构建速度。在最近的一年内我们把大部分项目都迁移到了Rspack/Rsbuild，包括我们的 Web 应用程序、博客、浏览器插件、Figma 插件、Sketch 插件等， 迁移后带来的开发体验提升非常明显，甚至超出了我们之前的预期，更快的构建速度带来了更快的开发迭代速度、更快的产品上线速度。
在此用这篇文章分享我们迁移的背后原因和经验，如果你遇到了和我们一样的问题，不妨试试 Rspack 。
在 2020 年，Moonvy 月维刚开始开发的时候， Web 构建工具还是 Webpack 的天下，那时我们也是使用的 Webpack，其繁杂的配置、缓慢的构建速度极大的拖累了开发体验。
所以当 Vite 的出现时，以在当时惊人的速度、直觉而易用的配置刷新了人们对 Web 构建工具的认知，我们也毫不犹豫的迁移到了 Vite。我们对 Vite 非常的喜欢，尤其是其开发体验优先的设计哲学，曾经也为 Vite 贡献过代码，即使在今天我们也认为 Vite 也是「最易用」的构建工具没有之一。
不过，随着项目的规模不断增长，Vite 所用机制造成的瓶颈也逐渐显现出来，最为突出的问题有 2 个
第一个问题是老生常谈的问题了，虽然出现频率不高但一旦出现就会很让人头疼，因为很难排查原因，我们可以看到即使在现在还是有不少 issues 是关于这个问题的。不过由于 Vite 承诺之后会用 Rolldown 来彻底解决这类问题，所以在此我们不做过多的讨论。
真正严重的，以至于我们不得不迁移 Vite 到 Rspack 的原因是第二个问题，随着项目文件增多，Vite 页面加载速度会越来越慢，这个问题在开发时尤为明显，因为开发期间需要打开浏览器的 DevTools，使用 DevTools 时我们的很多页面需要加载 10 秒以上，这对于开发体验来说是很难接受的。
注意这里说的是开发期间 (vite dev) 的页面加载速度，而不是项目打包 (vite build) 后的页面加载速度
开发期间的页面加载速度是 Vite 的开发体验的瓶颈
注意这个瓶颈不是 HMR (页面热重载)，也不是 Vite 编译速度过慢，这 2 个速度 Vite 已经足够快了。
页面重载速度的瓶颈是来自于：每个页面的请求数太多，瓶颈其实发生在浏览器和 DevTools 上。而背后的原因是 Vite 直接把 ES 模块直接发送到浏览器的机制，这意味着即使在未来 Vite 实装了 Rolldown 这个问题也不会得到解决。
这个问题困扰着很多人：《Page reload very slow, unbundle DX for large web app is not satisfactory》，不知什么原因（或许是因为 Vite 核心团队较少面对大型项目？），这个问题一直得不到重视，他们好像更关心的是启动速度、HRM 速度，但对于我们开发中的较大的项目来说，页面刷新速度（重载速度）是一个非常重要的问题，因为日常开发中常常需要刷新页面来进行业务调试，每一次代码更改可能对应着几十次页面刷新，而 Vite 的最大的瓶颈就在与此。
更不要说测试人员要通过局域网访问开发人员机器上的项目，比起本地访问，页面加载速会慢的更难以接受。
而当我们换到 Rspack 后，这个问题就迎刃而解了，页面重载速度从 10 秒左右提升到了 2 秒左右，足足有 500% 的提升，不仅仅是由于 Rspack 的构建速度快，更重要的是 Rspack 的构建机制不会导致页面请求数过多，这是因为 Rspack 会把所有的源文件打包成少数几个文件，然后再发送到浏览器，这样就避开了浏览器加载的瓶颈
从我们的测试数据可以看到，在开发环境下，Vite 的页面加载速度随着源文件数量的增加的曲线非常陡峭，而 Rspack 的页面加载速度则是一个平稳的曲线，我们认为 2 秒内的页面加载速度是一个可以接受的阈值，而 Rspack 即使上万个源文件也能保持在 2 秒以内的页面加载速度，而 Vite 在 1500 源文件下就超过这个阈值了。
不仅是因为 Rspack 没有采用 Vite 那种开发环境和生产环境不一致的构建机制，Rspack 惊人的速度还让我们可以在开发环境使用与生产环境一样的编译配置。
在过去的构建工具里，为了开发环境的速度，一些配置往往只用在生产环境，例如代码兼容性转义。具体的例子是在 Vite 中我们只在生产环境打包时才使用 @vitejs/plugin-legacy 进行转义。而 Rspack 足够快，我们可以在开发环境使用和生产环境完全一样的配置，得到完全一样的构建结果，也不用担心速度问题。
切换到 Rspack 后一个令人惊喜的地方是打包速度，我们的项目构打包度提升了 80% 以上，这意味着我们可以更快的迭代、更快的上线，这对于我们的团队来说是非常重要的。
或许有人会质疑，几十秒的打包速度提升真的能影响开发体验吗？其实，这里真正的关键在于：当打包速度快到一定程度（例如几秒内完成），你的开发流程将变得更加流畅，不会因为等待打包而频繁中断。这种无缝衔接的开发体验，不仅提升了我们的工作效率，还让整个团队的工作氛围更加轻松愉快。
| 设备 | vite build |
rsbuild build |
|---|---|---|
| macbook M3 | 42 秒 | 5 秒 -88% |
| macbook 2019 (Intel i5) | 121 秒 | 16 秒 -86% |
Rspack 另一个优势是它的 Webpack 生态兼容性，Rspack 可以兼容 Webpack 的大部分插件。
对于一个现代 Web 项目来说可能用不到，因为 Vite 生态大多都有对应的插件，不过我们有 Figma 插件 和 Sketch 插件项目，由于它们的官方构建支持都是基于 Webpack 的，而用 Rspack 可以几乎无缝的替代 Webpack ，在继续沿用现有的开发工具的同时，享受它带来的高效构建体验。
我们把工具工具迁移到 Rspack 给我们的开发体验带来了彻底提升，解决了使用 Vite 的页面载入速度瓶颈问题，还带了惊人的构建速度。开发流程将变得更加流畅，不会因为等待构建而频繁中断。
如果你也遇到了和我们一样的问题，非常推荐试试 Rspack，
这里说一下 Rspack 和 Rsbuild 的区别，如果你的项目原来用的是 Webpack ，可以直接换成 Rspack。否则使用 Rsbuild 会有更好的配置体验，Rspack 为了兼容 Webpack ，配置和 Webpack 一样繁杂，而 Rsbuild 则是一个精简了配置结构并有更多预置功能的 Rspack 包装，更接近 Vite 的使用方法。
2024-08-25 00:00:00
在 2 年前，我们曾在《Figma 制裁事件与备份》 这篇文章中分享了我们的 Figma 备份小工具，时过境迁，Figma 的更新带了很多变化，原来的小工具已经无法使用了。
但大家备份 Figma 文件的需求还是很强的，很多人都想要批量备份 .fig 文件，所以我们重新开发了一个新的批量备份 Figma 的工具：
它的使用方法很简单：
点击「获取文件文件列表」按钮
它可以列出你所有 Figma 的文件，勾选你需要备份的文件
点击「备份已选择文件」按钮开始备份
工具会调用浏览器依次打开选择的文件，然后下载备份，你将得到 .fig 格式的备份文件
由于这个工具是模拟你手动打开 Figma 文件并备份，效果和你手动下载 Figma 文件是一样的，所以兼容性是最好的。
但也因为如此，备份的速度会比较慢，建议第一次使用时先试试少量几个文件，看看效果。备份大量文件的时候选一个空闲的时段，比如晚上睡觉前，让它慢慢备份。
由于是在浏览器模拟手动下载的操作，需要提前打开相应的权限
FigmaEX 浏览器插件： https://moonvy.com/figmaEX/
这个工具内置在 Figma 增强扩展 FigmaEX 中，安装 FigmaEX 就可以使用了。
不过要注意的是虽然 FigmaEX 浏览器和桌面客户端都可以用，但这个 批量备份功能只有在浏览器端可用，所以你需要在浏览器安装 FigmaEX 浏览器扩展。
