Framer's canvas is an infinite area that contains all of your designs.
An overview of the Framer canvas
To pan across the canvas, use your trackpad's scroll gesture. You can also hold down the Spacebar and click and drag to pan in any direction.
To zoom the canvas in and out, hold the
⌘ on Mac or
Ctrl key on Windows and scroll up or down.
You can also:
- Hold the
⌘key on Mac or
Ctrlkey on Windows and press the
zand click to zoom in, or hold
Option + Zon Mac or
Alt + Zon Windows and click to zoom out
- On the Toolbar, click on Framer's Zoom menu for more options
To zoom out to see your entire project, press
⌘ + 1 for Mac or
Shift + 1 for Windows, or open the Zoom menu and click on Zoom to Fit.
To zoom to fit only your selected layers, press
⌘ + 2 for Mac or
Shift + 2 for Windows or open the Zoom menu and click on Zoom to Selection.
To zoom to 100%, press
⌘ + 0 for Mac or
Shift + 0 for Windows or open the Zoom menu and click on Zoom to 100%.
Framer allows zooming up to 3200%
Working with Layers
In Framer, the term layer refers to anything that is on the canvas. Frames, Design Components, Code Components, Icons, and Text are all layers when on the canvas. To learn more about layers, see our Layers Panel article.
You can create new layers in several ways.
To insert a component, element, or pattern on the canvas, click on the Insert icon in the Toolbar to open the Insert menu, then click the item that you'd like to insert.
To add an image or icon to your project, drag the image from your computer onto the canvas.
You can select a layer on the canvas by clicking on it.
To select a layer that is directly on the canvas and that contains other layers, move your cursor to the layer's top-left corner and click on the layer's name.
You can also select a layer by clicking on its name in the Layers Panel.
Escape to select a selected layer's parent layer.
To resize a selected layer, click on one of its four corner handles and drag to resize. Hold down the
Shift key to maintain the layer's aspect ratio. Hold down the
Option key on Mac or
Alt key on Windows to mirror your adjustments.
You can also set a specific height and width on the Properties panel.
An image showing how to drag the corners of a canvas element to resize
To rotate a selected layer, move your hover to just outside one of its four handles and drag to rotate. Hold down the Shift key to rotate the layer in 15 degree increments.
You can also set a specific rotation value on the Properties panel.
An image showing how to rotate a canvas element
To change the border radius of a selected layer, click on the circle located near the top-left corner and drag to adjust.
You can also set a specific border radius on the Properties panel, including unique border radius values for a layer's top, right, bottom, and left sides.
Tip: On the Properties panel, you can enter a layer's radius as either a number value or a percentage.
An image showing how to set the radius
To see the distance between one layer and another layer, select the layer, hold the
Option key on Mac or
Alt key on Windows, and hover over the second layer.
An image showing distances of an element
To change a layer's position on the canvas, click the layer and drag it to its new position. You can also set a specific x and y position on the Properties panel.
To make fine adjustments to a layer's position, select a layer and then press an arrow key to "nudge" it that direction. To make a bigger nudge, hold Shift while nudging.
To change the distance of a nudge, open the Zoom menu in the Toolbar and click Nudge Preferences.
For more help with positioning, see our Rulers and Guides article.
To align two or more layers, select the layers you want to align and then click the alignment icon at the top of the Properties panel.
You can also right click the selected layers and select an option under Align Horizontally or Align Vertically.
To distribute three or more layers, select the layers you want to align and then click the alignment icon at the top of the Properties panel.
You can also right click the selected layers and select an option under Distribute Horizontally or Distribute Vertically.