Slides from an OmniGraffle tutorial I ran for the Viget PM group.

1. Getting to Know OmniGraffle
Jackson Fox, Viget Labs
jackson.fox@viget.com

2. 1. Basic Concepts
2. Tools
3. Demo Time

3. Main Window Inspector Stencils

4. Tools, grouped into
useful and less useful
Click once to use the
! tool once, or click twice
to make it sticky.

5. Canvases,
aka “Pages”

6. Layers, kinda
like Photoshop
The little pencil tells us
!
which layer we’re editing

7. Layers
+ =
Layer 1: Layer 2:
Wireframe
Page Content Page Chrome

8. Shared layers, they let
you share UI pieces
across many canvases
You can’t convert shared layers to normal
!
layers, or normal layers to shared layers
But you can easily add and remove shared
!
layers to a canvas

9. Shared Layers
Article & Sidebar Article Gallery & Sidebar

10. Shared Layers
Article & Sidebar Article Gallery & Sidebar

11. Shape Tool
! You can change shapes in the inspector
! You can deform shapes by making the
points editable (go to Edit → Shapes)
! You can combine and subtract shapes (go
to Edit → Shapes)

12. Line Tool
It makes lines, and arrows

13. Text Tool
! Why would you default to centered?!
! 5px default padding

14. Magnet Tool
Lets you create and move anchors
that lines and arrows attach to

15. Magnet Tool
No Magnets My Shape Magnets

16. Zoom Tool
Zoom in on the canvas (duh)

17. Drag Tool
Move the canvas around when
you’re zoomed in
! Press the spacebar at any time to
switch to the drag tool

18. !
Stencils Search
Search for stencils !
Search Graffletopia
Stencil Folders
Stencil
Elements
! Drag and drop
elements on to
your canvas
! Elements only have
one “mode,” to
make different
states, you need
different elements

19. Change tool
options
! Double click on a tab to
keep more than one tab
open at once!
Object Properties
Canvas Options
Add actions to objects to make !
and Tools them clickable!
Document Properties

20. Demo Time

21. Why I OmniGraffle
Documents look good
Good layout controls and guides
Keyboard controls
Good multiple document support
Shared canvases