Notes and 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.

Types of 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, Pointer, 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.

Notes- and Annotations - Annotation Types

Sticky Notes are great for brainstorming, whiteboard, planning, or creating business models:

Notes- and Annotations - Kanban Board

They are also ideal tools for annotating basic UI, page, or business rules – or for making suggestions:

Notes- and Annotations - Notes

Find and add 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, Pointer, Bracket, Speech 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.

At the bottom of the dropdown, you’ll also find an Image icon that allows you to quickly upload images from your desktop.

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.

Format and color 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

Color Presets

Our annotation stencils have their own set of color presets – in both pastel and vibrant colors.

  • Click on the stencils to display and choose from the color presets.
  • Use the Shades button to choose a color theme for your annotation.
  • Turn the Sticky Behavior on and off with the Stickiness button.

Adjust Tail

The Callout, Pointer, Bracket, Thought and Speech Bubbles have custom handles that let you quickly adjust their tail’s width and length. You can drag the tail in any direction and use the Sticky Behavior to attach it to other objects on the page.

The Callout stencil also has its own Callout Settings section in the Format Panel that allows you to set both the Radius and the Tail Width numerically.

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.

Their Sticky Behavior can be toggled on and off from either the Format Panel or the Color Preset toolbar.

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 data in note format

The Paste in Format feature makes it easy to turn your lists and data into instantly populated whiteboards:

  1. Copy a list or CSV from your desktop
  2. Use Ctrl/Cmd + V to paste that data onto your Moqups page
  3. Click the Sticky Notes button on the Pick a Format modal