7 Figma Tips to Design Like a Pro

Published October 16th, 2020
4 minute read

Figma is a badass collaborative design application. It may seem simple, but there's a lot of power hidden in that simplicity. After years of working with it, I've picked up a handful of practical tips. In this article, I'll share some of my favorites with you.

Set your Nudge Amount

The first tip is actually just a setting. Simple enough, but it's a useful one. When moving objects with the arrow keys (or Shift + arrows), you can specify exactly how much each press moves them. Press Cmd + / to access settings and type Nudge Amount. Or use the hamburger icon at the top left, and you'll find it under Preferences -> Nudge Amount in the menus.

You can use whatever you want, but I recommend setting these to 1px and 8px. The small nudge amount is a regular arrow keypress, and the big one is when holding Shift.

Figma Nudge Amount

Why eight pixels? The short version is that 8 divides in half better than 10 does. Not only that, but 8px also works better with font sizing and Tailwind CSS defaults. Using a base of eight will be extra helpful if you do icon design as well.

Since displays are divided into pixels, computers have to resort to tricks when half-pixels are involved. To keep designs (and details at small sizes!) crisp it's better to stick to whole pixels instead of half-pixels. If you divide 10px into fourths, how do you display 2.5px? It's possible, but the half pixel won't line up "to the pixel." Rather, the fractional pixel will be somewhere in between, which results in elements not looking as crisp as they can.

Rename Multiple Layers at Once

Yes, it's totally possible! If you're like me, you rarely name layers until a design is finished. I know... I'm a savage. Perhaps you've got better naming habits, but even if so, this tip will still be useful. You can even use the current layer name or ascending and descending numbers as placeholder fields. Select several objects and press Cmd+R (or right-click in the layer sidebar, you animal).

Figma Multiple Rename

Use Deep Select

When objects are nested in groups, you can use deep select to get at them individually. To use it, hold Cmd when clicking (Ctrl on Windows). If you use Cmd + Right Click, you'll even get a nice menu with layers. If you have been using Figma for a while, chances are you knew about this tip. If not, you'll feel like a ninja after learning it.

Figma Deep Select

Select Similar Objects

When you have a few objects with similar properties, there's a whole set of selections that will help you out. You can select by similar fills, strokes, fonts, effects, etc... To use this feature, select an object and then find the Edit => Select All With ... entries in the hamburger menu. Remember, you can easily access this menu with Cmd + /

Figma Select Similar

Boolean Operations Remain Editable

If you're coming from other design programs, this one might be a surprise to you. When you use a boolean operation (union, subtract, etc...), the original elements are still editable inside it. This is a powerful feature and one you should take advantage of.

Figma Boolean Objects Editable

Combine Boolean Operations with Other Properties

Since you just learned that booleans remain editable, let's take it one step further. You can put properties on the resulting operation (such as a union) to get fantastic results. For example, try it with border radius and a union operator. Get creative and see what you can come up with!

Figma Union Border Radius

Quickly Resize Text Frames

When text has a bounding box that's too big, double click on the blue border to make it automatically fit. This is a nice time-saving shortcut that many folks don't know about.
Figma Text Autosize

Enjoy this article? Follow me on Twitter for more tips, articles and links.
😢 Awww, nobody has liked or mentioned this on Twitter yet.

Join the Newsletter ❤️

A most excellent monthly newsletter with code & design tips, curated links and more!
Don't worry, I'll never send you spam. Unsubscribe at any time.