设计素材周刊 021 期

🏆 产品推荐

Figma 倾斜插件

用来制作倾斜和 3D 效果，操作简单功能强大 👍

https://www.figma.com/community/plugin/862059663689780943/Perspective-Toolkit

Heazy - 在线生成矢量背景纹理

可以根据模板快速生成背景和配色方案，提供比例更换、波浪纹理等设置、描边设置、颜色修改等自定义编辑，支持svg 、png、代码三种导出类型。

https://heazy.studio/

暗夜代码主题

视觉及其友好的暗夜主题配色，提供两个主题。

单色
月光

https://sequoiatheme.com/

手机屏幕尺寸查询

超级全的手机、Pad、电脑屏幕像素及物理尺寸、比例等信息的查询。

https://screensiz.es/

📖 值得读读

探索用 Figma 做游戏 UI 设计

记得2021年《Figma一站式设计交付》中提到，Figma本身是一个矢量设计软件，所以个人认为Figma比较适用于制作一些偏扁平、卡通的游戏UI风格。

纵观全网Figma基本都是To B 、To C类的产品应用，很少人会往这个游戏这个方向研究了，因此我开启了一段Figma针对扁平类游戏UI设计的探索之旅，结合Figma Config 2022姗姗来迟的AutoLayout 4.0的使用，以英雄联盟鲜明的海克斯科技风格代表性更高。

此次练习设计主要总结了一些设计技巧：

异形的自适应按钮、自适应面板背景（AL4.0绝对定位+约束拉伸）

数字、字母动画（AfterDelay嵌套）

文章链接：https://mp.weixin.qq.com/s/VILa-zhplOZcEda9opENGw

Figma 实例文件链接：https://www.figma.com/community/file/1050752368690341429

全息图、漏光以及如何构建纯 CSS 着色器

滚动浏览器，位置不同图像的内容光影跟随变化是如何实现的。

模拟镜面反射 首先，我们需要考虑光线如何在图像表面从明处传播到暗处。我们需要一个光线最强烈的区域，随着光线的消散逐渐下降到黑暗中。我们将使用渐变来做到这一点。

了解图像混合模式 顾名思义，mix-blend-mode将一个元素层中每个像素的颜色与它正下方的层混合在一起。与 GLSL 一样，CSS 为我们提供了一长串可供选择的选项，创建正确的效果意味着知道哪种混合会产生我们需要的结果。但是这些混合模式实际上是做什么的呢？在我们陷入我们的着色器之前，让我们快速浏览一下我们将使用的混合模式。

https://robbowen.digital/wrote-about/css-blend-mode-shaders/

Figma 的新功能：2022 年 6 月

https://www.figma.com/blog/whats-new-in-figma-june-2022/

Figma 更改了插件的安装位置，安装可卸载的位置相同

如果你安装了 FigmaEX 可以在侧边栏完成，搜索、安装和卸载

我们尝试让插件不再有「安装」和「未安装」的概念，需要插件的时候，输入关键字搜索即可。搜索结果里单击即可启动，不需要的插件右键即可「卸载」。

https://mp.weixin.qq.com/s/VyxENV-WczLw48ULCmBWxg

🎊 设计素材

特色矢量插画

难得的细致矢量还免费的插画素材

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

品牌视觉指南，设计资源文件

里面收录了一些大品牌的 LOGO 视觉文件，有麦当劳、星巴克、微软、Apple、国家地理等超大品牌的视觉方案，需要注册后下载 PDF 格式文件。

https://brandingstyleguides.com/

图标动画库

常用图标动画，比如警告的闪烁、关闭按钮的抖动、菜单打开变形为关闭、描边点击变实色填充等效果动画，下载提供 json 和 svg 文件直接可用。

https://useanimations.com/

3D 抽象插图

一次打包下载，Figma、PNG、SVG等格式。

https://www.ls.graphics/illustrations/bzzzt

样机模型素材

常用到的视觉包装设计都有，宣传册、名片、LOGO 展示、衍生品等模型

https://www.ls.graphics/free-mockups

Feather 在线图标库

图标支持调整尺寸、粗细参数，点击即可下载 SVG 格式到本地。

https://feathericons.com/

该图标库在 Figma 里有图标插件，不过插件里不支持参数的修改。

https://www.figma.com/community/plugin/744047966581015514

🏖 随便逛逛

GLEEC 网站视觉欣赏

网站设计既表现科技颜色又不俗套

https://gleec.com/

DG 时装秀，7月9日在米兰

https://altamoda.dolcegabbana.com/en/

一个关于甲虫的科普网站

https://www.knowyourbeetle.com/

来自地球的数据

人类所做的一切都会影响我们的生态系统。由于地球上的许多系统都处于临界点，气候数据平台必须具有可访问性和现代化。输入地球 API。

我们从来自美国国家海洋和大气管理局(NOAA)的重要温室气体 CH 4、CO 2、N 2 O 和 SF 6开始。您可以按年和月的间隔查询数据。（从下拉列表中选择不同的排放以查看示例数据集）

https://www.hge.earth/