figma设计_我如何使用Figma设计等轴测3D中的著名建筑

figma设计

by Gbolahan Taoheed Fawale

通过Gbolahan Taoheed Fawale

我如何使用Figma设计等轴测3D中的著名建筑 (How I designed a famous building in isometric 3D using Figma)

This article does not quite follow the conventional tutorial format. This is a blend of storytelling and broad explanations, a well-documented expression of my thoughts.

本文不完全遵循常规教程格式。 这是讲故事和广泛解释的结合，是我思想的有据可查的表达方式。

Since I designed my first 3D object in Figma, I’ve become more interested in recreating different complex objects and illustrations. This will ultimately help me better my design skills. I want make designs that make people go “Wow! Did you really use Figma to do that?” I want to hear them express their surprise, as they thought Figma was only a UI design tool.

自从我在Figma中设计了第一个3D对象以来，我对重新创建不同的复杂对象和插图越来越感兴趣。 这最终将帮助我提高设计技能。 我要设计让人印象深刻的设计“哇！ 您真的使用Figma做到了吗？” 我想听听他们表示惊讶，因为他们认为Figma只是一个UI设计工具。

That is how I personally want to position Figma within and beyond my immediate community. Just like developers say, “it’s not about the available tools but how well those tools can be put to good use.” Indeed, it’s about how these tools can be used for the desired results. Besides, the most important aspect of software development is what determines your level of proficiency in a particular programming language. I also do little front-end as well, though.

这就是我个人希望将Figma定位在我的直接社区内外的方式。 就像开发人员说的那样，“这不关乎可用的工具，而是如何充分利用这些工具。” 的确，这与如何将这些工具用于期望的结果有关。 此外，软件开发的最重要方面是确定您对特定编程语言的熟练程度的因素。 不过，我也很少做前端。

I have some design projects as well as accompanying posts that I will be preparing in an effort to document how I created them. I will be pushing these to the public as soon as I am done.

我将准备一些设计项目以及随附的帖子，以记录如何创建它们。 完成后，我会尽快将其发布给公众。

Though isometric designs are gradually getting popular, I want to push my designs beyond the conventional isometric 3D designs. I want them to head towards something more realistic while also keeping their originality.

尽管等轴测设计逐渐流行，但我想将我的设计超越传统的等轴测3D设计。 我希望他们朝着更现实的方向前进，同时又保持自己的独创性。

Now, let’s get back to business. I want to take it back to the roots (Africans, a-woo! I know some of us know that popular JJC song. Lol.) Well, this is the first design from my Isometric Nigeria 3D landmark project, and it’s also one of the most complex. I believed that if I could successfully design this building (the National Theater, in Lagos) I could easily design any other isometric 3D object.

现在，让我们回到正题。 我想把它带回根源(非洲人，哇！我知道我们中有些人知道那首流行的JJC歌曲。大声笑。)嗯，这是我等距尼日利亚3D地标项目的第一个设计，也是其中之一最复杂的。 我相信，如果我可以成功地设计这座建筑(拉各斯国家剧院)，那么我可以轻松地设计任何其他等距3D对象。

阶段1：预先设计 (Stage 1: Pre-design)

I started out by spending some time studying the building. I used a picture I got off Google as a reference point by bringing the picture into my Figma workspace. While I worked on the design, I kept studying the reference image and continued to tweak the design until I got something nicely crafted.

我从花时间研究大楼开始。 通过将我从Google下车的图片带到Figma工作区中，以此作为参考。 在进行设计时，我一直在研究参考图像，并继续对设计进行调整，直到制作出精美的作品。

I approach my designs like I want to draw or paint them on paper. I study the shadows, perspective, contrast, direction, and reflection of light. These are some of the most important elements and features to look out for when creating isometric 3D objects and realistic illustrations. Strategically applying gradient layers give objects that solid appearance.

我可以像在纸上绘画或绘画一样处理自己的设计。 我研究光的阴影，透视图，对比度，方向和反射。 这些是创建等距3D对象和逼真的插图时要注意的一些最重要的元素和功能。 从策略上应用渐变层可以使对象具有坚实的外观。

第2阶段：适当设计(创建剧院的上座部分) (Stage 2: Design proper (Creating upper seat-section of the theater))

