Canvas

Framer's canvas is an infinite area that contains all of your designs.

Navigating

Panning

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.

Zooming

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 Ctrl key on Windows and press the + or - keys
  • Hold z and click to zoom in, or hold Option + Z on Mac or Alt + Z on Windows and click to zoom out
  • On the Toolbar, click on Framer's Zoom menu for more options

Zooming To

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%.

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.

Creating

You can create new layers in several ways.

To draw a Frame, Stack, Text, Scroll, or Page on the canvas, click on the corresponding tool in the Toolbar, then click and drag on the canvas to create that tool's component.

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.

Selecting

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.

Tip: Press Escape to select a selected layer's parent layer.

Resizing

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.

Rotating

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.

Radius

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.

Getting Distances

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.

Positioning

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.

Aligning

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.

Distributing

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.