Pixel-Perfect Specifications Without The Headaches

Designers, developers and managers often work with compressed timeframes and multiple projects simultaneously. A team must be able to respond quickly to feedback on their product from clients, project managers and developers. Each minor revision in the UI or UX needs to be reflected in the documentation, so that designers and developers always have the latest information.

A style guide ensures that your project doesn’t encounter serious problems when you implement the initial design. Making sure that all specifications are accurate to their designs is critical, because an inaccurate specification means that developers will have to either rely on guesswork when building the app or go to the design source to get answers to their questions. Transferring all of this information manually to the developers can be a headache and usually takes significant time, depending on the extensiveness of the designs.

In this article, we’ll review the process of creating a style guide, the process of handing off a design, and collaboration across the whole team. We’ll also walk through an example workflow, demonstrating how developers and designers can improve cross-team communication and drastically reduce iteration time.

A Project’s Team Link

A project consists of designers, developers and project managers, and each area has its own particular needs.

Designers Link

When a designer prepares a design, they hand it over to the developer. What they usually do is export some PNGs and prepare a specification with all of their annotations. Specifications can be stressful in a big project, and the design of an interface layout can change quite often. Thus, a traditional style guide will pretty much get outdated almost immediately.

Preparing specifications is tedious — we know that. Manually doing it is time-consuming, and every designer does it a little differently. Most designers spend more time making specifications than actually designing. And they often have to manually export all of their assets for developers. I can tell you that every designer is tired of that.

If you want to save the designer’s time, just tell them to forget about that and focus on the actual design process instead. Every minute a designer spends revising documentation is a minute lost that they could be spending really nailing the visuals, experience and interactions.

Developers Link

Inspecting specifications is painful. Developers will usually ask the designers for every little detail contained in the design or, worse, are forced to do it themselves in Photoshop or Sketch. In most cases, they need to manually convert all sizes of the assets according to the platform’s requirements (for example, converting pixels to density-independent pixels, scale-independent pixels, points, etc.). They often don’t have enough detailed information about the visual design and have to guess, resulting in visual inconsistencies.

Even when the developer has successfully implemented the design, there is still the possibility that the designer will make a change, at which point the developer would have to manually inspect the design again and figure out what exactly has changed. Not flexible at all!

Managers Link

Project managers are always trying to find ways to improve collaboration between designers and developers, because everyone on the team should be on the same page for every design change. If you’re working with a remote team, you’re probably going to need some online space to collaborate and meet, a single channel of communication. Modern communication tools such as Slack make that possible, but the project managers still need to track progress and provide feedback on what has changed and where. They are well familiar with messy email attachments and feedback coming from multiple places.

They also need to figure out the current state of the product very quickly. They need to stay on top of the design process by reviewing changes, comparing versions visually side by side, and discussing them in real time in one place.

Syncing Designers And Developers With Less Hassle Link

Creating design specifications involves identifying colors, x and y values, fonts, text weights, distances, positions and a number of other characteristics of the assets. Each asset carries certain characteristics that need to be recorded.

You need a tool to bridge the gap between the design and coding stages of development, a tool that simplifies and speeds up the specification and development process, a tool that provides a single entry point for all design-related stuff, so that you (the designer, developer or manager) don’t have to think about where to find the latest version of the design. This will result in products getting built and shipped faster.

Thankfully, tools exist out there to help with this. Each of them takes in Photoshop or Sketch documents and produces a specification for developers, including code snippets and image assets. These tools also track changes between versions of the design.

How They Work Link

This is where Avocode¹, Sympli², and Zeplin³ enter the scene. These are collaboration tools for UI designers and front-end developers. They are built for the process of going from Photoshop or Sketch to code. You can upload designs and turn them into specifications and guidelines that are tailored to the platform you are working on. Using these tools, you can:

inspect designs from Photoshop or Sketch without using the original app, and quickly get measurements appropriate to the platform you’re working on;
get instant access to image assets, colors, fonts and even dimensions;
export resource files for any kind of element, whether text, button or something else;
add notes and notify team members about design changes instantly.

Last but not least, designers and developers will essentially work in a shared workspace, where elements such as sizes, distances, fonts and icons move seamlessly back and forth, without requiring a large design file annotated with what the designer needs.

However, as I’ve said, these tools are for inspecting, not editing or interactive prototyping. This is important. These are not image editors, and they don’t allow you to create designs or prototypes. You still need to create and edit your files in Photoshop or Sketch and then open the files for inspection in one of these tools.

Avocode Link

