Layout Tips

Layout Tips

When working with layouts in Figma you’ll need to be comfortable with resizing, measurements, spacing, alignment, and masking.

Here are five tips to help you out!

Watch tutorials on You Tube

TIP 01.

Skew Shapes For Easy Isometric Resizing

If you’re working with isometric illustrations in Figma, there is a great way to skew your shapes and help resize things more intuitively.

TIP 02.

Quick Column

You can quickly generate a column layout by using snapping and distribution. For example, snap two squares to the sides of an artboard, then nudge each one inward slightly.

TIP 03.

Remove Space Between Items

It’s possible to quickly remove all space between a series of objects. Select the objects in question, then go Main menu > Arrange > Pack Horizontal to get rid of all horizontal space.

TIP 04.

Make Alignment
Extra Precise

You can get some help with aligning objects precisely by making sure the rulers are turned on (SHIFT + R) and then when you move a shape around you’ll see its width and height represented in the rulers.

TIP 05.

Create Masks

To create masks really quickly in Figma, right-click an object and choose Use Mask. However, be aware that you need the masking object to be grouped in with the objects that you want to mask.