Custom stencils are a very effective way to build prototypes! With only a few clicks you can quickly design your individual collection of custom-built elements. This helps to save time as you can reuse them again and again. Plus: Custom stencils ensure a consistent design throughout the entire prototype by employing them as templates. And here is how it goes …
1. Create a custom stencil
Custom stencils are templates that can either be built from scratch using the stencil palette or from an existing group of elements in your prototype. They can serve as convenient building blocks for your prototype as you only have to design a custom stencil once and can quickly change it across the entire prototype by altering any instance of it. To create a new custom stencil from scratch, simply click on the “CREATE STENCIL” button at the top of the stencil palette.
Creating a custom stencil in Pidoco
This will open a new canvas where you can design your stencil. You can use any element in the stencil palette (including regular stencils, but also uploaded images, icons or even other custom stencils) and also add interactions. If you haven’t already done so, give your custom stencil a name by double clicking on it in the breadcrumb navigation.
Renaming a custom stencil with a double-click in the breadcrumb navigation
Once you’re finished, click on “Done” in the toolbar to close the custom stencil canvas and get back to the page. The new custom stencil will be added to the end of the stencil palette and can easily be identified by the preview image with the dark edge.
If you want to turn an existing group of elements into a custom stencil, select them with your mouse and open the context menu. In the context menu, click on the “Convert elements to custom stencil” icon. This will turn the group of elements into a custom stencil and open the custom stencil canvas, where you can edit it.
Converting a group of elements to a custom stencil
Hint: You can also nest custom stencils within other custom stencils. Simply use an existing custom stencil to build a new one.
2. Re-use a custom stencil
All your custom stencils will be added to the end of the stencil palette. For better visual recognition they show up as a thumb of the stencil with a dark background. To use a custom stencil in your prototype, simply drag and drop it to the canvas like a regular stencil. Since custom stencils behave like normal stencils, you can use them the same way.
Re-using a custom stencil by dragging and dropping it to your canvas
Hint: You can find your custom stencils using the stencil search. Just type the name of the custom stencil or enter “custom stencil” to see all.
3. Edit a custom stencil
You can edit a custom stencil at any time. To do so, double-click on the custom stencil, either directly on the page or in the stencil palette. This will open the custom stencil canvas where you can edit the stencil.
Re-arranging an existing custom stencil
Note: Remember that custom stencils are and behave like templates. This means that all instances of the custom stencil are connected. Editing a custom stencil has a global effect across the entire prototype, which means that all the changes made in one instance of it will propagate immediately to all other occurrences wherever you have used the custom stencil – unless you cut the link (see below).
Editing a custom stencil will change all instances of it across the prototype
4. Individualize a custom stencil
Often, you will want to use a custom stencil as a template to save time, but adapt it to alter the content. Or you may simply wish to avoid global changes in case the template is edited. To do so, add the custom stencil to the canvas and open its context menu. A click on the “Detach from custom stencil” icon will cut the link to the template and let you modify the stencil without any effect on the custom stencil or any other instance thereof.
Detaching an instance of a Custom Stencil from the template
Note: Before you can start editing the stencil, you will have to ungroup the elements by clicking on “Ungroup elements” in the context menu as they have been grouped to make it easier to identify and position the stencil. Now you can easily play with the components of the custom stencil and e.g. adapt headlines or add image captions while maintaining consistency.
Ungrouping an element combination before editing the content
That’s it! You have successfully created and edited your first custom stencil!
Do you need help working with custom stencils? Then do not hesitate and drop us a line via support@pidoco.com or Facebook and Twitter.
Happy Prototyping!