FAQ Submit a request Log in
  1. Moqups Help Center
  2. Working with Moqups
  3. Stencils

Articles in this section

    Notes & Annotations

    Also in this section

    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.

    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.

    01._Annotations_-_Callout__Bracket__Speech_Bubble_Thought_Bubble.png

    The Callout stencil can also be used to mock up UI elements like tooltips and popovers menus:

    02._Annotations_-_Callout.png

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

    03._Annotations_-_Notes_on_Kanban_Board.png

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

    04._Annotations_-_Notes.png

    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.

    05._NEW_Annotations_-_Add_Annotation__1_.gif

    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.

    06._NEW_Smart_Add_Notes.gif

    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

    06._Annotations_-_Format_from_Format_Panel.gif

    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

    07._NEW_Annotations_-_Rich_Text_Edit.gif

    Sticky Note Color

    Our Sticky Note stencil has its own set of color presets – in both pastel and vibrant colors – that mimic the palette of physical notes. This makes sticky notes instantly recognizable on any design.
    • 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.
    08._Annotations_-_Note_Colour.gif

    Adjust Tail

    The Callout, 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.
     
    09._Annotations_-_Adjust_Tail.gif
    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. 

    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.

    10._Annotations_-_Sticky_Behaviour.gif

    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:

    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