Back in 2009, we reviewed xScope, the then-new comprehensive toolkit for designers. xScope offers precision features for measuring, previewing, and organizing everything on your computer’s screen, from element dimensions to color codes in any format.
The Iconfactory recently released xScope 3: a major update to their popular software, promising over 70 new features and improvements in interface and performance, let’s take a look at what’s new!
xScope 2 included seven main tools accessed via menubar: dimensions, rulers, screens, loupe, guides, frames, and crosshair. xScope 3 improves on all these tools, and adds one new and very exciting tool to it’s repertoire.
Introducing xScope Mirror
xScope Mirror is a powerful new tool for anyone designing content to be viewed on the iPhone, from native apps to web apps and mobile websites. Mirror is pretty much what it sounds like: you connect your iPhone to your Mac via wi-fi, and your iPhone will display everything on your Mac’s monitor in real time.
To use Mirror, download the free iPhone app and launch it while you have xScope running on your Mac (make sure both phone and computer are on the same wi-fi network). After selecting your computer, it only takes a couple seconds to make a connection and start mirroring your screen. You can change the area displayed by touching and dragging, and bring up a menu by tapping the screen. You can even lock the viewport so it won’t budge.
xScope Mirror: your Mac on your iPhone!
xScope Mirror is an excellent tool for iPhone and mobile web designers, offering a speedy, simple solution to what is often a tricky problem. Of course, it won’t mimic Safari Mobile’s rendering, or run your app in iOS, but it’s a fantastic tool for visualizing designs and making demonstrations.
Other Features
If you’re not an iPhone designer, xScope still has plenty of other features to offer designers of all types. Since we’ve covered the basics on xScope before, I’ll focus on the improvements in the new version.
Dimensions
Dimensions is a handy measurement tool that recognizes elements on your screen based on pixel and pattern similarity and captures their dimensions. In the previous version of xScope, I found this feature to be a bit tricky to use and usually didn’t bother with it, but xScope 3 has significantly improved its performance by adding in pattern recognition, so that you can measure regions with repeating backgrounds. You can also now take a screenshot of the measured area using Shift + Cmd + 7.
Make sure you have clear 'lines of sight' to the edges of an element for accurate measurement.
Rulers
Rulers is just what it sounds like: a ruler on your screen. The xScope ruler includes some fancy features you won’t find in your standard Firefox extension, however, including rotation (restrict to 45 degree increments with Shift), callipers for easily measuring objects, and position indicators to show your cursor’s distance from the origin. xScope 3 introduces edge-snapping (hold Ctrl), which is a real time-saver when you have a lot of measurements to make, and improvements to the ruler design make it easier to use.
Use the callipers to make sure you get the edges accurately
While the Rulers tool is certainly very full-featured, what I’d really prefer is a simpler, less intrusive measuring tool like Photoshop’s Ruler Tool that would just let me drag a line on the screen and show me its length.
Screens
The screens tool adds a viewport window to your screen that allows you to quickly see the dimensions of standard devices and preview your design as it would appear on them. Though the interface is a bit overwhelming on a small monitor, it would be very handy for designers on larger monitors who have a hard time guessing exactly where the 1280px cutoff is (like me on my work PC).
CSS-Tricks is a fantastically responsive web design.
xScope 3 adds more platform sizes, edge snapping, ‘safe areas’ for televisions, and a vision simulator, which approximates the appearance of your design to people with various vision impairments.
Loupe
The Loupe is a magnifying tool that displays the color values of the pixel under your cursor. xScope 3 allows you to copy any color to your palette using Cmd + Shift + C and copy values to your clipboard in your preferred format. You can also output the palette you’ve created in .aco format for use in Photoshop/Illustrator. One small but significant gripe is the fact that you can’t copy hex codes without the hash prefix, which means no direct pasting into Photoshop. Though Loupe has some fancy features, your Mac comes with a built-in magnifying glass called Pixie (in the Developer folder) which performs many of the same functions.
I think a bit of a drop shadow around the loupe window would better distinguish it from the background
Guides
Guides is easily my favorite tool in xScope, and is almost indispensable when designing in the browser. They work like Photoshop guides, only better: they have a Guide ‘Wizard’ that can create a repeating grid in seconds. There aren’t huge differences in the new version here, just some interface refinements, dual-monitor support, and ‘undo’ support for closed guides.
The ubiquitous 960px grid, in seconds
Frames and Crosshair
Frames and crosshair are pretty basic tools: one creates a box of a predefined size on your screen, one shows your cursor’s distance from the origin. These featuers are pretty self-explanatory, and haven’t changed much since the last version.
General Updates & Improvements
Along with some significant performance increases, xScope 3 includes some slick interface updates and handy app-wide features as well. By far the most useful of these features is ‘SmartTools’, which allows you to specify in which applications you want xScope to run. This solves the main issue I had with xScope 2, which was that I didn’t want to see all those lines and rulers when I was coding or using other apps. Since I use Firefox exclusively for development, I can have my guides only open in Firefox and be clutter-free browsing in Chrome.
xScope 3 features a reorganized and more powerful preference pane
A small but welcome change is the option to display all tools in a single drop-down menu bar item, rather than having individual icons for each tool, which can take up a lot of real estate on crowded menu bars.
I was disappointed that this version of xScope didn’t add an app-wide shortcut to close xScope tools, I’d really like to be able to close whichever tool I’m using with Esc instead of remembering that Dimensions is Cmd + 1, Rulers is Cmd + 2, etc.
Conclusion
xScope 3, like previous versions, offers a lot of useful, time-saving features for designers, especially for those who work outside of the Photoshop/Illustrator/Fireworks environment. Each tool offers a lot of information about what’s on your screen and displays it in an easy-to-read, easy-to-use way, and the new version adds significant improvements to these qualities.
xScope Mirror is a really impressive addition to the feature set, and I can imagine that iPhone designers might find the app worthwhile for that feature alone. Ultimately, however, if you’re not an iPhone designer, you might find xScope a bit overpriced for what you’re getting. $30 seems pretty steep for a menu bar application, and though the tools are useful, many of the functions can be found in free browser extensions or cheaper applications. xScope definitely offers a much nicer interface than many of these alternatives, but falls short in a few areas: a global toggle shortcut would be useful, and the tools can be a bit distracting with their abundance of information.
That being said, there are some features of xScope that I haven’t been able to find elsewhere that are really handy, especially the Guides feature. I can also see Screens being useful for both UI designers and web designers working on making their designs more adaptive, and Mirror could be indispensable for iPhone designers.
I’m not a full-time designer, so the time-saving features may not be as apparent to me, but xScope has a 40 hour free trial, so you can try it out and judge whether it meets your needs. I’ve mostly seen glowingly positive reviews of xScope, so I’d be interested to see if anyone else found it a little overpriced. I’m sure I’m missing a lot of alternative apps and browser extensions, so let me know what you use to help you design!