A better way to wireframe

Support

Stencil

What is a stencil?

Stencils are the various elements that can be added to the pages or layers of a project. These are the smallest units that appear in a project. Interactions can be added to all stencils.

All these stencils are to be found in the stencil palette. Stencils have different functions and options.

Using the search bar in the stencil palette, stencils can be quickly found and added to a prototype.

Adding stencils to a page

To add a stencil to a page, open the page in the Page View. Then simply use your mouse to drag the desired stencil to the page which is shown in the editing panel in the middle of the screen. Doing so will add this stencil to the page where you can drag it to the desired position with your mouse. Note: Pay attention to whether you drop your stencils to either the page or a layer.

Adding stencils to a layer

To add a stencil to a layer, select the desired layer in My Layers by clicking on it and activate (i.e. display) it by toggling the respective checkbox. Then simply drag the desired stencil to the layer just as you would do on a page. Doing so will add this stencil to the activated layer where you can drag it to the desired position.

Adding stencil with multiple variants

Stencils with multiple variants (e.g. icons, arrows, charts or flowchart elements) appear under one generic symbol in the stencil palette and include a number in brackets. Additionally, they will be listed with all variants in the search results. If you drop the generic element onto your canvas, a pop up will allow you to choose from the available options. To add one of these stencils to your prototype page or layer, e.g. click on the "ICON (340)" button in the stencil palette and drop it to the desired position on your prototype page. A window will pop up allowing you to select your preference with the mouse cursor. (Hint: Hovering on each icon in this dialog will give you a zoomed-in preview.) Finally, you will be directed back to your page.

If you wish to change the element at a later point of time, simply open its context menu and click "Change" in the section called "Icon".

Cloning and copying stencils

To clone a stencil, select it and press the "Clone" button in the context menu. Doing so will generate an exact copy of the selected stencil. This actually has the same effect as adding an additional stencil of the same kind from the stencil palette. Note: Locked stencils need to be unlocked before cloning. Highlighting multiple stencils as a group allows you to clone the entire group at once. (Locked stencils will not be included.)

Stencils can be easily copied within a prototype. To do so, go to the page or layer, that contains the stencil you wish to copy, and select the respective stencil using the shortcut CMD + C to copy it. Then go to the target page or layer and press CMD + V to paste it. Stencils can be copied between the same kind of prototypes. (i.e. either between web prototypes or between mobile prototypes) in the same way.Alternatively, you can also use the buttons of toolbar.

Changing the order of stencils

To change the order in which stencils are displayed, select the desired stencil, either press the "Bring to front (of this layer)" or "Move to back (of this layer)" button in the context menu. Note: Locked stencils need to be unlocked before. Highlighting multiple stencils as a group allows you to change the order of the entire group at once. (Locked stencils will not be included.)

Locking and unlocking stencils

To lock a stencil, select the desired stencil and press the "Lock" button in the context menu. Doing so will fix the stencil position such that it cannot be accidentally moved. To unlock a stencil, place your mouse cursor over it and press the "Unlock" button appearing next to it.

Adding annotations to stencils

To add an annotation to a stencil (e.g. to specify requirements for development), select the stencil and open the context menu. Type your note into the text field at the bottom. These notes are included when exporting prototypes. Another way of adding notes is through the use of the "Comment" stencil.

Changing the size of stencils

To change the size and shape of a stencil, select the desired stencil and drag the handles that will appear around it (e.g. at the corners) until the desired dimension is reached. To preserve the proportion, when resizing the element, hold the shift key on your keyboard while dragging. Alternatively, you can change the size of a stencil via the context menu. Type the desired width and height (measured in pixels) into the grey text fields appearing next to the "Width" and "Height" options.

Note: This way of changing the size is not available for all stencils.

Moving stencils on a page or layer

To move a stencil on a page or layer simply drag it or select it with your mouse and use the arrow keys of your keyboard. For efficiency reasons, stencils move in increments of 5 pixels.

If you use the mouse, you can make use of the following shortcuts:

  • Hold down the "Alt" key to move a stencil by 1 pixel at a time.
  • Hold down the "Shift" key to move the stencil straight along a horizontal or vertical axis.
  • Press the "Esc" key while dragging a stencil to abort your moving and return it to its position before dragging.

If you use the arrow keys, you can also make use of the following shortcuts:

  • Hold down the "Alt" key to move a stencil by 1 pixel.
  • Hold down the "Shift" key to move a stencil by 20 pixels.

Deleting stencils

To delete a stencil from a page or layer, select the desired stencil, press the "Delete" button in the context menu or the delete key of your keyboard. Doing so will erase the stencil from the page or layer on which it was located.

Note: Locked stencils need to be unlocked before deleting. Highlighting multiple stencils as a group allows you to delete an entire group at once. (Locked stencils will not be included.)

Setting stencil properties/editing stencils

The "Properties" tab in the context menu shows all the properties you can use with the selected stencil (e.g. size or border). The available options depend on the respective element.

To edit the text content of a stencil (e.g. "Text", "Link" or "Text Block"), double click on the stencil in the editing panel. Doing so will open a text field in which you can enter and edit the desired content. (You can edit the text of the selected stencil using the "enter" or "F2" button, too.)

Adding interactions to stencils

The "Interactions" tab in the context menu allows you to add interactions to any element. Interactions are a powerful way to simulate interactive behavior in prototypes, such as navigation, touch gestures, reactions to device movements or location changes and much more.

<< back to overview

Newsletter Signup

A new Pidoco is coming this Fall. Sign up for our newsletter to stay up to date.

Don't worry, we won't flood your inbox with daily emails and we'll never send you spam!