When you’re working on a design with several elements, you’ll want to easily locate them to make quick edits.
With our layers feature, you’ll be able to do so regardless if it’s located behind other elements, part of a group, or hidden. It’s as easy as that.
A layer is created when an element is added to the editor. It constitutes a new layer and is listed in the left panel immediately. Take a look at the image below. All the layers are located to the left of the editor and under the libraries menu:
When selected, you’ll be able to make changes to them with no problem. So let’s take a closer look at the possible changes below.
Deleting a layer is fairly simple. You can remove the elementeither directly from the editor or the panel. Just click the layer and remove it by pressing delete on your keyboard.
Similarly, with copying and pasting layers – you can copy and paste the layer in the editor or panel by using the shortcut keys. Cmd+C for copy, Cmd+V for paste on Mac (or Ctrl+C, Ctrl+V for Windows)
You don’t need to use any shortcuts here. In the layers panel, simply drag and drop the layer in the desired area. Even use the order feature in the right panel to move layers front, back, forward, or behind. This is a great way to move layers when the layers are hidden.
Need a quicker access to the order feature? Not a problem. When an element is selected on the canvas, you can right click and select “arrange” to move the element forward, behind, etc.
Grouping layers is a useful way to keep the elements organized. When elements are grouped in the editor, you will see them as one layer in the panel. And the group will be marked with a folder icon, so you can easily find it. If you click on the small arrow next to it, you will see all the elements that the group consists of.
You can even add/remove elements between groups. Simply open the group by clicking on the folder icon, then drag and drop the elements into the desired area.
What’s more is that you can now nest groups! This is helpful when you want to keep the panel neat or combine other parts of the design.
Obviously, we want elements to stay in one place, especially when they create the bottom layer. Select the element(s) and either click the padlock icon in the right panel or Cmd +K to lock them.
People love playing with special effects and we know it! That’s why we improved the option to hide layers. On the left side of the layer’s name, there’s a small eye icon. By clicking it, the layer will hide and won’t be selectable through the canvas. When it’s hidden, it is only accessible through the layers panel.
Another way to make an element hidden is to set its opacity to 0% instead of using the small eye icon. This is a great workaround so that elements will be transparent but still selectable if needed.
Change the layer’s name
In case there’re more complex wireframes or prototypes, it could be slightly difficult to manage all layers. Nevertheless, changing their names is quite useful in this situation. After double-clicking the layer’s name, you can write anything you find suitable.
To continue the previous thread, another tool to help with keeping track of layers is Search.
You can look for your layers by entering their names. If the layer is a part of a group, you will see it nested in this particular group in the panel.
Detachable Layers panel
Another useful way to use the layers feature is to detach it from the panel. When clicking on the detach icon, it will allow you to view the layers panel on the editor instead of the left panel. Viewing the layer panel aside the asset panel will allow you to monitor the layer’s changes more closely.
That’s it for now. If you feel that you have any questions after reading this short review, send us an email at firstname.lastname@example.org and we’ll assist you for sure!