Our designers' thoughts on Sketch 3.7

profile picture

Jens Lead UI

14 Apr 2016  ·  11 min read

Our design team walks you through the changes and improvements in the latest Sketch release.

Sometimes it feels like yesterday we were still creating design specs by hand, animating prototypes with Keynote, and working with an estimated gazillion layer comps in Photoshop. Oh, and those tools would only receive some new functions once a year.

For designers, things have changed quite a bit in the past years! New services, tools, plugins and apps are emerging faster than ever. And from those tools, the biggest impact on our workflows came from Sketch. We switched from Photoshop to the then very young app Sketch about two years ago ago, and we haven’t looked back. Today Sketch has become the standard for us and many other digital design teams worldwide. The app is still being developed by a very small team and while it still has a few issues, new and improved versions are being released at a rapid pace.

Bohemian Coding just launched Sketch version 3.7 (you can read the full release notes here). Obviously, v3.7 is not just a bug-squashing release! Apart from the expected fixes and performance improvements, the new Sketch comes with two major areas of improvements: Symbols and Text Styles.

In this post, we’ll take a dive into the new features and improvements and give you some insights in our design flows and processes.

Not new, but improved: text styles

The previous Sketch update already brought some great text rendering improvements. Text rendering was changed to no longer being sub-pixel anti-aliased (for performance reasons), which makes fonts render more consistently across different platforms, including mobile. Another improvement came in the use of line heights, which makes for a smaller difference between what you see in Sketch and the way the text actually renders in your designed app or website.

We’re glad to see Sketch keeps focusing on improving text features in their updates; this time, the focus is on Text Styles.

Up until now, we struggled with using Sketch’s text styles in our projects. We loved them, in theory, but the way the app would update every instance immediately if you changed a text style made our lives harder. Exploring design variations often meant unintentionally changing text styles across your project… Pair that with the Pandora’s box that is Sketch’s undo function, and you occasionally wind up with a nerve-wrecked designer. We had to manually set the text styles back to normal a few too many times.

The new update solves this problem by bringing an approach to text styles that we know from InDesign. Text styles no longer update immediately. Instead, Sketch gives you an indicator showing that it can be updated – when you’re ready. This makes it easier to play around with a new design before updating your whole design. Experiment, make up your mind, and then click the button to update the style all over the document.

New approach to chaning text styles

Additionally, the previous version of Sketch contained a bug that altered the baselines of every instance of a text style if you changed it in one place. In many cases, changing the line height once meant checking and repositioning every other text block with the same style.

Problems with line height in the old version

So we’re happy to report that this problem has been fixed in the new release! Another issue that has now been solved: the mixups that would occur when copying and pasting shared styles from one document to another. The way Sketch handled the syncing and overriding of styles would often be confusing, leading to new styles being re-replaced by older versions when an element was copied into the file. Paired with the improved “undo”, this will make using text styles much less of a headache.

Problems with line height in the old version

Some things we’d like to see in the next version? An indication or overview of where a text style is used in your document would be useful, and we’d love to have an indicator for styles that are not currently in use, too.

Apart from the text styles, there’s also a nice improvement in the new release concerning fonts in general. From now on, files saved with Sketch 3.7 will no longer lose their fonts when opened on another system that doesn’t have those fonts installed.

A tip: we started using RightFont to manage our fonts, and while we’re still having some issues with needing to reactivating fonts, we still think it’s the best solution out there.

Our favourite new feature: nested symbols

Rejoice: it’s now possible to use nested symbols in Sketch! Nested symbols are another great way to make your designs more consistent and way easier to maintain. There was a hacky way to do this before, but we choose not to – the results were too unpredictable.

Symbols in Sketch have been rebuilt from the ground up for this version. So what’s new?


Firstly, when you create a new symbol, Sketch shows a new dialog asking you to name it and whether you’d like to put it on the separate “Symbols” page. This new page is where you can find an overview of all your symbols.

A part of this approach that will take some getting used to is that you can now only edit symbols on the Symbols page. On your design page, the symbol no longer shows as a folder with editable layers; instead, it appears as a kind of “flattened” symbols layer. The downside of this is that you can no longer see your changes in the context of other design elements – something the rest of the online Sketch community isn’t very happy with, either. The Sketch team has already responded that the new nested symbols is a work in progress and that they made the conscious decision to ship it in parts.

Creating and editing symbols

The possibilities when using symbols have also been expanded in this release. You already could overwrite text values in symbols; now it’s also possible to change image values this way. The editing options for the text values have moved to a dedicated section in the inspector panel, but you can use the drag-and-drop you’re used to to change images.

Editing text in symbols

Moving the text to the inspector panel does mean there isn’t a lot of space to edit the text. This is usually not a problem, but if you use symbols with paragraphs in them, like an article detail page for example, editing your text is tricky. It’s also important to keep in mind that the order of the text values in the editing pane is determined by the order of the layers in your symbol’s layer list, and not a visual representation (the label is the layer name).

