不会设计也能做!2个宝藏Figma插件,轻松做出科技感网格背景

Hello 各位好，这里是效率工具指南。我是小豪。

先前在一篇文章里说到，我日常做图会用到的工具——ChatGPT 和 Figma，后边的 Figma 是许多设计师在用的在线设计工具，尤其 UI/UX 设计师。

虽然我不是设计师，但「在线、随时随地可用」的特性太吸引我了，做完的图可以随时关掉，等想用再打开，这中间完全不用惦记上次做的图、或者源文件放在哪了，简直不要太爽。

前阵看一些人做的视频，有些画面为了避免背景太「素」，会用到动态网格作为背景，类似下图——

看到这，我灵机一动，平常做静态图或者封面图，不也能用类似的网格作为背景？

有了想法，我就开始研究怎么在 Figma 中快速制作出类似的网格背景。

先上图，给各位看一下我在 Figma 中制作的两版「科技感」网格背景图，是不是看着还行？

想跟着在 Figma 中制作类似网格背景效果，可以看下边👇👇的文字教程。

如何在 Figma 中制作科技感网格背景？

在 Figma 中制作这种带有「透视」的网格效果，可考虑使用这两个 Figma 插件——

1.1

Perspective Grid & Tunnel Generator

这个 Figma 插件比较全面，既能生成透视网格，也能生成空间隧道，后者的「隧道」指类似科幻空间、无限延伸隧道的视觉效果。

初次使用 Perspective Grid & Tunnel Generator 插件，和先前介绍过的一个 Figma 抠图插件类似——

在 Figma 画布空白处右击，选择 Plugins > Manage Plugins，在打开的面板，点击 Plugins & widgets 标签，搜索插件名 Perspective Grid & Tunnel Generator，点击 Run 运行插件，会打开下图右侧的插件面板。

插件默认生成网格 Grid，下方有 4 个选项供我们调整——

调好参数后，点插件底部的「创建网格」，会在 Figma 画布中添加一个名为「透视网格」的组合，由多条直线组合而成。

这也是这个插件的一大优势，它生成的透视网格是「可编辑」的，你可以选择整个网格，通过右侧面板的 Stroke 选项，更改组成网格的直线的颜色、透明度或者粗细。

1.2

3D Transformer

这个插件的工作原理与前边的插件存在差异，它不是网格生成器，而是将 Figma 中的画板（Frame）或图片进行 3D 变换，并将变换后得到的效果以一个位图图层插入 Figma 画布中。

因此如果是使用 3D Transformer 来制作网格背景，它生成的网格其实是一张图片，不像前边的插件可以自由调整网格的颜色、线条粗细。

基于 3D Transformer 来制作本文开头的网格背景，稍微会麻烦一些：

你需要先创建一个普通的网格，并将这个网格置于一个 Figma 画板上。

选中网格所在的画板，运行 3D Transformer 插件，我自己在用这个插件的过程中，发现一个体验比较差的地方，就像这里的例子——

我选中的是透明背景的网格画板，插件右侧的预览窗口是看不到 3D 变化后的效果的……只有底部的预设，因为加了一点「阴影」效果，才能勉强看到应用预设后的大致效果。

虽然看不到预览效果，但用来制作网格背景，还是没问题的：

可以先应用插件右下角的第三个预设，接着微调一下左侧的 X 轴的旋转角度，它会影响最终生成的网格的倾斜程度。

调好参数后，点插件底部的「插入图层」，就会在 Figma 画布中插入名称为 test 的位图图层。

3D Transformer 插件生成的是位图图层，相较前一个插件，可编辑性比较差，如果觉得生图的网格不满意，可以在使用插件之前，多调整一下普通网格的样式，调好后再用插件进行 3D 变换。

近期可能错过的更新：

以上就是今天想分享的内容，希望对你有帮助。

如果这篇文章对你有帮助，别忘了留下「三连」，你的支持，是我持续更新的最大动力，我们下次再见。