First, I created the body of the upper part of the building using a rectangle. I then modified the rectangle to give me a shape similar to what I have in the reference photo. After that, I did something similar for the other part (rectangle) of the building that looks like it’s behind the first, check the second image below.

首先，我使用矩形创建了建筑物上部的主体。 然后，我修改了矩形，使它的形状类似于参考照片中的形状。 之后，我对建筑物的其他部分(矩形)进行了类似的处理，看起来像是在第一部分的后面，请查看下面的第二个图像。

Now we need to replicate these two shapes, edit them to make them appear bigger and place them behind the initial/original layers. This lays a foundation for what will later look like a roof/top of a real building structure. This process is demonstrated in the images below.

现在，我们需要复制这两个形状，对其进行编辑以使其看起来更大，然后将它们放置在初始/原始图层的后面。 这为以后看起来像真实建筑结构的屋顶/顶部奠定了基础。 下图演示了此过程。

Once completed, the next stage was to create the lower part of the building.

完成后，下一步就是创建建筑物的下部。

阶段3：设计剧院舞台的外部 (Stage 3: Designing the outer part of the stage of the theater)

I created a rectangle, applied a corner radius of 100px to the upper left and right corners, and also applied a linear gradient fill. The corner radius and gradient are used to show that the structure is circular. The result is the image below.

我创建了一个矩形，在左上角和右上角应用了100px的角半径，并应用了线性渐变填充。 拐角半径和坡度用于显示结构为圆形。 结果是下面的图像。

Next, I added another rectangle with a gradient fill, and bent it outwardly towards the bottom. The two rectangles in this stage show that the concrete base of the first section we created above is also circular. The new rectangle has a wider circumference so it extends more outwardly than the section above it. This is also reflected in the width of the rectangles. The combined result is in the image below.

接下来，我添加了另一个带有渐变填充的矩形，并将其向外朝底部弯曲。 此阶段中的两个矩形表明，我们在上面创建的第一部分的混凝土基础也是圆形的。 新矩形的周长较宽，因此比其上方的截面更向外延伸。 这也反映在矩形的宽度中。 组合结果如下图所示。

Things are getting more interesting. In the image below, I created another rectangle, then applied a linear gradient fill. You can see the center is brighter and has a kind of shiny effect. This was done to give the next layer a glassy effect, as seen in the reference photo.

事情变得越来越有趣。 在下图中，我创建了另一个矩形，然后应用了线性渐变填充。 您可以看到中心更亮并且具有某种闪亮的效果。 如参考照片所示，这样做可以使下一层具有玻璃般的效果。

The glassy layer is a complex shape (a single layer of many similar shapes). I use complex shapes to reduce the number of layers I have in my layers panel, when designing without grouping or flattening layers. You can read my post on it here. Right after this, I added another rectangle as seen in the next image. This part forms a wall used as a demarcation between the different openings and entrances of the building.

玻璃层是复杂的形状(许多相似形状的单层)。 当设计时不对图层进行分组或展平时，我会使用复杂的形状来减少图层面板中的图层数量。 你可以在这里阅读我的帖子。 在此之后，我添加了另一个矩形，如下图所示。 该部分形成一堵墙，用作建筑物不同开口和入口之间的分界。

阶段4：底层设计 (Stage 4: Ground floor design)

Next, I added another rectangular layer, which I edited and modified to look like what is in the picture below. This layer forms the top for the next layers. It, and the other layers I will be adding afterwards, all play a role in the look of the structure and how it’s perceived by the viewer.

接下来，我添加了另一个矩形图层，对其进行了编辑和修改，使其看起来像下面的图片所示。 该层构成下一层的顶层。 它以及我以后将添加的其他层，都在结构外观以及查看者如何感知中起作用。

I added another rectangle that was blurred to form the shadow for the next layers I created in the next image.

我添加了另一个模糊的矩形，以在下一张图像中创建的下一层上形成阴影。

In the image above, I created 12 rectangles placed neatly on top of each other which I modified to have the picture below

在上图中，我创建了12个矩形，它们整齐地放置在彼此之上，并对其进行了修改，使其如下图所示

阶段5：添加更多效果 (Stage 5: Adding more effects)

I applied a linear gradient fill and drop shadow to the six light grey rectangles above. The gradient gives it the realistic look of a block of walls with light bouncing off it. I added the drop shadow to buttress that look and effect. The darker rectangles below are just flat walls/the base of the building. The shadows of the six light grey rectangles outwardly extend to the curved walls/pillars above that it was casting on.

