New Mac beta: v100 available now

[joseph (Joseph Todaro)]

Hey everyone We have a new beta of our Mac app ready for you to try!

This is version 100 — and obviously that’s a big milestone for us. We’ll have more to share on how we plan to celebrate that later, but for now, let’s stay focused on what’s new for you.

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 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?

With this milestone release, we wanted to ship some long-awaited and much-requested improvements to prototyping. Hopefully you’ll enjoy these! We also included a couple of features to speed up your workflow in Sketch — the Command Bar and Minimap. We’ve been trialling these two internally for a while now and they’re become second nature to us. Let’s dive in.

Scrolling areas in prototypes

You can now make any group of layers scrollable vertically or horizontally (or both) in prototypes. You’ll find the Make Scrollable option under the Prototype tab in the Inspector when you select a an existing group or multiple layers (we’ll even group those for you).

Given the demand for this one, I don’t think I need to explain why it’s useful But here’s a quick demo of how it works. We start by making our group of cards horizontally scrollable, and then adjusting the scrolling area itself to fill the width of the Artboard:

And here’s the result in the prototype player:

Hover, press and toggle effects in prototypes

You can now show or hide layers on hover or press, as well as toggle a layer or overlay’s visibility on click, in prototypes. You can also trigger overlays on hover or press. You’ll find all these options under the Prototype tab in the Inspector when you select a layer or Hotspot.

Again, I’m sure you can come up with plenty of use cases here. In this example, I’m make a quick toggle control using the toggle visibility option. You’ll see I’m placing the two variations of this control on top of each other, then customizing the topmost layer’s visibility to toggle on and off on click in the prototype:

And here’s the result (along with another couple of examples of hover interactions):

If you want to preview those new prototyping features on the iOS app, you’ll need to be running our TestFlight releases. If you’re not already on the TestFlight, you can grab it right here: https://testflight.apple.com/join/dw2feMH8. We’ll be pushing a fresh release to support these prototyping features soon!

Command Bar and Minimap

You can now press ⌘K in any document to quickly access almost any action you’d find in the menu bar or activate with a shortcut — including those from plugins. Over time, the Command Bar will learn your preferences and bring your most-used actions to the top of the results.

If you were a previous heavy user of the Scale tool shortcut — that is now simply K. But you can customize the Command Bar’s shortcut in Sketch’s settings and give ⌘K back to Scale, if you really want to.

We’ve also added a handy Minimap to make it easier to find your way around a large Canvas. Whenever you have layers outside your current view, the Minimap will appear in the bottom-right corner. You can click on the Minimap or drag the highlighted section to navigate around the Canvas, or hide it altogether by pressing ⌃M.

Other improvements

• Discover in the Mac app: You’ll find a new Discover tab in the Workspace window, giving you instant access to our latest product news, guides, tutorials and more.
• Pin documents and projects: You can pin Workspace documents in the All Documents view and projects in the sidebar. Pinned documents and projects are private and personal — so you can use them in a way that makes sense to you. You can also pin documents in My Drafts and Libraries.
• Archive projects: Admins on a Business Plan can archive projects in their Workspace that are no longer active, making it easier to find and focus on what’s in play.

You can find a full list of release notes, including changes and bug fixes at sketch.com/beta.

Enjoy!

Update (22/3/24): We’ve pushed a fresh TestFlight build which brings support for the new prototyping features to the iOS app beta.

[vladan (Vladan Vukmanov)]

An exciting release! Let us know what you think!

[oleksify (Oleksii T.)]

Hey! Nice to see new beta.

Minimap is pretty cool and useful. I just tried it and found it useful right away!

Any chance to see OpenType configuration for text symbols? It is still problematic (or in case with Inter - impossible) to apply many open type features for font. We can have amazing prototyping features and awesome UI, but when you can’t create and use basic design token bits of your branding - it blocks you completely from the app.

[wwwedran (Vedran Židanik)]

Nice updates!
Few things I noticed immediately →

Scrollable groups
When creating a scrollable group I would expect it to behave as a smart layout group from the start, meaning that if I duplicate object within it it should stack it right to the other objects. This is I think crucial for these groups that extend beyont the edge of the artboard, otherwise it is difficult to edit them. Curious if there is a reason why this was not added from start?

States
I find it a bit difficult to use. Since this is mostly for buttons, toggles and similar interactive elements, it might make sense to make it a bit more intelligent. I remember many years ago Fireworks had this feature where you would do this on a symbol level and each time you add new state in the sidebar it would create a new layer that you could edit to create that state. In the end you would get a desired behavior in a smarter way than to assign behavior to each layer and move them behind or on top of each other to make them work.
I get that maybe your solution is more flexible, but thinking about what it will be used most of the time it seems a bit too manual.

These are just my initial thoughts. Other stuff like command bar and minimap are really nice, they make the app feel modern and even nicer to use. Congrats on the release!

[freddiewrites (Freddie Harrison)]

