New Mac beta: v101 available now

Newsroom Sketch Labs
1

Hey folks of the forum :wave: If you haven’t already seen, we just shipped the first beta of our next update!

It was always going to be tough to top v100, but we think v101 has a good few things included that you’ll love. More on that in a moment…

How do I get it?

You can download our beta from sketch.com/beta — you’ll need an active subscription or license to use it. If you already have a beta build, you can open it and follow the prompts to update.

How do I share feedback?

If you run into any issues, the best way to share them with us is to click the :lady_beetle: Send Beta Feedback button in the toolbar. This should open an email template in your client of choice to fill out and send to us.

What’s in this beta?

Smart Animate in prototypes

Plenty of you have asked for this one, and it’s finally here! In the Prototype tab of the Inspector, you’ll see a new animation option — Smart Animate — that animates changes between layers with matching names.

If you’ve used Magic Move in Keynote, you’ll know how this works. There are a variety of easing options to choose from and you can customize the animation duration to get things moving just right.

There’s also a new dissolve option that gives a nice smooth fade between layers and Artboards. And we’ve added those easing and duration options to the existing slide animation.

Smart Animate can animate the most obvious layer properties — position, size, color and blending modes, opacity, and rotation. Others will fall back to a dissolve animation.

We’ve been testing this (and honestly, having a lot of fun with it) internally for a while now. Here’s a small example of the kind of thing you can do with it…

You can find a few more details, including an outline of the easing options, in our docs.

Lots of other improvements and enhancements

  • We now remember and maintain the scroll position of scrollable areas across different Artboards when you switch between them in prototypes (they just need to have the same name and position in the Layer List).
  • You can now click and drag with your mouse to scroll within scrollable areas when you play a prototype.
  • You can now export in HEIC format
  • You can now replace the underlying Library for all Components in a document (or a specific Component type) by heading to Edit > Replace Library. This replaces all components with the same name with their counterpart in the replacement Library.
  • Similarly, you can select specific Components (usually Symbols) on the Canvas and choose Edit > Replace Selected Components to replace the underlying Library for just those Components.
  • Big improvements to PDF exports — you can now choose which Artboards to export, optionally add Artboard titles and include comments (for Workspace documents only) and choose to render Artboards as bitmaps for more precision.
  • For Workspace documents, you can export all comments as a CSV file.
  • You can now double-click on an Artboard’s name on the Canvas to rename it! One of those things that you didn’t realize you needed until you start using it.
  • There are new display options for the prototype player in the Mac app. You can now display any prototype at full width, meaning the prototype will resize so its width always matches the player window’s width. Prototypes you play in the full width display mode with a larger height will scroll vertically.
  • We know it’s been a long time coming, but you can now use Color Variables in gradients. Nothing else to say about this one, we’re just glad it’s here and hopefully you are too!
  • You can now hide any layer inside a Symbol instance from the Layer List (be aware that support for this starts with v101, so older versions will see something different if you hide Symbol instance layers)
  • The Workspace window now remembers your previous sidebar selection (Recent Documents, Templates, Libraries, etc.) when you close and re-open the window or quit and restart Sketch.

As ever, you’ll find a full set of release notes, including plenty of bug fixes (as ever, thanks for reporting those!) at sketch.com/beta

Enjoy!

18 Likes
3

Leet’s gooooo! :star_struck: :raised_hands:

2 Likes
4

It also fixes the bug that caused the Back to Instance button to not work if it was overlapping a layer or Artboard. Thanks for brining it to our attention @everydayslang

1 Like
5

Looks amazing Freddie, great timing also Im deep in the protoyping phase of a project.
(Did the color issue get resolved for the prototpye player in this beta ?)
*looks like P3 color profile from the canvas is not being reflected in the prototype player (its raised as an issue here in the community)

Well done Sketch team.

2 Likes
6

Glad to see you like it @marktmcewan

A fix for the color issue is not in this beta unfortunately, I’ll see what I can do (we are aware of it). We’ll keep you posted.

1 Like
7

Thanks Jonne

8

