×

Super Awesome Wireframes with Shared Layers in OmniGraffle

April 30, 2009 in , by Mark 13 comments
Shared layers are orange.

As heavy users of OmniGraffle, the Mac-only wireframing and diagramming app, we spend enough time working on wireframes with multiple canvases for easy file management.

To keep our wireframin' awesomeness under control, and to be as efficient (or lazy) as possible, we use a feature called shared layers. Shared layers make wireframing faster, more efficient, and just plain easier.

What are Shared Layers?

Like normal layers in OmniGraffle, a shared layer sits in your Canvases panel and allows any objects to be placed on it. They are added just like regular layers (right click) and can be distinguished by their orange tint.

The key difference between normal and shared layers is that shared layers can be applied to multiple canvases via drag-and-drop, syncing the shared layer's contents across each canvas. Awesome, right?

How to Use Shared Layers

We love this feature so much we'd like to show you how to use it. Here's a quick guide to using shared layers in your OmniGraffle work.

1. Create Your Canvases

Get started by opening an existing OmniGraffle document with multiple canvases, or by creating a brand new document with a few canvases. Here's a look at what our Canvases panel looks like:

2. Right Click, Select "New Shared Layer"

Once you've got your canvases in order, right click on a canvas and select "New Shared Layer." You'll see a new orange layer appear in your Canvases panel. Give it a name and hit Enter.

Once you've got your shared layer made, add some objects to it; text, images, boxes—anything works. Remember, the point of a shared layer is to sync content across multiple canvases, so be practical about it. We like to use shared layers for header and footer information, stuff that we only need to update once in a document. (This helps us avoid updating a client's name in one canvas and missing it in another.)

3. Drag-and-Drop the Shared Layer to Other Canvases

Finally, when you're ready to apply your shared layer to a second canvas, just select the shared layer in the Canvases panel, then drag and drop it. As you drag and hover over the second canvas, you'll see it highlight (as seen below)—drop it when ready.

Left: Drag and hover over the second canvas.
Right: Drop the shared layer to apply it to the second canvas.

Super Awesome? Check.

And that's it! Three simple steps to creating super awesome wireframes using shared layers in OmniGraffle.

One layer to rule them all. Editing a shared layer syncs its contents across all instances. Edit one, update them all. Super. Awesome.

Shared layers in OmniGraffle are a great way to ensure those finer details aren't overlooked. It's easy to update something in one canvas and forget to do it in another. Shared layers solves that problem easily and intuitively. Just edit an instance of a shared layer and your changes will be applied to all other instances of it on any other canvases.


Have any questions or additional tips for us? Chime in below—we'd love to hear 'em!

13 comments

Cristian Pascu says

While is best to use the tools you're most familiar with, I'd like to point you to this tool called FlairBuilder. It runs on a Mac as Adobe AIR application and lets you create multi-page wireframes and has master pages support. I haven't actually implemented the masters support until it became painfully obvious that duplicating objects across pages leads to a maintenance nightmare.

You can quickly give it a try online at http://www.flairbuilder.com/demo.

I hope you'll find it useful!

Cheers,
Cristian


Mark (ZURB) says

Thanks, Christian—like the premise! OmniGraffle's great because it helps you stay focused on keeping things lightweight. Everything is easily editable, assets are always available, and it's just downright fast.

We'll keep an eye open for more news on your app!


Geof Harries says

I've owned a copy of OmniGraffle Pro for, I don't know, forever? Anyway, this past year I've been using Windows 7 full-time so am stuck with Visio for all of my diagramming needs. I really, really miss OmniGraffle for simple features like this: an easy way to share layers. Not with Visio, as something is always misaligned or slightly out of place, which drives me absolutely nuts. OmniGraffle is such a superior product to Visio, so please keep up with the tips to help spread the love and affection.


Mark (ZURB) says

Geof: Thanks for the support—I think what makes it great is the focused application of it. The tools support the two primary functions: wireframe and diagram. Hopefully at some point you can move back to a Mac! :)


Jaymz says

Be nice if you could port this over to Windowz. I use a Mac at work and a PC at home.

Great product!

Thanks, Jaymz


Mary Shaw says

I'm a big fan and heavy user of Omnigraffle Pro. I need a solution just like this to drive my upcoming 60-80 page wireframe deck. This will help my workflow so much! Thanks for the awesomeness :-)


Dale Sande says

While this solution is pretty cool, where this falls short for me is that not only is the element UI of the shared layer shared with all that it appears, but so is position.

That is a double edged sword. It would be really awesome if you could create a stencil where assets placed within a element were common as well. Then you could use the stencil for the master version of a reusable element and then the shared layer for placement and customization if needed for surrounding UI.


Superduck says

Should mention that Shared Layers is only for OmniGraffle Pro, not Standard


Ricardo says

Great article! I'm going to use this feature from now on! Thanks!


Dwayne says

Cristian Graffle used to do master pages and they switched to shared layers. The shared layers accomplish the same thing, but are much more powerful. It takes a little getting used to, but one you really grok it, master page approach will annoy you.


Ian says

Thanks for the awesome tip. This is going to make my wireframing a lot easier.