我对上面的六个浅灰色矩形应用了线性渐变填充和阴影。 渐变使它看起来像是一堵墙的真实感，并有光线反射出来。 我将阴影添加到了外观和效果的支撑物上。 下面的深色矩形仅是平坦的墙壁/建筑物的底部。 六个浅灰色矩形的阴影向外延伸到其所投射的上方的弯曲的墙壁/柱子。

I also applied a gradient fill to the dark grey rectangles. These are darker because they are the lowest part of the building.

我还对深灰色矩形应用了渐变填充。 这些颜色较暗，因为它们是建筑物的最低部分。

At this stage I needed to add some layers to perfect the look. I added another five narrow rectangles to fit the spaces between the 12 rectangles I created.

在此阶段，我需要添加一些图层以完善外观。 我添加了另外五个窄矩形以适合我创建的12个矩形之间的空间。

Then I added some narrow rectangles, and placed them vertically. This gives the thick block/pillar effect of a real building, at the point where the six grey rectangles meet with the flat layer above it. This is shown in the image below.

然后，我添加了一些狭窄的矩形，并将其垂直放置。 在六个灰色矩形与其上方的平坦层相交的点处，这给出了真实建筑物的厚实的块状/柱状效果。 如下图所示。

At this point there was something still missing. I added new rectangular layers and modified them to add that layer that looks like a wall at the far right of the 12 rectangles I created above. As captured in the reference photo, I modified the lightest rectangle and placed it behind the 12 rectangles. It now protrudes more towards the right. I modified the darker rectangles to look like the image below:

在这一点上，仍然缺少一些东西。 我添加了新的矩形层，并对其进行了修改，以在我在上面创建的12个矩形的最右边添加看起来像墙的层。 如参考照片中所捕获，我修改了最浅的矩形并将其放置在12个矩形的后面。 现在它向右突出。 我将较暗的矩形修改为如下图所示：

阶段6：在外部Struts上工作 (Stage 6: Working on the outer pillars)

I went back to the upper part and put some things in place. As shown in the image below, I created narrow-sized rectangles to represent the vertical pillars.

我回到上半部分，并放置了一些东西。 如下图所示，我创建了狭窄的矩形来代表垂直Struts。

I then created another set of rectangles. These were modified, and one was flipped in the opposite direction. I grouped both shapes to form the horizontal inner pillars and replicated it to look like the picture below. Though they aren’t neatly arranged at this point, I worked on this later.

然后，我创建了另一组矩形。 对它们进行了修改，然后将其朝相反的方向翻转。 我将这两种形状组合在一起以形成水平的内部Struts，并将其复制为下面的图片。 尽管此时它们的排列不整齐，但我稍后进行了研究。

In the later parts of this post, you will observe that the upper part of each individual horizontal pillar is brighter than the lower parts. Also, the ones closer to the left side of the building are brighter than the ones on the right — remember the building is circular in structure ?

在本文的后半部分，您将看到每个单独的水平Struts的上部比下部的明亮。 此外，靠近建筑物左侧的建筑物比右侧建筑物的建筑物更明亮-还记得建筑物是圆形的吗？

阶段7：设计屋顶 (Stage 7: Designing the rooftop)

I did some magic at the top-most part of the vertical pillars. I created a new rectangle, and used the ‘edit object’ option to modify it to look like what we have below. I modified it to suit the different parts of the circular structure of the rooftop. You can see they are different sizes and also reflect how much light is hitting them from the top.

我在垂直Struts的最顶部做了一些魔术。 我创建了一个新的矩形，并使用“编辑对象”选项对其进行了修改，使其看起来像下面的样子。 我对其进行了修改，以适应屋顶圆形结构的不同部分。 您会看到它们的大小不同，并且从顶部反射了多少光。

The rooftops in the image below are just rectangles I modified, and filled with color to blend with the surface of the roof itself. I created another copy, shifted it up a little to have a kind of stroke at the topmost edges, giving it a contrasting effect with the sky. If I didn’t do that, it would disappear into the sky at the background.

下图中的屋顶只是我修改过的矩形，并用颜色填充以与屋顶本身的表面融合。 我创建了另一个副本，将其稍微向上移动以在最顶部边缘产生一种笔触，从而使其与天空形成对比效果。 如果我不这样做，它将消失在背景的天空中。