In previous versions of Sketch, you could create a symbol from an existing item and then convert all of its instances in your document to that symbol. This was handy because when you’re exploring design ideas, you don’t want to be slowed down by symbols and text styles yet. You don’t start building with text styles and symbols until you’ve decided on your project’s structure and look and feel.

Creating symbols old Sketch

With this release, it’s no longer possible to change a specific group to a symbol; you have to delete the group and insert a new symbol. Inserting symbols has changed a bit as well; you now have control over where you’d like to place the symbol in your file.

Creating symbols new Sketch

There are still some limitations on symbols in Sketch. A feature you may be used to from Photoshop’s smart objects that isn’t available is resizing. In Sketch, you cannot have different instances of a symbol in different sizes. If you want to resize a symbol, you have to resize the artboard of your symbol or the graphic itself on the symbol page, and the change will be pushed throughout the document. We’d like to see this possibility added in a future release.

Resizing symbols

If, like us, you’re also on board with the philosophy of atomic design, you’ll love the updates to Sketch’s symbols. Nested symbols will help you create and use atoms and molecules without manual updating, and the symbols page will give you an overview of every element in your atomic “ecosystem”. If you’d like to read more about atomic design, you can read this article by Brad Frost (who coined the term and literally wrote the book on it), or check out this great post for a practical example of how to adapt the methodology in your projects.

The new symbols page

Some suggestions

My team members and myself are all very happy to have the improvements made in this version, but as always, we see some room for improvement in our favourite piece of software.

First off, we’d like to see an improvement in the way Sketch deals with colors. We really like Illustrator’s Global Colors. In Sketch, it’s currently not possible to define a colour once, create a single swatch, and then use it in different text and shape styles, where they could all update when alter the color in your swatches. At November Five, we often work on rebrandable applications, and in those situations, such a feature would be much more efficient. We also guess that better color management would improve the link between a Zeplin styleguide and Sketch.

Next on our list: working with real data. We firmly believe that the days of Lorem ipsum, placeholder stock photo’s and dummy data are coming to an end. Working with real data in your designs is super important, and tools like Craft and the Sketch Data Populator are already simplifying this process. We see a great opportunity for Bohemian code to implement a way to work with real data, linked with real (live) APIs. This could drastically influence and improve the way a lot of design is made, right from the start of the process. If you’d like to read more on this subject, I recommend this post.

A smaller gripe, but one we run into frequently is SVG exporting. SVGs are awesome – getting great SVGs out of Sketch, not so much. Illustrator still does a far better job of exporting SVG’s than Sketch, so we would really love to see some improvement there.

And finally, we’d like to see a better way to optimise images. “Speed is the number one UX”, as our web director likes to say, and shaving some kilobytes off assets is the easiest way to upgrade performance and speed. This is why it’s a shame that there isn’t currently a tool that helps the designers decide on the optimal level of compression. You have tools where you set a minimum compression for all assets, but those ignore the fact that every asset is different. Manually optimizing every asset, however, is very time-consuming, and you have to redo all those optimisations every time you make an adjustment to the assets – you can’t save your compression settings. We’d love to see something like Photoshop’s “Save for Web” panel, where you can tweak compression settings and make a decision based on a preview.

And finally, some tips and tools

All of those remarks aside, even in its current form, Sketch is the core of our design workflows! We use a whole set of plugins to integrate the other tools we use with Sketch. Some of them we built ourselves, some came out of the excellent #SketcHHackday movement, but they all make our lives a little easier.

First off, there’s Zeplin, a tool that works with Sketch to automate and streamline the design handoff to our developers. It automatically generates styleguides and resources and saves us a ton of time. For slicing and exporting xcode assets for our iOS team to use, we use a home-cooked tool that you can download here.

Then there are the plugins that add small but excellent extra features to Sketch. Most of us use Utility Belt, which is a collection of small plugins for everything from fonts to guides. We also use plugins like Dynamic Button and RenameIt – in both cases, their name is self-explanatory. We’re also keeping an eye on new launches Sketch Runner (I’m a sucker for shortcuts) and Open Color Tools. Both came out of the @SketcHHackdays initiative, and we’re excited to start implementing them soon.

A recent addition to our toolkit that has caused a lot of buzz in the Sketch community is Craft, built by the folks at Invision. We mentioned the opportunities we saw for Sketch in implementing real “mock” data in their software earlier – Craft seems to have had the same idea. The plugin (for Sketch and Photoshop) helps you pull in relevant data (like names and profile pics for users in your app) and filler images, live feeds from around the web, and more – with only a few clicks and without endless copy-pasting.

So in short: Sketch is growing as a standalone piece of software, it’s community is growing, and so is its library of brilliant plugins. If you haven’t tried it yet, you should – we’re pretty sure we won’t be going back anytime soon…