Published on | Prototyping: From UX to Front End — Medium Karl Mochel

Have been using Bohemian Sketch for about a year and InVision Craft for about 2 months. The combination of these tools promises to make user experience design much more efficient for designers and developers. At versions 43.2 for Sketch and Craft 1.0.30 both tools provide some great features — but still need work.

The following are some points to consider when deciding how and when to use Sketch and Craft for projects…

The features that sets Sketch apart from Illustrator or Omnigraffle are:

Resize behavior of children of groups. Individual objects in groups can have different resizing behavior relative to their parent. While the current version is somewhat limited it still makes making complex groups resize much better then OG and AI. Updates coming in v44 (in beta) will make creating sophisticated layouts that resize responsively even better.

Symbols and Overrides. Illustrator has Symbols and Omnigraffle has stencils. Omnigraffle stencils are nice because they are shared across documents, but once dropped they don’t update. Sketch’s symbols update and you can override nested items elements — Ex. Change symbol text in one place to change the name on all pages and then override on pages where it needs to be different. It’s a good start for making reusable components but as you will see below there are still some kinks to work out.
InVision Lab’s Craft. This multi-art plug-in adds the ability to sync libraries which can be used across documents. Craft also includes tools for using real data and intelligent duplicating. If you have an InVision license you can also easily sync your drawings to InVision’s online prototyping service which has a terrific Inspect feature. This article is mostly interested in the Library feature, which promises to make multi-document work for individuals and teams a much more efficient process. It’s somewhat of a combination of OmniGraffle stencils and Sketch symbols.
Vibrant plug-in community due to ease of writing plugins. Sketch plugins are pretty easy to write and with the new file format even easier. This can also a bit of a problem because there are a lot of similar plug-ins that you need to decide between that have varying levels of quality.
Multiple layers of Fills, Borders, Shadows and Inner Shadows. Makes it easy to create sophisticated visual styles.

There are other minor interface and workflow capabilities that Sketch has. Different people will like them and other will find them irritating versus Illustrator (looking at bezier editing here) or OmniGraffle (missing OGs vertical text alignment with margins and Shared Layers)

Sketch features that still make it difficult to use are:

Artboards management. The number of artboards needed in one drawing grows quite large. The inability to marquee select them makes arranging them meaningfully quickly makes managing the project tedious. Also the management of the Layers List vs Artboards makes working between the two challenging and error prone. Would be good to see tools to arrange artboards in the Layers List automatically based on the layout in the page. Minimally choices on the order and initial placement of artboards and layers would help minimize the effort of managing them.

As objects are pasted in, they march across the screen. For this page it’s 20k pixels from the left object to the right. Finding and dragging objects into meaningful organization is tedious.

Text boxes as shapes. You cannot style text boxes with fill, borders, shadows, and padding and margins. Considering that a large percentage of UX work is shapes with text inside having to manage separate text boxes and their shapes quickly becomes tedious. Use Omnigraffle for a short period of time and you can see how much more efficient work is when you can create a shape that has the style you want and can just edit the text and resize it without worrying about selecting the parts.

Ability to put text in a shape with Vertical Alignment and Margins makes simpler symbols. Added bonus would be different Margins for each side.

Inability to set properties programmatically. Visio’s shape-sheet capability allows non-programmers to easily build moderately complex UX elements with simple behaviors without having to build tons of symbols.

Shapes sheets let you build sophisticated interactive objects like this without resorting to writing plug-ins. http://ift.tt/2pv6cpn

Font Handling. Especially icon fonts. The use of icon fonts like Font Awesome is an industry standard for adding quick stylizable graphics when quickly mocking things up. Pasting Font Awesome characters reverts to .Last Resort. In the Overrides panel they become indiscriminate ? blocks. Better tools for adding icon characters and editing these fonts are needed.

Font Awesome characters in overrides

Sketch Overrides quickly become confusing, especially since there is no way to see long names.

The Inspector panel only handles names of about 10 characters. After that they get truncated and there no tooltips. This instance has the same navigation item repeated 10 times. The unique parts of the names are almost all truncated.

Buggy coordinate behavior. Often coordinates of pasted or dropped (from Sketch and Craft) instances do not get synced to selected artboards. This means if you are trying to place the instance in specific coordinates on multiple artboards you can’t because the coordinates of the instance are for the page instead of the artboard.
Sketch has Smart Guides that appear when you move objects around, but they appear randomly and often related to far away objects instead of the close ones that you are most likely trying to snap to.
Craft doesn’t currently support changing the organization of items once added to the catalogs. You will likely quickly find out that your initial organization is appropriate. For now you are stuck with it.

The problems that make it problematic for large projects is:

Symbol management. If you have a lot of Symbols you want to know where they are being used. There aren’t any tools that tell you where instances of a symbol are boing used. Would be good to have a way to select a symbol and see a list of the artboards it is being used on with tools to quickly choose which ones to edit/sync/update.
Pasting symbols between documents creates repeated versions of symbols. As above you can end up with symbols tens of thousands of pixels away from the main mass of your original block of symbols. To move it close to the set it may be related to requires zooming in to select it and then scrolling, moving, scrolling, moving. Create Symbol needs a way to say Create Symbol Here. And when pasting the user needs tools to decide placement on page and replacement of symbols whose names have been changed in other documents.
Craft has issues with complex multi-part symbols. It works okay for symbols that do not have nesting but any more then that and changes are not propagated. You could put a lot of time into pushing a complex set of nested symbols into the Craft Library only to find it can’t update them.
No tools to resolve similar symbols between documents. If you are working in a team or need to consolidate design done over time you will have symbols with different names but doing the same thing. Pasting instances using those symbols into another document creates lines of them tens of thousands of pixels long. An intelligent paste which compares the contents of symbols being pasted with existing ones and helps resolve conflicts would be very helpful.

Both Sketch and Craft are a great new breed of tool that will make the UX process much more efficient and the hand off to development much less error prone, but for now there are defects to be dealt with and features needed to make them less tedious and cumbersome.

Sketch & Craft — Good, Bad and Ugly was originally published in Prototyping: From UX to Front End on Medium, where people are continuing the conversation by highlighting and responding to this story.

Sketch & Craft — Good, Bad and Ugly

Cool stuff, every week

More Articles