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.
When working on the canvas, you can use the
to quickly pan over your canvas. Select the Pan tool or hold down
space, then click and drag to pan in any direction.
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.
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
while you make your selection so that you are able to directly select that nested Frame.
The four handles around any layer can also be used to resize the layer. Select a handle and drag to resize. Hold down the
key and it will resize it by proportion, keeping the height and width at the same ratio. Hold down the
key to resize both sides, either vertically, horizontally or all sides.
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.
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.
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.
|Text Layers||Image Fill|
|Boolean Operations||Angular Gradients|
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.
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.
Framer X allows for quick exporting just by right-clicking on a layer. Select Copy Image or hit
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.
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.