Hiding and Locking Elements

Working with UI elements

Overview

Why hide or lock elements?

When working on a screen, hiding and locking can be useful if you want to get elements out of your way. While an element is locked or hidden, you won't be able to select or edit it. Also, you may want to totally hide something from the user without removing it from the screen. You can hide or show elements in response to user action as part of an interaction.

Different ways to hide or lock elements

To hide/lock an element, you can do one of the following:

(a-1) Using Elements and Layers pane

  1. Go to the Elements and Layers panel and find the element.

  2. Click on the corresponding icon.

    • Click on the eye icon to hide/show the element.

      The icon shows an open/closed eye.

    • Click on the padlock icon to lock/unlock the element.

      The icon shows an unlocked/locked padlock.

(a-2) Using element's Properties Panel

  1. Click on the element to open the Properties Panel.

  2. Click on the corresponding icon.

    • Click on the eye icon to hide an element.
    • Click on the padlock icon to lock an element.

    The context pane closes.

You can use the context pane only to hide/lock an element, not to show/unlock it. In order to show/unlock it, you have to either right-click as follows, or use the Elements and Layers panel as shown above.

(a-3) Using the Elements Below Cursor panel

  1. Right click on the element to display the Elements Below Cursor panel.

  2. Click on the corresponding icon.

    • Click the eye icon to hide/show the element.
    • Click the padlock icon to lock/unlock the element.

Learn More

Here are some suggested topics: