Format and style stencils
Once design elements – stencils, templates, images and icons – are added to the page, they are called Objects.
All objects, including Stencils, are styled and customized in the Format Panel – and they share many of the same formatting controls. Once you have learned to format stencils, formatting templates, images and icons will be a breeze.
In this article, we’ll introduce you to the Format Panel, and show you how to customize stencils to create your design.
Go to the Right Sidebar and click the Format Tab. The tab will turn blue, and will open the Format Panel. The Format Panel also opens automatically when you double-click on any non-text stencil (whereas double-clicking on a text stencil will open the Quick-Format Text Window).
The Format Panel is divided into Sections with specific formatting controls. The sections are collapsible, so clicking on a section’s name will hide or reveal that section.
The panel will always display the default sections that are common to all stencils: Size & Position, Fills & Strokes, Opacity, Rounded Corners and Drop Shadow.
Some stencils come with specific styling capabilities. In this case, the panel will display an additional section with those options. We’ll cover these capabilities later in this article.
Size, Position, Rotate and Flip
Size, Position, Rotate and Flip controls are grouped together in the Size & Position section, and each of these actions can be performed both in the Format Panel and on the page.
On the page, use the resize handles to change the size of the object.
In the Format Panel, use the Width & Height inputs for precise values and fine-tuning, and use the arrow keys, on the keyboard, if you want to change these values incrementally.
Lock an object’s proportions with the Lock Aspect Ratio button. After an object is locked, you’ll have to unlock the aspect ratio if you want to resize it on the horizontal or vertical axis.
On the page, select an object and drag it to the desired position.
In the Format Panel, set the object’s position by entering the exact coordinates in the input fields. Your object’s position is measured in pixel-distance from both the left and top margins. You can use your keyboard’s arrow keys to change these values incrementally.
- Once an object is selected on the page, the arrow keys move objects pixel by pixel – for fine adjustment. ‘Shift' + arrow moves objects 10 px
On the page, click the rotation handle at the top of the object and drag to rotate.
In the Format Panel, enter the degree-value in the Rotation Input Field. You can change the value by using keyboard’s arrow keys.
You can flip an object both horizontally and vertically.
On the page, select a Resize Handle and drag it across the centerline of that object to simultaneously resize and flip.
In the Format Panel, the vertical and horizontal Flip Buttons flip the object while still maintaining its size and aspect ratio.
Text Font and Style
Text-based stencils allow you to add written content to your designs.
Quick-format text within stencils by double-clicking on the text area. The Quick-Format Text Window will pop up above the stencil and provide you 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 and Size. You can also set Line height, Letter spacing, All caps/Small caps, Font style, and select Alignment options.
Fills, Strokes, Opacity and Shadows
To fill a stencil with color, go to the Fills & Strokes section and click on Background Color to open the Color Picker Popover.
Select the Swatches Tab to choose a color scheme from Moqups Classic, Material Design, Bootstrap or iOS 8. This tab also displays the colors you’ve already used in your project.
Select the Picker Tab to create your own custom colors.
In both tabs, you can…
- Enter the Hex value for a color
- Adjust the fill-color opacity
Stroke refers to the line of the stencil itself.
To adjust the stroke color, go to the Format Panel, and in the Fills & Stroke section, click on Stroke Color. Here, you can also set the stroke opacity.
Under the color settings, you can choose the Stroke Width, and set Stroke Style to Solid, Dotted or Dashed.
The Opacity slider adjusts the global Opacity of a whole stencil, or groups of stencils. If you want to customize opacity more precisely, you can also adjust the Fill & Stroke opacity (see above), together with global Opacity, for a combined visual result.
To add a Drop Shadow to an object, navigate to the Format Panel and open the Drop Shadow section.
Enable shadow to set the color, opacity, angle, distance, and size of the shadow.
To edit the corners of an object, use the Rounded Corners section and enter values in the inputs.
By default, the four input fields are synced. Entering a value in one input will propagate that value to the other corners.
To enter differing values for each corner, deselect the Sync all corners icon located between the four inputs.
Edit Smart Shapes, Tables, and Grids
There are two types of stencils that have their own, unique editing options: Smart Shapes and Grids.
Smart Shapes are simple stencils that have specific formatting capabilities.
- The Callout stencil lets you change the callout-tip’s location, radius, width and height.
- The Wedge stencil lets you adjust the size of both the slice and the inner circle.
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.
Copy and Paste Styles
Once you have customized a stencil, you can apply that customization to another object or group of objects.
To copy and paste styles:
- Select the object from which you wish to copy styles
- Right-click and choose Copy Styles or press Alt/Option + C
- Select the object to which you want to apply styles
Right-click and choose Paste Styles or press Alt/Option + V
Set Default Styles
When you set a project’s Default Styles, every new object you add to the pages of that project will adopt those styles.
To set Default Styles for a project:
- Click on the empty area of any page
- Open the Format Panel
- Set styles
To clear Default Styles, click the Clear Default Style link at the top of the Format Panel.
Questions & Answers
How do I add icons to Grid stencils?
Icons cannot be added to Grid stencils.
As a workaround, create your own, customised grid and save it as a template. The advantage of creating a template is that you maintain control of each individual element, and you can save templates for reuse. To learn how to create and work with templates, click here.