The world of emerging design tools is fascinating. Promising new programs are being launched in rapid succession. However, one, in particular, has slowly become the best choice for more extensive and primarily distributed design teams.

Figma can possibly uphold the entire Web design process from start to finish. Initial sketches, feedback collection, collaboration, ready-to-test mock-ups, and developer handoff are well inside their abilities. Figma likewise improves and streamlines the work of product managers, design leads, and other stakeholders.

Now the question is: what makes Figma stand out from its competitors? Well, there are quite a few key aspects. However, every one of them can be traced back to the fact that Figma is web-based. Although, this did raise a lot of eyebrows when it was introduced. However, ultimately, this led to Figma's versatility and one-of-a-kind functionalities.

Figma offers a plethora of plug-ins and APIs that make it easy for the design team to customize the application as per their specific needs. Smart Selection being one such tool. With Smart Selection, you can quickly align, arrange and set regularity between layers in rows, columns, or grids.

Find out more on how to speed up your workflow with Smart Selection in Figma. So, let's dive in!

What is Smart Selection?

Smart Selection lets you align objects into rows and columns with even spacing between the individual objects. It is particularly beneficial when you have several objects to align. Use distribution to make even spaces between layers in a selection. You need to have more than one layer or object in your selection.

While using Smart Selection, Figma will maintain the position of the outermost objects or layers:

  • Distribute horizontal spacing:  All the objects or layers on the outer left and outer right will hold their position.
  • Distribute vertical spacing: All the objects or layers at the top and bottom will hold their position.

Getting Started with Smart Selection

Perhaps the useful Smart Selection feature is its ability to swap individual layers' positions within your selections. All you ought to do is select, click, and drag; instead of manually moving each layer, measuring to see their spacing remains even.

Excited to learn how Smart Selection really works? Let’s get started!

Make a Smart Selection

To begin, all you need is a selection of layers with equal spacing between them. 

  • Hover over that selection and take one among the handles that show up between every layer. You can adjust the spacing between the layers by dragging those handles.
  • In case your layers aren't spaced evenly, you won't see Smart Selection handles between them. Simply select all the layers and click on the Tidy blue button.
  • The Smart Selection will divide the layers in your selection into one or more columns or grids. The number of columns and grids is based on the total number of layers, their initial positions, and the overall size of the selection.

Adjust Space between Objects

While you swap layers during a Smart Selection, everything happens; consequently, and hence the surrounding layers move smartly to remain consistent with your existing layout. With Smart Selection, you can instantly adjust the vertical or horizontal spacing between each object.

  • Hover over the colored handles between the objects.
  • An arrow will appear right where the cursor was. Then you can click and drag the handle. Drag the handle Up to reduce the space vertically between objects. Drag it Down to expand the space vertically between objects. Drag it to the Left to reduce the space horizontally between objects. Drag it towards the Right to extend the space horizontally between objects.
  • The tooltip right above your cursor will show the distance between the objects in pixels. Release the cursor to apply the changes.
  • You can also update the Space property directly in the Properties panel. Depending on your selection, you will see either a Horizontal or Vertical space field. Enter a value in the field to update the spaces.

Resize Objects 

While your layers are now evenly spaced, they aren't sized evenly yet. Smart Selection allows you to resize the objects within the selection while keeping an equal distance between them.

When you select an object within a Smart Selection, we call it “marking,” and you have several options here:

  • Select an object within the Smart Selection to mark it for resizing.
  • To select multiple objects, hold down the Shift key to keep marking them.

Tips to use Figma Smart Selection

  • To save your Figma design, go to the Menu – File – Save as .fig.
  • To copy all layer styles from one element to another, press cmd + shift + c, cmd + shift + v. 
  • To copy an individual layer attribute, select that attribute and press cmd c + cmd v.
  • To rename a layer, hit cmd + r. You can also rename layers in bulk using the bulk rename overlay.
  • Holding shift while defining constraints enables you to select or deselect multiple constraints, such as left & right or top & bottom, at the same time. 
  • When various objects are selected, you can use the “Tidy Up” tool in the lower right corner to add equidistant distribution between your objects.
  • You can also make one element larger/smaller while keeping the original distribution. To do so, select the magenta circle in the center of the element and resize it.

Wrapping Up

Figma is a high-level yet intuitive framework that has proven itself more than proficient in taking care of the entire digital design process. Design teams can profit from its unique and extraordinary features. And where the program misses the mark, an immense collection of plug-ins and APIs makes up for the shortfall.

Lastly, it's great to understand that Smart Selection works with all kinds of layers, from simple shapes to complicated ones, nested Symbols, and surprisingly entire artboards. Therefore, if you want to quickly rearrange your UI/UX flow for an app or website or keep those extensive documents tidy, Smart Selection can take care of it all.

I hope Smart Selection finds a place in your Figma workflow and saves you ample time. So what are you waiting for? Rearrange your UI and speed up your workflow with Smart Selection.

Looking to hire a web designer or perhaps are you planning for your website redesign? Well, get in touch with us now!

Frequently Asked Questions

In Figma, the “Tidy Up” function is a feature that helps you organize and align objects on your canvas more neatly. It is particularly useful when you have multiple layers, shapes, or elements on your canvas that you want to arrange in a more structured and visually pleasing manner.

In Figma, “nudging” refers to the action of moving an object or selected objects by small increments using keyboard shortcuts. Nudging is a helpful technique for making precise adjustments to the position of elements on your canvas without the need for dragging or clicking with the mouse. It allows you to fine-tune the alignment and spacing of objects.

  1. In the toolbar on the left-hand side, click on the “Selection” tool icon. It usually looks like an arrow cursor or is labeled with a letter “V.”
  2. Click and drag a selection box around the objects you want to select.
  3. Click on multiple objects while holding down the Shift key to add them to your selection one by one.

Tidy Up simplifies the process of obtaining a Smart Selection. It can be executed by using the keyboard shortcut ⌥⌘T on macOS and ctrl-alt-T on other operating systems.