What is new in Sketch 3
Everything you asked for and more
I have been using Sketch 3 since end of February 2014 and I’ll present some of the new features so you know what you’ll be looking for while playing with this version.
During the year, I kept praising Sketch by writing few articles or making some internal workshop in Google. Lots of people (not only designers) switched to Sketch. With this update, Bohemian Coding is making a bold statement about their line of conduct: they listen, they build, they ship.
At a very fast and impressive pace, they daily kept pushing a crazy amount of updates and fixes with just a team made of 2 engineers and 3 designers.
Fact of the matter is, they addressed almost all the improvements I wished for in my first blog post.
Let’s dive in!
New user interface
The user interface has revamped: new icons, the search bar is now visible at all time, you can filter layers or slices, the alignment tool moved in the inspector, one click flip transformation. There is no more mini toolbar under the big toolbar. Things moved a little. It feels fresh.
“ Everything is in its right place ”
Inspector
The inspector is only one level deep. Fonts and color picker are not in a sub level anymore. A lot of other features have been moved there. The logic is quite simple, everything that was misplaced in Sketch 2 has been moved into the inspector where it belongs.
Artboards
The way to create artboards is a little different now.
It used to be one of theses annoying things. You are now able to select a background color for all your artboard, and if you want to have it during the export. No more locked rectangle at the root of your artboards and that’s more than welcome.
Insert
The insert menu includes the new features. In a very logic way, some Sketch 2 features that used to be lost in the interface have been moved into this menu.
Shared elements
Like many other feature, Shared elements has been rehabilitated. Less buried and more practical.
They also added one of the most requested feature: symbols. You will now be able to create, edit and share elements across pages.
Symbols
Every time I was explaining the reasons I switched to Sketch, there was a recurrent question “Is there symbols like in Fireworks?”. I know for fact that this was the most requested feature and these Bohemian coders don’t mess with their users. They built it in a smart and efficient way.
As you can imagine, it will make your life a lot more easier.
Layer styles
The interface to create, access and modify the layer styles is now easier to work with. This feature was there and handy in Sketch 2 but very hard to use. There was no ability to name or distinguish similar styles.
On the left, when a shape is linked the icon turns purple.
Text styles
Very similar to what was there before, just more easy to use. There is still some limitation to their usage as shown in the video.
Export
Exporting has been re-imagined to be closer in your flow. It’s not a separate mode anymore. You can set up your slices and their parameters as your design. Creating and exporting has never been so easy. Using the slice tool makes me realize how much time I spent creating artboards at a specific size to export my assets.
One of the very cool new feature is that you can use multiple export sizes presets or setup your own. If you ever designed for Android, this feature will save you a lot of time and trouble. It is also very flexible for any future device density. They added an option that allows you to customize the suffix of the filename.
I didn’t use this capability but you can export the same size but in a different file format. I can imagine it can be useful for saving PNGS, JPG and SVG at the same time for a bigger versatility in production, especially for web.
UI Elements
Teehanlax announced that their famous iOS7 GUI template will be shipped inside Sketch 3. You’ll find it in the template menu. The first page explains the structure of the document and the second one regroup all symbols available. There is also some example of web oriented symbols that you’ll find in the Web Design template.
Vector and Bitmap editing
The vector and bitmap editing tool has also been moved into the inspector. It’s straightforward and great to have more room to better explain the point tools with icons. Regarding the Bitmap editing tool, there is new options but still very basic and not hidden anymore. If you need it, there is a Magic wand that works pretty well.
Invert selection — Crop — Fill selection — Vectorize selection
The last one is interesting but does not work as you might expect. Vectorizing an image is a quite complicated process so don’t expect to have your very complex image transformed into a infinite scalable document.
Color picker
The color picker is in a popover where you will find your usual tools. They also fixed the annoying bug that was randomly shuffling your color palette when you tried to organize it.
Other improvements
All the things I just described are what your eyes can see but we often forget to talk about performances. For instance the art boards list preview was slow but this has been radically improved. I was often frustrated by the slowness of the preview rendering. This issue looks like it has been resolved. Loading big files is also noticeably faster.
Future improvements?
I have some ideas to make our life easier. Some of theses might already exist in a form of plugin but let me list what would be cool.
- Shared symbols: Imagine you work in a team and you work on the same project. You know how tricky it is to maintain a base of assets and I think we can solve this problem by creating an asset repository where you can post your icons and all your colleagues would have them.
- In-app store: Being a small startup has some challenges and one of them is keeping the money coming. Based on the shared symbols idea, we can imagine an in-app store for icon sets, styles, gradients, grids, UI elements…
- Automatic redlines: If you already have done that you know that’s a necessary part of our flow but a waste of time in a sense where it can be automated. Imagine you export your mockup that shows the grid layout and the values you are interested in: fonts size, color, elements sizes and padding. For what it’s worth someone released a plugin after I wrote this paragraph!
- Buttons symbols: Now that symbols are here, it would be great to create buttons template where you can enter the text and the margins would be fixed. There is a plugin that does the job already but would love to see a better integration with symbols.
- Batch renaming: since the search a powerful, naming your layers has become very important. RenameIt plugin is already taking care of this job but it would be cool to have it inside the app.
Get my new Sketch master class — Learn to design an iPhone app with Sketch
Useful links
- Sketch Youtube video tips
- Discovering Sketch “the designer’s toolbox”
- Sketch Keyboard Shortcuts Enhancing your flow, one keystroke at a time
