Markup is a special kind of component in the UI Library that is used for adding annotations, comments, and explanatory notes.
Commonly used Markup items include: Arrow / Line, Callout, Sticky Note, Red X, and Curly Braces. The screenshot below shows the Markup button panel selected in the UI Library, and markup items on the page.
Toggling Markup On and Off #
When you're editing your mockups, you will sometimes want to see what the mockup looks like with Markup off. You can do this by using the Show/Hide Markup toggle button in the upper right corner of the editor to the left of the Presentation Mode button.
The screenshot below shows the previous page with Markup off, and the toggle button is displayed in the corner.
Markup Toggling with Keyboard Shortcuts #
There are keyboard shortcuts for toggling visibility on and off.
Press CTRL+K on Windows (CMD+K on Mac) to toggle markup on and off.
In Full Screen presentation mode you can just press the "K" key.
Making Items Markup and Non-Markup #
Sometimes you will want Markup items to be treated as non-markup or vice-versa. For example, you could use the iPhone control as a guide for designing a mobile screen, but you might want to hide the iPhone itself when you export it and view it on a mobile device.
If you want to make a Markup item Non-Markup, right click on the component and select the "Do Not Treat as Markup" option in the context menu. This will allow the component to be visible when the Markup visibility toggle is set to on or off.
You can use this "Treat As Markup / Do Not Treat As Markup" feature on any component. If you right-click on a regular component, you can make it behave like Markup by selecting "Treat as Markup." It will be hidden when you toggle Markup visibility off.
The video below demonstrates this process:
Exporting Markup to PNG and PDF #
If you want your Markup components to appear or be hidden in your exported PNG images or your Exported PDF, simply toggle the Markup visibility as shown above, and Export.