figma設(shè)計(jì)

It doesn’t matter if you haven’t used any prototyping tools before or you’re transitioning from other ones (like Sketch, Adobe XD); This guide is for beginners and professionals alike. So for a university assignment, I had to prepare a presentation about Figma. And while preparing for it a learned tremendously about the tool, it’s functionality, in what ways it’s better than the other and how to use it!

之前是否未使用過任何原型制作工具，或者是否正在從其他工具(例如Sketch，Adobe XD)過渡，都沒有關(guān)系。 本指南適用于初學(xué)者和專業(yè)人士。 因此，對(duì)于大學(xué)作業(yè)，我必須準(zhǔn)備關(guān)于Figma的演示文稿。 在為它做準(zhǔn)備的同時(shí)，還從中學(xué)到了很多關(guān)于該工具的知識(shí)，它是功能，在什么方面比其他更好，以及如何使用它！

If you’ve started reading this you probably know Figma is a collaborative interface design tool, I did too but that was all I knew.

如果您已經(jīng)開始閱讀本文，您可能會(huì)知道Figma是一種協(xié)作界面設(shè)計(jì)工具，我也做了，但這就是我所知道的。

So the first thing I did was that I googled what exactly is Figma for? More importantly, you also need to know if it’s even the tool for the job you intend to do. For that, I’d suggest you have a read of this article first. (or look at this picture; for the lazy ones like me)

所以我要做的第一件事就是我搜索了Figma的確切用途？ 更重要的是，您還需要知道它是否甚至是您打算完成的工作的工具。 為此，我建議您先閱讀本文 。 (或看這張照片；對(duì)于像我這樣的懶人)

Then I had to know what sets Figma apart from its competitors? For that, I came across the following features that designers all over the world really appreciate!

然后，我必須知道讓Figma與眾不同的是什么？ 為此，我遇到了全世界的設(shè)計(jì)師真正欣賞的以下功能！

主要特點(diǎn)： (Main Features:)

1，實(shí)時(shí)協(xié)作 (1.Real-time collaboration:)

This is a necessary feature if you’re working in teams.

如果您在團(tuán)隊(duì)中工作，這是一項(xiàng)必要的功能。

• Edit together in real-time: Co-design with your co-workers.
  實(shí)時(shí)一起編輯：與您的同事共同設(shè)計(jì)。
• Worry-free version history: See who changed what part of the interface and go back in time as needed.
  無憂版本歷史記錄：查看誰更改了界面的哪個(gè)部分，并根據(jù)需要及時(shí)返回。
• Make comments to notify, discuss, and resolve issues with specific users on specific parts of the interface in real-time.
  進(jìn)行注釋，以在界面的特定部分實(shí)時(shí)通知，討論和解決與特定用戶的問題。

2.Figma組件： (2.Figma Components:)

So Figma brought the concept of components from engineering to design. It all makes sense you build once, reuse every other time. Put simply designers have made thousands of tailor-made components that you can simply reuse! (Because why reinvent the wheel?)

因此，Figma將組件的概念從工程設(shè)計(jì)引入了設(shè)計(jì)。 這一次有意義，您一次構(gòu)建一次，每隔一次重復(fù)使用一次。 簡而言之，設(shè)計(jì)師已經(jīng)制造了成千上萬個(gè)可以重復(fù)使用的量身定制的組件！ (因?yàn)闉槭裁匆匦掳l(fā)明輪子？)

sample android components示例android組件

You’re probably going to like this feature the most:

您可能最喜歡此功能：

• think of all the Navbars, notification panes, and other redundant elements you’d never have to make again.
  想一想所有的導(dǎo)航欄，通知窗格和其他不必要的元素。
• you can convert any a UI element(button, screen, logo) you made into a component.
  您可以將制作的任何UI元素(按鈕，屏幕，徽標(biāo))轉(zhuǎn)換為組件。
• You can use components in other projects and also share them with other people.
  您可以在其他項(xiàng)目中使用組件，也可以與其他人共享。

