Sketch 100 - A Milestone

[emanuel (Emanuel Sá)]

Hello there — version 100 of Sketch has just landed.

To us, version 100 is more than just a number. It’s a milestone, and a chance to say thank you.

This update is full of features you’ve been asking us for, including new prototyping tools such as scrolling effects, hover, press and toggle triggers, commenting in prototypes and more ways to share your work.

There’s more good stuff to discover. Hit ⌘K in any document to bring up the Command Bar, which gives you a quick way to find and run actions in Sketch. And try the new Minimap to instantly move anywhere on a large Canvas.

The amount of small improvements is too long to list, both on the Mac and Web.

You’ll also find many quality-of-life improvements, such as pinning documents and projects, a refreshed web app, along with design token exports that contain Color Variables, Layer Styles and Text Styles too.

Check out our blog post for a full rundown of what you can expect to find in this release.

Once again, a big thank you for helping us make it this far — it’s been a long road and we couldn’t have done it without your continued feedback and support.

[Tom]

Great update, as always! Great to see the new possibilities for prototypes.

Some nitpicking: in the Export Design Tokens modal the colors are noted as rgba(255, 255, 255, 0.5). That’s the legacy notation (still works though). The preferred notation is rgb(255, 255, 255 / 0.5) (or alpha in percentage).
See also: rgb() - CSS: Cascading Style Sheets | MDN

[dfmedrano (Jorge)]

Hi @Tom, thanks for sharing this! We’ve taken note of it and please feel free to share any other feedback or thoughts about Sketch 100

[Jean-Francois-b]

Awesome! This is a great release, I had been waiting for better prototyping feature and this is super welcomed!

Here’s a few things i’ve noticed.

Prototype player: Limit scrolling to horizontal only
It’s common for mobile browser and apps to deactivate vertical scrolling when you start interacting with a horizontally scrolling element. Would be nice if the player would detect the scrolling direction of the element and have the same behaviour.

Prototype player: mouse click and drag scrolling
I know this has been mentioned before, but adding my +1
Also my mouse has a scrollwheel that i can push left/right to scroll horizontally (Logitech m720). It works on the canvas, but not in the player.

Scrolling: Better padding control
ie. Typical case for horizontal scrolling, with multiple cards wider than the screen, there’s an issue with the scroll end if I set the scroll mask to the window width.
The solution seems to add extra padding to the symbol/content on the right edge. But once in the symbol source edit, I don’t have access to the artboard, so I need to manually calculate it. It’s a multi steps process, in 2 different views. Also maybe each instance has different window padding and need different amounts of right edge padding…

Could we have an extra handle or something on the instance? Maybe like this:

Not sure about my UI design, but hopefully you get the point.

Layer Visibility/Hover interactions
This is a really nice added feature, to be able to have button hovers and other things.
But I think for buttons, the idea of symbol/components variants in Figma is easier to work with/more powerful? I guess both integrations have strong/weak points. I like to see variants next to each other to design, but I can do that with symbols, so let’s see how I feel overtime

Animation in the prototype
This is more like a feature request, but with all the added feature, I feel like the next step for me would be more options to animate between states in the prototype player. Something like Smart Animate in Figma is incredible to demo animation to clients and developers, for me, and I will sometime export my Sketch files into Figma just to create an animated prototype. Better animation options between artboard, overlays and hover/click states would be super nice.

Again, thanks for this incredible update!

[funkie (Dmytro)]

Thank you for making Sketch better!

Not such big changes, especially for the 100th version. New bugs and compatibility issues with plugins (I really miss Runner ).

But hey, there are some bright sides. Finally! inspect in the canvas has gotten a lot more user-friendly, although it’s missing layer navigation and the ability to export layers in my preferred format. Developers still have to import the design into Figma.

As for the app, it’s lacking a few things:

1. Fast symbol insertion, like we had in Sketch Runner.
2. Ability to force Keyboard Locale to English ABC when typing in the Command Bar.
3. Proper auto-saving of documents to the cloud. Still have to manually press Cmd + S and save a version for changes to show up in the cloud.

[jonne]

Hey @Jean-Francois-b

Thank the kind words, your thoughtful feedback and insights!

There are a lot of valid points there and I’ll make sure we incorporate them into our product discussions around these topics.

Regarding this point:

Also my mouse has a scrollwheel that i can push left/right to scroll horizontally (Logitech m720). It works on the canvas, but not in the player.

You can alternatively use Shift + scroll wheel to scroll horizontally within the player

As for animation capabilities in the prototype, it’s a highly requested feature, as highlighted in this forum thread. Feel free to join the conversation and cast your vote!

[jonne]

Hi @funkie,

Thanks for sharing your thoughts!

