Figma Selection, Move, and Scale Fundamentals

The Two Essential Tools: Move and Scale

In the top-left of your toolbar, you'll see an icon for the Move tool. This is your default cursor for most interactions. Hidden under it is the Scale tool.

• Move tool (V): Used for selecting, moving, and basic resizing.
• Scale tool (K): Used for proportionally resizing objects and all their properties (like strokes and text size).

Memorizing these two shortcuts (V and K) will dramatically speed up your workflow.

Part 1: Selecting and Moving Objects

The Move tool (V) is your primary tool for interacting with objects on the canvas.

Methods of Selection

Being able to select the exact object or group of objects you want is a fundamental skill. Let's review the main techniques.

Here is a summary of the key selection methods from that resource:

• Single Selection: Simply click on an object.
• Multiple Selection:
  • Hold Shift and click on multiple objects.
  • Click and drag on an empty area of the canvas to create a "selection marquee" around the objects you want to select.
• Deep Selection: When objects are inside a frame or group, clicking once selects the parent container. To select a specific object inside:
  • Double-click on the nested object.
  • Or, hold Control (on Windows) or Command (on Mac) and click directly on the nested object.

Moving Objects with Precision

Once an object is selected, you can move it in several ways:

1. Click and Drag: The most straightforward way to reposition an object. As you drag, you'll see red "smart guides" appear, helping you align the object with other elements on your canvas.
2. Nudging: For precise adjustments, use the arrow keys on your keyboard to move a selected object by 1 pixel. Hold Shift + arrow key to move it by 10 pixels.

Watch this quick demonstration of nudging for fine-tuning an object's position.

Part 2: Navigating Your Workspace

Effectively moving around your canvas is just as important as moving objects on it. The main techniques are panning and zooming.

• Panning (Moving the Canvas): Hold the Spacebar key, and your cursor will turn into a hand. Click and drag to move your view of the canvas around without moving any objects. You can also use the middle mouse button to pan.
• Zooming:
  • Hold Control (or Command) and scroll your mouse wheel up or down.
  • Press Z to activate the Zoom tool, then click and drag a box around the area you want to magnify.
  • Use the shortcuts Shift + 1 to fit all frames on the screen and Shift + 2 to zoom in on your current selection.

Let's see these navigation techniques in action.

Part 3: The Crucial Difference: Resizing vs. Scaling

This is one of the most important concepts for beginners in Figma. While both the Move tool and the Scale tool can change an object's size, they do it in very different ways.

• Resizing (with the Move tool V): When you select an object with the Move tool and drag its corners, you are only changing the dimensions of its bounding box. Properties like stroke thickness, corner radius, and font size will not change. This often leads to distorted or broken-looking designs.
• Scaling (with the Scale tool K): When you use the Scale tool, you resize the object and all of its properties proportionally. The stroke will get thicker or thinner, the font size will increase or decrease, and corner radii will adjust accordingly.

This article explains the difference clearly.

Now, let's watch how to use the Scale tool. Pay attention to the use of the Alt/Option key to scale from the center.

Part 4: Practical Exercise

Let's put all these skills together.

1. Open your "My First Design File" in Figma.
2. Create a simple button:
   • Draw a Rectangle (R) about 200px wide and 50px tall.
   • Give it a Fill color and set the Corner Radius to 8.
   • Add a Text layer (T) on top that says "Click Me". Center the text inside the rectangle using the alignment tools.
3. Select both the rectangle and the text layer and duplicate them twice, so you have three identical buttons.
   • Pro-tip: The fastest way to duplicate is to select the objects, hold Alt (or Option), and drag a copy away.
4. Arrange the three buttons in a vertical column. Use the smart guides to make sure they are centered horizontally and have some space between them.
5. Now, let's practice scaling:
   • Select the second button (both its rectangle and text).
   • Switch to the Scale tool (K).
   • Scale it down to about 75% of its original size.
   • Select the third button.
   • Using the Scale tool (K), scale it up to about 125% of its original size.

Notice how using the Scale tool keeps the corner radius and font size proportional to the button's new size, maintaining a consistent design. If you had used the Move tool's resize handles, the corner radius and font size would have stayed the same, making the buttons look inconsistent.

Conclusion

Excellent work! You now have the skills to precisely manipulate any object on your Figma canvas. This level of control is what separates quick mockups from polished, professional designs.

Here are the key takeaways:

• Use the Move tool (V) for selecting and moving objects.
• Master different selection methods: Shift-click, marquee select, and deep select (Ctrl/Cmd + click).
• Use arrow keys for precise nudging and Spacebar + drag to pan your canvas.
• Use the Scale tool (K) whenever you need to resize an object and its properties (like strokes and font sizes) proportionally.
• Remember the fastest way to duplicate: Alt + drag.

In our next lesson, we will focus on organizing your file using layers, groups, and pages. Now that you can create and manipulate lots of objects, keeping them organized becomes essential for managing more complex projects.