Frames

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:

• Use the Frames Wizard

  The wizard makes it easy to create a new frame. Just press ⌘F to get things started.

  The wizard dialog gives you two choices for creating a frame: Numeric and Visual. The numeric method can be used when you have the exact dimensions of a design element. If you want to draw the frame interactively, use the visual method.

  When you choose the visual method, the screen will dim and wait for you to click and drag the mouse. The frame's origin (upper-left corner) will be where the click begins; the width and height is determined by how far you drag down and to the right.

• Shrink a Selection

  If you want to quickly create a frame around an on-screen element, you can do it by drawing an sloppy selection that gets "shrunken" to match the dimensions of the element.

  To start the shrink selection, press the hot key ⇧⌘5 and your screen will dim. You can "cut a hole" in this overlay to define the element you want to measure: just click on your screen and drag the mouse. After you release the mouse, xScope will examine the selected area to find the minimum dimensions. It does this by shrinking the area until the edge pixels are all different, leaving you with a frame for the element.

• Use Keyboard Shortcut

  There is a shortcut key for creating a new frame. Just press ⇧⌘F to create a frame at the center of the screen.

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:

• Grid: Allows you to select one or more overlays. The 2 × 2 grid is useful for centering items while the 3 × 3 grid can be helpful for a "Rule of Thirds" composition. The other settings can be used for grid-based web designs.
• Ratios: Contains a list of common aspect ratios (such as 4:3 for standard TV and 16:9 for HDTV.) You can also select "Unlocked" if you don't want to use an aspect ratio. The current ratio is always displayed when you click on the resize control: non-standard ratios can be locked by selecting "Lock This".
• Duplicate Frame: Creates another frame with the same width and height.
• Copy to Clipboard: The width and height for the frame are copied to the clipboard.

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.

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.

Return to the index or proceed to the next tool: Crosshair