figma下載

I enjoy looking at website designs that are on platforms like Behance, Dribble, etc. as they are visually very pleasing to the eye. While scrolling through these designs, I always wonder about one thing, that is, how difficult would it be to express these same designs as a code. The reason behind this curiosity is that I have come to realize that sometimes it is not easy to translate the design into its corresponding code. And when I say translation, I’m talking about the positioning of elements to be specific. There have been times while coding, I had to alter my design since it was difficult to represent the position of content in the original design. Also, from my personal experience, I can say that it is very frustrating to use tables, floats, positioning, and inline-block as all of these techniques miss out on a few major functionalities (vertical alignment, for example).

我喜歡在Behance，Dribble等平臺上瀏覽網站設計，因為它們在視覺上非常令人愉悅。 在瀏覽這些設計時，我總是想知道一件事，即將這些相同的設計表示為代碼有多困難。 這種好奇心背后的原因是，我已經意識到有時候將設計轉換成相應的代碼并不容易。 當我說翻譯時，我指的是具體元素的定位。 有時在編碼時，由于很難在原始設計中表示內容的位置，因此我不得不更改設計。 另外，根據我的個人經驗，我可以說使用表，浮點數，定位和內聯塊非常令人沮喪，因為所有這些技術都缺少一些主要功能(例如，垂直對齊)。

For a recent personal project, I had to develop a landing page for a website. I had a rough idea regarding how I want the landing page to look and feel. My basic objective here was to replicate the design of the landing page which I will be doing beforehand, into a coded webpage version without any design compromises. While looking for an efficient way to build more design-oriented web pages, I came across CSS Grid and CSS Flexbox which are basically responsive layout models. These models not only allow us to tackle the positioning problem but also make the code easier to understand and maintain. Therefore, I decided to combine these two layout models along with my knowledge of working with Figma, which is an amazing online website design tool and this article explains that process.

對于最近的個人項目，我必須開發一個網站的登錄頁面。 我對目標網頁的外觀和感覺有一個大概的了解。 我的基本目標是將我將要預先進行的目標網頁設計復制到編碼的網頁版本中，而不會進行任何設計折衷。 在尋找一種有效的方法來構建更多面向設計的網頁時，我遇到了CSS Grid和CSS Flexbox，它們基本上是響應式布局模型。 這些模型不僅使我們能夠解決定位問題，而且使代碼更易于理解和維護。 因此，我決定將這兩種布局模型與我與Figma一起工作的知識相結合，這是一個了不起的在線網站設計工具，本文將對此過程進行說明。

怎么了 (What’s the flow?)

Design the landing page using Figma.

使用Figma設計登錄頁面。

Use CSS Grid to setup a parent grid.

使用CSS網格設置父網格。

Use CSS Flexbox to position the content.

使用CSS Flexbox定位內容。

如何開始？ (How to start?)

設計布局 (Design the layout)

First things first, I created the design in Figma. It has a pre-built website frame, which is like a blank canvas and a good place to start.

首先，我在Figma中創建了設計。 它有一個預建的網站框架，就像一塊空白的畫布，是一個很好的起點。

As I had decided that I am going to use CSS Grid, I knew that it divides the web page into rows and columns. Therefore, it would be practical to carry out the same division while designing by dividing the layout into three basic row sections which are present in almost all websites i.e. a header, a body, and a footer.

當我決定要使用CSS Grid時，我知道它會將網頁分為行和列。 因此，在進行設計時，通過將布局劃分為三個基本行部分(在幾乎所有網站中都存在)，即頁眉，正文和頁腳，進行相同的劃分是可行的。

My rule was to distribute the content into different possible rows and columns as it will make every element independent of each other. This will lead to more number of cells for more number of elements but will guarantee more positioning ease. So keeping that in mind, I initially divided the header section into two columns.

我的規則是將內容分配到可能的不同行和列中，因為它將使每個元素彼此獨立 。 這將導致更多單元的數量更多的單元，但將保證更多的定位便利性。 因此請記住，我最初將標題部分分為兩列。

