Sizing and placement of design elements matters: do it quickly and easily.

The Frames tool is ideal for tasks where you are working with areas: creating a UI in a fixed window size, visualizing a CSS box definition, or any other measurement that requires an origin (x,y) and size (width, height.)

As with guides, there are several ways to create a frame:

As you adjust the frame's position, you'll see a number appear—this is the distance in pixels measured from the top-left corner of the screen. The width of the frame is always displayed along the bottom edge; the height is on the right edge. You can resize the frame by dragging on either of these indicators.

The frame options menu includes the following items:

Linked frames (with the chain icon) will move together as a group. To link the frames, select one of the frames by clicking on its position icon. Then click on the chain icon of all the frames you want link to the selected frame. To unlink, click on the chain icon again.

If you want to simply view the frame boxes themselves without control handles or measurement pills cluttering your view, you can turn on Simplify interface in background under General Preferences. This way, when xScope moves to the background, only the box outlines themselves will be displayed.

By default, the frames only display their origin point while dragging. If you're doing software development or some other activity where you want to see the origins of frames, use the Frames panel in xScope Preferences to set Always show origin of frames. There is also an option to display aspect ratios all of the time.

You can use the menu options, located under Frames in the menu bar, to save and open files with frames. In the open dialog, there is an option to add the frames in the file to the existing set of frames.

The Remove All Frames menu item lets you quickly remove all frames. If you accidentally remove a frame, use ⌘Z (Undo) to get it back.

Frames can be easily manipulated using the keyboard. One can be created using ⇧⌘F, selected with the F key, and moved using the arrow keys. These keyboard shortcuts, combined with a hot key, makes it possible to adjust frames without your hands leaving the keyboard. If you're working with HTML and CSS in a text file, this can be very handy. The keyboard shortcuts page contains a full list.

By default, Guides and Frames are shown on the left display if you have more than one screen attached to your Mac. In the General preference panel, there's a Display guides and frames setting that allows you to pick a different display.

Starting with Mavericks, the All Displays option is only available after turning off Displays have separate Spaces in the Mission Control panel of System Preferences.