In the image below, the yellow arrows show the direction and curvature of the building. Light rays falling on the roof of the building reflect quite differently, making us see some parts of the building darker while others are lighter. The areas marked blue are brighter and sizes are bigger as the building curves towards the right. Towards the left side, they are darker and shorter until the building’s circular structure becomes more visible and higher behind, at the left.

在下图中，黄色箭头显示了建筑物的方向和曲率。 落在建筑物屋顶上的光线反射的方式完全不同，使我们看到建筑物的某些部分更暗，而其他部分更亮。 随着建筑物向右弯曲，标记为蓝色的区域更亮，尺寸更大。 朝向左侧，它们变得更暗，更短，直到建筑物的圆形结构变得更加可见并且位于左侧的后面更高。

It’s just like when you are driving on roads with sharp corners — you only see further ahead when you drive past the curve. It’s all these little things that make the eye perceive the building as a circular structure.

就像在急转弯的道路上行驶一样，当您驶过弯道时，您只会看到更远的前方。 所有这些小东西使眼睛将建筑物感知为圆形结构。

阶段8：为Struts添加效果 (Stage 8: Adding effects to the pillars)

Here are images of the different ways I applied linear gradient fill to the vertical pillars. This gives them a solid look. You will also observe that the vertical pillars were tilted to follow the direction of the curvature of the building ?

这是我对垂直Struts应用线性渐变填充的不同方式的图像。 这给了他们坚实的外观。 您还将观察到垂直Struts的倾斜方向与建筑物曲率的方向一致吗？

阶段9：添加窗户和玻璃墙 (Stage 9: Adding the windows and glass walls)

Just before adding the vertical pillars that spread around the building, I created complex shapes of lines. These represent what look like blocks of polished wood, neatly arranged side by side. I used this as a sort of padding layer on the outer walls of the upper section of the building, then blurred it. The result is shown in the image below.

在添加遍布建筑物的垂直Struts之前，我创建了复杂的线条形状。 这些代表看起来像一块整齐并排排列的抛光木块。 我将其用作建筑物上部外墙的一种填充层，然后对其进行模糊处理。 结果如下图所示。

I also did something similar to create the glass windows in the image below.

我还做了类似的事情来在下图中创建玻璃窗。

You will notice a black background behind the white lines in the image below. In this layer, I applied a gradient fill to give the shining bright effect of the glass walls/windows, and to give that circular structure of the building. That’s the reason why the right and left sides of the rectangle are darker that the bright center part. You will also notice that the white lines were bent and tilted parallel to the vertical pillars.

您将在下图中的白线后面看到一个黑色背景。 在这一层中，我应用了渐变填充，以赋予玻璃墙/窗户明亮的光泽效果，并赋予建筑物该圆形结构。 这就是矩形的右侧和左侧比明亮的中央部分更暗的原因。 您还将注意到，白线是平行于垂直Struts弯曲和倾斜的。

The final result is shown below.

最终结果如下所示。

The glass makes the center appear brighter because that’s the only part of the building our eyes can see. It’s reflecting the sky and surrounding environment, but gets a little darker moving towards the left and right due to the circular structure of the building. If this was a normal non-circular glass building or skyscraper, all the glass will be shining bright!

玻璃使中心显得更明亮，因为那是我们眼睛可以看到的建筑物的唯一部分。 它反映了天空和周围的环境，但是由于建筑物的圆形结构，向左和向右移动时会稍微变暗。 如果这是正常的非圆形玻璃建筑物或摩天大楼，则所有玻璃都将闪闪发光！

I kept on tweaking the design by applying gradients on the vertical pillars to give them a solid look. The lower portion of the vertical pillars are bent outwardly to support the structure. I thought of how I was going to achieve this for a while, considering the fact that the vertical pillars were rectangles and not a shape I created with a pen tool. Upon further review, I found it was necessary to add another rectangle, and blend them using gradient at the intersection of both rectangles.

我通过在垂直Struts上应用渐变以使它们具有坚实外观来不断调整设计。 垂直Struts的下部向外弯曲以支撑该结构。 考虑到垂直Struts是矩形而不是我用钢笔工具创建的形状，我考虑了一段时间将如何实现这一目标。 经过进一步检查，我发现有必要添加另一个矩形，并在两个矩形的交点处使用渐变对其进行混合。