Avocode is one of these tools that bridge the gap between web designers and developers. The process of creating a website starts with designing in Photoshop or Sketch; however, when the designer is finished and the front-end developer has to implement the design, the design file is broken down into images, colors, sizes, CSS, etc.

⁴

(View large version)⁵

First Steps Link

Before doing anything in Avocode, you need to create an account⁶. A free two-week trial of the application is available on the website.

Avocode contains two parts: a web-based manager and a desktop application. It works based on projects, and you need to create a project to get started. A sample web project (a landing page) is provided to help first-time users understand what features are available.

Upload Design Link

After creating a project, you need to upload your design. You can use Dropbox or manually drag and drop files from your local system.

User Interface Overview Link

After creating a project and uploading your designs, you need to install the desktop application to inspect them. The web app only has previewing and commenting features and doesn’t allow you to inspect a design in detail.

So, let’s dig into the details of the desktop app! Avocode feels like a powerful and professional application. The UI looks very similar to Photoshop — same color scheme and typefaces. The dark Photoshop-like interface makes Avocode look and feel really slick. If you’re an intermediate Photoshop or Illustrator user, the learning curve is close to none.

The main tab you’ll be focusing on and working with most of the time is “Project Designs.” It shows each of your projects in the form of a thumbnail, title and activity indicator.

If you double-click on a thumbnail, you’ll immediately see a screen with a full list of groups and layers, exactly like Photoshop. On the bottom is a set of Avocode tools. The first one we will use is the Select tool. With it, you can select individual layers, or multiple layers, and see its properties on the right side. You will notice that the inspector’s content changes based on which item is selected.

Below, the layer for the call-to-action button is selected. When you select an item in your PSD, the sidebar shows the CSS for that item. As a bonus, Avocode also gives you the option to copy LESS or Sass code:

You can select an image and see its dimensions. The image-exporting options in Avocode are really nice, too. You can set up different rules that allow you to export all of your images in any number of configurations, including JPG, PNG and SVG formats, as well as with the right proportions (“1x” means the original size).

The info panel has all of the important information about the design. You can even get a public link to share the design with anyone. What’s best is that this panel lists all of the fonts used, with links to Typekit and Google Web Fonts so that you can easily use them in your project.

Using Avocode, you can visually compare revisions of designs easily.

Tools Link

The Measure tool is useful. Select a layer and then hover over other layers to see their positions relative to the first layer. Below is a selected layer with a “Get started now” button, and its relative position to the top, left and right.

The next one is a color picker, which basically takes a color and copies its hex value to your clipboard. You can add this color as a variable to your design. With this tool, you can quickly create a color scheme for your design.

The final tool is Slice, which makes it possible to export a selected part of the design as an image or style scheme.

The good thing is that each tool has a hotkey combination, which is handy for users who use the keyboard to quickly switch between options.

Another cool feature of Avocode is the use of guides. However, a first-time user might wonder whether this option is available because the feature is hidden behind a little button in the bottom-right area of the screen. Avocode supports both user-created guides as well as designed guides that have already been made in Photoshop or Sketch. So, if your Photoshop document has guides, they will show up in Avocode.

Using Avocode, you can visually compare revisions of designs easily. You can access this feature in the “design detail” of your project in the web app:

Visually compare revisions of designs easily.

Collaboration Link

Avocode lets you leave notes in a specific area in the design, allowing you to discuss design changes with anyone in one place instantly.

Simply click or drag anywhere in the design to highlight the area you want to talk about, then write your message, and hit the submit button. Everyone will instantly get a notification:

Discuss any part of the design in the app.

Cost Link

Avocode charges $10 per month per user for the business plan, which has integration with Slack and permissions management. If your team consists of one to three people and you don’t need permissions management, you can choose the “Garage” plan, which costs $7 per month per user.

Pros Link

Multi-platform support (Mac, Windows, Linux)
A great Photoshop-like UI and a deep and thoughtful toolset

Cons Link

Currently only supports the web
No free plan (after the trial, you have to subscribe with a regular paid plan)
Unlike Sympli or Zeplin, doesn’t support detail inspection in the web app (the desktop app is required)

Sympli Link

Sympli isn’t just a design handoff or collaboration tool — it’s a complete collaboration platform that covers the entire product design team, including design handoff features for designers coming from Photoshop (Adobe XD coming soon) and Sketch, as well as automated implementation features and tools for developers in its Android Studio and Xcode plugins. Recently launched this spring, it’s a great tool that has done a lot to speed up the design and development process.

One of the biggest reasons to use Sympli is its integration with Xcode and Android Studio, making it a tool for the whole team because it goes beyond design handoff to help developers with automated implementation.