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)過渡，都沒有關系。 本指南適用于初學者和專業人士。 因此，對于大學作業，我必須準備關于Figma的演示文稿。 在為它做準備的同時，還從中學到了很多關于該工具的知識，它是功能，在什么方面比其他更好，以及如何使用它！

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.

如果您已經開始閱讀本文，您可能會知道Figma是一種協作界面設計工具，我也做了，但這就是我所知道的。

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的確切用途？ 更重要的是，您還需要知道它是否甚至是您打算完成的工作的工具。 為此，我建議您先閱讀本文 。 (或看這張照片；對于像我這樣的懶人)

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與眾不同的是什么？ 為此，我遇到了全世界的設計師真正欣賞的以下功能！

主要特點： (Main Features:)

1，實時協作 (1.Real-time collaboration:)

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

如果您在團隊中工作，這是一項必要的功能。

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

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將組件的概念從工程設計引入了設計。 這一次有意義，您一次構建一次，每隔一次重復使用一次。 簡而言之，設計師已經制造了成千上萬個可以重復使用的量身定制的組件！ (因為為什么要重新發明輪子？)

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.
  想一想所有的導航欄，通知窗格和其他不必要的元素。
• you can convert any a UI element(button, screen, logo) you made into a component.
  您可以將制作的任何UI元素(按鈕，屏幕，徽標)轉換為組件。
• You can use components in other projects and also share them with other people.
  您可以在其他項目中使用組件，也可以與其他人共享。

3.自動版面 (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.

是否曾被要求進行響應式設計？ 您會知道可能會有多少痛苦。 而且，如果您從未這樣做過，請感謝主給您Figma，這樣您就不必體驗它了。

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.

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

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.

另一個使團隊合作的功能； 這可以幫助所有成員將他們的思想和想法Swift地實時收集到一個地方。

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?

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

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!).

您可以使用單獨的事實，想法，觀察結果，報價創建便箋/便箋。 使用Figma，所有團隊成員可以同時在一個共享的板上在線完成所有這些工作(談論效率！)。

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.

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

6.增強的繪圖功能 (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.
  現代的鋼筆工具：使用Vector Networks可以向任意方向繪制。 不再需要合并或連接到路徑的原始點。
• Instant arc designs: Design clocks, watch screens, or pie charts easily with the Arc tool.
  即時弧設計：使用弧工具輕松設計時鐘，手表屏幕或餅圖。

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

您已經獲得足夠的關于Figma為什么如此有效的指示，因此讓我們從安裝指南開始創建第一個任務。

入門 (Getting Started)

Please follow the steps given below:

請按照以下步驟操作：

1. Open any web browser
   打開任何網絡瀏覽器

2. Go to www.figma.com

   前往www.figma.com

3. Sign up (if you are a new member) or Login
   注冊(如果您是新會員)或登錄
4. 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?

哪些設備與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.

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

創建您的第一個項目： (Create your first Project:)

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

Follow the steps given below:

請按照以下步驟操作：

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

1.從應用程序左上方的菜單圖標，單擊文件->新建

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.從下面的菜單中，單擊“設備”下方的下拉菜單，然后選擇所需的設備。 我們將選擇iPhoneX。

使用iPhone的預制資產庫 (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.接下來，在以下鏈接中打開預制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上搜索自己的設計，則可以為Figma找到很多這樣的第三方庫。 從鏈接(ctrl + c)復制狀態欄，然后將(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.下一步將是為待辦事項列表標題添加一個矩形背景。 首先通過單擊“框”圖標旁邊的下拉菜單來完成此操作。 選擇一個“矩形”。

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.根據您的選擇調整矩形，并確保其在框架的邊界內。 從選項卡右下方選擇填充顏色。

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.將文本添加到我們的矩形中。 通過單擊“手”圖標旁邊的T圖標菜單來完成此操作。 與繪制矩形類似，繪制文本框并添加文本。

8.滾動框 (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接下來，我們將創建一個框架，其中將包含項目的滾動列表。 首先制作一個新框架，類似于制作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確保滾動框與iPhone框的寬度相同。 您可以從此處調整幀大小：

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將元素插入此滾動框架。 我們將添加偽文本，如下所示：

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

8.5現在，通過單擊框架頂部的“框架1”來選擇整個滾動框架(框架1)。

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

8.6將框架拖放到iPhone框架上。 它將自動進入框架內部。

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框架內(您可以從圖層進行驗證)，請確保“框架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現在是時候使我們的原型可滾動了！ 首先，從“圖層”中選擇要在滾動時凍結的圖層。 我們將一起選擇矩形，狀態欄和Todo標題并將其凍結。

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

8.9接下來選擇第1幀->單擊右側選項卡上的“原型”標題->單擊“溢出行為”->選擇垂直滾動

9. Running Prototype

9.運行原型

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.

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

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

現在，您可以使用光標來拖動和滾動屏幕。

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與他聯系。

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集體為在我們平臺上發布的每篇文章捐贈1美元。 這個故事促成了UX Para Minas Pretas (UX For Black Women)，這是一個巴西組織，致力于通過采取行動，賦權和知識共享的舉措來促進科技行業中的黑人女性平等。 對系統性種族主義保持沉默是不可行的。 建立您相信的設計社區。