It allows teams to reuse and share components across design boards and between the same team members.它允許團(tuán)隊(duì)在設(shè)計(jì)板之間以及同一團(tuán)隊(duì)成員之間重用和共享組件。

3.自動(dòng)版面 (3. Auto Layout)

Ever been asked to make a responsive design? You’d know how much of pain that can be. And if you’ve never done that, thank the Lord for giving you Figma so you won’t have to experience it.

是否曾被要求進(jìn)行響應(yīng)式設(shè)計(jì)？ 您會(huì)知道可能會(huì)有多少痛苦。 而且，如果您從未這樣做過，請(qǐng)感謝主給您Figma，這樣您就不必體驗(yàn)它了。

Auto Layout makes responsive elements that stretch to fill their containers, in addition to the buttons which resize with their text and lists which can be easily rearranged. This is very helpful when designing designs for all device types.

“自動(dòng)布局”使響應(yīng)元素可以拉伸以填充其容器，此外，按鈕還具有可輕松重新排列其文本和列表大小的按鈕。 在為所有設(shè)備類型設(shè)計(jì)設(shè)計(jì)時(shí)，這非常有用。

4，親和圖 (4.Affinity Diagrams:)

Another enabling teamwork feature; this helps all the members gather their thoughts and ideas in one place quickly in real-time.

另一個(gè)使團(tuán)隊(duì)合作的功能； 這可以幫助所有成員將他們的思想和想法Swift地實(shí)時(shí)收集到一個(gè)地方。

Example: After you’ve conducted several (then many) interviews/tests with the user, how do you consolidate all of the information into precious, overarching insights?

示例：在與用戶進(jìn)行了幾次(然后很多)采訪/測(cè)試之后，如何將所有信息整合為寶貴的總體見解？

You can create sticky-notes/ post-its with separate facts, ideas, observations, quotes. With Figma, all this can be done online on a single shared board by all team members at the same time (talk about efficiency!).

您可以使用單獨(dú)的事實(shí)，想法，觀察結(jié)果，報(bào)價(jià)創(chuàng)建便箋/便箋。 使用Figma，所有團(tuán)隊(duì)成員可以同時(shí)在一個(gè)共享的板上在線完成所有這些工作(談?wù)撔?#xff01;)。

5.選擇顏色 (5. Selection Colors)

Sometimes, you need to change the color of fills, strokes, and text independently. Other times, you just want them to be the same color. Selection Colors enables you to batch update colors across fills, strokes, and text in a click.

有時(shí)，您需要獨(dú)立更改填充，筆觸和文本的顏色。 其他時(shí)候，您只希望它們具有相同的顏色。 “選擇顏色”使您可以單擊一次批處理以填充，筆觸和文本中的方式更新顏色。

6.增強(qiáng)的繪圖功能 (6. Enhanced Drawing Capabilities)

• A modern pen tool: Draw in any direction with Vector Networks. No more merging or needing to connect to the path’s original point.
  現(xiàn)代的鋼筆工具：使用Vector Networks可以向任意方向繪制。 不再需要合并或連接到路徑的原始點(diǎn)。
• Instant arc designs: Design clocks, watch screens, or pie charts easily with the Arc tool.
  即時(shí)弧設(shè)計(jì)：使用弧工具輕松設(shè)計(jì)時(shí)鐘，手表屏幕或餅圖。

You have got enough pointers about why Figma is soo effective so let’s create the first task while starting with installation guide;

您已經(jīng)獲得足夠的關(guān)于Figma為什么如此有效的指示，因此讓我們從安裝指南開始創(chuàng)建第一個(gè)任務(wù)。

入門 (Getting Started)

Please follow the steps given below:

請(qǐng)按照以下步驟操作：

Open any web browser

打開任何網(wǎng)絡(luò)瀏覽器

Go to www.figma.com

前往www.figma.com

Sign up (if you are a new member) or Login

注冊(cè)(如果您是新會(huì)員)或登錄

Woohoo, you are all set to use Figma :D (i was also amazed at how easy this was!)

