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.