设计素材周刊 218 期

📰 设计资讯

Figma 更新 Auto Layout，让设计布局更接近 CSS

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