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 and complex and responsive app flows
There are multiple ways to navigate the canvas. Everything is available through the UI and and quickly accessible through keyboard shortcuts
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.
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
CMD 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
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.
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||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 by right clicking the export header 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.