5 Figma Tricks and Tips for Beginners

Let me show you 5 Figma tricks and tips. These will be super helpful, especially if you’re just starting out using Figma for UI and web design. The first tip is about improving your stroke, so let’s jump in!

5 Figma Tips

1. Creating Better Strokes

When drawing a stroke (a single line) on your canvas, under the Stroke options panel you’ll be able to set the color and weight. But in addition to these standard options, you can also choose what the ends of the stroke look like:

Here you can see we’ve set the ends of the stroke to look like arrows. This can be extremely useful when creating flow diagrams and wireframes as shown in this Figma wireframe ui kit:

UX Flowchart Cards: Figma wireframe ui kit

From the Stroke options panel you can determine whether the line is solid, dotted, or dashed, and define the gaps and lines used. You can also determine how joins between two stroke ends appear (sharp, chamfered, or rounded).

2. Easy Image Cropping

Let’s assume I have an image on my canvas and I want to crop it to show only a certain section. There are two approaches to this..

One option is to double-click the image and select Crop from the Image fill options which appear. Then, use the handles around the image to dictate the visible area and click Enter when you’re ready.

Double-click on the cropped image if you want to alter the area you just set.

There’s a faster way than this though–hold down Command ⌘ or Ctrl depending on your operating system, select the image in question, and you’ll be able to drag the same handles we used before.

This is a great way to crop multiple images at once.

Get good at cropping and the thumbnails in your UI designs will look as slick as those in Gocier:

Gocier - Grocery E-commerce UI Kit — Gocier - Grocery Figma ui kit

3. Simpler Math Operations

Let’s assume you have several elements on your canvas that you want to resize and make taller by a specific amount. You can use the Height field in the Inspector and add, say 128px to the amount you see. But it’s easier if you use a formula instead: 175+128. Figma will work out the result for you.

This works for any math operations you can think of, and you can apply them to any dimensional property too; height, width, angle, axis position and so on.

But what if you wanted to change one of these values for multiple elements at the same time? If you select multiple different elements you’ll see the value Mixed in the dimension properties. That makes no difference to Figma; to add 56px width to all the elements simply add your math operation like so: Mixed+56.

4. Bulleted and Numbered Lists

To add bullets to list items in text elements, you might just reach for ASCII bullet symbols and paste them at the beginning of each line. But there’s a better way in Figma.

In the text inspector, click the Type details button (the three dots) to get all the options you need for list styles.

You can quickly make your list ordered or unordered in this way.

5. Preview Responsive Design Layouts

Our last tip, and this one involved using a plugin to see how your layout behaves when using certain breakpoints.

For this demo I have three Figma artboards, called Max 480, 481-960, and 961+.

All these squares that you see could perhaps be images, or some sort of thumbnails for galleries. In any case, I’ve set their resize properties to be Fill Container, which means they’re fluid and stretch along with the artboard width.

We’re going to test these layouts in a really intuitive way, so go ahead and install the Breakpoints plugin for Figma (if you’ve never used plugins with Figma before, check out my quick guide here).

This is a paid plugin, but offers a 15 day free trial.

Open the plugin, and the first thing we’re going to do is Create a New Adaptive Layout.

In the Breakpoints panel you can define your breakpoints (like we did by naming the artboards earlier).

With the breakpoints added, you’ll can select each one and associate an artboard with it. So for the first breakpoint we choose our first artboard, and so on.

With that done, our Breakpoints canvas shows us the range of sizes we’ve defined:

Now, when we stretch the Breakpoints adaptive layout canvas, we see our design change accordingly.

This is a really cool tool to preview your responsive layouts in Figma.

That’s a Wrap!

And there you have them; 5 Figma tricks and tips for beginners! Let us know which your favorite Figma tips are and we might feature them in the next roundup!

Learn Figma with Tuts+

We have a ton of Figma resources to help you learn and improve, from tutorials, to full-blown courses (and all for free!). Check them out: