Specific object formatting
In addition to the universal formatting options, the following types of objects also have their own set of specific controls: Text-Based Stencils, Flowchart Diagram Stencils, Smart Shapes, Charts, Grids and Tables, Images, and Icons.
Some of these objects have specific controls that open automatically in the Format Panel when you click on the object.
Others, like Images and Icons, have options that can be controlled directly on the object itself.
This article will explain each of these object types, and show you how to format them.
Text-Based stencils allow you to add written content to your designs. There are two types of text stencils:
- Multi-line text stencils – such as the Paragraph, Text Area, and Note – allow for paragraph returns, bullet points, and numbered lists.
- Single-line text stencils – such as the Label, Heading, and Text input – allow only one line of text.
If you want a solid background behind your text, the Text area and Text input stencils will allow you to add fill and stroke colors.
When you paste text directly onto the page, Moqups will automatically place that text within a Paragraph stencil – just make sure to click on an empty space on the page before you paste!
To format text stencils, you can use either the Quick or Advanced formatting tools:
You can quick-format text within stencils by double-clicking on the text area. The Quick-Format Text Window will pop up above the stencil, with the following options: Bold, Italics, Underline, Strike-through, Numbered and Bulleted lists, Link and Clear formatting.
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.
Click the Gear Icon (to the right of the Vertical Alignment buttons) to expand the Text Section. Here you can choose Line height, Letter spacing, All caps/Small caps, and Auto or Fixed Sizing for stencil Width and Height.
- 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.
Flowchart Diagram Stencils and Connectors
With Flowchart Diagram stencils, you can create – and improvise – any kind of diagram. These stencils have their own dedicated “Flowchart Diagrams” category in the Stencils Panel.
Flowchart Diagram stencils are formatted like other stencils but have two special features, Replace and Diagram Extenders, explained further below.
Flowchart stencils are designed to work – and to be styled – in combination with Diagram Connectors. Connectors can also be used to connect any Moqups object, stencil or image – even one of your own templates! After you style a connector, any subsequent connector you create will automatically adopt that style – until you change it again.
Using Diagram Connectors
To connect any two objects on the page, enter Diagram Mode by clicking the Diagram button in the top-toolbar (or press ‘D’) and you’ll immediately see groups of pale blue dots (connecting points) appear around the edges of the objects on the page. You can connect to one of these dots – or to anywhere else on the object’s edge.
To draw a line between any two objects, click on one of these dots, and drag the cursor towards the second object. As the line approaches a connecting point, it will snap and “stick” – showing that it’s attached. And, it will remain connected, even as you move, resize or rotate objects!
To exit Diagramming mode, just click anywhere on an empty surface on the page (or hit ‘D’ or Esc).
Formatting Diagram Connectors
Setting the Connector Style Proactively:
You can set the default style of connectors, proactively, just as you would with any other object – with the Default Styles options in the Format Panel. The Default Styles categories, including the Connector category, appear in both Edit and Diagram mode when no object has been selected.
Here, you can set your connector’s color, width, and stroke-style, pick from a range of line-styles (orthogonal, orthogonal rounded, curved or straight), and choose your start-and-end markers. Unless you make another change, all the connectors you draw going forward, will adopt these default style settings.
Formatting Connectors Retroactively:
In Edit Mode, you can format connectors, retroactively, either individually, or as a selection. Clicking on any connector will open the Connector Style section of the Format Panel.
When you select a single connector, that connector’s name is displayed at the top of the panel. This makes it easy to locate and identify that connector in the Outline Panel.
When you select multiple connectors, the panel displays the number of connectors in that group, in order to help you confirm your selection before applying any style changes or transformations.Just as in Diagram Mode, you can set your connector color, width, and stroke-style, pick from a range of line-styles (orthogonal, orthogonal rounded, curved or straight), and choose your start-and-end markers. But, in Edit Mode, you have the additional options of adjusting connector opacity, and add both Drop Shadow and Blur.
Replace Flowchart Diagram Stencils
Smart Shapes are simple stencils that have specific formatting capabilities. They include the Polygon, Star, Triangle, Arrow, and Wedge stencils. Each Smart Shape stencil has Custom Handles that help you get the exact shape you need – without ever taking your hand off the mouse.
You’ll find Smart Shapes in the Stencil Library under the Shapes category. Once you’ve added it to the page, just click on the tiny blue dot(s), and drag – in a variety of directions – to quickly and intuitively change the properties of the shape. You can make a variety of beautiful shapes without the need for sliders, complicated bezier curves, or complex drawing tools. Just click and drag.
Callout and Note Stencils
Callouts are great for mocking up UI elements like tooltips and popovers menus. However, used in combination with Note stencils, they can also play an essential part in task, product, and project management – as a way of annotating ongoing designs.
For instance, your team might use...
- Notes to explain and delineate basic page and UI rules
- Callouts to point towards actionable items – areas of the page that need the team’s attention
- Comments for ongoing conversations about your project’s requirements and specifications
The Note stencil is a text-based stencil and can be formatted in much the same way, except for color selection. It has its own special Note Style section in the Format Panel that lets you select from a preset color palette that mimics sticky-notes – making Notes instantly recognizable on any design.
The Callout stencil is both a text-based and a Smart Shape stencil. As such, it can be styled in the Format Panel and then, using the Custom Handle, your can quickly expand the width of its ‘tail’, and then drag it to any length and in any direction.
Grids and Tables
Syntax-based stencils take the form of tables, lists and menus. You’ll find them in the Common, Navigation, and Legacy categories.
Syntax-based stencils come with a default ‘syntax’ text that controls the formatting options. When you customize that text, the content within each cell, as well as the number of columns, rows, and list items will adjust automatically.
The Grid Style section of the Format Panel lets you choose Grid Options for header and row coloring, and for the addition of a Sortable drop-down arrow in the header. You can also choose to make Cell Borders visible or invisible, and apply customizable Cell Padding.
The Grid stencil also has its own unique Fills and Strokes section where you can choose colors for headers and rows.
Images (Crop & Background Removal)
There are two features that are unique to Images: Crop and Background Removal. Clicking on an image will bring up the popover-toolbar for both Crop & Background Removal.
Cropping is non-destructive, meaning that, after cropping an image, you can always go back and re-crop it. This is handy when you want to use the same image repeatedly, but focus on different areas of interest within that image.
Your Image Library is account based, so you can reuse images on multiple projects within your account. This is particularly useful when working with logos and branded design elements, or with images that have multiple points of interest.
To crop images:
- Select an image to display the popover-toolbar for Crop & Background Removal
- Click on the Crop Image icon
- A black border will appear around the image
- Use the slider to zoom in and out
- Click inside the black border and use the hand-cursor to adjust the placement of the crop-window
- Use the black resize handles to crop your image
- To apply the crop, click outside the image or click ‘Done’
- ‘Reset’ returns the image to original
Background Removal is particularly useful during the creation of preliminary mockups, when you cobble together images, logos, and other kinds of visual references. Even though these elements are just temporary stand-ins for subsequent, more polished design elements, they still have to be slick and professional enough to be persuasive.
Inevitably that means cropping, stacking, adjusting, and grouping these assets to create a credible draft. You may need to quickly remove the background color from a logo, eliminate a distracting visual artifact, or see whether the product shots look better without their background. To remove a background from an image:
- Select an image to display the popover-toolbar for Crop & Background Removal.
- Enter Background Removal mode by clicking on the Magic-Wand icon.
- Click on the area of an image to remove a solid color, or click and drag to remove a color range.
- To apply the changes, click outside the image or click ‘Done’.
- ‘Reset’ returns the image to original.
- To save the altered image, right-click and select ‘Add to library’ option from the Context Menu.
When you are tweaking your design, you may need to swap out an icon for a preferable one – but want to avoid the hassle of resizing and styling the new, replacement icon. That’s where Replace Icons comes in handy:
- Locate your desired replacement icon in the Icon Library
- Drag it to the page, and drop it on the Blue Dot that appears inside the original icon
- The new icon will replace the old one – and inherit both its size and style