Sketch 100: More than just a number

Version 100 of Sketch is here. It’s a milestone release for us and it’s full of features you’ve been asking for — a thank you, from us to you, for helping us make it this far.

There’s a lot to get through here, so let’s kick things off with what’s new in prototyping.

Two new ways to prototype

Our goal with prototyping has always been to make it simple and fast. We don’t want endless options to distract from trying out ideas and iterating quickly. That said, we’ve known for a while there was more you wanted from prototyping and equally more we could offer.

Over the the last few years, we’ve made a number of prototyping updates — from smaller quality-of-life improvements, to big new features like Overlays. With this update we’re adding a few more, all without compromising on speed or simplicity.

Horizontal, vertical and multi-directional scrolling

We’ve had vertical scrolling in prototypes since day one, but now you can make anything in your prototype scroll in any direction.

Setting up scrolling areas is simple; select the content you want to scroll and hit Make Scrollable under the Prototype tab in the Inspector. We’ll group your content (if it isn’t already) and add a clipping mask, along with some new handles to control the scrollable area.

Our recommendation is to make a Symbol for your content, insert an instance of it and make that scrollable. That way you see and edit all the content (including any hidden by the clipping mask), and easily add padding.

Whether you’re mocking up a row of cards, an interactive map, or pretty much anything else that needs to scroll, you can now test these out in a working prototype.

Hover, press and toggle triggers

Up until now, there was a single way to trigger interactions in prototypes — on click. With this update, we’re adding two more triggers; on hover and on press.

These new triggers work hand-in-hand with another new prototyping option — custom layer visibility. For example, you can now set a layer to be hidden by default when you a play a prototype, and have it only appear when someone hovers over it.

There’s also a third new option — toggling a layer’s visibility on click. This one is especially handy for creating interactive UI like checkboxes or toggle switches. You can even toggle the visibility of overlays.

Together, these new ways of interacting with prototypes open up a whole world of opportunities as you test out your designs.

These features are all possible because of the work we’ve done over the last year to rewrite our prototype player. Rather than relying on HTML to display static images, it now uses WebGL and Skia, giving us a lot more flexibility in what we can do and show.

This new prototype player runs across the Mac app, the iOS app, and the web app, where we also have a few updates to share…

A fresher, focused web app

Alongside the prototyping updates in the Mac app, we’ve given the web app a redesign. We’ve removed the static sidebars and replaced them with collapsible panels — making more room for the full-fidelity, infinite Canvas that now extends to every corner of your browser window. This change isn’t just about making more space for your designs, though, it also helps to highlight two common actions — commenting and inspecting. Let’s dive into those.

Inspect on the Canvas, in any browser

We launched our first handoff tools back in 2020, allowing developers to inspect designs, for free, in any web browser. However, these tools were tricky to find and required you to drill down into individual Artboards to open the Inspector. It’s time to change that!

Now, you can inspect designs in the full Canvas view. When you’re viewing a document, simply hit I (or click on the Inspect icon), select anything on the Canvas, and grab what you need.

Inspecting documents with a full view of everything on the Canvas means you can compare layers across Artboards and get a full picture of a flow during the handoff process.

Add comments to prototypes

The new Canvas view also makes it easier to keep track of conversations and contribute with your own comments. Hit N to add a comment anywhere on the Canvas, select an existing marker to view a conversation, or hit C to see a panel with every comment in the document.

Better still, you can now add comments while you’re playing a prototype — simply click on the Comments icon to see any existing comments and add your own. It’s a great way to give feedback on how specific flows feel, without switching back to the design and losing your place in the prototype.

A client-friendly prototype view

Along with commenting, we’ve added a new way to share prototypes that hides the web app’s UI and links back to the design file. It’s ideal for sharing with clients and puts the focus firmly on the prototype itself.

Together with the new prototyping features, we think these updates make for a more feature-rich experience. They’re especially useful if you’re moving over from InVision.

New features to make your workflow faster

Back in the Mac app, we’ve got two more new features in this release we hope you’ll love — the Command Bar and Minimap.

Command Bar

You can now hit ⌘K in any document and use the Command Bar to find and run actions in Sketch. The Command Bar will show any action you’d normally find in the menu bar or activate with a shortcut (including any that come from plugins). It also includes Inspector fields like Artboard orientation.

We built the Command Bar for speed, so over time it will prioritize search results based on the commands you use most often. Chances are you’ve used one of these in other apps before, but if not, it’s the kind of thing that you’ll soon wonder how you ever lived without.

Minimap

This release also introduces a Minimap to make it easier and faster to navigate large documents. The Minimap appears whenever you have layers on your page outside your current view — whether that’s because you’re zoomed in or simply have a lot of Artboards. It gives you a preview of the whole Canvas and shows you exactly where you are.

You can click-and-drag on the Minimap to move around the Canvas. You’ll also see the names of Artboards as you hover over them to make it even easier to find what you need. Just like the Command Bar, this is one of those features that fits into your workflow like it’s always been there.

More small-but-mighty updates

We’ve still got a few more updates to share with you. So grab another drink, make yourself comfortable and we’ll take you through a handful of smaller, but no less important, new features.

Permissions groups and archiving (Business plan only)

If you’re on our Business plan, chances are you have a pretty busy Workspace. To make things easier, you can now create permissions groups to add multiple Members at once to a document or project. Additionally, you can now archive projects to hide work that’s no longer in-flight.

Pin documents and projects

You can now pin your most important documents and projects anywhere you use Sketch. When you pin a project, it appears at the top of the projects list. Pinned documents appear at the start of the documents grid. Pinned items are for what matters to you personally, so nobody else will see what you pin.

A new web app notifications view

In the web app, we’ve given the notifications view a facelift. It makes better use of the space in your browser window, so you can see more of each notification. There are also new options to search and filter your notifications, and a clearer distinction between what you’ve read and what’s new.

New design token exports

As well as making inspecting in the web app easier, we’ve improved developer handoff further with new design token exports. Now, alongside the existing Color Tokens you can grab tokens for Layer Styles and Text Styles, too.

A new home for tutorials, guides and templates

If you’re looking for tutorials, guides and templates, you’ll find them all in Discover. You’ll find Discover in both in the sidebar of the web app and — for the first time — in the Workspace window’s sidebar in the Mac app. We’ve given Discover a refresh and will be updating it regularly to help you make the most of Sketch.

So, that’s version 100. A milestone release for us — and one we could not have reached without your support. Thank you! We hope you enjoy this one, and all the new possibilities these features open up for you.

As ever, if you need any help making the most of what’s new or have feedback us, we’ll be over in the Community Forum.