Search for stencils, and add them to the page
The stencil library includes a wide range of design elements – from simple shapes to complex user interfaces.
In this article, we’ll show you how to narrow your choice, locate the stencils you need, and add them – as objects – to the page. You’ll also learn how to duplicate those stencils, and rename them in the Outline Panel.
Browse Stencil Library
To browse the Stencil library, navigate to the Left Sidebar and click on the Stencils Tab. The tab will turn blue, and will open the Stencils Panel.
As you scroll up and down, you’ll see the Stencil library divided into categories that include both basic and compound stencils. These categories are collapsible and, by clicking on a category name, you can hide or reveal that section.
Basic Stencils are simple shapes and design elements that can be customized for a variety of purposes. You’ll find basic stencils in the following categories: Common, Shapes, Flowcharts Diagrams, Spec Tools, Charts, and Legacy.
Compound Stencils represent platform-specific elements of a user interface, and reflect that platform’s design language. You’ll find the compound stencil categories grouped by UI Kit: iOS Components, Material Design, and Bootstrap.
To search for a stencil, use the search input at the top of the Stencils Panel. Searches provide results from all stencil categories.
If a search locates stencils that are ‘hidden’ in collapsed categories, the number of successful results are highlighted in yellow. Click the highlight to reveal the hidden stencils.
Add Stencils to the Page
From the Stencils Panel, there are two ways to add a stencil to your page:
- Drag and drop a stencil to a specific place on the page
- Double-click on the stencil to have it appear in the top-left corner of the page
You can only duplicate stencils once they’ve been added to a page – as objects.
There are two ways to duplicate a stencil:
- While holding down Option/Alt, click and drag a duplicate away from the original
- Ctrl/Cmd + D creates a duplicate on the page
As the complexity of your project grows, renaming your stencils will help keep your project organized – and make it easy to identify, and distinguish between other objects on the page.
To rename a stencil, or any other object:
- Navigate to the Left Sidebar
- Click on the Outline Tab to open the Outline Panel
- The Outline Panel lists all objects on the page: Stencils, Templates, Images and Icons
- Hover over an item in the Outline Tree and, on the page, a blue border will simultaneously highlight the corresponding object
- In the Outline Panel, double click on an object’s name to change it
In a later article, we’ll explain how to use the Outline Panel to Group and Organize your stencils quickly and effectively.
Questions & Answers
Moqups doesn’t have the stencil I need. What can I do?
If we don’t have the stencil you’re looking for, there are a couple things you can try:
Create a template: A template is a group of stencils that you have combined and styled – together with icons and images – to create a custom stencil. After creating that custom stencil, you can save it as a template for later reuse.
Upload & add an image: You can upload an image that’s similar to the stencil you need. Then, you can crop, format and adjust the opacity of the image to match your design.