Published on | Prototyping: From UX to Front End — Medium Jiesi Huang

For us designers, it is tempting to think that our work is done once we have all the pretty mockups of the screens. However, it is not over until we ensure that our developers have the resources to implement the designs exactly as we mean for them to look. Styling an interface through code is a tedious job of making sure things are spaced apart correctly, calculating positions to place elements on different screen sizes, and ensuring that fonts and colours are used correctly. We, as designers, can help make their job easier (and also reduce the chances of the interface not looking like the way it was designed!)

1. Giving screen-by-screen specifications to the developers

When I first started out on UI design last year, I wasn’t familiar with the tools that were available for handoffs yet. When a developer asked me for specs, I literally wrote it out manually. I’ve since learnt better.

Hand-written specs. Not. Recommended. At All.

1a. Tool that allows developers to access specs easily — Sketch + InVision

Currently, I am using InVision within my team for these reasons:

My designs had already been completed in Sketch, and its integration with InVision is seamless with the Craft plugin.
I can add the developers in my team as collaborators for the InVision prototype, and they are only required to sign up for a free account in order to access it.

Advantage 1 — Inspect mode

As collaborators to the prototype, my team mates are able to view the prototype in Inspect mode, which is extremely useful. By clicking on any element on the screen, they can see many things, from their width, height, x-y positions, colour, to their positions relative to the screen edge or to any other element on the screen. Basically, everything I’ve handwritten out in the example above. And without me doing anything extra at all!

Inspect mode

Advantage 2— Organization of screens by section

There are 3 developers in my team, working on different functions at the same time. InVision allows me to divide the screens into sections, so each of them can easily find the screens that they need to work on.

Sections for screens

Advantage 3— One source of truth

There is Git version control for developers, which helps to keep everyone up-to-date with the code. InVision has something similar to that. Under the ‘History’ tab, we can see the older versions of the design, and who uploaded them.

It keeps track of the versions of each screen.

I am the only designer in my team, but if there were more than one designer, we could all upload to InVision, and the developers or project manager could see the most updated screens all in one place.

With the Craft plugin, it is also very easy to make updates in real-time. A team mate could ask me to make some changes to the screen, and I could do it in a minute, and sync it to InVision. The next minute, s/he would see the updated screen without even needing to hit refresh.

Advantage 4— Commenting directly on screens

Even though I work in a small team and we work together side-by-side most of the time, there are still moments where we are away from the desk. When someone has questions, they can comment directly on the screen in question. This offers an advantage over asking through Slack, for example, as there is no need to explain what we are referring to. If this is already useful for my team, I can imagine how much it would be helpful for people who work remotely, or for clients to give comments.

1b. Other available and upcoming tools that I know of

Available

Figma — I have tried Figma briefly. It is a design tool, like Sketch, but from what I’ve read, it really shines on its collaboration features. It’s like the Google Docs for design. Developers would be able to access the raw design file through the browser, and inspect the elements directly from there.

Zeplin — This software is built specifically for handoffs, and works for Sketch and Photoshop. I haven’t tried it myself, but I’ve heard good things about it.

Upcoming

InVision Studio (Jan 2018) — InVision is developing its own screen design software, which boasts a collaborative environment. Given the many things they’ve done right so far, I’m excited for its release.

Adobe XD (Collaboration features in development) — Adobe XD has just come out of its beta. It is said that they are working on collaboration features. Given that I am a heavy user of the Adobe Creative Cloud, it makes sense that I should give Adobe XD a try. However, my team mates do not have Creative Cloud, so until I am able to share my designs with them, I will be sticking to the other apps that allow me to do so.

2. Documentation on navigation and behaviours

Besides how each screen looks, the developers also need to know how each screen behaves. Flow charts would be very useful for that, but I have opted to specifying the details screen by screen, capturing all the navigation and behaviours we have decided during the UX design phase. It has also been useful for me in thinking out all the possible interaction points, to see if we are missing any screens, or have any broken flow.

3. Handing off assets — SVGs, PNGs and icons converted to fonts

In UI design, there is bound to be art assets: icons, illustrations etc. It is good to have assets in vector format, so that they are scalable to any size without losing quality. They are also smaller in file size, thus they load faster and use less data, which is very important in mobile apps.

3a. Font icons!

My team’s developers found a way to convert SVG files into font glyphs, which allow their sizes to be easily changed in code, and their colours to be changed. This reduces the work on my end as well. I wouldn’t need to export PNGs for every size and colour that is needed in the app. It also loads super fast!

We have since found out that to convert SVGs to fonts, there are certain limitations and preparation needed for the files:

The SVG can only contain one colour.
Strokes should be expanded to fill, or the SVGs would not scale correctly (e.g. very thin strokes on images that have been resized upwards).
There should not be overlapping shapes, or it might not render correctly on some computers/phones.

Due to the limitations, especially on colour, we still have to use PNGs on some assets that have to be more than one colour, but we have converted the suitable assets to fonts, and they are working well.

3b. Some tips on preparing SVGs to be converted to fonts in Illustrator

I use Illustrator to draw icons and other illustrations. Since there can only be one colour, I cannot use the background colour to ‘hide’ unwanted portions of the image. Instead, I add anchor points at the start and end of the unwanted section, and another one in the middle, then delete the anchor point in the middle in order to remove the unwanted section.

Before and after deleting the anchor point in the middle of the unwanted section

After I have cleaned up all the unwanted sections, I expand the strokes into fills (Object > Expand) so that they would scale correctly when resized. In the comparison below, notice how the selection outline has changed after the expansion, and how the stroke and fill colours have reversed.

Before and after expanding object

Lastly, I unite all the shapes so that there are no overlapping shapes (Pathfinder window > Unite).

Uniting the shapes so they are not overlapping

When you’re done with the steps above, a quick way to check if the artwork is of one colour is to select the whole thing and look at the colour menu. If it shows question marks, the illustration contains more than one colour. If it shows a solid colour as the fill and has no stroke, then it is ready to be exported to SVG.

Question marks indicate that the artwork contains more than one colourSolid fill and no stroke — ready to be exported!

4. Conclusion

Our design work is not ended until the screens have been successfully implemented in the product. Handoffs may be an unglamorous, unexciting aspect of design, but it is an important step.

Even with specifications and good documentation, however, during implementation, developers may find that some things are just better done another way, or some things would slow the app down, or some elements of the design are just too much effort to develop, with only limited returns for the user experience. I want to emphasize the importance of having good and open communication with developers. Know what you are designing and why, and discuss the rationale of design choices with them. Maybe you will all come to the conclusion that it is worth the effort to code the design as it is, or maybe you will come up with a better solution together, or an acceptable compromise. Be open to their ideas, acknowledge their point of view, and your team mates will be more forthcoming with ideas as well. Developers can have very good ideas for design too!

Workflow and Tools for Handing Off UX/UI Deliverables to Developers was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Workflow and Tools for Handing Off UX/UI Deliverables to Developers

Cool stuff, every week

More Articles