xScope Overlays

xScope Icon

The Iconfactory just released version four of their Mac design tool xScope. If you don’t know about xScope it is a collection of useful tools for on-screen design. Add guides to your screen, measure sizes, pick out colours all these and more are staples of xScope. The fourth release of xScope adds a number of great new features.


Probably the most exciting addition to xScope are overlays. As the name suggests this is a tool that allows you to add overlays to any window. For me, working on website designs, the most useful appliction of this is when used in conjunction with a web browser.

Simply position the overlay window over a browser window and click the lock icon in the top left to snap the overlay to fit the browser. Once attached the overlay sticks to the window so there’s no need to reposition if you move the window. Attaching an overlay adds a number of useful features to the window which makes in browser testing of designs easier.


xScope already allows you to add guides to your screen but through overlays you can now add guides directly to the window. Overlay guides have the advantage of being relative to the attached window as opposed to the global guides in xScope. This is perfect for ensuring that things line up or for measuring distance between elements.

An overlay showing the grid setup on getbootstrap.com


If you are working on a design which uses responsive breakpoints, altering the layout for different devices, then overlays can help you out. In the options panel on the right of an overlay you can define your breakpoint widths. Clicking the small cycle button on the top of an overlay allows you to then cycle through these breakpoints. Cycling through automatically resizes the width of the attached window so you can quickly preview your design at the defined breakpoint sizes. In addition to this xScope has the ability for you to configure grid overlays for each breakpoint size. There are options for the content width, columns, gutter and padding which allow you to recreate most basic grids. Once setup turn on the grid overlays to make sure your design is fitting correctly to your grid.

Cycle through breakpoints to test responsive design layouts

Image Overlay

Drop an image onto the overlay to have this superimposed on top of the window. This is a great tool if you are working to a precise visual to ensure pixel perect accuracy.


Ever wanted to grab a copy of a webpage to inspect or for a visual. If you’re like me you’ve probably found yourself taking multiple screen grabs and stitching them together to create a complete version of the page. The screenshot option on an overlay makes this simple. Simply click the camera icon and xScope creates a full length screenshot of the attached window.