New Mac beta: v100 available now

[jkilp (Jason Kilp)]

@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.

The main reason for this is that Sketch Runner isn’t actively maintained anymore.

[Xhaust (Christian Meyer)]

@joseph

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:

Do I understand the concept of hover, press toggle effects correctly, that we are still not able to create this at symbol level, but instead have to create it for EVERY INSTANCE of a symbol?

Well, I’m trying out this feature for the first time with Beta 100. The following example: I have different button classes. I have created three states as individual symbols for each button: Default, Hover and Press.

Now I proceed as follows. I have the button default symbol artboard in front of me. Now I drag and drop an instance of the corresponding button hover symbol from the insert window and place it flush over the layers within the default button symbol. The next step is to open the Prototype tab, set the Visibility to Custom, Action to Show layer, trigger to On-Hover. Now I am obviously forced to create an interaction. Target is set to None.

Now I go back to the artboard on which insances of the button-symbol are used. And at every point where an instance of the button is used, I now see the hover state of the button, which I don’t want to see, I want to see the default state instead. Furthermore, I only see the hoverstates in the prototype player and nothing happens when I hover over the button with the mouse.

What’s going on here? Am I doing something wrong, or do I just not understand your approach? I thought it could be that simple. I have 3 button symbols (next to each other or below each other. Now in my imagination I would simply connect State1(Default) with State2(Hover), would set that the connection should trigger an OnHover. Then I would connect State2(Hover) with State3(Press) and specify that the OnPress action should be executed. DONE

Now all instances of the Default, Hover and Pressed symbols would contain states and trigger accordingly in the prototype. Why is your approach so complicated? Or is it so simple that I can’t figure it out? I don’t understand it.

I would be very grateful for any useful tips.

---

EDIT:

I have just tried to create 3 layers in a button symbol in a very simple way:
Layer 1 - Default
Layer 2 - Hover
Layer 3 - Pressed
I have linked these together as in Joe’s GIF. And lo and behold, in instances of the symbol, both Hover and Pressed worked in the prototype player.

Now I have created these three layers mentioned above as symbols (Default, Hover and Pressed). I then stacked instances of these 3 symbols on top of each other in the button symbol and linked them accordingly as I had just done with the normal layers.
I have now tested the instance of this button in the prototype player and both Hover and Press did NOT WORK.

I’m sorry, but the way it is implemented now, this new prototype feature is not suitable for productive use and only something for your marketing …

I hope you improve this feature soon.

[Xhaust (Christian Meyer)]

@joseph

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:

Now I have also tried to recreate this feature in exactly the same way as shown here in the GIF.

I have several instances of a card symbol. In the prototype player (on Mac … I haven’t tested in SketchCloud), nothing happens when I grab with the mouse and try to drag left and right.

I first tried it at symbol level. In other words, a symbol that consists of several layers (text layers and symbol instance layers that represent the cards to be scrolled horizontally). I arranged the instances of the card symbols horizontally exactly as shown in Joe’s GIF, opened the prototype tab, dragged the left gripper to the left edge of the artboard. Then I went back to the artboard that contains the instance of the symbol. I hopefully start the prototype player … NOTHING …

So I figured it wasn’t working at the symbol level. I detached the instance from the parent symbol. I check whether the scroll area still exists. Yes, it still exists. I start the prototype player … NOTHING …

Frustration.
Now I rebuild everything on the artboard as shown in Joe’s GIF. I start the prototype player … NOTHING HAPPENS.

Frustration. We’ve waited soooo long for these features … and it’s so frustrating to try them out from second 1 …

[Brett]

Hi there.

@Xhaust

I have several instances of a card symbol. In the prototype player (on Mac … I haven’t tested in SketchCloud), nothing happens when I grab with the mouse and try to drag left and right.

Unfortunately, the ability to click-and-drag to scroll is not implemented yet.
For now, it’s limited to scrolling with either the trackpad, or with the scrollwheel on a mouse using the standard additional press of the Shift key to scroll sideways.

I hope this helps, and apologies for this confusion in the meantime.

[Xhaust (Christian Meyer)]

@Brett

apologies for this confusion in the meantime

but in @joseph 's GIF there is ja mousecursor

thanks for the clarification

[Xhaust (Christian Meyer)]

@Brett

For now, it’s limited to scrolling with either the trackpad, or with the scrollwheel on a mouse using the standard additional press of the Shift key to scroll sideways.

Ok, I think when testing the feature you could have found that no user would think of holding down SHIFT.

We designers want to use prototypes to test our designs on users.

Thanks again for the clarification.

[Brett]

@Xhaust

but in @joseph 's GIF there is ja mousecursor

Indeed, but note the cursor remains static while the content underneath scrolls, rather than the cursor moving along with the content. So the scrolling will happen on whatever content the cursor is positioned over, in the same way that it would if you positioned your cursor over two different browser windows, for example.

@Xhaust

Ok, I think when testing the feature you could have found that no user would think of holding down SHIFT.

Just to clarify, this isn’t something we have implemented ourselves, but rather is the standard way to scroll horizontally with a mouse scrollwheel. Like here for example: Apple Store Online - Apple
Yes, I appreciate they also have arrow buttons as another option, but you can still Shift-scroll as standard here.
But rest assured, I can appreciate your frustration here and that this may be a lesser-known feature, and that for trackpad users it’s more intuitive, so I will pass your feedback on to the team here. Thanks!

[joseph (Joseph Todaro)]

Hey @Xhaust, I think you and I have discovered the same bug here:

Now I have created these three layers mentioned above as symbols (Default, Hover and Pressed). I then stacked instances of these 3 symbols on top of each other in the button symbol and linked them accordingly as I had just done with the normal layers.
I have now tested the instance of this button in the prototype player and both Hover and Press did NOT WORK.

100% not your fault. It’s broken. The good news is that I recently reported this exact bug and our engineers are working on a fix as we speak.

[wwwedran (Vedran Židanik)]

I also tried scrolling by dragging the scrollable area and then realized it is not working and it should be scrolled with trackpad or mouse wheel. However, this kinda makes sense as it is an expected behavior on a desktop computer. The problem is if we are designing mobile app, then the preview feels like an app and our brains expect that it can be dragged as you would with a finger on a real device.

I’m not sure what would be the best solution here. Maybe it is ok to keep it as is since it is a natural behavior on a desktop computer, and if you need a realistic simulation you can preview it on a mobile device using Sketch app where dragging is a natural behavior.

[everydayslang (Stephen)]

Amazing, just set up a hotkey for that (⌥⌘⮐). This is going to be life changing

[freddiewrites (Freddie Harrison)]

Hey everyone We’ve just released a beta update with some fixes to a number of the issues you’ve come up against with the new prototyping features in particular. Thanks again for trying this one out and sharing all your feedback here — good and bad — we really appreciate it.

[freddiewrites (Freddie Harrison)]

Hey folks — another day, another beta update! This one focuses on a few things:

• Improving support for using hover and press effects with nested Symbol instances (so you can nest your regular, pressed and hover Symbols within a single Symbol and insert that instance wherever you want to use it)
• Making some Command Bar actions work more predictably and consistently
• Performance improvements in specific scenarios (such as when a save is in progress, or using the Make Grid handle to create a large grid of layers)
• Speeding things up when you’re dragging large images (or image masks) around the Canvas

We’re also continuously making improvements to how the prototype player handles the new hover/press/toggle effects and scrolling areas. We’ll soon release a new beta of the iOS app so you can try these new prototyping features out there, too.

Thanks again for all the feedback!

[nico-v]

Yay! Really excited about v100! Happy to see all the prototype updates. I’ve been hoping for functionality like this for a while. Command bar and Minimap (in particular) are nice additions too. Looking forward to giving them a try. Great work!

[freddiewrites (Freddie Harrison)]

One final update from me this week (I promise)

We’ve just sent out a fresh TestFlight build for our iOS app that adds support for all the new prototyping features in v100. So if you want to test out how they work when previewing prototypes on your iPhone or iPad, now you can!

If you’re not already on the TestFlight, you can grab it here: https://testflight.apple.com/join/dw2feMH8

For anyone on the TestFlight, the update should be ready and waiting for you.

Have a great weekend everyone!

[wwwedran (Vedran Židanik)]

Hello! Nice couple of updates in the latest betas!

I have a few more comments you can consider:

• Elements in the scrollable area should be “visible” to other objects on the artboard when aligning, currently they are not so you can’t align elements outside of the scrollable area to the elements inside the scrollable area

• Scrollable area should have settings for the paddings and margins, currently it takes too much work to adjust it. It should also convert the group to horizontal or vertical stack. In most cases this is what we need, you can turn it off if you don’t need it. Here’s an example of the settings where we can adjust left and right inner padding (or top and bottom if it is verticall scroll) and margin between elements. Those can be prefilled using values from the design mode and then can be adjusted in the prototype mode if needed.
  

  

• Thinking about the scrollable area settings, it might also make sense to add these settings to the layout settings. Once you set the group to use horizontal or vertical layout there could be an option to add margin value, let’s say 16px, and it would automatically add that margin between elements in the group. Layout and scrollable area actually have some things in common and both could have a more advanced settings, so we don’t have to manually adjust so much. It is especially difficult to use at the moment since Tidy is not working well and it even has some bugs in scrollable group, when duplicating objects it doesn’t add margin automatically as expected.

• Handles on the mini map might not be the best solution as it looks like something is on the canvas, I tried to search what it is on the canvas only to realize those are handles since everything is so tiny. Also, mini map should probably move to all angles of the window, not just the bottom ones. Double-click on the edge could move it to the desired edge without the need to drag.
  

• I noticed that for press and hover effects there seems to be no option to not show hover effect while button is pressed. Attached is the video where desired behavior would be to only see pressed state (blue transparent button) when pressed but it seems to show red underneath which is hover state. This is a problem if we want to use semi transparent buttons.
  

[freddiewrites (Freddie Harrison)]

Thanks @wwwedran! I won’t cover off all of your feedback here (although it’s all helpful and welcome, thank you!) as other members of the team are watching this thread and will pick stuff up too. But with:

Handles on the mini map might not be the best solution as it looks like something is on the canvas, I tried to search what it is on the canvas only to realize those are handles since everything is so tiny. Also, mini map should probably move to all angles of the window, not just the bottom ones. Double-click on the edge could move it to the desired edge without the need to drag.

I’ve flagged this one with the team as there appears to be a bug where those handles stay visible even when you’re not hovering on the Minimap (which shouldn’t be the case), which doesn’t help with the problem you’re describing! Whether we’ll change the behavior for this release, I don’t know and can’t promise (although again, it’s good feedback!), but hopefully we can get that bug fixed and it helps a little.

I’ve also asked if we can do anything to improve the contrast of the Minimap in dark mode, as it is a bit harder to tell what is on the Minimap vs what is on the Canvas in dark mode.

Thanks again for trying all of this out and sharing your thoughts!

[damiandmowski]

Just wanted to drop a quick note about my experience with the new beta Version 100 (179833). I’ve recently made the switch from version 99.1, and I must say, the improvements are pretty noticeable, especially when handling those hefty files. Everything feels much smoother and faster, and thankfully, I haven’t encountered any of those pesky errors from version 99.5. It’s only been a few hours, but I’m really liking what I’m seeing so far!

[freddiewrites (Freddie Harrison)]

Thank you @damiandmowski There’s a team specifically working on these performance improvements right now, so I’ve shared your comments with them, I’m sure they’ll appreciate it.

[wwwedran (Vedran Židanik)]

Appreciate the answer. That bug with Minimap may also improve things!

[freddiewrites (Freddie Harrison)]

We should have a fix for this in an upcoming beta, either later this week or early next.

EDIT: It’s already happened. This aged well