Diagram Layers in UI Wireframe Design

Add New Layer for Annotations

User interface diagrams often contain numerous elements that represent individual user controls. To simplify editing and prevent accidental alterations, it is advisable to separate the design from the annotations into distinct layers. This separation can be achieved using the Layers sidebar. By clicking the "Add New Layer" button, we can introduce a new, independent layer.

Disable Default Layer with Wireframe

To avoid unintended changes to the wireframe while annotating, we should disable the wireframe's layer. This is done by toggling the "Enable/Disable Layer" button.

Select Description Layer

After disabling the Default layer, we are free to modify the recently added description layer. We select this layer in the Layers sidebar to enable it for editing.

Annotate Wireframe

With the desired layer active, we utilize the Rounded Rectangle tool from the Drawing group to outline sections of our design. A semi-transparent style is applied to keep the underlying elements visible. Then, we add the necessary descriptions by clicking on the "Add Comment" button in the context bar and entering the text in the edit box that appears.

It is important to clearly define and annotate each section within the window.

Show/Hide Layer with Annotations

Finally, managing the visibility of our annotations is made easy by the layered structure. We can toggle visibility with the "Show/Hide Layer" button, facilitating a smooth transition between different views.