The Team Behind 4.8.0 and the Layers Tab Redesign

Hey Vectornators!

Unless you’ve been hiding under a rock recently, you probably heard about our latest (and arguably our greatest) update: 4.8.0.

This round of new features and changes is all about revolutionizing your workflow. 4.8.0 includes massive improvements to the Layers Tab, groups, and masks, making designing with Vectornator extremely efficient, and most importantly—fun!

After gathering your feedback, our talented product team spent several months bringing the 4.8.0 features to life. We want to help you keep your documents organized, so we completely redesigned the Layers Tab to include a number of new and improved functionalities.

Inspired by a typical file manager like Finder, groups now appear as folders in the Layers Tab. We also created nested groups, which act as infinite subgroups that can be expanded or collapsed with a tap or click. We also introduced Multi-Select Mode for selecting multiple elements at once, and you can also finally drag and drop elements between artboards, groups, or layers without interrupting your creative flow.

These groups and subgroups are perfect for keeping complex artworks nice and tidy, but what about when you need to find a specific element? We made navigation easy, too.

Anything you click on in your document will automatically be highlighted in blue in the Layers Tab so you can easily find it. Plus, the new Click-Through Mode allows you to select and edit any object on your canvas, regardless of its parent group or layer.

Masks leveled up too. When you select multiple elements and create a mask, the bottom shape will automatically become the mask. You can edit all objects inside the mask, and you can even create nested masks inside a group!

We hope you’ll agree that 4.8.0 is a massive accomplishment for our team and a huge improvement for our users.

We interviewed the team behind the update—Ralph, Felix, and Pavlo—to learn more about how they made it happen.

What were your main goals when redesigning the Layers Tab?

Ralph: Our main goal was to make browsing and managing the contents of your document more seamless than ever. We learned that a great layer tab experience should resemble a powerful file manager, where layers and groups work like folders and objects live in harmony across artboards.

Pavlo: We wanted to focus on unifying logic for Layers and Groups so users can build nested hierarchies of any level. We decided to completely restructure and improved the interface to make it more solid, include new mask functionalities, and provide flawless results for any rendering case. Throughout the process, we tested our ideas as much as possible to minimize possible missed bugs and provide the best possible result to our users.

What are the main differences between the old Layers Tab and the new one?

Felix: The look and feel has turned more “mature,” from a previously very "iOSish" design to a more modern iPadOS/macOS design. This was especially needed on macOS where a more native design was missing and kind of an eyesore.

Pavlo: Previously, masks were working in a completely different way with limited editing functionality. Groups weren’t expandable and with limited editing functionality even inside Isolated Mode. And selection rendering was based on flat structure and was not supporting nested hierarchies. With the new update, we fixed all of these issues.

Where did the concept for the new UI come from?

Ralph: The new Layers Tab UI was tailored for each platform (iOS, iPadOS, and macOS) and designed to enable powerful cross-layer and artboard editing where previously, editing was limited to a single artboard. Now, users can freely drag and drop objects across their document. We added indentation to give a sense of your document’s hierarchy, this means that the UI indicates which objects are contained inside their parent (group, layer, artboard).

Can you tell us a little bit about how you redesigned groups and how you hope our users will benefit from the changes?

Ralph: The grouping experience was redesigned to bring full editing functionality to them. This means, when you double tap to isolate a group, you can draw and edit the objects of the group without interruption. These groups work like folders that are expandable in the Layers Tab. You can add and remove objects from any group and create nested groups and this was previously not possible with the old grouping feature.

Felix: Previously our users were not able to inspect groups or have deeper hierarchies in the document navigator (Layers tab). Having this ability now gives them more freedom on how to structure their projects.

Pavlo: Groups are now more powerful. They’re expandable so users can select and edit elements directly. Isolate State mode now has no limitations so users can work inside a group same way as inside a layer. Nested hierarchies are easy to build and use that gives our users more freedom regarding document structure. Drag-n-drop finally works nice and easy.

Do you have any tips for how people can use masks with 4.8.0?

Ralph: You can add a mask to the root of your layer to mask all the content you draw on that layer. This can be quite powerful if combined with the isolate layer feature. You can also create nested masks by marking multiple objects inside a group as a mask.

View this post on Instagram

A post shared by Vectornator (@vectornator)

How did you go about developing the new Click-Through feature?

Ralph: Sometimes, groups and layers can stand in the way of quickly selecting the object you’re looking for. This means that you’ll have to tap numerous times in order to reach the object. With Click-Through Mode, you can hold CMD and tap on your object to instantly select it. For touch users, this is available in the selection tool by enabling the Click-Through Mode.

What were the most challenging aspects of creating these changes?

Ralph: The layers project was more like an iceberg. It had so many underground changes to our app that needed to happen in order to ship it. It was quite a challenge to nail all the right behaviors, functions, and features for our users and to keep all the existing functionality stable and intact.

Felix: Unfortunately, Apple. Building on top of existing components provided with UIKit has cost us a lot of time. We found bugs and weird behavior in multiple places like, drag and drop, touch handling, reload logic, animations, etc. Fixing or working around those issues was not easy.

Pavlo: Masks rendering for part of the drawing. When whole document is rendered, everything is okay. However, for single (several) element(s) rendering, it should still respect all masks above in hierarchy that is clipping this element(s). And it should work in all possible cases, hierarchies, element types, tools, etc.

There are so many amazing improvements with 4.8.0, but which one is your favorite and why?

Ralph: Swiping down with two fingers to multi-select feels magical, so I must say Multi-Selection and drag and drop are my favorite improvements in 4.8.0.

Felix: I’m most happy about a small change that improves marquee tool performance.

Pavlo: My favorite functionality is live mask rendering because I just love so see how everything is clipping when you select a mask and start moving it.

Thanks guys! Find out more about the changing we made with 4.8.0 in our previous blog. And if you haven't downloaded the latest version of Vectornator yet, what are you waiting for?