Screenshot of InvisionApp’s Website

Empowering Our Developers With InVision

How we use InVisionApp’s rapid prototyping tool to improve communication and iteration.

To learn more about InVisionApp and their features: www.invisionapp.com

To read this on my company’s blog(don’t mind the mess, we’re in the middle of building a redesign): www.codekoalas.com/blog

EDIT: Here is the link to the plugin I talk about in this article — https://github.com/utom/sketch-measure

How we used to do it

When I came to Code Koalas, the file structure was an unorganized mess of PSDs and PDFs with no indication where they came from, and vague filenames. Most of the files were in photoshop, which required the developers to open the PSD and dig to find out information like colors and dimensions.

I taught myself most of what I know in design, and from the beginning always hated using photoshop for layout and page design. I used Illustrator. It just made sense. I could easily draw shapes and text was more managable. When I found Sketch, I easily fell into working with that. It just clicked.

When I came to Code Koalas, I took over a good deal of the design work happening in house. All interface design began to be done in Sketch. This presented a problem, how to get the files to the developers, and how to get them the information they need, without them all having to buy Sketch.

Sketch Plugins

I use a few plugins in my Sketch to solve this problem. The one that is the most useful is called Measure Master. This gives me a dialog with the simple press of CMD + CTRL + [A number] which will pull up a dedicated dialog. For example, when I’m on a text layer, and I press cmd + ctrl + 4, I get this dialog.

I can select the ones I want (I usually have all selected, it will only display the ones that apply) and decide where around the selected element the information will appear. We end up with something like this:

https://d262ilb51hltx0.cloudfront.net/max/800/1*SW9yknm_LknOoeGM_PxYhQ.png

When I complete a design, I’ll go down the page and select the different text elements and “annotate” them. This gets grouped into an Annotation layer, which can then be easily turned on or off. There are also ones for height and width dimensions, margin and padding, distances between elements, x & y coordinates, and more fine tuned options I haven’t even begun to explore. This plugin is very robust.

I started out just exporting two states of the design, static and annotated. This worked except getting updated files to the developers quickly grew into a nightmare.

Enter InVisionApp

I’d learned about Invision over a year ago, when working at a startup. We used it to iterate our product design and conduct simple user testing before we built out an MVP. Once I started taking on larger projects at Code Koalas, I convinced the owner to get us an account, and began using that to update the developers with the designs.

They liked it immediately, they no longer had to navigate confusing file structures or ask for an updated PSD. I simply set up a project and invite them to join.

Sketch Integration

Theres another reason I love Invision: Sketch integration. In the past, I’d have to export all of the designs from Illustrator, and then re-upload the files to Invision. With InvisionSync, I now save my source files in a dedicated folder and everything gets synced up to the project. All changes get pushed out to the team in a matter of minutes, all with the simple click of a button.

Commenting

Communication is key for any project, and in our office, InVision has improved my communication with the developers. They can ask any question, and we can have a conversation right there, in context, with everyone. They have different settings, Dev notes for development questions, general questions for others, and can notify whoever they need to if they need an immediate response.

Asset Export/Fonts

Managing assets in the past was a weird combination of tools and methods. When they used to use PSDs, the developer would go in and grab the assets they needed, but this led to some wierd results, like the logo asset for a site I found that was 35x35 and had the white space around it erased, leaving a wierd aura of white behind the logo, and unusable on a dark background.

When I introduced Sketch, this was no longer an option for them. I handled the majority of the asset creation, but this led to a bottle neck with me, having to go through and create the different assets and export them and organize them and.. you get the picture.

When I started using InvisionApp, I found a bunch of new premium features I’d never seen before, one of them being assets generation. Now, when someone needs an asset that I forgot to include, they leave a comment for me, and I go into sketch and simply make that layer ‘exportable’.

I can determine the size, suffix, format, and even export multiple iterations of the element. Once that is set, all I need to do is save it. Sketch automatically ‘exports’ those out to the Invision folder and they stay updated anytime I change them. If any dev needs an asset, they go to the folder on the site and download it. No more back and forths, no more bottlenecks.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.