Using symbols and shared styles in Sketch
(or ‘Why I’m switching to Sketch’)
I’ve been keen to have a play with Bohemian Coding’s Sketch for a while, and I finally got a chance to do it over the Christmas/NY break.
Note: this post is 50% ‘this is how I work with symbols and shared styles and I think it works well’ and 50% ‘can someone please tell me if this is right, and is there a better way?’
Aside: I’ve been meaning to write this post for a while and a recent post by Damir Kotoric kicked my arse into gear.
Why Sketch?
I bought into the hype surrounding Sketch (and found there were many good reasons for it), but a feature I was particularly interested in was Symbols — I really wanted to be able to create elements following our style guide and easily re-use them in my projects.
As a UX / interaction designer, my outputs don’t necessarily have to be pixel perfect — I am lucky to work with a team of visual designers who can help clean up my mess. However, our team is developing a well defined style guide and pattern library, so having a tool that allows me to produce more visually polished outputs with comprehensive exporting options and a solid grid setup, without burdening our visual designers with fixing my crappy layouts, is a big plus. It allows me to work more independently and allows the visual designers to focus on more important things.
The start
So, I created my first document and created some buttons and input fields as symbols. So far, so good.
I started arranging those symbols on a page to replicate one of our forms, and to my surprise I realised that if I changed the width of one field, all of them changed. Not what I expected, and not very useful (note, my expectations were based on the way editing of library widgets in Axure works).
Next, I realised that I could prevent this behaviour by detaching each of the fields away from the symbol. That’s great, but now when I make a change to the symbol which I do want to propagate to all instances, these ‘detached’ symbols are left behind.
Shared styles to the rescue
Sketch shared styles feature allows you to define reusable object or text styles and apply them across your designs.
What I found is that if you use shared styles in the definition of your symbol, any updates to styles are propagated across all instances of your symbols, even when you detach a layer group from the symbol.
The three images below show that each component of my symbol (label, description and the field itself) has a custom style associated with it.
This is great, because it allows you to create symbols for things like fields, which makes them easy to insert in multiple places in your design.
Detaching the elements from the symbol allows you to change things like field width for individual elements, but because you have defined styles for the things you want to keep consistent (e.g. field colour, and border) you can update all instances of an element by simply updating the style.
The part of having to detach an element from the symbol definition feels a little clunky to me, but it works.
The wrap-up…
Sketch is a great tool, but it is a young tool. There are many good things about it and things that need improvement, but one thing to consider is that the entire process above took a couple of hours, from opening Sketch for the first time. I learnt what I learnt by trial end error and by poking around (the best way to learn in my opinion) and not by reading heavy documentation and tutorials — this is a testament to how intuitive Sketch is.
For me, it already displaces Photoshop and Illustrator — it is simpler and targeted at web and UI designers. Not to mention that it is a fraction of the price of the Adobe tools.
Sketch makes it remarkably easy (and quick) to iterate on your designs and produce high fidelity outputs.
Combining Sketch with a tool like Marvel or InVision allows you to create simple prototypes, but for me, these combinations can’t replace Axure (yet). I often need to test complex and/or detailed interactions with users and being able to define hot zones on an image doesn’t cut it.
So, in 2015, I’ll be working with the following tools:
- Axure for complex prototypes
- Sketch for visual designs to hand over to developers (when required)
- Sketch + Marvel for simple (screen-flow) only prototypes
Is there are better way?
How do you work with Sketch symbols and shared styles? Is there a better workflow than described above?
