Sketch vs. OmniGraffle in UX Design
OmniGraffle has been used as a staple in UX design for more than a decade. This position has been challenged in the past 5 years though. What does Sketch do differently that has convinced so many UXers to switch?
The go-to product for many UX designers was, and maybe still is, OmniGraffle. Since it has been on the market for over a decade, many professionals have developed a high level of efficiency and expertise using it.
If you follow the trends on twitter, producthunt, or dribbble, you may have noticed that a great deal of UX related posts have something to do with Sketch. Many people seem to be convinced: Sketch is the new workhorse in UX design. How was Sketch able to become such a capable contender to OmniGraffle? Let’s analyze the differences to find out.
(This post compares Sketch 3.6 with OmniGraffle Pro 6.)
At times, OmniGraffle’s background as a diagramming tool shines through. This makes OmniGraffle look less focused because it offers options that are usually not needed for interface design, for example connected shapes or diagram layouts. OmniGraffle is also less restricted to a specific medium: you can select from a wide array of measuring units and paper formats. Sketch, however, is clearly made for the screen. Everything is measured in pixels, with support for arbitrary pixel densities.
Both Sketch and OmniGraffle come with an almost identical structure that has a list of pages/canvases and layers/artboards, respectively, on the left and a bunch of properties on the right. Users who know one tool will not be completely lost in the other. However, there are some differences that affect each tool’s efficiency.
Groups and Layers
Grouping and layering shapes have to be used in any sufficiently complex design. OmniGraffle comes with a hierarchy of canvases, layers, groups, and shapes. I believe that most people will create a canvas for every screen, a layer for every large component, and a group for every set of shapes that belong together logically. Groups can be nested to create logical hierarchies. Layers always fill the whole canvas; they can only be moved on the z-axis.
A similar thing is happening in Sketch, albeit with different names: On the top are pages, which contain Artboards, which contain groups, which contain shapes (called layers in Sketch). In Sketch, grouping is more powerful than in OmniGraffle. You will find yourself grouping large components as well as sets of small shapes for organizing your work. Artboards, on the other hand, are often used for different screens. Pages can be used to organize different parts of an app, or to temporarily deposit unused parts.
Grouping, as mentioned, is done better in Sketch. This is due to the fact that you can see the contents of nested groups in the Layer List, and that you can easily select every element, no matter how deeply it is nested, with ⌘+Click. (Something similar works with Alt+Double Click in OmniGraffle, but you end up in the text edit mode of the selected shape.) In OmniGraffle, you can only ever see the elements on the first hierarchy level.
Another key difference that cannot be understated is that Sketch encourages you to name your elements. Renaming anything is only a ⌘+R away. This results in well-structured documents that are searchable and easy to work with. You can rename shapes in OmniGraffle as well (in the properties tab of the inspector) but that doesn’t help much for nested groups. Sketch also offers better keyboard navigation options (use Tab, Shift+Tab, Return, and Esc) for all deeply nested elements. Not that OmniGraffle doesn’t have keyboard navigation (use Tab, Shift+Tab, and ⌘+Cursor Keys) but they don’t work great in complex groups.
All in all, organizing your work is much easier in Sketch than it is in OmniGraffle because it has superior grouping and naming capabilities.
Edit: OmniGraffle 7 has caught up with Sketch in this area. Groups can now be expanded and looked into. Renaming has become easier as well though there still seems to be no keyboard shortcut for that. The two are therefore almost equal in terms of organizing your file, with small advantages for Sketch.
I believe I can speak for all of us when I say that we don’t want to do repetitive work all the time. We want to design a button once and then reuse it whenever we need it again. Who does it better?
OmniGraffle has a vast array of features that help you speed up your UX work.
Stencils are shapes or groups of shapes that you can drag onto your canvas. When you have a well-prepared stencil library, this makes prototyping very fast. You can extend your stencil library while you work. Once on the canvas, the stencils can be edited just like any other shape. This very flexible approach is also a problem: changes to one instance of a stencil don’t propagate to other stencils. So if you create a stencil ‘on the go’ and decide you want to change something about it, you’re out of luck.
At CoreMedia, we have a great stencil library for all of our widgets and icons. Especially for icons, though, this has been a huge amount of work for us. Depending on how you manage and store your icons, you might have an easier time.
You can create layers that are visible on all canvases. In UI Design, I have found this troublesome for everything but website headers. As soon as the position of the element might change, shared layers are not helpful. They can be used to display titles and page numbers in presentations, though.
PDF LinkBacks (I don’t know if that’s what the feature is really called) are the closest thing OmniGraffle has to Sketch’s symbols. You create them once, duplicate them wherever you need them, and when you change one of them, all the other ones change with them. You can even use them in your stencil library (sort of, at least.) They have many shortcomings though.
Both programs can copy and paste styles of elements. OmniGraffle does it better though: you can grab individual style attributes or all of them and drop them onto the target. Neat!
Tables are my favorite feature in OmniGraffle. They allow you to depict tabular data flexibly, but are also useful for creating extremely flexible stencils. If you use OmniGraffle, make sure to master tables. They can really make your life easier.
Arguably Sketch’s most famous feature are symbols. It works like this: you design your buttons, list entries, menus, etc. once, then reuse them everywhere. Text and images can be overridden for each instance. Since version 3.7, nested symbols are possible as well. And since version 39, they can be resized which is particularly useful.
Changes to a symbol are immediately visible in all instances. What is a little strange is that, when you store all your symbols on the special symbols-page, you can’t edit them in situ anymore. This makes it hard to see the changes in relation to the surroundings.
Shared Styles and Text Styles
You can think of shared styles as CSS classes for your shapes. If you want to make sure all your, say, toolbars have the same color, give all of them the same shared style. Want to change the color of all toolbars? Just change it once, then update all other toolbars with the click of a button. You can even extricate the styles as CSS code.
Shared Text Styles work the same but for text. This helps a lot with typography, especially for website designs.
Like in OmniGraffle, you can copy and paste styles. Sketch lacks methods to selectively copy certain style properties from one shape to another.
To conclude, Sketch wins again simply because its features are geared towards UI design. Both programs could benefit from better search options for stencils and symbols though.
If vector paths (Sketch calls them vectors, OmniGraffle calls them curved lines) are for some reason important in your design, I would certainly recommend Sketch over OmniGraffle. It is way ahead in all aspects and it keeps improving.
Both tools have excellent exporting capabilities. OmniGraffle supports a great number of formats, while Sketch has a handy slices-feature. Importing from other tools is limited in both. Sketch seems to be slightly more lenient with Adobe file formats (which it flattens to a bitmap), but you can always copy and paste from Adobe programs into OmniGraffle as well. Opening PDFs is not well supported in either programs, with Sketch sometimes even failing to render PDFs correctly that it exported itself.
Ad-hoc sharing of your work is easier in Sketch as you can just give your co-workers a link to an HTML-version that is hosted on your local machine. There is also a cloud sharing option which is currently in beta status. You can also view your designs on a connected iPhone using the Sketch Mirror app. In OmniGraffle, however, you can tie simple actions to elements or groups which allows you to create click dummies. These are even retained in exported PDFs which makes it practical for sharing with your colleagues.
So, Sketch is clearly ahead in this area as well. The team behind Sketch manages this with a staff of 15, compared to OmniGroup’s 70 (who work on three other products besides OmniGraffle, as of 2016.)
I believe that OmniGraffle has an advantage in one area of UX work: low fidelity prototypes. These can be created blazingly fast and, if need be, beautified later with a little more effort.
For anything else, Sketch is the better choice. It has a clear focus on screen design and helps you create highly organized documents. It also has the superior eco system of plugins and community.