But I wanted to maintain some spacing between each element for consistency purposes. Also, the Hamburger menu, which is much of an icon representing an inactive section, does not need much space. That’s why having 3 varying columns instead of 2 would be a better choice.

但是我想在每個元素之間保持一定的間隔，以實現一致性。 此外，“漢堡包”菜單(大部分是代表不活動部分的圖標)不需要太多空間。 這就是為什么使用3個不同的列而不是2個列會是一個更好的選擇的原因。

Now there are two things that I kept in mind going forward with this design strategy:

現在，在此設計策略中我要牢記兩件事：

• Spacing between cells
  單元格之間的間距
• Size of the cells with respect to its content(elements).
  單元格相對于其內容(元素)的大小。

Next, I divided the Body section into different rows and columns.

接下來，我將“正文”部分劃分為不同的行和列。

left_space and right_space are blank columns that are present to provide a feel of center alignment. Footer section will also be divided into 3 columns which is similar to the header section.

left_space和right_space是空白列，用于提供中心對齊的感覺。 頁腳部分也將分為三列，與頁眉部分相似。

Now after laying out the landing page design in terms of grids, the next thing to do was to layout the content with respect to the background of the web page.

現在，在以網格的形式對著陸頁設計進行了布局之后，接下來要做的就是相對于網頁背景來布局內容。

The hierarchy of the web page is logically in the following form:

該網頁的層次結構在邏輯上采用以下形式：

Web page has a Background

網頁有背景

Grid goes on top the Background

網格位于背景的最上方

Content is laid out on the grid

內容排列在網格上

The dependency between background and the grid is decided by what comes first. In my process, I preferred the grid to be laid out first and then the background under it. I grabbed a background image from Pexels and then resized and positioned it according to the grid on the web page.

背景和網格之間的依賴關系由先到者決定。 在我的過程中，我更喜歡先布局網格，然后再布局其下方的背景。 我從Pexels抓取了一個背景圖像，然后根據網頁上的網格對其進行了調整大小和定位。

Now it was time to lay out the content using the designed grid system.

現在是時候使用設計的網格系統對內容進行布局了。

Lesson learned: Use standard alignments i.e. left, center and right for approximate positioning. Then precisely position the content using padding and/or margins.

經驗教訓：使用標準對齊方式，即左，中和右進行近似定位。 然后使用填充和/或邊距精確定位內容。

As the content is going to be inside different cells, it can have different positions. And this requirement can be fulfilled by Flexbox. My major objective behind using Flexbox inside cells was to use it’s pre-built position attributes which can be used for alignment.

由于內容將位于不同的單元格中，因此可以具有不同的位置。 Flexbox可以滿足此要求。 在單元格內部使用Flexbox的主要目的是使用其可用于對齊的預先建立的位置屬性。

If you observe each part of the content, it is approximately either on the left or right or in the center in each cell. This will make it easier to mimic the design in the coding phase.

如果您觀察內容的每個部分，則大約在每個單元格的左側或右側或中心。 這將使在編碼階段模仿設計變得更加容易。

下一步是什么 ？ (What’s next ?)

編碼布局 (Code the layout)

As mentioned earlier I am going to require two things to bring the design to life.

如前所述，我將需要兩件事來使設計栩栩如生。

• CSS Grid
  CSS網格
• CSS Flexbox
  CSS Flexbox

For CSS grid, there are some concepts that are required to be familiar with beforehand, so if you have not looked up Grids before, I urge you to take this tutorial or watch this. I’m going to mention some of the few concepts which I have used in this project:

對于CSS網格，需要事先熟悉一些概念，因此，如果您以前沒有查閱Grids，我敦促您 閱讀 本 教程 或觀看 本 教程 。 我將提到在這個項目中使用的一些概念：

• grid-template-columns/grid-template-rows
  網格模板列/網格模板行