Thanks for the (very) early feedback, @wwwedran!

On your first point about scrollable areas: one way to handle these, which we’ve found quite useful during internal testing, is to have your scrollable content as a Symbol and use an instance of it in the prototype itself. That way it’s easier to edit everything beyond the bounds of the Artboard. Here’s a very basic example of what I mean:

[leohans (Leonardo Hancevich (Leo Hans))]

Wow. I’m speechless

[rshanker (Ravi S)]

Nice work on the new beta! Minimap & scrolling is pretty good.
Agree with @wwwedran on the states though… it’s very confusing. Other apps require designers to establish the states and manually setup the interactions. I hope there’s a way that Sketch can ‘automatically’ setup the states without the user having to manually configure the symbols.

[wwwedran (Vedran Židanik)]

From what I see it is not possible to put a padding inside of the scrollable section? It works on the left when you extend with a handle but there is no option to do it on the right when it is scrolled all the way left? I’m also finding it difficult to adjust scrollable area to the exact dimensions I want (if not full width of the artboard and it snaps). It can do it on the underlying mask but that seems a bit clumsy and defeats the purpose of the handles.

In general it is too easy to break and mess up these elements, they don’t feel solid when being used. I have similar issue with smart layout groups and masked groups in general - they all need a layer of robustness added to them.

[freddiewrites (Freddie Harrison)]

Hey @wwwedran — thanks for the feedback. If it helps with the padding, similar to my last reply, it’s a lot easier to control if you set up your scrollable section content as a Symbol. Here’s a very basic example:

Regarding the snapping when you drag the handles, holding ⌘ as you drag will stop that snapping from happening so you can be a bit more precise.

I’ll still share all of this with the team, of course!

[wwwedran (Vedran Židanik)]

That is one solution but I think padding should maybe be a setting of the scrollable group and not rely on so many additional steps. Why would every scrollable area need to be a symbol? - it’s not necessary and potentially slows down prototyping.

[freddiewrites (Freddie Harrison)]

Sure, I hear you. I wanted to share some suggestions to try and help you out in the interim, but as I say in my earlier reply, I’ll of course share your feedback with the team working on this feature. Thanks again for trying it out and letting us know how you feel about it!

[joseph (Joseph Todaro)]

Another option to take control of padding is to add a rectangle (with no fill or border) to the group that has scrolling enabled. It may seem like a workaround but it’s a useful method for any case where you may need to decouple a group’s bounds from the visible content of the group.

[wwwedran (Vedran Židanik)]

An old trick, I agree, it can be done that way but it’s 2024 and software should help us reduce amount of manual work imo. Appreciate the help!

[kyivdesigner]

Why do you create something that already exists as a plugin? You couldn’t surpass Sketch Runner. Command Bar is just a disappointment for me, especially for the 100th version milestone.

Hover states have been around in Figma for a couple of years now.

Thanks only for the mini-map.

At the same time, take a look at what Figma added with its latest update.

Disappointment - in a nutshell.

[jonne]

Hey @kyivdesigner

Welcome to the forum. I’m sorry to read that you feel this way about this latest version.

Feel free to add suggestions, votes, or comments to our Suggest and Idea section if there’s anything you’d like to see in future releases.

[everydayslang (Stephen)]

Definitely some cool and interesting new features here, but these are all “nice to haves”. From a productivity standpoint there’s a lot of bugs that are causing major frustrations. I’d rather have a reliable app with the basics working then anything in this release…

---

“Tidy” straight up doesn’t work and will mess up your designs

1. It used to find the “most common” interval between objects and apply that to all. Currently it behaves the same as “distribute”, picking an average distance between layers.

2. Not only that, it will also reorder layers on the canvas (left to right or top to bottom). This leaves you even worse off, creating an even greater problem than you had before using this feature.

3. It also makes the assumption that want to “align an edge” (e.g. when using Tidy with a horizontal list of objects that don’t share the same height it will align the top edges, even when you already had them vertically center aligned.)

IMPACT: Not being able to quickly standardize the distance between layers means you can’t use “smart distribute” or “smart reordering”, which are amazing features!

SOLUTION: Kill the Tidy button. Even when it worked it was unpredictable. It might put things in a line… it might put things in a grid… it might guess the right distance between layers… it might not…

All that’s needed is the Butter plugin to be add to the native align presets (Menu Bar: Arrange > Align > “add here”) . 1. Start from the the left, right, top, bottom… 2. put X pixels between each layer… and 3. have a short cut for 0px because that’s what you want 90% of the time. Copying Butter would be a 10x simpler feature to build and would do what users want 100% of the time.

---

“Back to Instance” button breaks when it is overlapping a layer.

That little button that pops up in the top left when you drill into a symbol. It’s so useful. It’s been around since day one. It’s literally what makes working with symbols possible. Currently out only works when there’s nothing underneath it. If there is I now have to zoom/scroll my canvas until it doesn’t overlap. anything, then I can press it. This is such a global… core… basic navigation… feature that is broken.

