figma下载

by Gbolahan Taoheed Fawale

通过Gbolahan Taoheed Fawale

如何在Figma中创建逼真的3D对象 (How to create realistic 3D objects in Figma)

Prior to using Figma, I used Adobe Illustrator for most of my designs (like logos, mockups, illustrations, and so on). But since I joined the “Figma gang” ?, I’ve dropped illustrator so I can focus on Figma and learn as much as I can about it.

在使用Figma之前，我将Adobe Illustrator用于大多数设计(如徽标，模型，插图等)。但是自从我加入“ Figma帮派”以来，我就丢掉了插画家，这样我就可以专注于Figma并从中学到很多。

I wanted to discover more tricks with the software, so I could arrive at end-results that aren’t “typical Figma.” This stemmed from the fact that the designs I hope to make aren’t necessarily what the software was developed to do.

我想通过该软件发现更多技巧，因此可以得出并非“典型Figma”的最终结果。这源于一个事实，即我希望进行的设计不一定是软件开发完成的。

Figma is more of a UI/UX design tool than a visual designing or illustrating tool like Adobe Illustrator.

与可视设计或插图工具(如Adobe Illustrator)相比，Figma更像是UI / UX设计工具。

This post is about me exploring Figma beyond UI/UX to uncover new ways of using it and new things I could discover while using it as my complete design tool. In the end, it didn’t really matter what type of design I might want to do or venture into.

这篇文章是关于我在UI / UX之外探索Figma的，以发现使用它的新方法以及将其用作完整设计工具时可以发现的新事物。最后，我可能想做或尝试哪种类型的设计并不重要。

So, I will take you through the process of how I came up with the above image.

因此，我将引导您完成以上图片的制作过程。

步骤1：建立类似的方块 (Step 1: Create a similar box)

The first thing I created was a box that looks similar to the brown one in the picture above. This was created with the use of shapes (rectangles only). I know some people are fans of the pen tool. But in the above example, the pen tool doesn’t afford us the flexibility to create shadows, add gradients, or do any sort of object manipulation to individual shapes or parts of the box.

我创建的第一件事是一个盒子，看上去类似于上图中的棕色盒子。这是通过使用形状(仅限矩形)创建的。我知道有些人喜欢钢笔工具。但是在以上示例中，钢笔工具无法为我们提供创建阴影，添加渐变或对盒子的各个形状或零件进行任何类型的对象操纵的灵活性。

In the above illustration, I used the edit object tool to resize and manipulate the rectangles to make a rhombus-like shape. The next thing I did was recreate the same rectangles and turn them backwards to make up the third and fourth sides of the box.

在上面的插图中，我使用了编辑对象工具来调整矩形的大小并对其进行操作，以使其形成菱形形状。我要做的第二件事是重新创建相同的矩形，然后将它们向后旋转以组成框的第三和第四边。

步骤2：添加阴影 (Step 2: adding shading)

I added color to differentiate each side of the box, and also to give an idea of how the shadows, contrast, and gradient fill would be applied. This laid a foundation so that the sides of the box could be worked on independently. I also created the box lid pieces.

我添加了颜色以区分框的每一侧，还给出了如何应用阴影，对比度和渐变填充的想法。这奠定了基础，使盒子的侧面可以独立加工。我还创建了盒盖件。

第三步：使其更加逼真 (Step 3: making it more realistic)

I added a gradient fill to the visible box lids (f1 & f2) to make it look much more realistic and flat. Notice the way the gradient is layered on f2? I did the same for f1, and then adjusted the degree of the gradient fill to match the direction of light on the box.

我在可见的盒盖(f1和f2)中添加了渐变填充，以使其看起来更加逼真和平坦。注意渐变在f2上分层的方式吗？我对f1进行了同样的操作，然后调整了渐变填充的程度以匹配盒子上的光线方向。

After adding the gradient, I added the shadows. When rays of light fall on an object, a shadow is automatically formed relative to the direction of light and the object.

