Text Stencils
Moqups has a wide range of text-based stencils that take one of two forms:
- Single-line text stencils that permit only one line of text, and do not accommodate paragraph returns. These include the Label, Heading, and Text input stencils, and are perfect for headlines, taglines, subheads, titles, and alerts.
- Multi-line text stencils allow for longer text, paragraph returns, bullet points, and numbered lists. This larger group includes Paragraph, Note and Text Area – as well as stencils in both the Callouts & Annotations and Diagram categories.
The variety and flexibility of these stencils means that content writing and design don’t have to happen on different apps – or even on different pages. Copywriters can compose directly on wireframes and mockups – and find the sweet spot where content and form inspire one another.
Text-based stencils are found in the Stencils Library and, just like all stencils, they are added to the page, as objects, by drag and drop or a double-click.
If you decide that you want a solid background behind your text, the Text area and Text input stencils allow you to add both fill and stroke colors.
Additionally, if you paste copied text directly on the page, Moqups will automatically place it within a Paragraph stencil – just make sure to click on an empty space on the page before you paste!
In this article, we’ll show you how to format text using both the Quick Format Text Toolbar and the Advanced Text Formatting section of the Format Panel. We’ll also explain how to search the content of your text stencils, and to use our character counter.
Quick Format Text Toolbar
When you select text within an object – 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 bullets and numbered lists
- Add links
- Clear formatting
- Choose from quick color presets
- Highlight text
- Display the character counter by clicking the Show stats button
Select a text-based stencil and hit the Enter/Return key to automatically select all text. This is a quick way to edit, or cut and paste text.
Advanced Formatting Text Section
For advanced formatting, go to the Text Section of the Format Panel. Here, you can choose the Font family, Weight, Color, Size, Style – and you can set both the Vertical and Horizontal Alignment.
The most recently used Project Fonts display at the top of the Font & Family dropdown.
Clicking the Gear Icon (to the right of the Vertical Alignment buttons) expands the Text Section so you can further refine Line height, Letter spacing, All caps/Small caps, and Auto or Fixed Sizing for stencil Width and Height.
Whenever the text within a stencil exceeds its boundaries, you'll see a [+] icon on its bottom-center selection handle. Double-clicking this icon will adjust the height of the stencil so that it fits the text exactly.
- When you apply Auto Width Sizing to multi-line text, the stencil will adjust to the longest line.
- With single-line stencils, auto sizing will adjust to the full character count of the included text; you cannot add paragraph returns to a single-line stencil.
Text Search
You can search the content of a project’s objects via keyboard shortcut (CMD/CTRL+Shift+F) or by selecting the Find text in objects option from the right-click Context Menu.
When searching, you can toggle between finding text on the Current Page or within the Entire Project.
Character Counter
There are lots of circumstances that require writing content to strict character or word limits. We’ve made that task a little bit easier by including a character counter in the Quick Format toolbar.
To use the Character Counter:
- Double-click on any text-based stencil to open the Quick Format toolbar
- Click the Show stats button to show or hide the counter
- Click on the display to switch between words and characters.
- Selecting all, or a portion, of the text will give you the current count
- Selecting the entire stencil, but deselecting the text, provides a running count as you type.