Could you clarify this part further? I’m not sure I fully understand.

Finally! inspect in the canvas has gotten a lot more user-friendly, although it’s missing layer navigation and the ability to export layers in my preferred format. Developers still have to import the design into Figma.

Regarding your other points, we’ll look into the first two. We’re already aware of the Fast Symbol insertion, it’s something we may add to future releases (I can’t make any promises there yet). I’ll also investigate the keyboard aspect—I wasn’t aware of that, so thanks for bringing it up.

Regarding autosaving, once a document is in the Workspace, Sketch automatically saves it. If you want to create a new version then you’ll need to do that manually, to avoid an abundance of versions.

[nico-v]

It’s still a bit early for me and my team but we’ve been enjoying this update quite a bit so far. Thanks and congratulations to the entire Sketch team on 100. Looking forward to the next 100!

[Xhaust (Christian Meyer)]

Thank you for the eagerly awaited prototyping features.

But why does it all have to be so complicated? An (actually) simple example: I have 1 symbol for each of 3 button states: 1. default, 2. hover, 3. press.
Now, if I have understood correctly, I have to place the 3 symbols as layers in one symbol, which then contains all 3 states. I hide the Hover instance and Press instance and make them visible via custom layer visibility in the prototyping tab OnHover or OnPress.

If I now use an instance of the ButtonSymbol I have just created on an artboard, I am irritated to see that both the text label and the icons used in the symbol appear three times in the overrides area and I am therefore forced to edit EVERYTHING three times in the instance, otherwise I only see the default icon and the placeholder text from the symbol in the OnHover and OnPress prototype.

Can we please get simple component states?
Naive as I am, I assumed that I simply assign my 3 original icons for Default, Hover and Press to each other as states and update the overrides accordingly.

But in the current solution (or the part I understood of it) I have triple the effort as a designer if I want to edit instances of the symbols via override.

Please tell me that I am doing something wrong and that there is a simple solution.

[olivetum (mateusz.rozalski@mfleet.io)]

Hover triggers are nice to have, but they are of little benefit on their own without the interaction of Symbol variants swap.

But the Command Bar is awesome

[dfmedrano (Jorge)]

Hi @Xhaust,

Thanks for your feedback, taking the time to share it and preparing the screens and videos. First of all, we understand what you mean, we’re aware this happens with Layer Visibility.

The simplest of approaches is adding layers directly to the symbol source. If you’re building a button, many times what changes is the background and adding layers for the hover and press interactions can work well here:

 

On the other hand, you can also nest symbol instances, but you’ll see an override for each layer; text most of the times but also icons and layer styles if you’ve set them:

 

We know this can have its shortcomings and that improvements can be done. The best way to avoid multiple overrides when not wanted is adding layers instead of nesting instances, but we’re aware this may not be the ideal scenario for all cases.

[Xhaust (Christian Meyer)]

Thank you for your comments @dfmedrano

Your first suggestion is not suitable for productive use in my design system and is more of a workaround, which, if I want to change something in all the symbols of my button classes afterwards, requires me to show all invisible layers again in order to edit them.

Your second approach shows exactly the problem that I also have on my site.

There is still a lot of room for improvement.

[noe (Noela Losada Re)]

Hi Jorge!!

I’m replying to your post because I have an improvement suggestion so that the Layer Visibility functionality is much more useful for many cases that I am encountering at the design and prototyping level.

I think it would be interesting if you could turn the Layer Visibility “on” or “off” in an instance depending on the need you may have, for example, in the case of a button let’s imagine that for an instance that I include in the designs I want it to show in the “Hover” mode, if somehow I could “turn on” the Layer Visibility that I created for the “Hover” state “on” it would be great.

I include a video in order to explain the better the idea.

Have you considered this? Layer Visibility is great but to truly be totally amazing I think is missing this…

Thanks!!

[dfmedrano (Jorge)]

Hi Noela

Thanks for sharing! Yes, we have considered this. You can already do this in Sketch!

All you need to do is turn into a symbol the layers you want to hide. We’ve also considered being able to hide any nested layer, not just symbols.

In the meantime, after turning your layers into a symbol, remember to set them as visible and hide them on the instances. If you hide them on the source, you won’t be able to show them on the instances. Here’s a quick demo video and file. I hope they help

Hiding hover layers.sketch (170.9 KB)

[noe (Noela Losada Re)]

Thanks for your answer Jorge!!

This works, but the downside is that I can’t have a “default” state for my instances that is suitable given a regular case. So each time I instance one of my symbol I have to “configure” each layer/symbol in order to get this “default” state.

That’s why I still think that if I can “play” with the Layer Visibility regardless of whether it is turned on or off in the original symbol will be a great design operative improvement (the same for symbols with original hidden layers).