添加渐变后，我添加了阴影。当光线落在物体上时，会相对于光线和物体的方向自动形成阴影。

Note: The layer highlighted above is actually beneath the visible on. That’s what will be resized to form the shadow.

注意：上方突出显示的层实际上位于可见的下方。 那将被调整大小以形成阴影。

步骤4：调整盖子 (Step 4: making adjustments to the lid)

To add shadow, I simply copied f1 and pasted it on the same layer. I then chose the original/initial copy of f1 (which is below the newly copied ‘f1,’) clicked the edit object tool, and resized it to protrude a little underneath “f1 copy”. This was done just to perfectly create the shadow effect. The default Figma shadow effect feature wouldn’t have given me the flexibility to create the brown box in the picture.

要添加阴影，我只复制了f1并将其粘贴在同一层上。然后，我选择了f1的原始/初始副本(位于新复制的“ f1”下方)，然后单击“编辑对象”工具，并调整其大小以使其突出于“ f1副本”下方。这样做只是为了完美地创建阴影效果。默认的Figma阴影效果功能无法让我灵活地在图片中创建棕色框。

So I added a dark color to it and blurred it with a value of 20. You might also notice that the original f1 is not as sharp as the other layers. Blurring it gives it that cool realistic shadow effect and reduces the black color saturation. I then replicated the same process for f2.

因此，我向其添加了深色并使用20值对其进行了模糊处理。您可能还注意到，原始f1不如其他层那么清晰。对其进行模糊处理可使其具有酷逼真的阴影效果，并减少黑色饱和度。然后，我为f2复制了相同的过程。

In Figma, you can easily copy and paste a style/effect from one layer to another using ctrl + alt + c for copy and ctrl + alt + v on the layer that you want a similar effect or style to be applied to.

在Figma中，您可以轻松地将样式/效果从一层复制和粘贴到另一层，使用ctrl + alt + c进行复制，并在要应用类似效果或样式的图层上使用ctrl + alt + v。

步骤5：与身体打交道 (Step 5: dealing with the body)

Now that we are done with the carton box cover, let’s work on the body of the box. We want to reflect the ray of light bouncing on it as well as the shadows that give the box a contrasting and realistic appearance.

既然我们已经完成了纸箱盒子的盖，让我们在盒子的主体上工作。我们要反射在其上反射的光线以及使盒子具有鲜明对比和逼真的外观的阴影。

All we need for b1 and b2 is gradient fill, as seen in the above illustration.

如上图所示，我们需要的b1和b2是渐变填充。

Did you notice that the box is starting to look more real? Can you spot the difference when a gradient is added to b1 but not yet to b2? Or when gradient fill is applied to both sides?

您是否注意到盒子看起来更真实了？当将梯度添加到b1但尚未添加到b2时，您能发现差异吗？还是在两侧都应用渐变填充？

Let’s move on.

让我们继续。

第六步：内饰的挑战 (Step 6: the challenge of the interior)

Working on the inner part of the box (b3 and b4) was a little bit challenging. I had to pause for a few minutes to study the shadows and level of saturation at different corners of the inner parts before thinking of a way to replicate it — all while still using shadows and gradients.

在盒子的内部(b3和b4)工作有点挑战。我不得不停顿几分钟来研究内部各个角落的阴影和饱和度，然后才想出一种复制它的方法-同时仍在使用阴影和渐变。

In the same way as before, I applied a layer of gradient fill on b4 with darker colors — since it’s the darkest part of the box — to achieve the level of saturation I wanted. See the image below:

以与以前相同的方式，我在b4上应用了一层渐变填充，并使用了较暗的颜色(因为它是盒子中最暗的部分)，以达到我想要的饱和度。见下图：

Notice the way the gradients are being arranged vertically with one of the color boxes on the gradient liner close to the other one? The idea is to make the shadow appear like it grew from inside the box. Though we can not see inside the box, we do know that as it gets deeper, rays of light reduce, which makes the innermost parts get darker automatically.

