2024-11-17 00:00:00
Lottielab 会在11月20日（本周三）上线到 Framer 的插件社区中
https://x.com/lottielabhq/status/1857076870660903171
可以通过视频了解常用抠图工具擅长的类型：Figma AI 、Adobe Photoshop 、Pixian.ai 、鲜艺AI 、Remove.bg 、Photoroom - AI 、Figma插件：AI-Style Copy 、Figma插件：Icons8 Background Remover
评测文件：https://moonvy.com/url/q5FjO6Ti
评测视频：https://www.bilibili.com/video/BV1YsmfYmEwc
插件支持智能扩图，能够快速调整图片尺寸和比例；提供 AI 抠图功能，一键移除背景并精准保留目标对象； 还可以通过输入提示词生成图像。此外，插件内置多种艺术风格模板，用户只需点击即可快速应用到设计中。
https://www.figma.com/community/plugin/1437318459007099882/ai-style-copy
支持在屏幕上任意位置进行录制和标注信息，可以同时录入麦克风或内部音频，并且支持点击高亮效果。 可以将录制视频导出 MP4、gif、webm 等文件格式，还能对视频进行一些简单的编辑。
GitHub：https://github.com/alyssaxuu/screenity
有趣的插件，很符合冬季的设计偏好
https://www.figma.com/community/plugin/1434601307616372925/snowflake
这是一个开源项目 free-font，由 jaywcjlove 维护，在收集和分享商用免费的汉字字体和开源英文字体，方便用户下载和使用。
https://wangchujiang.com/free-font/
收集了 600 多个免费商用字体，支持多种语言、多种风格的字体推荐，包括行书、黑体、手写体等，甚至能一键下载所有字体。
https://www.figma.com/community/file/1196864707579677521
包含 1539 个 SVG 图标，支持自定义图标粗细，支持导出 SVG 和代码格式。
作者提供了随机组合功能，轮廓、眼睛、嘴巴、装饰品、背景都有可选项，非常可爱。
https://bunnyismoving.github.io/
2024-11-10 00:00:00
Ideogram Canvas 能够生成包含文本的图像、海报，支持扩图、编辑、混合重组，更像是 AI 设计工具了，有兴趣的可以试试。
https://x.com/ideogram_ai/status/1848757699606983143
Rive 支持了 Layouts，这对于动态游戏 UI、HUD 等非常有用，另外 Rive 的社区中有很多可交互动画文件的分享，质量很高👍，riv格式的文件在本地无法预览，月维在产品早期就支持了 riv 格式的在线预览，让交付设计资源更流畅。
https://x.com/rive_app/status/1851293986365051008
混合搭配段落样式：现在您可以对同一个文本节点应用不同的段落间距或缩进
https://x.com/figma/status/1853592300582228048
https://www.figma.com/release-notes/
支持 Pad 和 手机中绘制像素风格插画，支持 iOS 和 Android 系统平台。
https://www.figma.com/community/plugin/1161618766697969707/quick-tracing
腾讯推出的 Mac 学习助手，支持微信公众号内容检索，文档解析、智能写作。
投稿人：杳芜
插件中近期增加了更常用的简洁 UI 样式，绘制一个矩形，打开插件点击效果即可应用到设计图中。
https://www.figma.com/community/plugin/1392338579595619092/canned-style
作者在过去的一年每天都在做设计挑战，探索各种小部件、图标和Ul元素。作者将源文件全部公开了。
https://www.figma.com/community/file/1434983318290209664
https://x.com/sovpal/status/1853154805902168475
https://animate-avatar.netlify.app/
如果设计图中包含比较多的交互注释和交互说明，可以看一下这套模板。如果是简单的设计交付使用我们月维的设计交付就足够了，支持在线添加注释、关联链接、多倍数切图、切图压缩一次性完成交付。
https://www.figma.com/community/file/1433803784856633729/ui-ue
以前都是 Figma UI 组件，随着 Framer 的生态逐渐完善也有了收费的 UI 套件，这套 UI 风格设计很细致
很实用的使用技巧
https://www.bilibili.com/video/BV1nFDrYQEqc/?vd_source=3b9794030185d9477ec1a207ce025af4
来自 @miilesus 分享的一组个性化「水彩风格」 --sref 1030583812
https://x.com/miilesus/status/1854165131283841228?s=46
挺好玩的，就是看的人需要猜谜😄
2024-11-03 00:00:00
新功能名称 Act-One，你可以上传一段人物表演视频，来驱动一个角色跟你做一样的面部表情，详细了解可以看一下「数字生命卡兹克」的具体介绍。
https://mp.weixin.qq.com/s/rUQiPTiSibTgUMWsyArIrQ?poc_token=HAKLJ2ejdEmVNJztD4xMoAqLlxZBr6YvyYjA5C8z
平台集成了模型分享、Workflow 搭建以及 LoRA 训练等多种功能，暂时未开放注册（内部测试阶段）。用户可以上传自己开发的 AI 模型，并在社区中与其他人分享，平台还支持用户搭建 AI 工作流程。 同类模型社区还有 Liblib 和 CIvitai 这两个。
在 Figma 中使用 AI 编辑图像，支持使用 Flux 人工智能模型；
生成图像：使用提示生成图像；
擦除对象：使用AI在 Figma 中直接从图像中擦除不需要的对象；
生成填充：在照片的任何部分上绘画，并使用提示在任何您想要的地方添加对象；
矢量化：从 Figma 画布中选择任意图像，并将其转换为可编辑的矢量形状；
移除背景：一键移除图像背景，获得干净透明的照片；
https://www.figma.com/community/plugin/1429927008820741722/unblocked-ai
可以自由组合的人物系统插件
https://www.figma.com/community/plugin/1281836721557874111/whocares-by-humation
开源流畅动画图标集合，可用于您的项目。开源且免费可以随意使用它们， 使用 framer-motion 和 lucide 构建
这组 AI 动态图标的动态可以学习，资源内容是收费的。
https://x.com/Iconlypro/status/1851270264128237843
Onlook 是一款开源的、本地优先的 React Figma。直接在实时网页中设计并立即将更改写入代码。
盐烤秋刀鱼，来自插画师：@oimo_imoo
https://x.com/oimo_imoo/status/1852632011607064715
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 的使用方法。
