Notes & Annotations
Our flexible Notes & Annotation stencils have all kinds of uses:
- They can be incorporated into all kinds of wireframes, mockups, and designs.
- Because they are sticky by default – and can be attached to any object – they play an essential role in task, product, and project management.
- They work alongside Comments, in ongoing projects, as a way of providing detailed feedback.
- They are powerful whiteboarding tools, especially when used in combination with our collection of premade, Business Strategy templates and models.
In this article, we’ll show you the types of annotations available in our library, and how to format them on the page.
In this article
- Types of Annotations
- Find & Add Annotations
- Smart Add Buttons for Stickies
- Format & Color Annotations
- Paste in Format
Types of Notes & Annotations
All the annotation stencils are designed to be as versatile as possible, so your team can deploy them in all kinds of ways. Here are just a few suggestions:
Callout, Bracket, Speech Bubble and Thought Bubble stencils, can be used for quick annotation – and to point towards actionable items or areas of the page that need the team’s attention.
The Callout stencil can also be used to mock up UI elements like tooltips and popovers menus:
Sticky Notes are great for brainstorming, whiteboard, planning, or creating business models:
They are also ideal tools for annotating basic UI, page, or business rules – or for making suggestions:
Finding and adding notes and annotations
The quickest way to add annotations to your page is with the Note Button in the Top Toolbar. Just click on the button, choose a stencil from the dropdown, and it will appear on the page.
You’ll also find the Callout, Bracket, Speech Bubble and Thought Bubble stencils in the Callouts & Annotations category of the Stencils Library. Just like all stencils in the library, they can be added to the page, as objects, by single click or drag and drop.
Smart Add buttons for Sticky Notes
You can use our Sticky Notes’ Smart Add buttons to quickly populate an empty digital whiteboard, or keep up with the flow of ideas during brainstorming sessions. Just as with the extender arrows on diagram stencils, select the Sticky stencil and click on any of the four blue arrows to add new notes in that direction.
Formatting and coloring notes and annotations
Annotation stencils are text stencils and, with a couple of unique exceptions, are formatted the same way.
Format Panel
In the Format Panel, you can set their:
- Coordinates and rotation
- Font family and style
- Alignment
- Line spacing, line height and letter spacing
- Padding
- Fill and stroke colors and style
- Opacity, drop shadow, and blur
Quick Format Text Toolbar
When you select text within an annotation – or double-click on the text area – the Quick-Format Text Toolbar will pop up, allowing you to:
- Apply basic font styling (Bold, Italics, Underline and Strike-Through)
- Create checklists, numbered lists, and bullets
- Add links
- Clear formatting
- Choose from quick font color presets
- Highlight text
- Display the character counter by clicking the Show stats button
Sticky Note Color
- Click on the stencils to display and choose from the color presets.
- Use the Shades button to choose a color theme for your Sticky Notes.
- Turn the Sticky Behaviour on and off with the Stickiness button.
Adjust Tail
Sticky Behavior
All stencils in the Callouts & Annotations category have both Normal and Sticky modes – allowing them to either be attached to an object, or to float freely.
Sticky Behavior can be toggled on and off in the Format Panel.
To attach an annotation to any object, just drag the tail onto that object, and release when you see the orange frame.
Paste lists and CSV data in sticky note format
The Paste in Format feature makes it easy to turn your lists and data into instantly populated whiteboards:
- Copy a list or CSV from your desktop
- Use Ctrl/Cmd +V to paste that data onto your Moqups page
- Click the Sticky Notes button on the Pick a Format modal