Sketch 65 — Rock & Scroll!

Thalion
Design + Sketch
Published in
4 min readApr 28, 2020

I hope you are fine folks! If you work remotely, it is an excellent occasion to learn new featured in our favorite design tools. The latest update of Sketch has been just released, so let’s get most of the fresh improvements!

New in Sketch 65

Here is a summary of the new things in Sketch:

  • New Scroll Effects in Prototypes — Now, you can use a new scroll option and mimic more app UI elements behavior like overlays. This may sound like a small thing, but people using prototypes will feel a huge difference in interactions!
  • Sketch Mirror update — now iOS app supports scroll behavior. Download it from the Apple App Store!
  • Cloud Projects without limits — you may create as many projects in the cloud as you want. It was previously limited to 20 items.
  • New Export option — Groups may now set the export option to “Trim Transparent Pixels.” Useful!
  • Speed optimizations — working with Symbols should be much faster now!

How to use Scroll in Sketch Prototypes?

The scrolling feature is included in Sketch prototypes for a while if you didn’t use it earlier. Things you have to know is that if you extend standard artboard (like the one for iPhone 11 Pro), you may scroll its content.

What’s more, you can mimic some sticky elements like Navigation Bar and Tab Bar. To make them work as intended, select the UI Component and check “Fix position when scrolling” in the Inspector Panel (the one on the right). Thanks, to this you will get more natural behavior of the prototype.

Simple scrolling in Sketch

Important: To have scrolling enabled you have to use artboard from preset! This may be any from predefined artboards or the custom one you saved. Start with preset and then adjust its height for scrolling — that’s it!

If you would like to know more about prototyping, here is the guide from Sketch documentation.

New Scroll Option — how to use it?

In Sketch 65, we got a new feature that allows us to have already scrolled elements on different artboards. It is placed in the Inspector Panel of selected element and is called “Maintain scroll position after click.” It sounds like a small improvement but makes a difference in some cases.

Maintain scroll position after click

You can use a new feature in practice in the following cases:

  • Overflow menus — When the list or grid includes an overflow menu, it will appear in the right place, even after scroll!
  • Popups — You design will look more natural when the popup appears, the scrolled elements in the background will remain on the position
  • Overlays — All kinds of overlay cards that appear on top of the list will behave more naturally.
  • Side menus — While this elements expands from the side, the scrolled content on the side may be still visible and remain scrolled!
Popups appear, but list remain scrolled!

Just one more feature…

Now you can also export you assets with one click, through Cloud! 😎 Now Cloud Inspector is a real developer handoff. Read more in official Sketch documentation.

Want to learn more recent Sketch features?

If you didn’t have time to master improvements from Sketch 64, you can do this right now! Learning all the best practices of the refreshed Components Menu is a must. You may also want to know how to use Tint in practice, so here are tutorials for you:

To conclude

Maintaining the scroll position is a nice improvement. I hope that future versions of Sketch will also include some nicely auto-animated transition, so the prototypes will become super powerful!

What do you think of Sketch 65?

By the way…

If you plan to start a new project or you would like to organize your UI Library — do not waste your time creating everything from scratch. Feel free to use mentioned above Design System Kit called Prime. It is All-In-One UI Design Starter Kit for Sketch. See Prime in action.

🎁 Now, you can get 10% Off for The Kit with MEDIUM10 offer code!

You can also Create User Flows faster in Sketch — With SQUID you can create User Flows directly in Sketch the sketch file with your artboards. Everything may be done within a couple of clicks. See how it works.

Thanks for reading!

Looking for more Sketch tips & tricks? Follow me:

--

--