设计素材周刊 069 期

📰 设计资讯

Figma Config 大会即将举行

Figma Config 大会于旧金山时间 6月21日开始，你想知道将要发布哪些功能吗？通过解决5个谜题，你可以获得5个线索，每个线索都对应着 Config 活动中将要发布的一个功能：https://configteaser.fun/

推特上的不少人推测的结果：https://twitter.com/figma/status/1669005660149764110

Framer AI 正式上线了

Framer 的 AI 生成网页功能正式上线了，使用文本描述就能自动生成自适应的页面设计，并且还提供了一些样式模板，比如一键修改文本样式、修改整体配色风格。

https://www.framer.com/ai

🏆 产品推荐

Webstudio 在线建站工具

Webstudio 是开源的在线建站工具，从设计到实现无代码的方式完成网站的上线。同类工具还有 Webflow、Framer。

https://webstudio.is/

在真实的网站上展示你的颜色

为你的网站选择配色方案的工具，打开网站使用下面的工具栏实现编辑修改配色，网站内容会实时应用你的设置。同时网站还有 Figma 插件和网页同步你的配色。

还提供了「调色板生成工具」只需输入一种主色即可为每种配色方案生成调色板。

https://realtimecolors.com/

🎊 设计素材

阿里智造字新字体：阿里妈妈方圆体

阿里妈妈方圆体是阿里妈妈·智造字通过智能 AI 的方式完成的一款简体中文双轴可变字体。收纳的中文字符包括但不限于GB2312，共计6763个汉字；英文大小写共52个；常用标点符号共227个，总计7042个字符。适合作为标题使用。

同时还新增了「阿里妈妈灵动体」「阿里妈妈刀隶体」。

https://fonts.alibabagroup.com/#/more

应用程序图标设计文件

作者分享应用程序图标设计文件，还做了原型动画。

https://www.figma.com/community/file/1250108820032747722/Design-Tips%E3%83%BBOrbit-Prototype-%26-App-Icon-%5BTutorial%5D

矢量图标模板文件：Raycast App Icon Template

Raycast App 的分层矢量图标模板文件有很强的质感和细节。

https://www.figma.com/community/file/1250056962645833804

120 Free VR-AR Headset Icons

120 个免费的 VR-AR 图标库

https://www.figma.com/community/file/1251070423177031565/120-Free-VR-AR-Headset-Icons

免费 3D 线性形状素材

140 个五种配色线条形状 3D 素材，PNG 格式 3000×3000 大图。

https://squiggel.wannathis.one/

📖 值得读读

CSS 中的颜色格式：Color Formats in CSS

https://www.joshwcomeau.com/css/color-formats/

颜色格式是指在 CSS 中使用颜色时，可以采用不同的表示方式。常用的颜色格式包括十六进制、RGB、RGBA、HSL 和 HSLA 等。其中，十六进制是最常用的颜色格式，它使用 6 个十六进制数字表示颜色，例如 #FF0000 表示红色。RGB 格式使用红、绿、蓝三个颜色通道的数值来表示颜色，例如 rgb(255,0,0) 也表示红色。RGBA 格式在 RGB 的基础上增加了一个透明度通道，用于控制颜色的不透明度。HSL 格式使用色相、饱和度和亮度三个参数来表示颜色，例如 hsl(0,100%,50%) 表示红色。HSLA 格式在 HSL 的基础上增加了一个透明度通道。这些不同的颜色格式可以根据实际需要进行选择和使用。

我们应该使用哪一种？这可能看起来是一个微不足道的决定，但它们之间有一些非常重要的区别。文章中，将带您参观不同的选项。我们将看到它们是如何工作的，我们如何解密它们，以及我们如何利用它们。