幕后的东西 (Something from behind the scenes)

You will notice that I made some changes to the horizontal pillars to reflect the effect and direction of light in the pictures below. The upper part of each horizontal pillar is lighter than its lower part. The overall appearance of the horizontal pillar gets darker/duller towards the right part of the building.

您会注意到，我对水平Struts进行了一些更改，以反映下图中的光的效果和方向。 每个水平Struts的上部都比其下部轻。 水平Struts的整体外观朝向建筑物的右侧变暗/变暗。

At the lower portion of the building at the right, I added some rectangles to represent the entrance/driveway of the building. I did this by applying inner shadow to depict an entrance tunnel.

在右侧建筑物的下部，我添加了一些矩形来代表建筑物的入口/车道。 我通过应用内部阴影来描绘入口隧道来做到这一点。

Then I worked on the sky image below and surrounding landscape. The green flat surface that represents the vegetation around the building is just a large rectangle with single color fill ( you can see the image of the grass layer in the second image).

然后，我研究了下面的天空图像和周围的景观。 代表建筑物周围植被的绿色平坦表面只是一个单色填充的大矩形(您可以在第二个图像中看到草层的图像)。

第十阶段：尼日利亚纹章 (Stage 10: Nigerian Coat of Arms)

At this stage, I was almost done with the design. Because I wasn’t satisfied, I tried to create the Nigerian Coat of Arms. It was a fast one, though, as I preferred to design something not perfect than not put anything there at all.

在这个阶段，我几乎完成了设计。 因为不满意，所以我尝试创建尼日利亚纹章。 但是，这是一个快速的过程，因为我更喜欢设计一些不完美的东西，而不是根本不放置任何东西。

The horses and eagle were created using pen tool. For the the ‘Y’ part, the layers below the shield and the shield background were modified shapes. I also applied a drop shadow to the grouped Coat of Arms to make it “pop” out of the background.

马和鹰是使用钢笔工具创建的。 对于“ Y”部分，屏蔽层下面的层和屏蔽背景是经过修改的形状。 我还对分组的徽章应用了阴影，以使其从背景中“弹出”。

阶段11：植被和地理 (Stage 11: Vegetation and geography)

And the trees! The reason for using circles with shadows and gradient layers is to depict different hidden branches and leaves casting shadows on each other at different parts of the trees. I also made the tree with circles much bigger, closer, and strategically placed. The trees cast shadows underneath to give the building a distant effect in the eyes of the viewer.

还有树木！ 使用带有阴影和渐变层的圆的原因是要描绘不同的隐藏分支，并使树叶在树的不同部分彼此投射阴影。 我还使带有圆圈的树变得更大，更近并且具有战略意义。 树木在下方投下阴影，使建筑物在观看者眼中产生遥远的效果。

The shadows below the trees are just circles which were stretched to have a saucer look and flat appearance. These were then blurred to look like real shadows.

树下的阴影只是圆圈，被拉伸成碟状外观和平坦外观。 然后将它们模糊以看起来像真实的阴影。

I also created some objects in the design to represent shrubs and green flowers. These were planted at different locations to look like the reference image. The shrubs and flowers are rectangles that I created, applied round corners at the upper parts, filled with a gradient layer, and blurred to give that distant effect. Objects get sharper and more distinct the closer you get, but the shrubs and flowers are far away. This is also the reason for their small sizes.

我还在设计中创建了一些对象来代表灌木和绿色花朵。 这些被种植在不同的位置看起来像参考图像。 灌木和花朵是我创建的矩形，将矩形应用在上部的圆角上，并填充渐变层，然后模糊处理以产生远距离效果。 物体越靠近，物体将变得越锐利，越清晰，但灌木和花朵却距离遥远。 这也是它们体积小的原因。

The final design is shown below.

最终设计如下所示。

The link to the design is here.

设计链接在这里 。

Thanks for reading

谢谢阅读

You can reach out to me on twitter here

你可以在Twitter上与我联系点击这里

Don’t forget to join Figma Africa Community on Slack here.

不要忘了在这里加入Slack的Figma Africa社区。

翻译自: https://www.freecodecamp.org/news/how-i-designed-a-popular-landmark-building-in-isometric-3d-using-figma-f059fe333459/

figma设计