How to use Figma: the essential guide
By: Ran, Reine
Tags: Technology, Prototyping, UI, Software Development, Design

How to use Figma: the essential guide

Includes 4 quick tips that you might not know about

Photo by Med Badr Chemmaoui on Unsplash

What is Figma?

Essentially a prototyping tool that is primarily web-based. It can be used as a vector graphics editor too and it has additional offline features but I personally just use it as a convenient web-based prototyping tool. Just:

Log on -> Sign In/Up -> Start Designing

It’s that easy.

As someone without any formal design background, I found this tool extremely easy and convenient to use. In Part 1 of this tutorial, I’ll write about some basic things that I think most people would already know (just to ensure there’s sufficient coverage). In the second part, I’ll list out a few cool (but essential) features of Figma that I only found out after watching some tutorials. Let’s get started! :)

Part 1 (The intuitive/basic stuff)

Once you log in, you should see this page in your home page with this side menu on the left:

Screenshot taken from Author’s personal Figma Account

Click on the “+” sign for the “Drafts” option and you’ll be directed to:

By Author — this is the space for your prototyping

Click on this button to select a frame

On the right side of your screen, you’ll see this menu appear:

So depending on what UI you’re prototyping for, select the appropriate one

Once that is done, the frame will appear like so:

Screenshot by Author

You can proceed on to change the background colour to whichever colours you want

Try exploring adding different shapes and text to your web page by clicking the rectangle icon here:

Add a variety of shapes and stuff to your web page design

Say we have something like this (two frames, one with a “Click me” button and another empty page):

Screenshot by Author

What if we want to transition to frame 2 (Desktop — 2) once the button is clicked?

Click on the “Prototype” option right under the “Share” button. Then, once your mouse hovers near the “Click me” button, there will be a little circular thing that will appear on the side of the button. Just click that little circle and drag it to your desired frame (Desktop — 2) like so:

Screenshot by Author

Feel free to play around with the “Interaction Details” if so desired.

The cool thing about Figma is that other users can view your prototype and edit it too (for the free tier, only two people can edit this prototype). Simply click on the “Share” on the right side of the page and this will show up:

Screenshot by Author

Lastly, you can also rename the frames to more appropriate names like so:

Before editing the frame’s names

After editing the frame’s names

That’s about it for the basic part of the tutorial! It is fairly brief and there are various parts to it that aren’t covered. However, it is rather tricky to explain all of its features in a written format so the best way to go about it might be to click around and play with what they have to offer!

Part 2 (The slightly more advanced stuff)

So this section comprises of mostly points that I formerly did not know about and only learned after watching some YouTube video tutorials.

You can add a gradient (or more colour overlays) to a frame or component by adding a new fill.

Screenshot by Author

2. You’d probably want to add in an image (png/svg/etc) you’ve downloaded from somewhere in your prototype. Once you have your image in a folder, just click on the image and directly drag it into your desired frame.

Screenshot by Author

Screenshot by Author — Banner Image Designed by kjpargeter / Freepik

With a little adjustment, you’d be able to get your image properly displayed in your frame.

3. Using breakpoints — for demo purposes, I will now overlay a simple rectangle over my frame HomePage.

Screenshot by Author

If we double click the blue rectangle and then mouse over an edge, we can see the breakpoints appearing:

Screenshot by Author

Then by clicking on the breakpoints and dragging it into position, you can use it to create interesting shapes and designs.

Screenshot by Author

4. Create Component VS Group Selection

The difference between the two is, if you create a component and in many different frames reuse that component, if you make a change in one frame, the changes will be automatically replicated in all of your other frames (if they also contain that component).

Screenshot by Author

For example, it’ll be convenient to have your navBar (it’ll contain texts, logo, etc) as a component so that if you decide to make a change in one, you won’t have to copy and paste it in to the other frames since they’ll be automatically updated for you.

Take note that even for the prototype selections it’ll automatically replicated them too.

Screenshot by Author

If you choose to group a couple of elements instead, changes to one group will not be replicated across all the other frames even if the same group appears in your other frames.