oo，您都可以使用Figma：D(我也很驚訝這是如此簡單！)

Which devices are compatible with Figma?

哪些設(shè)備與Figma兼容？

Any device that can open a browser can open Figma. It’s online and can be used on any desktop operating system. This includes MacOS, Linux, Windows, and ChromeOS. However, if you also want to work offline you may download the desktop app.

任何可以打開瀏覽器的設(shè)備都可以打開Figma。 它是在線的，可以在任何桌面操作系統(tǒng)上使用。 這包括MacOS，Linux，Windows和ChromeOS。 但是，如果您還想脫機(jī)工作，則可以下載桌面應(yīng)用程序。

創(chuàng)建您的第一個(gè)項(xiàng)目： (Create your first Project:)

使用適用于iOS設(shè)備的可滾動(dòng)屏幕制作待辦事項(xiàng)應(yīng)用程序。 (Making a To-Do app with a scrollable screen for iOS devices.)

Follow the steps given below:

請(qǐng)按照以下步驟操作：

1. From the menu icon on the top left of the app, click on file -> New

1.從應(yīng)用程序左上方的菜單圖標(biāo)，單擊文件->新建

2. On the window that opens, in the top right corner, click on “Prototype”

2.在打開的窗口的右上角，單擊“原型”

制作畫板(屏幕) (Making an artboard (Screen))

3. From the menu below that, click on the dropdown menu beneath “Device” and select the device of your choice. We will choose iPhone X.

3.從下面的菜單中，單擊“設(shè)備”下方的下拉菜單，然后選擇所需的設(shè)備。 我們將選擇iPhoneX。

使用iPhone的預(yù)制資產(chǎn)庫 (Using a premade library of assets for iPhone)

4. Next, open the file for pre-made ios components at the following link:https://www.figma.com/file/vWTDcMyDu9VSxDccu6Amuc/Facebook-iOS-11-(Copy)?node-id=0%3A1

4.接下來，在以下鏈接中打開預(yù)制ios組件的文件： https : //www.figma.com/file/vWTDcMyDu9VSxDccu6Amuc/Facebook-iOS-11-( Copy)?node-id =0%3A1

You can find a lot of such third-party libraries for Figma if you search on google for your design. Copy the status bar from the link (ctrl+c) and paste (ctrl+v) in your iPhone artboard.

如果您在Google上搜索自己的設(shè)計(jì)，則可以為Figma找到很多這樣的第三方庫。 從鏈接(ctrl + c)復(fù)制狀態(tài)欄，然后將(ctrl + v)粘貼到iPhone美工板上。

5. The next step will be to add a rectangle background for our todo list title. This is done by first clicking on the drop-down menu next to the “Box” icon. Choose either a “Rectangle”.

5.下一步將是為待辦事項(xiàng)列表標(biāo)題添加一個(gè)矩形背景。 首先通過單擊“框”圖標(biāo)旁邊的下拉菜單來完成此操作。 選擇一個(gè)“矩形”。

6. Adjust the rectangle according to your choice and make sure it’s in the bounds of the frame. Select the fill color from the right bottom of the tab.

6.根據(jù)您的選擇調(diào)整矩形，并確保其在框架的邊界內(nèi)。 從選項(xiàng)卡右下方選擇填充顏色。

7. Add text to our rectangle. This is done by clicking on the T icon menu next to the “Hand” icon. Similar to drawing a rectangle, draw your text box, and add text.

7.將文本添加到我們的矩形中。 通過單擊“手”圖標(biāo)旁邊的T圖標(biāo)菜單來完成此操作。 與繪制矩形類似，繪制文本框并添加文本。

8.滾動(dòng)框 (8. Scrolling Frame)

8.1 Next we will make a frame that will have a scrolling list of items. Start by making a new frame similar to what we did in making an iPhone frame.

8.1接下來，我們將創(chuàng)建一個(gè)框架，其中將包含項(xiàng)目的滾動(dòng)列表。 首先制作一個(gè)新框架，類似于制作iPhone框架。

