In Figma, the main workspace you see is often referred to as the canvas. While the entire canvas area is an infinite space and cannot be resized itself, you typically work within Frames on the canvas. The question likely refers to resizing these key container elements where your designs reside.
Based on common Figma usage and the provided reference, you resize a canvas element (specifically, a Frame) using its handles.
Resizing Frames on the Canvas
Frames are fundamental building blocks in Figma. They act like artboards or containers for your design elements on the infinite canvas. The process for resizing these frames is straightforward:
Steps to Resize a Frame
To resize a Frame on your Figma canvas, follow these simple steps:
- Select the Frame: You can do this in two ways:
- Click directly on the Frame in the main canvas area.
- Locate and click the Frame's name in the Layers panel on the left sidebar. This method is helpful when frames are nested or difficult to select on the canvas.
- Locate Handles: Once the Frame is selected, you will see bounding box appear around it with small square "handles" at each corner and along the sides.
- Drag to Resize: Click and drag one of the handles in any corner or side of the selected Frame. Moving the handle inwards will decrease the size, while dragging it outwards will increase the size.
- Corner handles allow you to resize the frame while maintaining its aspect ratio (if you hold
Shift
while dragging) or change both width and height freely. - Side handles (top, bottom, left, right) let you resize only along that specific axis, changing only the width or height.
Reference Information: As noted, you Select the frame in the canvas, or layers panel in the left sidebar. Click the handle in one of the corners and drag to resize.
Understanding Frames vs. the Canvas
It's important to distinguish between a Frame and the Canvas:
- The Canvas: This is the unlimited, grey background area where you place all your design elements, including frames, shapes, text, etc. You cannot change its dimensions.
- Frames: These are defined, resizable containers on the canvas. They represent specific screens, sections, or artboards for your project. When people talk about screen sizes or specific layout dimensions in Figma, they are almost always referring to the size of a Frame.
Therefore, while you don't "resize the canvas" itself, you frequently resize the Frames placed on the canvas to fit your design requirements.
Quick Tips for Resizing
- Maintain Aspect Ratio: Hold down the
Shift
key while dragging a corner handle to scale the Frame proportionally. - Resize from Center: Hold down the
Alt
(Windows) orOption
(Mac) key while dragging a handle to resize the Frame from its center point. - Precise Resizing: For exact dimensions, select the Frame and use the Design panel on the right sidebar. Here, you can directly input numerical values for
W
(Width) andH
(Height).
Method | Control | Description |
---|---|---|
Drag Handles | Corner Handles | Resize freely (or proportionally with Shift) |
Drag Handles | Side Handles | Resize along one axis (width or height) |
Design Panel | W & H Input Fields | Set precise width and height numerically |
Design Panel | Constraint Options | Control how child elements resize within the frame |
By using frames and their resizing handles, you can easily define and adjust the boundaries for different parts of your design within the infinite Figma canvas.