How to Scale in Figma: Resize with Precision

You resize an icon in Figma and the stroke looks paper thin. The font size stays stuck at 16px while the button balloons to twice its size.

Sound familiar?

Learning how to scale in Figma properly fixes this. The Scale Tool (K) adjusts dimensions, stroke weights, font sizes, and effects all at once, keeping everything proportional.

This guide covers five methods for scaling objects, frames, and components. You’ll learn keyboard shortcuts, anchor point positioning, multiplier fields, and when to use constraints instead.

Takes about 10 minutes to master. Your designs will look consistent across every screen size.

How to Scale in Figma

Scaling in Figma is the process of resizing layers, objects, and frames while maintaining aspect ratios, stroke weights, and font sizes.

Users need this when creating responsive designs, resizing icons, adapting components for different screen sizes, or preparing assets for export.

This guide covers 5 methods requiring 3 to 10 minutes and basic Figma experience.

Prerequisites

• Software: Figma web version or desktop app (2024 or later)
• Access: Figma account with edit permissions to a Design file
• Skills: Basic knowledge of the Figma interface and layers panel
• Time: 3 to 10 minutes depending on method complexity

Step One: How Do You Activate the Scale Tool in Figma?

The Scale Tool is located in the toolbar under the Move tools dropdown.

Selecting it changes the cursor and enables proportional scaling with stroke and font size adjustment.

Expected result: cursor changes to scale indicator.

Action

1. Toolbar location: Click the dropdown arrow under Move tool
2. Selection: Choose “Scale” from the menu
3. Keyboard shortcut: Press K on your keyboard

Purpose

Activating the Scale Tool tells Figma you want proportional resizing rather than simple dimension changes.

This is different from the Selection Tool (V), which only adjusts the bounding box without touching stroke weight or text properties.

Step Two: How Do You Scale an Object Using Click and Drag?

With the Scale Tool active, clicking and dragging a corner handle resizes the object proportionally.

Stroke weights, font sizes, and nested elements all scale together.

Expected result: object resizes uniformly in all directions.

Action

1. Selection: Click the object you want to scale
2. Corner handles: Hover over any corner until the scale cursor appears
3. Resize action: Click and drag to increase or decrease size

Purpose

Click and drag scaling is the fastest method for visual adjustments where exact measurements are not required.

Works great for quick iterations when designing user interface elements like buttons, cards, and icon sets.

Step Three: How Do You Set Anchor Points for Directional Scaling?

The anchor box in the Scale panel determines which part of the object stays fixed during scaling.

Center anchor means the object scales outward equally.

Top left anchor means the object expands down and to the right.

Action

1. Scale panel location: Right sidebar under the Design tab
2. Anchor box: Click one of the nine anchor points
3. Scaling direction: Object scales away from the selected anchor

Purpose

Setting anchor points gives you control over the scaling direction for precise positioning within layouts.

When you’re working on a grid system, proper anchor placement keeps elements aligned to their intended positions.

Step Four: How Do You Scale Using the Multiplier or Dimension Fields?

The Scale panel offers a multiplier dropdown and width/height fields for exact scaling.

Entering 2x doubles the size.

Typing 200px in width auto calculates the proportional height.

Action

1. Multiplier field: Enter a value like 1.5x or 2x
2. Dimension fields: Type exact pixel values in width or height
3. Apply changes: Press Enter or Return to confirm

Purpose

Multiplier and dimension fields provide precise control when exact sizes are required for design specifications.

Especially useful when preparing SVG icons or assets that need specific export dimensions.

Step Five: How Does the Scale Tool Differ from Standard Resizing?

Standard resizing with the Selection Tool (V) changes dimensions but keeps stroke weights and font sizes unchanged.

The Scale Tool changes everything proportionally.

A 2px stroke becomes 4px when scaled to 200%.

Comparison

| Method | What Changes | What Stays Fixed | | — | — | — | | Selection Tool (V) | Dimensions only | Strokes, fonts, effects | | Scale Tool (K) | Dimensions, strokes, fonts, effects | Nothing (all scales) |

Purpose

Understanding this difference prevents unexpected results when resizing icons, buttons, and components.

If you’ve ever made a button in Figma and wondered why the border looked wrong after resizing, the Selection Tool was likely the culprit.

Alternative Methods

Scaling with Keyboard Shortcuts

Keyboard shortcuts speed up your workflow when you’re deep into design mode.

1. Select object: Click the layer you want to scale
2. Activate tool: Press K
3. Adjust scale: Ctrl/Cmd + Plus or Minus changes size incrementally

Scaling Frames with Contents

Frames and their nested layers can scale together, but only if everything sits inside the frame bounds.

1. Frame selection: Ensure all elements are inside the frame (not just visually overlapping)
2. Tool activation: Press K to switch to Scale Tool
3. Resize: Drag corner handles to scale frame and all nested content simultaneously

This method works well when you need to resize entire components in Figma for different breakpoints.

Using Constraints for Responsive Scaling

