Model 100 of Sketch is right here. It’s a milestone launch for us and it’s stuffed with options you’ve been asking for — a thanks, from us to you, for serving to us make it this far.
There’s rather a lot to get via right here, so let’s kick issues off with what’s new in prototyping.
Two new methods to prototype
Our aim with prototyping has at all times been to make it easy and quick. We don’t need limitless choices to distract from making an attempt out concepts and iterating shortly. That mentioned, we’ve identified for some time there was extra you needed from prototyping and equally extra we might supply.
Over the the previous couple of years, we’ve made numerous prototyping updates — from smaller quality-of-life enhancements, to massive new options like Overlays. With this replace we’re including a number of extra, all with out compromising on velocity or simplicity.
Horizontal, vertical and multi-directional scrolling
We’ve had vertical scrolling in prototypes since day one, however now you may make something in your prototype scroll in any route.
Establishing scrolling areas is straightforward; choose the content material you wish to scroll and hit Make Scrollable beneath the Prototype tab within the Inspector. We’ll group your content material (if it isn’t already) and add a clipping masks, together with some new handles to regulate the scrollable space.
Our suggestion is to make a Image to your content material, insert an occasion of it and make that scrollable. That manner you see and edit all of the content material (together with any hidden by the clipping masks), and simply add padding.
Whether or not you’re mocking up a row of playing cards, an interactive map, or just about anything that should scroll, now you can take a look at these out in a working prototype.
Hover, press and toggle triggers
Up till now, there was a single option to set off interactions in prototypes — on click on. With this replace, we’re including two extra triggers; on hover and on press.
These new triggers work hand-in-hand with one other new prototyping choice — customized layer visibility. For instance, now you can set a layer to be hidden by default once you a play a prototype, and have it solely seem when somebody hovers over it.
There’s additionally a 3rd new choice — toggling a layer’s visibility on click on. This one is very helpful for creating interactive UI like checkboxes or toggle switches. You may even toggle the visibility of overlays.
Collectively, these new methods of interacting with prototypes open up a complete world of alternatives as you take a look at out your designs.
These options are all potential due to the work we’ve accomplished during the last 12 months to rewrite our prototype participant. Fairly than counting on HTML to show static pictures, it now makes use of WebGL and Skia, giving us much more flexibility in what we are able to do and present.
This new prototype participant runs throughout the Mac app, the iOS app, and the online app, the place we even have a number of updates to share…
A more energizing, centered net app
Alongside the prototyping updates within the Mac app, we’ve given the online app a redesign. We’ve eliminated the static sidebars and changed them with collapsible panels — making extra room for the full-fidelity, infinite Canvas that now extends to each nook of your browser window. This variation isn’t nearly making more room to your designs, although, it additionally helps to focus on two widespread actions — commenting and inspecting. Let’s dive into these.
Examine on the Canvas, in any browser
We launched our first handoff instruments again in 2020, permitting builders to examine designs, at no cost, in any net browser. Nonetheless, these instruments had been tough to search out and required you to drill down into particular person Artboards to open the Inspector. It’s time to vary that!
Now, you may examine designs within the full Canvas view. Whenever you’re viewing a doc, merely hit I (or click on on the Examine icon), choose something on the Canvas, and seize what you want.
Inspecting paperwork with a full view of the whole lot on the Canvas means you may examine layers throughout Artboards and get a full image of a stream through the handoff course of.
In case you missed it: Our browser-based handoff instruments are fully free for builders — no Mac app required!
The brand new Canvas view additionally makes it simpler to maintain monitor of conversations and contribute with your personal feedback. Hit N so as to add a remark wherever on the Canvas, choose an current marker to view a dialog, or hit C to see a panel with each remark within the doc.
Higher nonetheless, now you can add feedback when you’re taking part in a prototype — merely click on on the Feedback icon to see any current feedback and add your personal. It’s an effective way to present suggestions on how particular flows really feel, with out switching again to the design and dropping your home within the prototype.
A client-friendly prototype view
Together with commenting, we’ve added a brand new option to share prototypes that hides the online app’s UI and hyperlinks again to the design file. It’s ideally suited for sharing with shoppers and places the main target firmly on the prototype itself.
Along with the brand new prototyping options, we expect these updates make for a extra feature-rich expertise. They’re particularly helpful for those who’re transferring over from InVision.
New options to make your workflow quicker
Again within the Mac app, we’ve bought two extra new options on this launch we hope you’ll love — the Command Bar and Minimap.
Command Bar
Now you can hit ⌘Ok in any doc and use the Command Bar to search out and run actions in Sketch. The Command Bar will present any motion you’d usually discover within the menu bar or activate with a shortcut (together with any that come from plugins). It additionally contains Inspector fields like Artboard orientation.
We constructed the Command Bar for velocity, so over time it’ll prioritize search outcomes based mostly on the instructions you employ most frequently. Chances are high you’ve used considered one of these in different apps earlier than, but when not, it’s the sort of factor that you simply’ll quickly surprise the way you ever lived with out.
Minimap
This launch additionally introduces a Minimap to make it simpler and quicker to navigate giant paperwork. The Minimap seems every time you have got layers in your web page outdoors your present view — whether or not that’s since you’re zoomed in or just have a whole lot of Artboards. It provides you a preview of the entire Canvas and reveals you precisely the place you’re.
You may click-and-drag on the Minimap to maneuver across the Canvas. You’ll additionally see the names of Artboards as you hover over them to make it even simpler to search out what you want. Identical to the Command Bar, that is a kind of options that matches into your workflow prefer it’s at all times been there.
Extra small-but-mighty updates
We’ve nonetheless bought a number of extra updates to share with you. So seize one other drink, make your self snug and we’ll take you thru a handful of smaller, however no much less vital, new options.
Permissions teams and archiving (Enterprise Plan solely)
For those who’re on our Enterprise Plan, likelihood is you have got a fairly busy Workspace. To make issues simpler, now you can create permissions teams so as to add a number of Members without delay to a doc or venture. Moreover, now you can archive initiatives to cover work that’s not in-flight.
Pin paperwork and initiatives
Now you can pin your most vital paperwork and initiatives wherever you employ Sketch. Whenever you pin a venture, it seems on the high of the initiatives checklist. Pinned paperwork seem at first of the paperwork grid. Pinned gadgets are for what issues to you personally, so no person else will see what you pin.
A brand new net app notifications view
Within the net app, we’ve given the notifications view a facelift. It makes higher use of the area in your browser window, so you may see extra of every notification. There are additionally new choices to search and filter your notifications, and a clearer distinction between what you’ve learn and what’s new.
New design token exports
In addition to making inspecting within the net app simpler, we’ve improved developer handoff additional with new design token exports. Now, alongside the present Shade Tokens you may seize tokens for Layer Kinds and Textual content Kinds, too.
A brand new residence for tutorials, guides and templates
For those who’re in search of tutorials, guides and templates, you’ll discover all of them in Uncover. You’ll discover Uncover in each within the sidebar of the online app and — for the primary time — within the Workspace window’s sidebar within the Mac app. We’ve given Uncover a refresh and can be updating it repeatedly that can assist you take advantage of Sketch.
So, that’s model 100. A milestone launch for us — and one we couldn’t have reached with out your help. Thanks! We hope you take pleasure in this one, and all the brand new potentialities these options open up for you.
As ever, for those who want any assist taking advantage of what’s new or have suggestions us, we’ll be over within the Neighborhood Discussion board.