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)，这是一个巴西组织，致力于通过采取行动，赋权和知识共享的举措来促进科技行业中的黑人女性平等。 对系统性种族主义保持沉默是不可行的。 建立您相信的设计社区。