本期封面来自这里,我可太喜欢这些复古风格了。


上周 Figma 宣布,所有 AI 功能包括 Figma Make 正式脱离 Beta,现在所有付费用户都可以使用了。但如果你是教育版用户……抱歉还是没有。

目前的 AI 功能包括:

  • Make: AI 生成设计,类似 V0 一样的体验。
  • Code Layers: 直接在 Figma Sites 中添加自定义动画和交互。
  • Make/Edit Image: 使用 OpenAI 和 Google Gemini 生成新图像或自定义现有图像。
  • Remove Background: 一键消除图像背景。
  • Boost Resolution: 自动增强图像质量和清晰度。
  • Rename Layers: 重命名所有图层。
  • Rewrite Text: 调整设计中的文本长度,语调或翻译内容。

其实还有一个 Suggest Auto Layout 藏在右键菜单也非常好用,一键自动帮你制作 auto layout,或快捷键 Ctrl+Shift+A 也可以。

同时还上线了 Figma Make & Sites Gallery,大量 Make 和 Sites 的案例,可以 remix 下来学习一阵子了。例如我非常喜欢的两位 design engineer 做了 Pattern Generator Tool3D ASCII Model Viewer另外 Claude 母公司的 CPO 加入 Figma 董事会了,是不是意味着很快就能用 Claude 模型了?


最近看到很多人吹字节的 Trae 官网动画很好看,我那天研究了一下,底部的效果应该和这个差不多:

https://tympanus.net/codrops/2022/01/12/pixel-distortion-effect-with-three-js/

其他类似的案例:

https://navana.ai

https://speakeasy.com

https://buka.studio

https://attio.com/engineering/blog

Attio 的设计工程师也分享了他们最新页面的实现细节,其实基本就是 threejs + react three fiber,如果经常关注他们的领域这些动画效果几年前就烂大街了。另外 Trae 官网作者说首页动画其实是 vibe coding 出来的


Resources↘

Evil Charts - Beautiful & Animated Charts

非常好看的图表组件库,基于 Recharts 和 shadcn UI 构建,开源免费。

An image to describe post

3D SVG Glass-Style Icons

图标平台 Nucleo 发布了可能是市面上第一套灵感来自苹果 glass 风格的图标,完全免费(可以 copy SVG),但想下载还是需要付费订阅。

An image to describe post