Constraints tell Figma how layers should behave when their parent frame resizes.

1. Layer selection: Click the nested layer
2. Constraints panel: Right sidebar under Design tab
3. Scale option: Set horizontal and vertical constraints to “Scale”

The Scale constraint defines the layer’s size as a percentage of the frame’s dimensions, maintaining those proportions automatically.

Method Comparison

| Method | Best For | Limitation | | — | — | — | | Scale Tool (K) | One-time proportional adjustments | Manual process each time | | Constraints (Scale) | Automatic responsive behavior | Only works inside frames | | Auto Layout | Dynamic component sizing | More complex setup |

Verification

Select the scaled object and check the Design panel for updated dimensions.

Verify stroke weights have changed proportionally by comparing before and after values.

Confirm text layers show adjusted font sizes in the Properties panel.

If you scaled a frame, click through each nested layer to ensure nothing got left behind or distorted.

Troubleshooting

Strokes Not Scaling with Object

Issue: You resize an object but the stroke weight stays the same.

Solution: Switch from Selection Tool (V) to Scale Tool (K) before resizing.

Nested Elements Not Scaling with Frame

Issue: Frame resizes but contents stay at original size.

Solution: Confirm all elements are inside the frame bounds, not just visually overlapping. Check the layers panel hierarchy.

Constraints Overriding Scale Behavior

Issue: Objects jump to unexpected positions or sizes when scaling.

Solution: Hold Ctrl/Cmd while dragging to temporarily ignore constraints.

Component Instances Not Scaling Properly

Issue: Nested instances within components won’t scale individually.

Solution: Layers nested inside component instances cannot be scaled separately. Remove the component first or scale at the parent component level.

Fractional Font Sizes After Scaling

Issue: Text shows sizes like 14.7px instead of clean numbers.

Solution: This happens when scaling by non-round percentages. Manually adjust font size to the nearest whole number after scaling, or use multipliers like 1.5x or 2x that produce cleaner results.

Related Processes

• Making frames in Figma for proper layer containment
• Creating variants in Figma for different size states
• Zooming in Figma (different from scaling objects)
• Rotating in Figma for combined transformations
• Ungrouping in Figma when you need to scale individual elements
• Cropping in Figma for adjusting visible areas without scaling

FAQ on How To Scale In Figma

What is the keyboard shortcut for the Scale Tool in Figma?

Press K to activate the Scale Tool. This switches from the default Selection Tool (V) and enables proportional resizing where stroke weights, font sizes, and effects all adjust together.

What is the difference between scaling and resizing in Figma?

Resizing with the Selection Tool changes dimensions only. Scaling with the Scale Tool adjusts dimensions plus stroke weights, font sizes, corner radii, and effects proportionally. Use scaling when you need everything to grow or shrink together.

How do I scale a frame and its contents together?

Select the frame, press K, then drag a corner handle. All nested layers scale proportionally. Make sure elements are inside the frame bounds in the layers panel, not just visually overlapping on the canvas.

Why are my strokes not scaling with the object?

You’re using the Selection Tool instead of the Scale Tool. Press K to switch tools, then resize. The Selection Tool only changes the bounding box dimensions while keeping stroke weights at their original pixel values.

How do I scale to an exact percentage in Figma?

Select the object, press K, then use the Scale panel in the right sidebar. Enter a multiplier like 1.5x or 2x in the field. Press Enter to apply the exact percentage change.

Can I scale multiple objects at once in Figma?

Yes. Select multiple layers by holding Shift and clicking, or drag a selection box around them. Press K and drag any corner handle. All selected objects scale proportionally from their collective center point.

How do anchor points affect scaling in Figma?

Anchor points determine which part stays fixed during scaling. Set the anchor to top-left and the object expands down and right. Set it to center and the object scales outward equally in all directions.

How do I scale text without changing the font size?

Use the Selection Tool (V) instead of the Scale Tool. Drag the text layer’s bounding box handles to resize the container. The font size stays fixed while the text area expands or contracts.

Why does scaling create fractional font sizes?

Scaling by non-round percentages produces decimal values like 14.7px. Use clean multipliers (1.5x, 2x) to avoid this. Or manually edit the text and round font sizes to whole numbers after scaling.

How do I scale components without breaking instances?

Scale at the main component level, not individual instances. Or use components with variants for different sizes. Detaching an instance before scaling breaks the link to the main component permanently.

Conclusion

Knowing how to scale in Figma saves you from inconsistent designs and broken layouts. Press K, drag a corner, done.

The Scale Tool handles proportional resizing for layers, frames, grouped objects, and nested elements. Stroke weights adjust. Font sizes follow. Effects stay intact.

Use anchor points when you need directional control. Use the multiplier field for exact percentages. Use constraints when you want automatic responsive behavior.

The difference between the Selection Tool and Scale Tool trips up most beginners. Now you know which one to reach for.

Start with simple objects. Move to frames with contents. Then tackle editing components at scale.

Your user experience designs will stay pixel perfect across every viewport size.