8.2 Make sure the scrolling frame is the same width as your iPhone frame. You can adjust frame size from here:

8.2確保滾動(dòng)框與iPhone框的寬度相同。 您可以從此處調(diào)整幀大小：

8.3 The height of the frame must be greater than the height of the iPhone frame.

8.3框架的高度必須大于 iPhone框架的高度 。

8.4 Insert your elements in this scrolling frame. We will add dummy text as follow:

8.4將元素插入此滾動(dòng)框架。 我們將添加偽文本，如下所示：

8.5 Now select the whole scrolling frame ( Frame 1 ) by clicking on “Frame 1” at frame top.

8.5現(xiàn)在，通過單擊框架頂部的“框架1”來選擇整個(gè)滾動(dòng)框架(框架1)。

8.6 Drag and drop the frame on your iPhone frame. It will go inside the frame automatically.

8.6將框架拖放到iPhone框架上。 它將自動(dòng)進(jìn)入框架內(nèi)部。

8.7 Once “Frame 1” is inside the iPhone frame (you can verify this from layers), make sure to make “Frame 1” height and width to be not more than iPhone frame bounds.

8.7一旦“框架1”位于iPhone框架內(nèi)(您可以從圖層進(jìn)行驗(yàn)證)，請(qǐng)確保“框架1”的高度和寬度不超過iPhone框架的范圍。

8.8 Now it’s time to make our prototype scrollable! First, select the layers from “Layers” which you want to freeze while scrolling. We will select the rectangle, status bar, and Todo title together and freeze it.

8.8現(xiàn)在是時(shí)候使我們的原型可滾動(dòng)了！ 首先，從“圖層”中選擇要在滾動(dòng)時(shí)凍結(jié)的圖層。 我們將一起選擇矩形，狀態(tài)欄和Todo標(biāo)題并將其凍結(jié)。

8.9 Next select Frame 1 -> Click on “Prototype” heading on right tab -> Click on “Overflow Behaviour” -> Select vertical scrolling

8.9接下來選擇第1幀->單擊右側(cè)選項(xiàng)卡上的“原型”標(biāo)題->單擊“溢出行為”->選擇垂直滾動(dòng)

9. Running Prototype

9.運(yùn)行原型

Now we will run our prototype by clicking on the “play button” at the top right of our screen. A new browser window will open.

現(xiàn)在，我們將通過單擊屏幕右上方的“播放按鈕”來運(yùn)行我們的原型。 將打開一個(gè)新的瀏覽器窗口。

You can now use your cursor to drag and scroll the screen.

現(xiàn)在，您可以使用光標(biāo)來拖動(dòng)和滾動(dòng)屏幕。

This article would not have been possible without the help of my great friend Faraz Ahmed. You can reach him at farazahmed370@gmail.com

沒有我的好朋友法拉茲·艾哈邁德(Faraz Ahmed)的幫助，這篇文章是不可能的。 您可以通過farazahmed370@gmail.com與他聯(lián)系。

The UX Collective donates US$1 for each article published in our platform. This story contributed to UX Para Minas Pretas (UX For Black Women), a Brazilian organization focused on promoting equity of Black women in the tech industry through initiatives of action, empowerment, and knowledge sharing. Silence against systemic racism is not an option. Build the design community you believe in.

UX集體為在我們平臺(tái)上發(fā)布的每篇文章捐贈(zèng)1美元。 這個(gè)故事促成了UX Para Minas Pretas (UX For Black Women)，這是一個(gè)巴西組織，致力于通過采取行動(dòng)，賦權(quán)和知識(shí)共享的舉措來促進(jìn)科技行業(yè)中的黑人女性平等。 對(duì)系統(tǒng)性種族主義保持沉默是不可行的。 建立您相信的設(shè)計(jì)社區(qū)。

翻譯自: https://uxdesign.cc/the-easiest-way-to-design-prototypes-a-figma-crash-course-a9badd9b35d1

figma設(shè)計(jì)

總結(jié)

以上是生活随笔為你收集整理的figma设计_设计原型的最简单方法：Figma速成课程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。