Defines the columns and rows of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line. The fr unit allows you to set the size of a track as a fraction of the free space of the grid container.

用空格分隔的值列表定義網格的列和行。 這些值表示軌道大小，它們之間的間隔表示網格線。 fr單位允許您將軌道的大小設置為網格容器的可用空間的一部分。

.container {
grid-template-columns: ... | ...;
grid-template-rows: ... | ...;
}

• grid-template-areas
  網格模板區域

Defines a grid template by referencing the names of the grid areas which are specified with the grid-area property. Repeating the name of a grid area causes the content to span those cells.

通過引用使用grid-area屬性指定的網格區域的名稱來定義網格模板。 重復網格區域的名稱會使內容跨越這些單元格。

.container {
grid-template-areas:
" | . | none | ..."
"...";
}

• grid-area
  網格區域

Gives an item a name so that it can be referenced by a template created with the grid-template-areas property.

給項目命名，以便可以通過使用grid-template-areas屬性創建的模板引用該項目。

.item {
grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

Firstly, let’s setup the grid structure in HTML

首先，讓我們在HTML中設置網格結構

<div class="grid-container">
<div class="header">
<div class="header1">Head1</div>
<div class="header2">Head2</div>
<div class="header3">Head3</div>
</div>
<div class="left_space">Left_Space</div>
<div class="main">
<div class="main1">Main1</div>
<div class="main2">Main2</div>
<div class="main3">Main3</div>
</div>
<div class="right_space">Right_Space</div>
<div class="footer">
<div class="footer1">Footer1</div>
<div class="footer2">Footer2</div>
<div class="footer3">Footer3</div>
</div>
</div>

Here the header section is divided into 3 parts i.e. three columns: header1, header2 and header3. Further the body section contains three rows: main1, main2 and main3 and two columns: left_space and right_space. left_space and right_space are just space fillers to force the focus to the center of the page. Footer section is divided into three columns: footer1, footer2 and footer3.

在此，標題部分分為3部分，即三列：header1，header2和header3。 此外，主體部分包含三行：main1，main2和main3，以及兩列：left_space和right_space。 left_space和right_space只是用于將焦點強制到頁面中心的空格。 頁腳部分分為三列：頁腳1，頁腳2和頁腳3。

Now it was time to bring in some CSS

現在是時候引入一些CSS了

• Header Section
  標頭部分

.header{
grid-area: header;
display:grid;
grid-template-columns: 2fr 2fr 2fr 2fr;
grid-template-areas:
'header1 header2 header2 header3';
grid-gap: 10px;
}
.header1{ grid-area:header1;}
.header2{ grid-area:header2; }
.header3{ grid-area:header3; }

• Body Section
  身體部分

.left_space{}
.main{
grid-area: main;
display:grid;
grid-template-rows: 3fr 3fr 1fr;
grid-template-areas:
'main1'
'main2'
'main3';
grid-gap: 10px;
}
.right_space{}
.main1{ grid-area:main1; }
.main2{ grid-area:main2; }
.main3{ grid-area:main3; }

• Footer Section
  頁腳部分

.footer{
grid-area: footer;
display:grid;
grid-template-columns: 9fr 1fr 1fr;
grid-template-areas:
'footer1 footer2 footer3';
grid-gap: 10px;
}
.footer1 { grid-area: footer1; }
.footer2 { grid-area: footer2; }
.footer3 { grid-area: footer3; }

• Root grid-container
  根網格容器

.grid-container {
display: grid;
grid-template-rows: 1fr 6fr 1fr;
grid-template-areas:
'header header header header'
'left_space main main right_space'
'footer footer footer footer';
grid-gap: 10px;
padding: 10px;
height:100vh;
overflow: hidden;
}

After the grid was built, it was time to work inside each cell of the grid along with the content positioning. This was the most fun part of the process. This is where CSS Flexbox came into picture.

構建網格之后，是時候在網格的每個單元中進行工作以及進行內容定位了。 這是該過程中最有趣的部分。 這就是CSS Flexbox出現的地方。

For CSS Flexbox, there are some concepts which are required to be familiar with beforehand, so if you have not looked up Flexbox before, I urge you to take this tutorial or watch this. I’m going to mention some of the few concepts which I have used in this project:

對于CSS Flexbox，需要事先熟悉一些概念，因此，如果您以前沒有看過Flexbox，我強烈建議您 閱讀 本 教程 或觀看 本 教程 。 我將提到在這個項目中使用的一些概念：

• flex-direction
  彈性方向

This establishes the main-axis, thus defining the direction flex items are placed in the flex container.

這樣便建立了主軸，從而確定了將柔韌性商品放置在柔韌性容器中的方向。

.container {
flex-direction: row | row-reverse | column | column-reverse;
}

• justify-content
  證明內容

This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

這定義了沿主軸的對齊方式。 當一行中的所有伸縮項目都不靈活或已達到最大大小時，它可以幫助分配剩余的剩余可用空間。 當項目溢出線時，它還對項目的對齊方式施加一些控制。

.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

• align-items
  對齊項目

This defines the default behavior for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).

