Collaborating on designs with remote teams? Try Google Drawings.

I’m a visual person. I need to work with my hands. I print out mocks, cut up strips of paper, plaster things with post-it notes, annotate with sharpie markers. I especially love printing out my mocks and laying them out for my teammates during a design critique.

This isn’t unique; many top performing design teams have some form of a shared design space where they can hang up work, gather around, and chat. The image below shows the Foursquare team laying out images on a mood board, freely grabbing things and moving them. There’s clearly something powerful about being able to see and touch a body of work.

From Zack Davenport’s excellent article on how the Swarm app was branded.

This works great for co-located teams, but my team happens to be split across four international cities, including Sydney and New York. Though we use tools to keep our files in sync and run weekly critiques over video chat, it’s just not the same as working in a shared physical space. I wanted to find something that would give us the feel of a central discussion hub, and also convey a large-scale view of a design and its components.

To our surprise, we ended up repurposing a tool living quietly alongside Google Docs and Sheets: Drawings. A few key points we love:

Drawings can import mocks

Just drag and drop your mocks onto the canvas, then resize and move as needed. Drawings has smart guides, so it’s easy to snap images to similar sizes, common edges, or centers.

You can also drop in multiple images simultaneously.

Drawings are infinite in size

Drag the bottom right corner of the canvas, and you can resize it to any width or height. No matter how many mocks you toss in, the drawing will scale to accommodate them all. The zoom tool in Drawings is dreadful, so I wouldn’t let the canvas grow too wild. We often create multiple Drawings if things become unmanageable.

Drawings can communicate flows

Although moving sequentially through mocks is enough for most critiques, it’s difficult to get a macro-view of an entire flow and understand how the screens relate to each other. Use the canvas to arrange your designs into a logical story. You might also consider using the text tool to write captions that provide details in between screens.

Captions are cool. But I’m an unabashed fan of robust prototyping tools. (Ahem, thank you Framer.)

Drawings stay up-to-date, in real time

Each Drawing has a permanent URL; it stays the same no matter how many changes you make to the canvas or its contents. This means you can use your Drawing as a “source of truth” document: one place with the most up-to-date flow. (The engineers I work with particularly love this.) As new design iterations are made, just place them atop or replace the old ones. No need to point colleagues to sequentially named folders (v1, v2, v3, vLatest…) or generate new email threads with each iteration.

P.S. Drawings get the same revision history you’ve come to expect in Google Docs. Find past revisions under File → See Revision History.

Again, those lovely smart guides let you effortlessly snap things into place.

Drawings have built-in commenting

Right click any object on the canvas, then click Comment to leave feedback. Replies are threaded, so conversations always stay tied to the object being discussed. Loop in another colleague with the + symbol; Drawings will automatically send an email on your behalf.

This is more useful when you’re not having comment threads with yourself. But you get the idea.

Everyone can get in on the fun!

Since Drawings offers basic shapes, anyone can leave their feedback by creating rough wireframes. Think a button label should be changed? Just create a shape, fill it with your own label, and drag it over the existing mock.

As you can see, you can create smiley face buttons. It’s the next big trend in user interface design. You heard it here first!

Other quick tips:

• Each image can itself become a link. So if you want a mock to point to more detailed redlines, specs, or source files, just select an object, press CMD-K (or the link icon), and link it to whatever you’d like.
• Images retain their original fidelity, no matter how much you resize them. A related little bonus: Google Drawing files and their contents don’t consume any Drive quota.
• You can use a few keyboard shortcuts you might be used to as an Adobe or Sketch user. e.g. hold OPTION as you drag an image to create a duplicate. Really great for branching off into alternate flows.

Drawings is impressively flexible if you think of it as a blank canvas on which you can rearrange and annotate images. A few ideas to start:

• Arrange images on a digital mood board.
• Compare alternate user flows side-by-side.
• Track the evolution of a design.
• Map out all your screens (à la site maps).

That all said, Drawings isn’t always the right tool for the job. But it’s absolutely helped make the distance between our cities a little smaller. Hope you find use for it on your own team!