Inside OmniGraffle

In the Geometry Inspector you can view and edit the position and size of an element. This is a handy thing — but there are a couple tricks you may not know about.

Math

The fields in the inspector work kind of like mini-calculators. Let’s say you want to change the width so that your object is exactly half the width it currently is.

You could do the math in your head, or you could open a calculator app — or you could do it right there in the inspector.

Where the width field might say “472 px”, just add “/2” at the end, so that it reads “472 px /2.” Then hit return.

The width field now says “236.”

Let’s say that you want to add 10 pixels: select inside the field and add “+10” at the end. And now it says “246.”

To subtract, use the – character; to multiply, use the * character.

(Note: plain old “10 + 10” doesn’t work — the first number needs to specify units. “10px + 10” works.)

Mixing units of measurement

Let’s say your unit of measurement is pixels, and you want to stick with pixels.

But you do want a particular element to be horizontally positioned at 2 inches. You could change your units, make the change, then set units back to pixels.

Or you could calculate the conversion yourself.

Or, instead, you could do it the easy way: in the horizontal position field, type “2in” and hit return. OmniGraffle will translate that to pixels for you.

And — bonus! — you can mix this with math. Even though your current unit is pixels, you can add (for instance) three feet: just add “+3ft” at the end, hit return, and OmniGraffle will translate it to the right number of pixels.

Documentation

The Geometry Inspector is pretty smart, and it’s designed to make things easy for you. There’s more to learn — see the OmniGraffle manual’s section on changing object position and size with the Geometry Inspector.

Let’s say you’ve made two rectangles, and at first you gave them different colors, and one has a stroke and the other doesn’t — but now you want the second rectangle to have the same styles as the first rectangle.

You *could* select the second rectangle and go through the various inspectors and make the styles all match. Manually. With a lot of clicking.

Or you could do it the quick way — by using the Style Tray.

The Style Tray is near the bottom-right of the window. It looks like this. Each item is a Style Swatch.

Here’s how you’d make that second rectangle match styles with the first:

1. Select the first rectangle
2. Drag and drop the Style Swatch on the left — the *Summary* Style Swatch — onto the second rectangle

That’s it! You’ve just applied the styles from the first rectangle to the second. Same fill color and no stroke.

The key thing to know is that the Summary Style Swatch includes *all* the styles for the selected object. You can even hover your mouse over the Swatch to see, in a help tag, a quick list of the styles it contains.

How to Match Just One Style

Let’s rewind to those two rectangles with different styles. What if you want the second rectangle’s fill color to match the first rectangle — but you don’t want *all* the styles to match?

Here’s where the other swatches in the Style Tray come in. These contain individual styles, rather than combining them all into one.

Look again at the Style Tray near the bottom-right of the window. Note the group on the right with multiple swatches.

Here’s how to use it to make the second rectangle’s fill color match:

1. Select the first rectangle
2. Drag the Fill Color style — the first chit in the right-hand section — from the Style Tray on top of the second rectangle

You’ll probably be able to pick out the Fill Color style pretty easily: it will be the color you’re looking for. But, in case not, you can hover your mouse over each chit in the Style Tray, and a help tag will say what it represents.

And now you have this:

Note that the fill color changes, but the stroke style remains the same.

That’s it!

It’s Not Just Rectangles!

This example uses rectangles and Fill Color just to make the point. This feature is not limited to rectangles or to that one style, of course.

The Style Tray works for anything that can be styled: other shapes, text, lines, and so on.

And it’s a huge time-saver.

For more details — because there’s plenty more you can do! — read the OmniGraffle manual on Applying Object Styles with the Style Tray.

For the past month, the OmniGraffle team has been concentrating on improving and expanding SVG support for OmniGraffle. Just last week, those changes have been released in the latest update for macOS, OmniGraffle 7.7.

You won’t see the biggest change—we converted the code for exporting from Objective-C to Swift!—but there’s a lot that you will notice.

Better Metadata

• Unique IDs — OmniGraffle object IDs are now included on each element (object/group/layer/canvas) when exporting to SVG. Object IDs are unique for each canvas but may change between exports. Use “Show object ID numbers in the Layers tab of the Sidebar” in General preferences to see the ID in OmniGraffle.
• Object Titles — Custom object names are now included in the title element when exporting to SVG. Names can be defined using the Object Data inspector or using the Layers tab of the left sidebar.

Support for Freehand Stroke on Export

For shapes or lines that use a freehand stroke, exporting to SVG will now handle that a lot better. (AKA: it just works!)

Improved Import

• Dashed Strokes — Added support for the stroke-dasharray attribute.
• Transparency — Added support for the fill-opacity attribute.

And a lot more

OmniGraffle 7.7 improved support for nested transformations, rotations, margins, text alignment, mixed-group ordering, and a whole lot more. It’s a great update if you ever use SVG import or export! Check for updates.

Occasionally we update stencils that are included with OmniGraffle in a new release—that’s exactly what we did in the 7.6 update.

One of the things we don’t do, though, is make assumptions about what people want us to do with their existing stencils; people edit, duplicate, and delete stencils for a lot of different reasons. We don’t want to mess with anything that might be interrupt a workflow.

So, if you’d like to install the new stencils we designed around all of our Stencil Browser changes, just move the Stencils folder out of OmniGraffle’s container.

The easiest way to get to your Stencils folder is by Command-Clicking a stencil in your Stencil Browser sidebar and clicking Show in Finder.

Once in your Stencils folder, move up the directory until you can drag the Stencils folder on to your Desktop. (Or elsewhere.) The next time you relaunch OmniGraffle, we’ll re-create that folder with all the restyled stencils.

If you’ve edited other stencils, or downloaded quite a few from StencilTown, or created your own, just grab them from the Stencils folder you moved to your Desktop.

In OmniGraffle for Mac, we’ve set up each of the tools to include what we think are sensible defaults: a 1px border around a shape and 16 pt Helvetica Neue font, for example. To change any of the defaults that a shape or text field might carry with it, simply Option-click the tool, then change the property fields in your Inspectors.

Check it:

Today we released OmniGraffle 7.6, a major update that aims to bring power and speed to Stencils.

First, the Stencil Browser—which can still operate as a separate window or popover—is now also amenable to being placed in the left sidebar, where you’d normally see your layers, canvases, manual guides, and outline view. This speeds up a number of workflows, one being the “drag out stencil objects quickly while tweaking settings on each one” workflow. Drag; set. Drag; set.

Second, it’s now possible to drag new objects to the Stencil Browser to add them to an existing stencil! This is huge. Let’s say you’ve got a custom set of annotations that you made for a specific project. A few hours after you’ve saved everything, there’s just one more variant to add. Super easy now: select the object, drag it to the Stencil Browser, and you’re done.

Finally, the Resource Browser handles folders like a Pro. You can drag and drop between folders, rename folders, and even create new folders from selected stencils.

There’s more, too. We’ll have additional posts here on Inside to call out all of our new Stencil features, so stay tuned! You can see the entire set of release notes here.