The easiest way to design prototypes: a Figma crash course

A comprehensive guide to help you get started with the interface design tool Figma.

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!

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.

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)

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!

Main Features:

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 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?)

sample android components

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.
• You can use components in other projects and also share them with other people.

It allows teams to reuse and share components across design boards and between the same team members.

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.

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.Affinity Diagrams:

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

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

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. 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.
• 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;

Getting Started

Please follow the steps given below:

1. Open any web browser
2. Go to 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!)

Which devices are compatible with 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.

Create your first Project:

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

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

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.

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

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.

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”.

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.

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.

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.2 Make sure the scrolling frame is the same width as your iPhone frame. You can adjust frame size from here:

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

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

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

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

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.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.9 Next select Frame 1 -> Click on “Prototype” heading on right tab -> Click on “Overflow Behaviour” -> Select vertical scrolling

9. Running Prototype

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

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.