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.
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
8px. The small nudge amount is a regular arrow keypress, and the big one is when holding
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.
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).
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.
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 + /
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.
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!
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.