IMPACT: Huge. This is a primary way to navigate the app. If you drilled into a symbol to make changes, there’s a 90% chance you’re going to want to return to see the effect of those changes.

SOLUTION: Figure out what’s happening with the “z-index” (or whatever it’s called in native apps). Also just add this to the menu bar so we can setup a hotkey for this, please!

---

“Create a Symbol” puts new symbols on random pages.

Sometime there’s a “Send symbol to X page” checkbox at the bottom of the “create a symbol” modal, but not always… I can’t figure out why. If the box is not available or of it’s not checked it sometimes puts the master symbol on the current page (as expected), but sometimes put’s it on a random page and you have to realize this, and move it to somewhere logical before you forget and loose it forever (or a just really confused).

IMPACT: Again, this is huge. Symbols are kinda Sketch’s thing. Creating new ones shouldn’t be hard.

SOLUTION: This I don’t know…

---

“Instances” forget their size when their master is edited

I’ll create a symbol, give the layers inside it fixed heights, widths, pin things to edges… I may even set the layout so that it can grow in a particular direction… Then I’ll use instances of this symbol, either stretching them myself or letting them resize automatically by adding longer text in the override… but as soon as I go and edit the master symbol all the stances forget what size they were and revert back to the original size of the master symbol, causing me to have to manually go in and resize each layer. Actually just installing this v100 update caused a lot of my symbols to break this way

IMPACT: This is a major time suck. I’m repeating mindless work that I’ve already done. As a work around I try to keep my masters the same size as my instances, but that’s not always possible.

SOLUTION: I don’t know…

---

Dragging layers in the layer list is unreliable.

Often when trying to reorder layers in the layer list I make my selection, click-to-drag but they don’t move. I have to try a second or third time before I’m able to move the layers.

IMPACT: Medium, but this seems like a native MacOS interface component and I haven’t experienced this in any other app.

SOLUTION: I don’t know…

---

Use custom nudging settings for nudges everywhere…

Having this setting is unexpected, but it’s so incredibly nice to have. Customizing the intervals for nudging and shift-nudging is such a time saver. 10px is a great shift-nudge default, but I use 8px since it scales nicely for screens (8, 16, 24, 32, 64, 144, 246, 1080, 1920, etc…)

Some fields in the inspector obey this setting like x positions, y position, width, hight (holding shift and using the arrows gives you ±8px), others do not like vertical/horizontal distance between, font size, blur, shadows, border width (they still default to ±10)… it’s weird. e.g. I’ll shift-nudge something (8px) from the bottom edge of an artboard, then shift-nudge the shadow (10px)… now 2px of shadow is being cut off on the export and it looks bad. There’s other examples too, but this is maybe the most obvious.

IMPACT: This is admittedly small, but it’s a “crossing your t’s and dotting your i’s’” type thing. If someone takes the time to change their settings then they probably want to be the same everywhere.

SOLUTION: All shift-nudges on the canvas and in the inspector should be the same (whatever you put in the app settings)… Unless it’s a percentage, which is base-10 by default. So things like opacity or scaling, there may be other settings with percentages I’m forgetting…

[Brett]

Hi there!
There’s a lot you’ve written here, and thanks for taking the time to do so. Rest assured, all of this is being looked at.
However, I just wanted to drop a very quick response to one thing you mentioned:

“Back to Instance” button breaks when it is overlapping a layer.
…add this to the menu bar so we can setup a hotkey for this, please!

You’ll be pleased to know that it’s already there.
It’s under Layer > Symbol > Return to Instance.

I hope that this will help you in the meantime.

[jonne]

Thanks for your elaborate feedback @everydayslang It’s appreciated.

Regarding your points:

“Tidy” straight up doesn’t work and will mess up your designs

We’re working on a fix for this.

“Back to Instance” button breaks when it is overlapping a layer.

This is a bug indeed, I’ll make a note of it.

“Create a Symbol” puts new symbols on random pages.

I tried this a few times but couldn’t spot the randomness of this issue. The source should either go to a new page above the Layer List called Symbols or it’ll appear on the current page. Would you mind sharing an example with us if the above does not happen?

“Instances” forget their size when their master is edited

Not sure if I understand this one completely. It could be that Smart Layout is trying to resize based on the content as stated in the source, which would undo the manual changes in the instance. Would you mind sharing a video of the problem with us via: productsupport@sketch.com so I can be sure what it is and also check with the product team?

Dragging layers in the layer list is unreliable.

I haven’t experienced this myself, I’ll keep an eye out for this and share the issue with the team when I find out more.

Use custom nudging settings for nudges everywhere…

Good point!

[anboe (Andreas)]

What a huge update! So many features I was missing so far are now here.

I don’t have time to join the beta test and give you adequate feedback, but I’ll appreciate all the improvements and new things you added once it’s released. Thank you!

[jonne]

Thanks for your kind words, Andreas!