请注意，渐变是垂直排列的，而渐变色衬板上的一个颜色框靠近另一个颜色框？这样做的目的是使阴影看起来像是从盒子内部长出来的。尽管我们看不到盒子内部，但我们确实知道，随着盒子变深，光线会减少，这会使最里面的部分自动变暗。

最后一部分：盒子下面的阴影 (Final part: shadows underneath the box)

Here, we’ll take the same idea I used above to create the shadows for the box covers above (copying the layers, resizing, and applying some dark colors and effects) and repeat it. Though I already applied it in the picture above, the one below is the workaround ?

在这里，我们将采用与我上面创建框阴影(复制图层，调整大小并应用一些深色和特效)的阴影相同的想法并重复进行。尽管我已经在上图中应用了它，但是下面的一个是解决方法？

I made extra copies of b1 and b2 and chose the original layer. I then dragged it down a little, added a darker color, blurred it a little, and also resized it to have that perspective view. Creating realistic images in art and architecture is all about perspective.

我制作了b1和b2的额外副本，并选择了原始图层。然后，我将其向下拖动一点，添加较深的颜色，使其模糊一点，并调整其大小以具有该透视图。在艺术和建筑中创建逼真的图像完全是透视。

Now we have created a realistic 3D box — it’s not perfect, but it’s realistic enough. ☺️

现在，我们创建了一个逼真的3D盒子-虽然不是完美的，但是足够逼真的。 ☺️

最终调整 (Final tweaks)

At this stage, I stopped to compare what I had done with the original brown box I got off the internet. I wasn’t satisfied, so I decided to push further to see what I could achieve by attempting to make the box look very real with a high contrast.

在这个阶段，我停下来比较一下我与互联网上的原始棕色盒子所做的事情。我不满意，所以我决定进一步尝试看看如何通过使包装盒在高对比度下看起来非常真实来实现我的目标。

So how did I achieve this?

那么我是如何实现的呢？

I created extra copies of b3 and b4, and applied a gradient layer to their original copies (which are the dark parts facing us in the picture below).

我创建了b3和b4的额外副本，并对它们的原始副本应用了渐变层(下图中是我们面对的深色部分)。

Upon closer observation, you will notice that it does looks like the edges of b1 and b2 have a shadow of their own towards b4 and b3, respectively. This is because light rays have fallen on them from the sides, projecting their shadows on the closest available layer or object.

仔细观察，您会发现它确实看起来像b1和b2的边缘分别对b4和b3都有自己的阴影。这是因为光线从侧面落到了它们上，将它们的阴影投射在最近的可用图层或对象上。

Remember the extra b1 and b2 copies that I made earlier to form the shadow beneath the box? Well, first I resized these two layers (original b1 and b2) to protrude above the copied versions of (b1 and b2). You can see them as the current outer sides of the box which the ray of light falls on. Then I added another darker gradient layer.

还记得我之前制作的额外b1和b2副本，以在盒子下面形成阴影吗？好吧，首先，我调整了这两层的大小(原始b1和b2)，使其突出于复制的版本(b1和b2)之上。您可以将它们视为框上当前光线照射到的外侧。然后，我添加了另一个较暗的渐变层。

Below is what the box looks like now.

下面是该框现在的样子。

Note: The picture above is a little different from the one in the introductory part of this piece, as I had to create another one to be able to explain some of the things I did in the first design. It was a really fast one ?

注意：上图与本文的介绍部分略有不同，因为我必须创建另一幅图才能解释我在第一个设计中所做的一些事情。 那真的是一个快吗？

To get more details and understand everything I did, here is the link to both the original version and the example version I created.

要获取更多详细信息并了解我所做的一切，请点击此处 是指向原始版本和我创建的示例版本的链接。

Thanks for reading!

谢谢阅读！

Feel free to reach out on twitter @GbMillz

随时联系Twitter @GbMillz