這定義了彈性項目如何沿當前行的橫軸布置的默認行為。 可以將其視為跨軸(垂直于主軸)的證明內容版本。

.container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

As I have positioned the content elements using standard alignment techniques in the design, I was able to directly make use of Flexbox attributes “justify-content” and “align-items” to quickly position the elements exactly mimicking the design :)

當我在設計中使用標準對齊技術定位了內容元素時，我能夠直接利用Flexbox屬性“ justify-content”和“ align-items”來快速定位與設計完全相似的元素：)

This was similar to positioning elements according to x-axis and y-axis.

這類似于根據x軸和y軸定位元素。

Header Section

標頭部分

<!-- HTML -->
<div class="header2">Alphonso</div>/* CSS */
.header2 {
grid-area: header2;
display: flex;
justify-content: centre; //Vertical alignment
align-items: centre; //Horizontal alignment
}Before vs After之前與之后

Body Section

身體部分

<!-- HTML -->
<div class="main1">
<h2>Enjoy</h2>
<h3>Luxury</h3>
</div><div class="main3">
<p>Contrary to popular belief, Lorem Ipsum... </p>
</div>/* CSS */
.main1 {
grid-area: header2;
display: flex;
flex-direction: column;
justify-content: flex-start; //Vertical alignment
align-items: flex-end; //Horizontal alignment
color: #fff;
margin: 20px;
}.main3 {
grid-area: main3;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
margin: 20px;
}Before vs After之前與之后

So finally I got something like this,

所以最后我得到了這樣的東西

With Grids vs Without Grids有網格與無網格

Another advantage of combining Grids and Flexbox together is its flexibility to be responsive. With the help of media queries, it is quite easy to just change the structure of grid with respect to the size of the screen.

將Grids和Flexbox結合在一起的另一個優勢是響應能力的靈活性。 在媒體查詢的幫助下，相對于屏幕大小更改網格的結構非常容易。

This is not the only technique to use for developing landing pages but it is something that I figured out while going through the process myself. And like every other process this may also have some flaws but in the end, it worked out well for me. That’s why I decided to share my experience through this post.

這不是用于開發目標網頁的唯一技術，而是我自己完成此過程時發現的技術。 像其他所有過程一樣，這可能也有一些缺陷，但最后，對我來說效果很好。 這就是為什么我決定通過這篇文章分享我的經驗的原因。

Thank you for giving it a read :)

謝謝您的閱讀:)

完整代碼可在我的GitHub上找到 (Full code available on my GitHub)

翻譯自: https://uxdesign.cc/how-i-used-figma-css-grid-and-css-flexbox-to-build-a-landing-page-be861f397fee

figma下載

總結

以上是生活随笔為你收集整理的figma下载_我如何使用Figma，CSS Grid和CSS Flexbox构建登录页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。