Essential Figma techniques and strategies that all designers should be familiar with

This article contains my favorite advanced Figma tips & tricks that help me to speed up my design workflow.

Swap-out components faster

Choose a component from the assets panel, hold down?Option + Command?and drag across your asset onto your design, where you’ll see a?purple border around your existing component.?Release the mouse, then release the modifier key. If you release the modifier key first, Figma will only add the new component, not replace the old one. Figma will change the size of the new component to match the size of the previous one.

Selecting elements with similar properties

The?Edit?menu allows selecting multiple objects based on their properties. This allows you to select all layers in your file that have the same properties. This is super handy when you want to adjust the properties of all those layers at once.

1. Select a layer or layers
2. Go to the?File menu ??and select?Edit
3. Choose to?Select All?with the same:

• Properties
• Fill
• Stroke
• Effect
• Text Properties
• Font
• or another Instance

Arc tool

There is a little dot on the edge of every circle you draw. It’s called the Arc Tool, press it and move your mouse and you can slice your circle. On the top of your slice, you then find another little circle named “ratio” to adjust. Once you activated your Arc tool, the properties will also appear on the right-hand side properties panel.

Figma smart selection

Tidy up your designs by clicking the grid icon in the corner after selecting multiple objects in an array. This makes all spacing between objects equal, and you can then drag objects to re-arrange them and adjust their spacing.

Small & Big Nudge Amount

When you move an element with the arrow keys, it moves 1 pixel by default. Likewise, if you use the Shift + arrow keys, it moves 10 pixels by default. It is called small and big nudge. If you are using a style guide, you may want to change these pixel settings to speed up. You can change it;?Preferences> Nudge Amount> Small Nudge or Big Nudge.

As we are using a base unit of?8px for the sizing and spacing task, we can set the nudge amount in Figma from 10px to 8px. This way, every time we move or resize an object, it will be in increments of 8.

Built-in Calculator

Every numeric input box in Figma works as a calculator. 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 the 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.

If you want to change one of these values for multiple elements at the same time, 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.

Rename frames in seconds

When your work is left with multiple unnamed or weirdly named frames, it is a tedious task to rename all the frames individually.

You can easily select all the frames you would like to rename. Right-click on the selected layers and select rename. On the pop-up, input your preferred frame name. As a bonus, Figma allows you to even number the frames. Save by clicking on rename and all your selected frames are renamed.

This works amazingly for wireframes & flows and really helps with keeping your files cleanly organized.