Wow! That’s a great list of updates. Excited about this one. Had a chance to install and play with it very briefly this morning but not enough to provide any meaningful feedback. Hoping to have more time later in the week though.

1 Like
9

I’ll be installing this in the morning and having a play, looks awesome!

1 Like
10

Once again looking like a solid update. Just like with v100, I can’t wait to use this once it rolls out. Roadmap looks great as well!

1 Like
11

Nice beta! I’m curious how smart animate will be handled for dev handoffs.

And it’s the weirdest thing…I don’t see support for the middle mouse button :face_with_monocle: :sweat_smile:

3 Likes
12

This makes Sketch feel so much more up to date! Very elegant implementation, works nicely. With auto-layout and typography updates Sketch will soon be very close to Figma in most important features. Exciting times!

5 Likes
13

Great update. I tried the smart animate feature. It really meets expectations. But what I am most pleased about is that we can now change the artboard name by double-clicking it :smiley:

Wow I didn’t see the replace library feature. I tried with our Light-Dark DS libraries and it’s just works. :metal:

Last edit: It’s great to see gradients in color variables. And hiding symbol instance from layer feature will be really useful for us. It’s a solid update. Thanks!

2 Likes
14

Thanks for all the feedback, folks. Really glad you like it!

We just pushed a quick update to add HEIC as an export option, so that’s there too now.

2 Likes
15

So I’ve started playing around with smart animate and an immediate observation is if I have two artboards, one with a rectangle with no corner radius and the second with a radius. I’d expect smart animate to animate the radius change

17

Hi Ash. The basic reason for this is because in order for Smart Animate to transition between two layers across Artboards, those layers need to have the same number of points. The points on one shape match up with the points on the other shape. If you don’t have the same number of points, then the shapes can’t animate, and they will fall back to a more basic Dissolve.

You’d be forgiven for assuming that both shapes have four points, as they are both rectangles. But when you apply rounded corners, then, under the hood, that shape really now has eight points: Two on each each corner, on either side of the corner curve.
So the short answer is that in order to apply a Smart Animate, you need the same number of points. But there is a simple workaround to this, and that’s simply to apply a 0.1 rounded corner to your original rectangle. Sketch will now consider this to have the same number of points on both shapes, but your eyes won’t notice it.

Note that this will work provided your rectangle is not actually a square, and that you have not made the rounded corners go all the way to the maximum. Because then, with what is now effectively a perfect circle, you will only have four points on that shape, where the rounded corners meet. So if you are doing this, from a square to a circle, then also apply a similar/opposite setting on the destination shape and bring in your rounded corner settings just 1 down from a full circle.

I hope this helps, and please let us know if you have any further queries. Thanks.

1 Like
19

Heya Brett, thanks for the prompt and detailed response.

I’ve tested this again and going from a small radius to a larger radius still results in a dissolve. I’d also argue that from an end users perspective, they shouldn’t have to know about this workaround. I can appreciate that under the hood you’re changing a 4 point rectangle to an 8 point vector and dynamically adding and removing points. But the end use will only care about this if they want to edit the shape. If we can already interactively do this in the workspace, you’d expect it to be as invisible in smart animate. Also it’d be better than implementation in Figma :wink: as they currently do the same dissolve

21

Hi Ash.

We always endeavour to make things works as seamlessly and as intuitively as possible wherever we can, but sometimes there are underlying technical limitations that make certain situations difficult to understand without some learning. But rest assured we are continuing to work on Smart Animate, and are always looking to make improvements so that “it just works”.

With regards to the other issue you mentioned, about how you are still getting a Dissolve instead of a Smart Animate, could you please upload a sample of your document here and I can take a look at it for you. Thanks.

23

Here you go
squarez.sketch (5.8 KB)

24

Aah right, this is a current known technical limitation, whereby borders/lines are not able to be animated at the moment. If you remove the Border so that it’s a Fill only, then it will animate as expected.
I appreciate that this is not ideal right now, but this is something that we are still looking to resolve in a future update. Thanks for your patience on this.

2 Likes