2025-01-26 00:00:00
2024年更新了 52 期，感谢大家每周一的守候，在2025年我会持续努力在这里分享资源和内容。
祝你：
财源广进，日进斗金！
万事如意，心想事成！
年年有馀，岁岁平安！
旅途顺遂，出入平安！
学业进步，金榜题名！
喜气洋洋，迎春接福！
福寿双全，健康长寿！
五福临门，阖家欢乐！
这是一个封面制作工具，该工具能帮助我们为 Medium、Wordpress、微信等平台的文章制作精美封面。 只需要通过选背景图、添加标题，就能够导出一个有有设计感的封面，工具中的高清无水印的图片素材均来自 Unsplash，可免费商用且无需版权。
https://github.com/jaaronkot/picprose
为开发者提供 React 动画库集合，包含文本动画、组件动画、背景动画等非常丰富的动画案例库，复制代码就可以直接使用啦
具备更强大的AI能力，可以更快捷的实现自然语言编程，支持使用 claude3.5，目前开放了 MacOS 版本，简单试用了一下确实效果不错。
通过该插件可以将 psd 格式的文件，以分层的方式导入到 Figma 中，方便的将ps中的素材、资源导入到 Figma中使用。
在 Figma 中可以使用快捷键 Shift ↓/Shift ↑ 对RGB 和十六进制的颜色微调，十六进制中每两位数代表 RGB 中的一位。
https://x.com/jshguo/status/1880517719520604181
作者第一次学 AI 编程，从0开始做了这个「柴猫表情包生成器」，输入文字描述，AI帮你生成可爱的柴猫表情包～
https://orangesai.com/catemoji/
这是个云服务器网站，网站的插画和动画风格使用的类似字符图案进行设计，视觉感受很整齐又很特别而且还有设计感。
今年的新年红包可以领取啦，领取地址：公众号文章中
2025-01-19 00:00:00
前几天介绍了谷歌的图生图 AI 模型，现在文生图功能也可以使用了，生成 3D 图标的质量非常不错，会跨墙的人可以都去试试看效果。
https://labs.google/fx/zh/tools/image-fx
ChatGPT 推出了 Tasks (任务) 测试版，可以让 ChatGPT 在未来为您做事的新方法。 无论是一次性提醒还是重复操作，告诉 ChatGPT 您何时需要什么，它就会自动处理。
“ 可以让 ChatGPT 在指定时间执行指定的操作 比如每天早上发送昨天的新闻和天气，指定时间画一张图片之类的。 Plus/Pro/Teams 用户可以使用，需要在模型选择器选择 ”—— 歸藏(guizang.ai)
https://x.com/OpenAI/status/1879267274185756896
完全支持拷贝代码使用的 UI 组件库，粘贴到 v0、Cursor、Bolt、Lovable、Replit，可以自己使用或者发给 AI 让他帮你优化你的产品界面。如果你是开发者也可以复制他用在你的项目中。
改变使用Figma变量的方式。将复杂的变量关系转化为直观的可视化地图，让你在一个无限的画布中查看和管理所有变量。 在无限的画布上同时查看所有可变集合，通过简单的拖放可视化和创建可变连接，在不构建组件的情况下，模拟不同的模式来预览变量的行为，快速搜索变量并直接跳转到它们，可以方便的辅助你理解和控制变量。
插件：https://www.figma.com/community/plugin/1457362132545070106
教程：https://www.figma.com/community/file/1460631853796817803
只专注于生成图像的轮廓描边，不处理图像内部细节
https://www.figma.com/community/plugin/1457662942651611491/image-stroke
通过插件可以快捷为元素添加动画，该动画使用 Figma 原型功能创建的。插件还没有上线，现在可以通过链接获取内测资格。
https://x.com/realvjy/status/1878787588838064433
网站中收集了精美的英文字体，可以在线查看字体的各种字重。
网站中提供大量的 Midjourney -- sref 样式，可以拷贝你喜欢的样式使用。
Figma 办公室里流传的六个大想法（从开发人员、设计师、分析师、作家、项目经理和全能型人才的角度撰写）付诸实践。下面让我们来看看我们对 2025 年的想法。
目录
https://www.figma.com/blog/six-memos/
动态的玻璃效果，支持切换玻璃的方向和类型，但是暂时作者未开放复制代码，可以作为效果欣赏借鉴
https://r3f.maximeheckel.com/fluted-glass
本期分享 2000 个手绘红包封面，大家可以在微信公众号文章中免费领取，谢谢大家长久以来的支持（还有一个动态的红包因为审核原因需要再晚几天来领取，到时会再文章通知大家）
领取地址：公众号文章最后
2025-01-12 00:00:00
在 Figma 中使用 Frame（容器/框架）时，快速添加指示符将出现在 Frame 的旁边和之间，以便您可以快速插入额外的 Frame 。
通过这个方法可以快速复制选中的 Frame 中的所有内容并创建一个新的 Frame。
快速添加的2种方法
https://www.figma.com/release-notes/
https://www.digitaling.com/articles/1305233.html
Notion 推出 Notion 风格头像的编辑器，可选择类型非常丰富，如果也喜欢类似风格的话可以用这个做一个自己的头像。
支持调整渐变类型、中心点位置、颜色数量、参数以及颜色晕染位置，可以导出渐变代码使用。
https://spektra-gradient-generator.vercel.app/
只需单击“生成”，组件就会添加到设计中。插件中包含各种类型的组件，例如卡片、按钮、导航等。作者表示更多组件持续更新中。
https://www.figma.com/community/plugin/1441612789885005473
文章："为什么编写这本手册？ 过去十余年，我有幸在互联网产品设计领域工作，从最初的界面视觉设计师成长为产品设计负责人与公司高管，见证了中国互联网产品设计行业的蓬勃发展。在为初创公司和大型科技企业服务的过程中，我不断思考着一个问题:什么是真正有价值的产品设计师?这个看似简单的问题，却包含了太多值得探讨的维度。"
https://cr7nkbf1b4.feishu.cn/docx/OO2vd3Ce2oHQhDxqFPhc26dVnth
选择文本图层运行插件就可以创建弧形文本样式，支持疏密、起始位置、环形大小等参数，插件完全免费。
https://www.figma.com/community/plugin/1183722659656348694/type-tool
这套设计系统的亮点在归纳了跨端应用中的各种影响因素。
人因关注用户的操作习惯和障碍；机因强调设备的分辨率和输入输出形式；
环因考虑环境因素如光线和噪音；法因则关注信息密度和操作难易度。
这些因素共同影响界面的设计策略与适配性，这套操作系统将这四种因素的动态变化考虑到组件设计中，使得非常灵活的能用在各种设备和场景中。
https://alibaba.github.io/rex-design/
模块化组件内容，可以适配不同尺寸，虽然是时间比较久之前的素材了，但内容质量现在使用依然不错。
https://www.figma.com/community/file/1097964499926853798
作者将多个平台的年终报告做了录屏展示，从 2022 年开始的。
https://www.yuque.com/paidaxin/dkopg8/xoi3yutc458wuxgo
一幅新年小画～作者：陈意得
2025-01-10 00:00:00
随着今年 AI 技术的不断发展，各种创新工具层出不穷。今天，我分享一下我最近常用的 AI 工作流，用于生成个性化的新年表情包。
使用到的工具：
首先，确定表情包的主角。我这次选用了经典动画角色「葫芦娃」中的人物进行二次创作。可以选取任何你喜欢的角色，甚至是自己设计的图像。
使用 Whisk AI 将平面图像生成具有 3D 质感的模型图。只需提供一张主角图和一张样式图，甚至可以不添加提示词。使用教程可以参考这个视频谷歌 AI Whisk
简单描述如：“中国神话故事中的蜈蚣精，手持大斧头”
将生成的图像上传到 海螺 AI 或 可灵 AI，使用其“图生视频”功能生成动态效果。
例如，可以描述：“蛇精向前移动，尾巴像响尾蛇一样摆动，面带微笑，手和胳膊比个心形手势。”这样，就能将静态形象变为动态表情。
微信表情支持 5 秒的视频，默认 AI 工具生成的视频也是5秒
得到动态视频后，可以使用任何视频剪辑工具为其添加文字和装饰。我使用 剪映，通过导入视频，加入艺术字和动画效果，导出到本地。
最后，将导出的动态视频上传到微信并设置为表情包。现在，你就可以通过自己制作的创意动态表情包和朋友们分享新年祝福了！
整个流程融合了多个 AI 工具，从经典动画角色到个性化的二次创作动态表情，不仅高效而且富有创意。无论是节日祝福，还是日常互动，借助 AI 技术，你也能轻松制作出属于自己的表情包！
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 的使用方法。
