Make it Spec’tacular

Now that you’ve finished designing an amazing UI, how do you make sure it is implemented correctly?Handing your design over to development without documentation leaves a lot of details up to interpretation. Spec’ing your document will help eliminate that guesswork.

Properly spec’ing your document eliminates misunderstandings and communication errors with developers. However, spec’ing is incredibly time consuming, and measurements are subject to errors. Now there are tools that will help you provide accurate details to pass along to your developer in a shorter amount of time.

The Specifics

There are quite a few options out there for adding these details to your design work, and there are new options being added everyday. Each app or plugin has some pros and cons. The choice will most likely depend on the software you use to create UI designs. At Big Nerd Ranch, the design team uses a variety of apps to help in documenting their designs. Below are a few that we use in our design workflow.

If you use one of the Adobe products like Photoshop or Illustrator as your UI design tool, Specctr is probably the best choice. It was one of the very first plugin tools available for marking up a design. You can easily spec your file with a few clicks. It’s a plugin that exists within your application. By clicking on an object, you can add a dimension, size, or placement reference on top of your design. The plugin creates a separate layer that can be hidden or removed if needed. And now that retina-sized images are the norm, the scale feature gives you control over measurements. Our developers prefer to have measurements at 1x since Interface Builder in Xcode is set up for it.

You can buy a plugin for a specific app for $49, or you can get the bundle for all of the Adobe apps for $99. Also, you can get the Lite version for free that gives you some features with some limited preferences.

Sketch Measure
Sketch Measure is a free plugin for Sketch that allows you to add notes, measurements, and object properties within the canvas of your design. This plugin is especially useful if you are preparing a file for someone, or when you’re working with other people. With this plugin, you can document sizes, margin or padding, distances, properties, and coordinates. To use, select any element, then go to Sketch Measure in your Plugins menu. Choose which item you want to document, and where you want that information place in relation to the object. You can also define what properties you want to show for a particular layer.

With Sketch Measure, you can also convert px to dp, which is perfect when you’re handing over specs to Android developers.

Although still in beta, Zeplin is a powerful standalone app. Instead of it working within your favorite design application like Specctr or Sketch Measure, you import artboards from Sketch into it. From there, you can quickly turn your designs into specs and guidelines for developers. The biggest shortcoming is that you can’t export assets from the app. You still have to do that within Sketch. The big advantage of this type of system is that you can invite others to your project. A developer could easily join the project and use the app to see guidelines as they roll around and click on the artboard. You can also issue alerts and messages to those on the project if something changes.

Markly is the newest app taking up the cause of design documentation. Currently it works with Photoshop and Sketch. Much like Zeplin, you choose an artboard in Sketch, and import it into a project in Markly via an icon in your main menu bar. From there you can click on a layer or item in your artboard, and see it’s details live in the right panel. You can create a physical documentation by using one of the tools in the Markly toolbar. You can also add distance specification marks by simple clicking and dragging between objects.

There are some features that set it apart from the others in this list. One is that specs are updated when your design is modified. This is a tremendous time saver especially on a rapidly evolving project. Also, Markly can automatically convert the measurements based on different screen densities. A very useful feature if you are working on an Android app.

Currently the app costs $39.99, but you can try it out for free for 15 days. If you’re a power Sketch user, I highly suggest giving it a test run.

Future Speculation

With new devices being launched, how will these apps evolve to cover adaptive layout designs for the various screen sizes? Android already has a wide range of form and size factors. Apple has recently added new sizes to their product lines. Developers are already thinking about Adaptive UI’s. Now designers will have to consider this when documenting their designs. Specs will have to be more relative than exact. A designer may have to label in terms of percentages or with words like “centered”.

Everyday, new tools and plugins are being developed and delivered that help make designers’ lives easier. I am excited to see how these types of plugins and apps evolve in the future.