Canvas

Your Canvas is ground zero for experimenting with concepts and designing flows. Draw directly on the canvas or insert device frames. Use these docs to learn the basics of our interface and features.

The Framer X interface will be familiar to most, with a large canvas, device preview, and full-featured toolkit. Like many of the other graphic design tools, Framer X offers the same insertable shapes and text, all easily styled using the properties panel. You can draw directly on the canvas, import vector assets, or even set up a series of Frames to create a multi-screen app flow. Designing on the canvas works great for smaller interactions, but we recommend using frames for complex and responsive app flows.

Navigation

Pan

When working on the canvas, you can use the Pan tool to quickly pan over your canvas. Select the Pan tool or hold down space, then click and drag to pan in any direction.

Zoom

You can use the Zoom tool (or use the shorthand Z) to quickly zoom in-and-out of anything that is on your canvas. You can zoom out as far as 10% (to get a great overview of all your Frames) or zoom in all the way up to 3200% to focus on the nitty-gritty.

Direct Selection

You can easily select any layer on the Canvas by simply clicking on them. Often, you know exactly which layer you want to select. In those cases, you can simply hold CMD while you make your selection so that you are able to directly select that nested Frame.

Resize

The four handles around any layer can also be used to resize the layer. Select a handle and drag to resize. Hold down the Shift key and it will resize it by proportion, keeping the height and width at the same ratio. Hold down the Option key to resize both sides, either vertically, horizontally or all sides.

Rotation

When your cursor hovers just outside of one of the four handles of your Frame or Shape you will be able to rotate the object. Alternatively, you can use the Rotation property within the properties panel.

Radius

By clicking on the circle located near the top-left corner of a Frame or Shape you can adjust the radius. Drag it to the center or from it to customize. Alternatively, you can use the Radius property within the properties panel.

Import

Framer X supports the Sketch Plugin from Framer Studio. This means you can easily copy your artboards from Sketch and paste them in Framer X.

Here’s an overview of the specific features and tools included in this plugin.

Supported Not Supported
Artboards Nested Symbols
Groups Stroke Settings
Shapes Masked Layers
Text Layers Image Fill
Paths Radial Gradients
Boolean Operations Angular Gradients
Symbols

Export

Exporting works exactly as you’d expect. You can create multiple exports for a single frame or shape to cater to multiple resolutions. Simply select a layer and hit export in the bottom right corner of Framer. Select one of the pre-made presets or add your own. Adding a suffix to the preset will append this to your file name. Clicking the suffix dropdown allows you to save assets to organized folders.

Formats Sizes
PNG .5x
JPG 1x
PDF 1.5x
WEBP 2x
SVG 3x
4x
CSS & SVG

Right-click a layer and select Copy CSS to copy the CSS values or Copy SVG to copy the SVG values of the selected layer to your clipboard. Then paste perfectly formatted CSS or SVG code directly in your favorite editor to speed up your development workflow.

Copy Image

Framer X allows for quick exporting just by right-clicking on a layer. Select Copy Image or hit CMD C to copy the selected item to your clipboard. You can paste to any app that supports pasting images, easily add your exports to documents, create quick mockups, or gather feedback in chat apps.

Presets

Framer X has a few pre-loaded exporting presets. The iOS and Android presets contain all of the platform-specific sizes you’ll need for development. You can always add your own custom preset by hitting “+” in the export panel.

iOS Android
1x 1x
2x 1.5x
3x 2x
3x
4x

Start your free 14‑day trial.

Enter your email and we‘ll send you a download link for later.

We recently introduced Frames and Shapes, so some information in these videos may be outdated. To learn more visit our Help Center.