When working with layouts in Figma (which will be often) you’ll need to be comfortable with resizing, measurements, spacing, alignment, and masking. Here are five tips to help you out!
Watch Tips
1. 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. To do so, take an object (for example, a square) and rotate it 45°–hold SHIFT and drag the corner to incrementally rotate it.
In order to squash this up-ended square you first need to group it (by itself), effectively resetting the boundary box in the process. Now when you select it you’ll be able to flatten it on the X and Y axes.
To change its dimensions whilst remaining true to its isometric lines, ungroup it, then resize it with the handles.
2. Quick Column Layouts
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. Add some other shapes between them, then select the whole lot and go the Main menu > Arrange > Distribute Horizontal Spacing. Bingo! A perfect column layout to work from.
3. 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. The same is also possible vertically, by going to Main menu > Arrange > Pack Vertical.
Combine these options with the alignment tools to help you create row and column-based layouts.
4. 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.
5. Create Masks Quickly
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.
Figma Learning Resources
Those tips should have helped you with layout in Figma, but to take things to the next level we have a series of in-depth courses on Tuts+:
- Hat tip to Carmel DeAmicis and Valerie Veteto for their regular community tips roundups—go and check them out!
-
blog.figma.com
- www.figma.com
Learn Figma
We've built a complete guide to help you learn figma design, whether you're brand new to Figma's design tools, or you want to take your skills to the next level.
